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

Command	Key
Enter the structure	Activate the "Enter navigation area" button
Exit	Esc
Left (backward along category)	←
Right (forward along category)	→
Up (backward along date)	↑
Down (forward along date)	↓
Drill down to child	Enter
Drill up to category parent	W
Drill up to date parent	J

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