Skip to content

[M2] deriveLabel utility + NodeTooltip component (all frames) #39

Description

@Korede-TA

Goal

Replace raw node IDs in tooltips and breadcrumbs with meaningful labels. Single shared tooltip component across all deck.gl frames.

src/lib/derive-label.ts

Priority chain:

  1. node.properties.title (categorical value)
  2. node.properties.source (categorical — filename/URL)
  3. First 80 chars of node.text truncated at word boundary + "…"
  4. Fallback: node.id

src/components/NodeTooltip.tsx

  • Rendered as a React portal at document.body
  • Positioned near cursor via pointerX/Y state (tracked in a thin mouse-move listener)
  • Triggered by selectionStore.hovered — visible when any node is hovered
  • Shows:
    • Type badge (colored with NodeType.display.color)
    • Derived label (bold)
    • Text preview (2 lines max, truncated)
    • Annotation count chips: 🌍 n geo · 📅 n temporal · 👤 n entity
  • Dismisses when hovered is null
  • z-index above all frames

Integration

Acceptance criteria

  • Hovering any node in any frame shows tooltip within 100ms
  • Tooltip shows meaningful text, not raw IDs
  • Disappears cleanly when cursor leaves a node

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions