About Project Overview Contributing Getting Started Installation Usage Themes Customizing Frameworks React Vue Angular GitHub Light Dark System

Data Access

<terra-data-access> | TerraDataAccess
Since 1.0 stable

Discover and export collection granules with search, temporal, spatial, and cloud cover filters.

Overview

The <terra-data-access> component provides a streamlined UI for discovering and exporting granules for a given data collection. It supports searching by filename, filtering by temporal range, spatial area, and cloud cover (when available), and estimating total download size. Users can export a ready-to-run Python script or open the experience in a Jupyter environment. 

<terra-data-access short-name="MODISA_L2_OC" version="2022.0"></terra-data-access>

Properties

Property Type Default Description
short-name string — Collection short name used to construct the CMR Collection Entry ID.
version string — Collection version used to construct the CMR Collection Entry ID.

Notes:

  • The component derives the CMR Collection Entry ID as short-name_version (e.g., MODISA_L2_OC_2022.0).
  • Cloud cover filtering appears only for collections that provide a cloud cover range.

Events

This component does not emit custom events.

Slots

Slot Description
(default) Not used.

Examples

Basic Usage 

<terra-data-access short-name="MODISA_L2_OC" version="2022.0"></terra-data-access>

With Filters (Temporal, Spatial, Cloud Cover) 

<terra-data-access short-name="GPM_3IMERGDF" version="07"></terra-data-access>

Use the top filter bar to:

  • Search filenames
  • Choose a date range
  • Pick a spatial area (point, bounding box, or shape)
  • Adjust cloud cover (when available)

The results grid updates as filters change. The selection summary displays file count and estimated total size.

Export Download Options 

<terra-data-access short-name="MODISA_L2_OC" version="2022.0"></terra-data-access>
  • Download Options → Python Script: generates a script pre-populated with your current filters.
  • Earthdata Download: currently not supported and will show a notice.
  • Open in Jupyter Notebook: opens an interactive flow using the terra_ui_components Python package.

Best Practices

  • Provide both short-name and version so the component can query the correct collection.
  • Encourage users to set temporal and spatial filters to reduce result size and improve performance.
  • Cloud cover filter appears only when the collection supports it; do not rely on it being present.
  • Listen for grid sorting and filtering changes visually; no custom events are required.

Accessibility

  • Filter controls and buttons are keyboard accessible.
  • Clear focus states and labels are provided for interactive elements.
  • Icons include accessible text where relevant, and controls include descriptive labels.

[component-metadata:terra-data-access]

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/data-access/data-access.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/data-access/data-access.js';

To import this component using a bundler:

import '@nasa-terra/components/dist/components/data-access/data-access.js';

To import this component as a React component:

import TerraDataAccess from '@nasa-terra/components/dist/react/data-access';

Properties

Name Description Reflects Type Default
footerSlot
footer-slot 		When true, the footer will be rendered with slot=“footer” for use in a dialog. boolean | undefined -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Dependencies

This component automatically imports the following dependencies.

  • <ag-grid-community>
  • <terra-button>
  • <terra-data-grid>
  • <terra-date-picker>
  • <terra-dropdown>
  • <terra-icon>
  • <terra-input>
  • <terra-loader>
  • <terra-popup>
  • <terra-slider>
  • <terra-spatial-picker>