ComponentsTags

Tags Component

The Tags component manages and renders interactive annotation tags in a 3D tour environment. It handles various types of tags, their visibility states, and click interactions.

Props

interface TagsProps {
  tagBuilder?: (
    details: AnnotationDetails,
    visible: boolean,
    selected: boolean,
    disabled: boolean,
    onClick: (e: any) => void,
    onPointerDown?: (e: any) => void,
  ) => ReactElement<any>;
  onClick?: (e: any) => void;
}

tagBuilder

An optional function that provides custom rendering for tags. It receives the following parameters:

  • details: The annotation details for the tag
  • visible: Whether the tag should be visible
  • selected: Whether the tag is currently selected
  • disabled: Whether the tag is disabled
  • onClick: Click handler for the tag
  • onPointerDown: Pointer down handler for the tag

onClick

An optional callback function that fires when any tag is clicked, receiving the tag’s details as a parameter.

Tag Visibility

Tags’ visibility is determined by several factors:

  1. Version Compatibility:
const isInNextVersion = !tag.imageVersionIds || 
  (imageVersion != undefined && 
   tag.imageVersionIds && 
   tag.imageVersionIds.indexOf(imageVersion!.id) > -1);
 
const isInCurrentVersion = !tag.imageVersionIds || 
  (tagImageVersion != undefined && 
   tag.imageVersionIds && 
   tag.imageVersionIds.indexOf(tagImageVersion!.id) > -1);
  1. Camera Position (for synthetic models):
const visible = isSyntheticModel
  ? currentCamera != undefined && tag.cameraBase == currentCamera.id
  : animateIn;

Tag Interactions

The component handles various tag actions through the handleOnClick callback:

  • Info Popup: Opens a modal with tag information
  • Jump to Version: Navigates to a specific version of the tour
  • Jump to Camera: Moves to a specific camera position
  • Jump to Group: Navigates to a specified group
  • Jump to Tour: (Placeholder for future functionality)

Example usage:

<Tags
  tagBuilder={(details, visible, selected, disabled, onClick, onPointerDown) => (
    <CustomTag 
      details={details}
      visible={visible}
      selected={selected}
      disabled={disabled}
      onClick={onClick}
      onPointerDown={onPointerDown}
    />
  )}
  onClick={(tag) => {
    console.log('Tag clicked:', tag.id);
  }}
/>

Integration with Store

The component integrates with a Zustand store through the AppStoreContext, using the following state and actions:

  • State:

    • currentCamera: Current active camera
    • tags: Array of annotation tags
    • imageVersion: Current image version
    • tour: Tour details
    • currentFrame: Current keyframe information

  • Actions:

    • setCurrentTag: Updates the currently selected tag
    • setUIFlag: Controls UI state flags
    • goToTag: Navigates to a specific tag
    • goToCamera: Moves to a specific camera position
    • goToVersion: Changes to a specific version
    • goToGroup: Navigates to a group

Attachment Handling

The component includes logic for handling tag attachments:

  • Automatically fetches download URLs for attachments
  • Maintains a mapping of tag IDs to their corresponding attachment URLs
  • Handles attachment loading errors gracefully

Rendering

Tags are rendered within a group container, with each tag being rendered as an HTMLExpandableTag component. The rendering logic considers:

  • Tag visibility state
  • Version compatibility
  • Camera position (for synthetic models)
  • Custom tag builder if provided
SpaceToolbar