+
+ {/* ── Header ── */}
+
Code Graph
-
- {selectedKind
- ? drillTotal > drillNodes.length
- ? `Showing ${drillNodes.length} of ${drillTotal} "${selectedKind}" nodes`
- : `${drillNodes.length} nodes of kind "${selectedKind}"`
- : `${kinds.length} node kinds — click a tile to explore`}
+
+ {loading
+ ? 'Loading…'
+ : error
+ ? 'Error loading graph'
+ : `${nodeCount} nodes — ${levelLabels[level]}`}
{/* Breadcrumb */}
-
- {/* Treemap container */}
-
- {(kindsLoading || drillLoading) && (
-
-
+ {/* ── Graph canvas + toolbar ── */}
+
+
+ {/* Canvas */}
+
+
+ {/* Minimap */}
+
+
+ {/* Legend */}
+
!hiddenKinds.has(k))} />
+
+ {/* Toolbar */}
+
+ {/* Layout selector */}
+
+ {(Object.keys(LAYOUT_LABELS) as LayoutMode[]).map(mode => (
+
+ ))}
+
+
+ {/* Icon controls */}
+
+
+
+
+
+
- )}
- {!kindsLoading && !drillLoading && !selectedKind && dimensions.width > 0 && (
-
+
+
+
+ {/* Filter panel */}
+ {showFilter && availableKinds.length > 0 && (
+
)}
- {!kindsLoading && !drillLoading && selectedKind && dimensions.width > 0 && (
-
+ {/* Loading overlay */}
+ {loading && (
+
+ )}
+
+ {/* Error overlay */}
+ {!loading && error && (
+
+ )}
+
+ {/* Empty state */}
+ {!loading && !error && nodeCount === 0 && (
+
+
No nodes found for current view.
+
)}
+
+ {/* ── Context menu ── */}
+ {contextMenu && (
+
setContextMenu(null)}
+ onShowDetails={handleShowDetails}
+ onFindCallers={handleFindCallers}
+ onFindDeps={handleFindDeps}
+ onDrillDown={handleDrillDown}
+ level={level}
+ />
+ )}
+
+ {/* ── Help text ── */}
+
+ Click node to highlight connections · Double-click to drill in · Right-click for actions · Scroll to zoom
+
);
}
+
+// Re-export KIND_COLORS for backwards compat with ExplorerView
+export { KIND_COLORS };
diff --git a/src/main/frontend/src/components/Dashboard.tsx b/src/main/frontend/src/components/Dashboard.tsx
index 2c9be591..8566e7c4 100644
--- a/src/main/frontend/src/components/Dashboard.tsx
+++ b/src/main/frontend/src/components/Dashboard.tsx
@@ -1,14 +1,140 @@
+import { useNavigate } from 'react-router-dom';
import { useApi } from '@/hooks/useApi';
import { api } from '@/lib/api';
-import type { StatsResponse } from '@/types/api';
import { isComputedStats } from '@/types/api';
import StatsCards from './StatsCards';
import FrameworkBadges from './FrameworkBadges';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
import {
- Shield, Database, Server, Layers, Globe, Code2,
- BarChart3, RefreshCw, AlertCircle, ArrowRightLeft
+ Shield, Database, Layers, Code2,
+ BarChart3, RefreshCw, AlertCircle,
+ Cpu, Network,
} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+/* ------------------------------------------------------------------ */
+/* Clickable stat row — navigates to explorer filtered by kind */
+/* ------------------------------------------------------------------ */
+interface StatRowProps {
+ label: string;
+ value: number;
+ total: number;
+ colorClass: string;
+ href?: string;
+}
+
+function StatRow({ label, value, total, colorClass, href }: StatRowProps) {
+ const navigate = useNavigate();
+ const pct = total > 0 ? (value / total) * 100 : 0;
+
+ return (
+
navigate(href) : undefined}
+ role={href ? 'button' : undefined}
+ tabIndex={href ? 0 : undefined}
+ onKeyDown={href ? (e) => { if (e.key === 'Enter' || e.key === ' ') navigate(href); } : undefined}
+ >
+
+
+ {label}
+
+
+ {value.toLocaleString()}
+
+
+
+
+ );
+}
+
+/* ------------------------------------------------------------------ */
+/* Section card wrapper */
+/* ------------------------------------------------------------------ */
+interface SectionCardProps {
+ icon: React.ComponentType<{ className?: string }>;
+ iconClass: string;
+ title: string;
+ children: React.ReactNode;
+ className?: string;
+}
+
+function SectionCard({ icon: Icon, iconClass, title, children, className }: SectionCardProps) {
+ return (
+
+
+
+
+ {title}
+
+
+
+ {children}
+
+
+ );
+}
+
+/* ------------------------------------------------------------------ */
+/* Clickable connection metric */
+/* ------------------------------------------------------------------ */
+interface ConnectionMetricProps {
+ label: string;
+ value: number;
+ colorClass: string;
+ href?: string;
+ sub?: Record
;
+}
+
+function ConnectionMetric({ label, value, colorClass, href, sub }: ConnectionMetricProps) {
+ const navigate = useNavigate();
+ return (
+ navigate(href) : undefined}
+ role={href ? 'button' : undefined}
+ tabIndex={href ? 0 : undefined}
+ onKeyDown={href ? (e) => { if (e.key === 'Enter' || e.key === ' ') navigate(href); } : undefined}
+ >
+
{label}
+
+ {value.toLocaleString()}
+
+ {sub && Object.keys(sub).length > 0 && (
+
+ {Object.entries(sub)
+ .sort(([, a], [, b]) => b - a)
+ .map(([k, v]) => (
+
+ {k}
+ {v.toLocaleString()}
+
+ ))}
+
+ )}
+
-
-
-
Loading analysis data...
+
+
+
Loading analysis data…
);
@@ -27,41 +153,46 @@ export default function Dashboard() {
if (error) {
return (
-
-
-
No Analysis Data
-
- Run an analysis first, or check that the server is connected to an analyzed codebase.
-
-
+
+
);
}
if (!stats) return null;
- // Extract data depending on which API format we got
+ // --- Extract data from whichever API format we received ---
let totalNodes = 0;
let totalEdges = 0;
let totalFiles = 0;
let languages: Record
= {};
let frameworks: Record = {};
- let infra: { databases: Record; messaging: Record; cloud: Record } = { databases: {}, messaging: {}, cloud: {} };
- let connections: { rest: { total: number; by_method: Record }; grpc: number; websocket: number; producers: number; consumers: number } = { rest: { total: 0, by_method: {} }, grpc: 0, websocket: 0, producers: 0, consumers: 0 };
+ let infra: { databases: Record; messaging: Record; cloud: Record } =
+ { databases: {}, messaging: {}, cloud: {} };
+ let connections: {
+ rest: { total: number; by_method: Record };
+ grpc: number;
+ websocket: number;
+ producers: number;
+ consumers: number;
+ } = { rest: { total: 0, by_method: {} }, grpc: 0, websocket: 0, producers: 0, consumers: 0 };
let auth: Record = {};
let architecture: Record = {};
let nodeKinds: Record = {};
let layers: Record = {};
if (isComputedStats(stats)) {
- // Primary format from StatsService.computeStats()
totalNodes = stats.graph?.nodes || 0;
totalEdges = stats.graph?.edges || 0;
totalFiles = stats.graph?.files || 0;
@@ -72,14 +203,13 @@ export default function Dashboard() {
auth = stats.auth || {};
architecture = stats.architecture || {};
} else {
- // Fallback format from QueryService.getStats()
totalNodes = stats.node_count || 0;
totalEdges = stats.edge_count || 0;
nodeKinds = stats.nodes_by_kind || {};
layers = stats.nodes_by_layer || {};
}
- // Build nodeKinds from kinds endpoint if available (more reliable)
+ // Prefer kinds endpoint data for nodeKinds (more reliable)
if (kinds?.kinds) {
nodeKinds = {};
for (const k of kinds.kinds) {
@@ -87,28 +217,39 @@ export default function Dashboard() {
}
}
- // Build layers from architecture if we got computeStats format
- // (architecture contains classes, interfaces, etc. but not layers directly)
- // Layers come from the node data itself -- use kinds endpoint nodes or architecture data
+ const totalLangFiles = Object.values(languages).reduce((s, v) => s + v, 0);
+ const totalArchItems = Object.values(architecture).reduce((s, v) => s + v, 0);
+ const hasConnections =
+ connections.rest.total > 0 || connections.grpc > 0 ||
+ connections.websocket > 0 || connections.producers > 0 || connections.consumers > 0;
+ const hasInfra =
+ Object.keys(infra.databases || {}).length > 0 ||
+ Object.keys(infra.messaging || {}).length > 0 ||
+ Object.keys(infra.cloud || {}).length > 0;
return (
-
+
+
{/* Page header */}
-
Dashboard
-
Code knowledge graph overview
+
+ Dashboard
+
+
Code knowledge graph overview
-
+
- {/* Hero stats */}
+ {/* Hero stat cards */}
- {/* Frameworks */}
- {Object.keys(frameworks).length > 0 &&
}
+ {/* Frameworks row */}
+ {Object.keys(frameworks).length > 0 && (
+
+ )}
+
+ {/* --- Primary grid: Node Kinds | Languages | Architecture --- */}
+
- {/* Grid: Node Kinds + Languages + Architecture */}
-
- {/* Node Kinds breakdown */}
+ {/* Node Kinds */}
{Object.keys(nodeKinds).length > 0 && (
-
-
-
-
Node Kinds
-
-
+
+
{Object.entries(nodeKinds)
.sort(([, a], [, b]) => b - a)
- .slice(0, 12)
- .map(([kind, count]) => {
- const pct = (count / (totalNodes || 1)) * 100;
- return (
-
-
- {kind}
- {count.toLocaleString()}
-
-
-
- );
- })}
+ .slice(0, 14)
+ .map(([kind, count]) => (
+
+ ))}
+
)}
{/* Languages */}
{Object.keys(languages).length > 0 && (
-
-
-
-
Languages
-
-
+
+
{Object.entries(languages)
.sort(([, a], [, b]) => b - a)
- .map(([lang, count]) => {
- const total = Object.values(languages).reduce((s, v) => s + v, 0);
- const pct = (count / (total || 1)) * 100;
- return (
-
-
- {lang}
- {count.toLocaleString()}
-
-
-
- );
- })}
+ .map(([lang, count]) => (
+
+ ))}
+
)}
{/* Architecture */}
{Object.keys(architecture).length > 0 && (
-
-
-
-
Architecture
-
-
+
+
{Object.entries(architecture)
.sort(([, a], [, b]) => b - a)
- .map(([item, count]) => {
- const total = Object.values(architecture).reduce((s, v) => s + v, 0);
- const pct = (count / (total || 1)) * 100;
- return (
-
-
- {item.replace(/_/g, ' ')}
-
- {count.toLocaleString()} ({pct.toFixed(0)}%)
-
-
-
-
- );
- })}
+ .map(([item, count]) => (
+
+ ))}
+
)}
- {/* Layers fallback (from QueryService format) */}
+ {/* Architecture Layers (fallback from QueryService format) */}
{Object.keys(layers).length > 0 && (
-
-
-
-
Architecture Layers
-
-
- {Object.entries(layers)
- .sort(([, a], [, b]) => b - a)
- .map(([layer, count]) => {
- const colors: Record
= {
- frontend: 'from-cyan-500 to-blue-500',
- backend: 'from-brand-500 to-purple-500',
- infra: 'from-amber-500 to-orange-500',
- shared: 'from-emerald-500 to-green-500',
- unknown: 'from-surface-600 to-surface-500',
- };
- const total = Object.values(layers).reduce((s, v) => s + v, 0);
- const pct = (count / (total || 1)) * 100;
- return (
-
-
- {layer}
-
- {count.toLocaleString()} ({pct.toFixed(0)}%)
-
-
-
-
+ {(() => {
+ const layerColors: Record = {
+ frontend: 'bg-gradient-to-r from-cyan-500 to-blue-500',
+ backend: 'bg-gradient-to-r from-indigo-500 to-purple-500',
+ infra: 'bg-gradient-to-r from-amber-500 to-orange-500',
+ shared: 'bg-gradient-to-r from-emerald-500 to-green-500',
+ unknown: 'bg-gradient-to-r from-muted to-muted-foreground/30',
+ };
+ const total = Object.values(layers).reduce((s, v) => s + v, 0);
+ return Object.entries(layers)
+ .sort(([, a], [, b]) => b - a)
+ .map(([layer, count]) => (
+
+ ));
+ })()}
-
+
)}
- {/* Connections section -- properly render nested structure */}
- {(connections.rest.total > 0 || connections.grpc > 0 || connections.websocket > 0 || connections.producers > 0 || connections.consumers > 0) && (
-
-
-
- {/* REST endpoints */}
+ {/* --- Connections section --- */}
+ {hasConnections && (
+
+
{connections.rest.total > 0 && (
-
-
REST Endpoints
-
{connections.rest.total.toLocaleString()}
- {Object.keys(connections.rest.by_method || {}).length > 0 && (
-
- {Object.entries(connections.rest.by_method)
- .sort(([, a], [, b]) => b - a)
- .map(([method, count]) => (
-
- {method}
- {count.toLocaleString()}
-
- ))}
-
- )}
-
+
)}
- {/* gRPC */}
{connections.grpc > 0 && (
-
-
gRPC Services
-
{connections.grpc.toLocaleString()}
-
+
)}
- {/* WebSocket */}
{connections.websocket > 0 && (
-
-
WebSocket
-
{connections.websocket.toLocaleString()}
-
+
)}
- {/* Producers */}
{connections.producers > 0 && (
-
-
Producers
-
{connections.producers.toLocaleString()}
-
+
)}
- {/* Consumers */}
{connections.consumers > 0 && (
-
-
Consumers
-
{connections.consumers.toLocaleString()}
-
+
)}
+
)}
- {/* Infrastructure + Auth side by side */}
-
- {/* Infrastructure -- nested with sub-categories */}
- {(Object.keys(infra.databases || {}).length > 0 ||
- Object.keys(infra.messaging || {}).length > 0 ||
- Object.keys(infra.cloud || {}).length > 0) && (
-
-
-
-
Infrastructure
-
-
-
-
-
-
-
- )}
+ {/* --- Infrastructure + Auth side by side --- */}
+ {(hasInfra || Object.keys(auth).length > 0) && (
+
- {/* Authentication */}
- {Object.keys(auth).length > 0 && (
-
-
-
-
Authentication
-
-
- {Object.entries(auth)
- .sort(([, a], [, b]) => b - a)
- .map(([k, v]) => (
-
- {k.replace(/_/g, ' ')}
- {v.toLocaleString()}
-
- ))}
-
-
- )}
-
+ {/* Infrastructure */}
+ {hasInfra && (
+
+
+
+
+
+
+
+ )}
+
+ {/* Authentication */}
+ {Object.keys(auth).length > 0 && (
+
+
+ {(() => {
+ const authTotal = Object.values(auth).reduce((s, n) => s + n, 0);
+ return Object.entries(auth)
+ .sort(([, a], [, b]) => b - a)
+ .map(([k, v]) => (
+
+
+
+
+ {k.replace(/_/g, ' ')}
+
+
+
+
+ {((v / authTotal) * 100).toFixed(0)}%
+
+
+ {v.toLocaleString()}
+
+
+
+ ));
+ })()}
+
+ )}
+
+ )}
);
}
-/** Renders a sub-section of infrastructure (databases, messaging, cloud) */
-function InfraSubSection({
- title,
- items,
- icon: Icon,
-}: {
+/* ------------------------------------------------------------------ */
+/* Infrastructure sub-section */
+/* ------------------------------------------------------------------ */
+interface InfraSubSectionProps {
title: string;
items: Record
| undefined;
- icon: React.ComponentType<{ className?: string }>;
-}) {
+ colorClass: string;
+}
+
+function InfraSubSection({ title, items, colorClass }: InfraSubSectionProps) {
const entries = Object.entries(items || {});
if (entries.length === 0) return null;
+ const total = entries.reduce((s, [, v]) => s + v, 0);
return (
-
-
+
+ {title}
+
+
{entries
.sort(([, a], [, b]) => b - a)
.map(([k, v]) => (
-
- {k}
- {v.toLocaleString()}
-
+
))}
diff --git a/src/main/frontend/src/components/ErrorBoundary.tsx b/src/main/frontend/src/components/ErrorBoundary.tsx
new file mode 100644
index 00000000..fa040926
--- /dev/null
+++ b/src/main/frontend/src/components/ErrorBoundary.tsx
@@ -0,0 +1,45 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+ children: ReactNode;
+}
+
+interface State {
+ hasError: boolean;
+ error: Error | null;
+}
+
+export default class ErrorBoundary extends Component
{
+ constructor(props: Props) {
+ super(props);
+ this.state = { hasError: false, error: null };
+ }
+
+ static getDerivedStateFromError(error: Error): State {
+ return { hasError: true, error };
+ }
+
+ componentDidCatch(error: Error, info: ErrorInfo) {
+ console.error('[ErrorBoundary] Caught render error:', error, info);
+ }
+
+ render() {
+ if (this.state.hasError) {
+ return (
+
+
Something went wrong
+
+ {this.state.error?.message ?? 'An unexpected error occurred.'}
+
+
+
-
- Frameworks & Technologies
-
-
- {sorted.map(([fw, count]) => {
- const lower = fw.toLowerCase();
- const color = Object.entries(frameworkColors).find(([k]) => lower.includes(k))?.[1] || defaultColor;
- return (
-
+
+
+
+ Frameworks & Technologies
+
+
+
+
+ {sorted.map(([fw, count]) => (
+ navigate(`/explorer?q=${encodeURIComponent(fw)}`)}
+ role="listitem"
+ title={`${count.toLocaleString()} nodes`}
>
{fw}
- {count.toLocaleString()}
-
- );
- })}
-
-
+
{count.toLocaleString()}
+
+ ))}
+
- {/* Sidebar */}
+ <>
+ {/* Mobile overlay */}
+ {mobileOpen && (
+
+ )}
+
+ {/* Sidebar panel */}