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)

Image Point Viewer

Link to Figma: tba

Overview

  • The Dynamic Image Point Viewer displays an image with interactive points overlaid.
  • It allows users to view and interact with specific locations on an image.
  • Points can change appearance based on data values.
  • It is suited for interactive maps, facility diagrams, or process visualizations.
  • The component supports dynamic data sources for images and points.

...

  • positionXFieldName = "metadata.position.x"
  • positionYFieldName = "metadata.position.y"
  • keyFieldName = "id"
  • displayFieldName = "details.name"

Accessibility

...

Usage

  • Present an image with interactive points by binding the image and point sources and mapping fields: imageUrl or imageDataSourceId (+ getImageHttpRequestParametersMap), pointsDataSourceId (+ getPointsHttpRequestParametersMap), positionXFieldName, positionYFieldName, keyFieldName, displayFieldName.
  • Gate availability with displayConditions and visibilityPolicySetId.
  • Expose test and onboarding affordances via dataTestId, enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription.

Sizing & Layout

  • Choose scaling with resizeImageStrategy: fitToContainer, fillWholeContent, useStaticSize (width, height, widthAuto, heightAuto), or useRealSize.
  • Control scroll affordances with disableScrollbar.
  • Add outer spacing with paddingClass.

Color & Contrast

  • Set point colors through thresholdConfig and ensure readability against the image; pair color with text from displayFieldName.

Tooltips

  • Keep hover text concise and recognizable by pointing displayFieldName to an appropriate label field.

Visibility & Authorization

  • Conditionally render via displayConditions.
  • Apply role-based visibility using visibilityPolicySetId.

Content & Localization

  • Localize guided tour copy with guidedTourHotSpotTitle, guidedTourHotSpotDescription; enable with enableAsHotspot.
  • Use displayName for authoring clarity in the structure panel.

Dos & Don’ts

DoDon’tArticle setting(s)
Bind both image and points from datasources so overlays match current data.Mix a hardcoded image with dynamic points from another source.imageDataSourceId, getImageHttpRequestParametersMap, pointsDataSourceId, getPointsHttpRequestParametersMap
Map coordinates and identity explicitly.Assume default field names.positionXFieldName, positionYFieldName, keyFieldName
Use exclusive rules for visual states.Overlap thresholds that cause flicker.thresholdConfig
Keep hover text short and clear.Cram long descriptions into hover.displayFieldName
Capture add-point coordinates on image click.Infer coordinates from unrelated UI.ON_IMAGE_CLICK
Persist edited positions when drag ends.Leave position changes uncommitted.ON_IMAGE_POINT_DRAG_ENDED
Offer explicit per-point actions.Overload single-click with many meanings.contextMenuLabel, ON_IMAGE_POINT_VIEWER_CONTEXT_MENU_ACTION
Choose a predictable sizing mode.Stretch/crop unpredictably.resizeImageStrategy, width, height, widthAuto, heightAuto
Hide the viewer until prerequisites are met.Show an empty/misleading canvas.displayConditions
Restrict sensitive imagery to authorized users.Expose restricted maps to all users.visibilityPolicySetId
Expose a stable automation hook.Use brittle DOM selectors.dataTestId
Localize onboarding copy.Ship a single-language tour.enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription

Accessibility

  • Provide recognizable per-point text: displayFieldName. Keep the hover labels brief and specific.
  • Pair color with text to avoid color-only meaning: thresholdConfig + displayFieldName.
  • Reduce cognitive load by hiding non-applicable/restricted views: displayConditions, visibilityPolicySetId.
  • Localize tour copy when hotspots are enabled: enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription.
  • Ensure high contrast for threshold-driven colors configured in thresholdConfig.
  • Prefer fitToContainer when dense markers require readability; use paddingClass to prevent edge crowding.
  • Guarantee unique point identity for stable updates: keyFieldName.