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

Data Subsetter

<terra-data-subsetter> | TerraDataSubsetter
Since 1.0 stable

Easily allow users to select, subset, and download NASA Earth science data collections with spatial, temporal, and variable filters.

Overview

The <terra-data-subsetter> component provides a complete UI for subsetting and downloading NASA Earth science data collections. It supports collection search, spatial/temporal/variable filtering, and download options. It can be embedded standalone or inside dialogs and supports advanced integration via properties and events.

Open Subsetter 
<div style="height: 200px;">
    <terra-data-subsetter collection-entry-id="OMAERO_003" dialog="my-dialog"></terra-data-subsetter>
    <terra-button for-dialog="my-dialog">
        Open Subsetter
    </terra-button>
</div>

Properties

Property Type Default Description
collection-entry-id string — The CMR Collection Entry ID to pre-select a collection.
show-collection-search boolean true Whether to show the collection search UI.
job-id string — If set, loads and displays the status/results for an existing subset job.
bearer-token string — Optional. Pass a NASA Earthdata bearer token for authenticated requests.

Events

Event Description
terra-subset-job-complete Fired when a subset job enters a final state (e.g. successful, failed, completed_with_errors). The event detail contains the job object.

Slots

Slot Description
(default) Not used.
example Not used.

Examples

Basic Usage 

<terra-data-subsetter short-name="OMAERO" version="003"></terra-data-subsetter>

<terra-data-subsetter></terra-data-subsetter>

Subsetter in a Dialog

Open Subsetter 
<div style="height: 200px;">
    <terra-data-subsetter collection-entry-id="OMAERO_003" dialog="my-dialog"></terra-data-subsetter>
    <terra-button for-dialog="my-dialog">
        Open Subsetter
    </terra-button>
</div>

Best Practices

  • Use collection-entry-id to pre-select a collection and skip the search UI for a streamlined experience.
  • Use bearer-token for authenticated users.
  • Place the component inside a dialog for a focused, modal workflow.
  • Listen for the terra-subset-job-complete event to trigger downstream actions (e.g., notifications, analytics).

Accessibility

  • All form controls and buttons are keyboard accessible.
  • Uses ARIA roles and labels for screen readers.
  • Visual focus indicators are present for all interactive elements.

[component-metadata:terra-data-subsetter]

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-subsetter/data-subsetter.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-subsetter/data-subsetter.js';

To import this component using a bundler:

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

To import this component as a React component:

import TerraDataSubsetter from '@nasa-terra/components/dist/react/data-subsetter';

Properties

Name Description Reflects Type Default
dialog Optional dialog ID. When set, the subsetter will render inside a dialog with this ID. string | undefined -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
terra-subset-job-complete onTerraSubsetJobComplete called when a subset job enters a final state (e.g. successful, failed, completed_with_errors) -

Learn more about events.

Dependencies

This component automatically imports the following dependencies.

  • <terra-accordion>
  • <terra-button>
  • <terra-date-picker>
  • <terra-dropdown>
  • <terra-icon>
  • <terra-input>
  • <terra-popup>
  • <terra-spatial-picker>