Data Navigator Inspector

Appearance

Using the Console Menu ​

This example demonstrates the inspector's console menu feature alongside a stacked bar chart. Use the toggle button to switch between tree and force graph modes. The console menu provides an interactive text-based interface for inspecting nodes, edges, and navigation rules — similar to a browser developer console, but interactive.

Keyboard Controls ​

At the deepest level, left/right moves across dates (via childmostNavigation: 'across') and up/down moves across categories. Both dimensions wrap around circularly.

Chart + Inspector + Console Menu ​

Stacked Bar Chart

Structure Inspector (Tree) + Console Menu

Event Log

About This Example ​

This example extends the stacked bar pattern with two key additions:

  1. Graph mode toggle — Switch between mode: 'tree' (deterministic hierarchical layout) and mode: 'force' (force-directed graph) to compare how each visualizes the structure.

  2. Console menu — The showConsoleMenu prop enables an interactive text-based panel below the tree inspector. It includes:

    • Console (collapsed) — Logged items appear here when you click "log" buttons
    • Rendered Elements — Nodes grouped by dimension/division, edges grouped by navigation rule, each with checkbox and log button
    • Source Input — Data, props, dimensions, and divisions

Interacting with the menu:

  • Checkbox any node or edge to highlight it in the tree (other elements dim to 50% opacity, selected nodes get a dark stroke, selected edges get thickened)
  • Group checkboxes on dimension, division, and nav rule headings select/deselect all items in that group
  • Hover a menu item to see a focus indicator on the corresponding tree node or a thickened edge
  • Click "log" to inspect detailed data in the Console section — node logs include connected edges, edge logs include source/target nodes
  • Virtual edges (like "exit") that aren't normally rendered will be drawn dynamically when selected
  • Console items are also interactive: checking or hovering them affects the tree, and vice versa
  • All interactions emit dn-inspector:* CustomEvents on the container — expand the Event Log panel to see them