Skip to main content

Objects Tree Panel

The Objects Tree is a panel in the full-screen display view that lists all vision elements currently in the scene, organized by their group keys. It provides a visual overview of the scene and lets the user interact with elements — selecting, hiding, or hovering — in sync with the canvas.

How elements appear in the tree

Each element is placed in the tree according to the groupKey passed to addElement() or addElements():

  • Named groups (any groupKey except the default) appear as collapsible rows with a header label. The user can expand or collapse them.
  • Default group (no groupKey, or "") — elements appear directly in the tree without a group header.
// These go under a "Detections" group header in the tree
await ctrl.addElements([rect1, rect2], "Detections");

// These appear ungrouped (no header row)
await ctrl.addElement(pt);

Elements that have parent/child relationships (via parentId) are rendered as a nested tree within their group.

Toolbar

The Objects Tree toolbar appears at the top of the panel and offers three bulk actions:

ButtonDescription
Expand all / Collapse allToggles the expanded state of all named groups at once
Hide all / Show allToggles the visibility of all elements in the canvas
Select all / Unselect allToggles the selection of all elements

Bidirectional sync with the canvas

The Objects Tree and the canvas geometry layer are always in sync:

  • Selecting an element in the tree selects it in the canvas. Hold Ctrl to add to the current selection.
  • Selecting an element in the canvas (with the select tool) highlights and auto-scrolls to it in the tree.
  • Hovering an element in the tree highlights it in the canvas outline, and vice versa — unless hoverTreeLink is disabled in the geometry config (see Geometry Config).

Visibility (hide/show)

Each element and each group header has a visibility toggle (eye icon). Hiding elements removes them from the canvas without removing them from the scene. Visibility state is local to the client view and is not persisted.

You can also control visibility programmatically from the server using setHiddenElements() (see Selection).

note

When you hide a group, all its elements are hidden individually under the hood. This means you can still un-hide a single element from a hidden group — it will become visible while the rest of the group stays hidden.

Auto-scroll on selection

When the user selects an entity in the canvas, the tree automatically expands the entity's group (if collapsed) and scrolls to bring the row into view. This ensures the selected element is always visible in the tree without requiring the user to navigate manually.