Page History

Versions Compared

Link to Figme: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11613-71930&t=ftfrOGkPzlG2GaTo-1

The Raster Component is an interactive grid-based visualization tool.
It overlays a coordinate system on top of a background image.
Users can select and highlight individual grid sections.
It is useful for seat selection, warehouse mapping, or other position-based selection tasks.

...

id – Specifies a unique identifier for the component used for programmatic access. For example, "warehouseRaster" enables targeted manipulation of this specific raster component.
dataTestId – Sets the testing hook ID for automated testing. For example, setting it to "warehouse-section-raster" allows test scripts to reliably locate this component during automated testing.
enableAsHotspot – Enables the component as a guided tour hotspot. When enabled, the raster can be highlighted during onboarding or tutorial flows to explain its functionality to new users.
guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Section Selection", "de-DE": "Bereichsauswahl"} provides clear identification during guided tours.
guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "Click on sections to select/deselect them", "de-DE": "Klicken Sie auf Bereiche, um sie auszuwählen/abzuwählen"} provides detailed instructions during guided tours.

(Configured in Authorization)

visibilityPolicySetId – Determines the visibility of the component based on specified policy sets. For example, setting to "warehouseManagersOnly" restricts the raster visibility to users with warehouse manager privileges, ensuring that only authorized personnel can view or modify the raster selections.

Use Raster to enable position-based selection over a fixed image such as seating maps or warehouse layouts; bind the background via image and make the grid visible with enableRaster.
Use for discrete, cell-level selections (not free-form drawing). Handle taps/clicks with events.ON_RASTER_CLICK and persist/hand off selections using getData.
Keep the component present only when needed using displayConditions (state-driven show/hide) or visibilityPolicySetId (role-gated availability).

...

Do	Don’t	Article setting(s)
Size the canvas and cells to the image so selections align.	Rely on defaults that misalign grid and background.	`rasterWidth`, `rasterHeight`, `rectSize` / `rectW`, `rectH`
Toggle grid lines to clarify target areas on busy images.	Leave the grid off when the image reduces legibility.	`toggleRasterOn`, `toggleRasterOff`, `enableRaster`
Use high-contrast colors for selected cells and their text.	Indicate selection with low-contrast fills or color-only cues.	`rectBackgroundColor`, `textColor`
Initialize/refresh selections from your source.	Hardcode stale selections into the image.	`dataSourceId`, `datasourceParametersMap`, `reloadData`
Read the current grid state before toggling.	Rapidly flip grid visibility without checking state.	`getRasterState`, `toggleRasterOn`, `toggleRasterOff`	Persist or submit selections via the provided action.	Scrape the UI to infer selected cells.	`getData`
Limit interaction to cell clicks and handle them centrally.	Depend on hidden affordances or image-only hotspots.	`events.ON_RASTER_CLICK`
Hide the component for unauthorized users.	Show it and hope downstream checks prevent changes.	`visibilityPolicySetId`, `displayConditions`

...