Versions Compared

Old Version 1

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version 2

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Raster

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

Overview

  • 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.

...

  • 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.

Guidelines

[NO DATA AVAILABLE]

Accessibility

...

Usage

  • 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).

Sizing & Layout

  • Size the drawing plane explicitly so the grid aligns with the image: set rasterWidth/rasterHeight and define cell size with rectSize (square) or rectW/rectH (rectangular).
  • Prefer cell sizes that map cleanly to the underlying image scale to avoid misalignment and accidental multi-cell hits. Configure via rectSize or rectW/rectH.
  • Add outer breathing room only via the component’s own paddingClass.

States & Feedback

  • Represent selection state with the visual tokens: use rectBackgroundColor for selected cells and ensure any cell text remains readable via textColor.
  • Expose/Hide grid lines to indicate mode shifts (e.g., view vs. select) using toggleRasterOn/toggleRasterOff; read current mode with getRasterState.

Color & Contrast

  • Ensure axis labels are legible over the image by choosing an axisTextColor with sufficient contrast against the background.
  • Maintain readable selection overlays by pairing rectBackgroundColor with a contrasting textColor.
  • On busy images, turn grid lines on (toggleRasterOn) to aid targeting.

Visibility & Authorization

  • Gate visibility by role/policy using visibilityPolicySetId.
  • Use displayConditions to show/hide based on page state (e.g., show only after an image is available or a location is selected).

Content & Localization

  • Name the component clearly for authors via displayName so it’s easy to find and maintain in large structures.

Dos & Don’ts

DoDon’tArticle 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

Accessibility

  • Provide stable automation and testing hooks via dataTestId (and id for programmatic access).
  • Optional guided tour hotspot can surface inline instructions; localize copy with guidedTourHotSpotTitle and guidedTourHotSpotDescription.
    • When using the guided tour hotspot, keep title/description concise and provide translations via guidedTourHotSpotTitle/guidedTourHotSpotDescription.
  • Expose dataTestId consistently so automated accessibility checks can target the component reliably.