SegmentSelector

Use the SegmentSelector as a top-level filter to narrow data by segment, setting the scope for any additional filters applied alongside it.

OverviewPropertiesUsageAccessibilityChangelog

Import

import { SegmentSelector } from '@dynatrace/strato-components/filters';

Demo

SegmentSelector lets users filter data from specific datasets called Segments. The useSegments hook provides access to the selected values. See Usage for best practices.

Set the scope

Use the SegmentsProvider to restrict the scope of one or more SegmentSelector components. This will apply only those segments within a given scope and ignore any globally-set segments.

The SegmentsProvider accepts default segments as well and filters out any faulty segments. If the default selection should apply to all SegmentsSelector components, place the SegmentsProvider at a high level. For example, right after the AppRoot.

Warn about segments that don't fit the view

Declare what your view operates on with requires. When the selected segment covers none of it, SegmentSelector shows a warning in its overlay, next to the segment it applies to. The warning is informational — users can still apply the segment.

A requirement is either a signal data type, such as { dataObject: 'logs' }, or entities, optionally narrowed to Smartscape node types, such as { dataObject: 'entities', entityTypes: ['K8S_CLUSTER'] }. SIGNAL_DATA_VALUES lists the available signal data types.

Use SegmentApplicabilityProvider when the selection comes from elsewhere in the tree, or to add requirements to part of a view — nesting adds to the inherited requirements. If your view owns the segment store, pass requires to SegmentsProvider instead. In both cases, the selector must render inside the provider.

In the example below, the preselected segment covers metrics only, so it doesn't fit a view that requires logs. Open the overlay to see the warning.

Configure segments programmatically

The useSegments hook provides the following helper functions to programmatically configure selected segments:

Function	Description
addSegment	Adds one segment to the selection. If the segment is unavailable, it won't be added to the selection.
removeSegment	Removes one segment from the selection.
removeAllSegments	Removes all segments from the selection.
setSegments	Overrides all currently applied segments. Similarly to addSegment, setSegments checks the availability of each segment.

Show private and outdated segments

Users can share private segments with other users, for example, through a link. If the recipient removes a private segment from their view, it will not be visible to them any longer. However, they can access the private segment once more by re-opening the link.

Outdated segments remain visible in the segments array but are marked as unavailable.

Customize trigger

SegmentSelector comes with a default trigger to ensure a consistent user experience. In exceptional cases, if necessary, it's possible to override the default trigger.

Props are automatically applied with the custom trigger we provide to ensure correct semantics. The SegmentSelector.CustomTrigger accepts a render function with two objects as arguments:

• The first object provides access to the default displayValue and the isLoading state.
• The second object provides all the trigger props necessary for the trigger button to function.

If you override the default trigger, make sure to spread the props to the trigger element to tie interactions back to the SegmentSelector. This enables you to customize the trigger component, while leveraging the internal logic of the SegmentSelector component. See the Accessibility tab for best practices.

Related

Patterns

• Filtering

Documentation

• Segments