Skip to content

dashboard.md

Latest commit

 

History

History
302 lines (224 loc) · 7.63 KB

dashboard.md

File metadata and controls

302 lines (224 loc) · 7.63 KB
Raw

Dashboard Documentation

The DoCode Dashboard is a React-based web application that provides an interactive interface for exploring knowledge graphs generated by the core analyzer.

Overview

Technology Stack:

  • React 18+ with TypeScript
  • Vite for build tooling
  • Graph visualization libraries
  • Context-aware navigation

Start Command:

GRAPH_DIR=/path/to/.DoCode pnpm dev:dashboard

Dashboard Components

App.tsx (Main Application)

The root component that:

  • Loads knowledge graph data from GRAPH_DIR
  • Manages global state (selected nodes, search query, filters)
  • Renders the graph visualization
  • Handles keyboard shortcuts

Key State:

  • graphData: The loaded knowledge graph (nodes + edges)
  • selectedNode: Currently selected node for detail view
  • searchQuery: Current search string
  • filterType: Active node type filter (file, function, class, etc.)

KeyboardShortcutsHelp.tsx

Modal component displaying available keyboard shortcuts.

Supported Shortcuts:

Shortcut Action
Ctrl/Cmd + F Focus search bar
Escape Close modals / Deselect node
? Toggle keyboard shortcuts help
F Open path finder
G Toggle graph layout
T Start guided tour

Usage in Component:

<KeyboardShortcutsHelp 
  isOpen={showShortcuts} 
  onClose={() => setShowShortcuts(false)} 
/>

PathFinderModal.tsx

Modal for finding the shortest path between two code entities.

Features:

  • Source node selector (dropdown or click on graph)
  • Target node selector
  • Visual path highlighting in graph
  • Path length display

Usage:

  1. Press F or click "Find Path" button
  2. Select source node (or click on graph)
  3. Select target node (or click on graph)
  4. View highlighted path in graph

Implementation:

<PathFinderModal
  isOpen={showPathFinder}
  graphData={graphData}
  onClose={() => setShowPathFinder(false)}
  onPathFound={(path) => highlightPath(path)}
/>

Graph Visualization

Node Types

Type Color Description
file Blue Source code files
function Green Functions and methods
class Purple Classes and structs
module Orange Imported modules/packages
variable Yellow Global variables/constants

Edge Types

Type Style Description
defines Solid line File defines a function/class
calls Dashed line Function calls another function
imports Dotted line File imports a module
extends Thick line Class extends another class
references Thin line Generic reference/usage

Interactions

Click on Node:

  • Highlights the node
  • Shows detail panel (file path, line number, etc.)
  • Filters connected edges

Double-Click:

  • Zoom to fit the node and its neighbors
  • Expand/collapse node details

Drag:

  • Reposition nodes for better layout
  • Custom graph arrangement

Scroll/Pinch:

  • Zoom in/out
  • Mouse wheel or touch gesture

Search Functionality

Search Bar

Located at top of dashboard:

┌─────────────────────────────────┐
│ 🔍 Search nodes...         [X] │
└─────────────────────────────────┘

Search Features:

  • Real-time filtering as you type
  • Searches node labels, IDs, and metadata
  • Case-insensitive matching
  • Highlight matching nodes in graph

Advanced Search

Access via Ctrl/Cmd + F:

Search Scopes:

  • All nodes (default)
  • Files only
  • Functions only
  • Classes only

Filters:

  • By file extension (.ts, .js, .py, etc.)
  • By directory/path
  • By connected node count

Detail Panel

When a node is selected, the detail panel shows:

┌─────────────────────────────────┐
│ File: src/index.ts              │
│ Type: file                      │
│ Path: /full/path/src/index.ts   │
│ Language: TypeScript            │
│                                 │
│ Connections:                    │
│  → 5 functions defined         │
│  → 3 imports                   │
│  → 12 references               │
│                                 │
│ [View Source] [Find Path]       │
└─────────────────────────────────┘

Guided Tour

The dashboard can provide a guided tour of your codebase:

Start Tour: Press T or click "Start Tour" button

Tour Steps:

  1. Overview of repository structure
  2. Main entry point explanation
  3. Key function walkthrough
  4. Dependency visualization
  5. Export/output explanation

Customization: Tours can be customized per project by adding a .DoCode/tour.json file.

Settings & Preferences

Graph Layout

Switch between layouts:

  • Force-directed (default): Physics-based layout
  • Hierarchical: Top-down tree layout
  • Radial: Circular layout
  • Custom: Manual positioning

Display Options

Toggle visibility:

  • ☑ Show file nodes
  • ☑ Show function nodes
  • ☐ Show class nodes
  • ☑ Show edge labels
  • ☑ Animate transitions

Theme

  • Dark (default): Easy on eyes
  • Light: Better for presentations
  • Auto: Follow system preference

Performance Considerations

Large Graphs (500+ nodes)

For large codebases:

  • Use filters to focus on specific areas
  • Collapse unrelated subgraphs
  • Use search instead of manual navigation
  • Consider analyzing subdirectories separately

Lazy Loading

The dashboard implements lazy loading:

  • Only renders visible nodes/edges
  • Viewport culling for off-screen elements
  • Progressive rendering for large graphs

Keyboard Shortcuts Cheat Sheet

Press ? in dashboard to see this:

DoCode Dashboard Shortcuts
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Navigation:
  ?           Show this help
  Esc         Close modal / Deselect
  F           Find path between nodes
  G           Toggle graph layout
  T           Start guided tour

Search:
  Ctrl/Cmd+F  Focus search bar
  Enter       Confirm search
  ↑/↓         Navigate search results

Graph:
  +/-         Zoom in/out
  Drag        Pan canvas
  Scroll      Zoom
  Click       Select node
  Double-click  Zoom to node

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Tips & Tricks

  1. Quick Node Selection: Right-click a node for context menu (copy ID, find references, etc.)

  2. Export Screenshot: Use browser's "Print" or "Screenshot" feature to save graph image

  3. Share Findings: Copy node URLs (if supported) to share specific views

  4. Compare Versions: Analyze different commits and compare graphs

  5. Focus Mode: Press F11 for fullscreen dashboard view

Troubleshooting

Graph Not Loading

  • Check browser console (F12) for errors
  • Verify GRAPH_DIR points to valid .DoCode/ directory
  • Ensure knowledge-graph.json is valid JSON

Performance Issues

  • Filter out node types you don't need
  • Zoom in to reduce rendered elements
  • Close other browser tabs to free memory

Search Not Working

  • Clear search and retype
  • Check if graph data loaded correctly
  • Try refreshing the page

Future Features (Planned)

  • Collaborative cursors (see others' selections in real-time)
  • Time-travel (view graph at different commits)
  • AI-powered explanations (why does this function exist?)
  • Export to PDF/PNG/SVG
  • Integration with IDE (VSCode extension)