@aiready/visualizer 0.1.37 → 0.1.40

package/web/src/App.tsx

@@ -24,12 +24,15 @@ function App() {
   const [selectedNode, setSelectedNode] = useState<FileNode | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [truncatedWarning, setTruncatedWarning] = useState<{ nodes: boolean; edges: boolean } | null>(null);
+  const [truncatedWarning, setTruncatedWarning] = useState<{
+    nodes: boolean;
+    edges: boolean;
+  } | null>(null);
 
   // Filter state - start with all visible
-  const [visibleSeverities, setVisibleSeverities] = useState<Set<SeverityLevel>>(
-    new Set(ALL_SEVERITIES)
-  );
+  const [visibleSeverities, setVisibleSeverities] = useState<
+    Set<SeverityLevel>
+  >(new Set(ALL_SEVERITIES));
   const [visibleEdgeTypes, setVisibleEdgeTypes] = useState<Set<EdgeType>>(
     new Set(ALL_EDGE_TYPES)
   );
@@ -56,7 +59,7 @@ function App() {
       const visualizerConfig = (reportData as any).visualizerConfig;
       const graphData = transformReportToGraph(reportData, visualizerConfig);
       setData(graphData);
-      
+
       // Show warning if graph was truncated
       if (graphData.truncated?.nodes || graphData.truncated?.edges) {
         setTruncatedWarning({
@@ -64,7 +67,7 @@ function App() {
           edges: graphData.truncated.edges,
         });
       }
-      
+
       setLoading(false);
     };
 
@@ -73,7 +76,7 @@ function App() {
 
   // Toggle severity visibility
   const handleToggleSeverity = (severity: SeverityLevel) => {
-    setVisibleSeverities(prev => {
+    setVisibleSeverities((prev) => {
       const next = new Set(prev);
       if (next.has(severity)) {
         next.delete(severity);
@@ -86,7 +89,7 @@ function App() {
 
   // Toggle edge type visibility
   const handleToggleEdgeType = (edgeType: EdgeType) => {
-    setVisibleEdgeTypes(prev => {
+    setVisibleEdgeTypes((prev) => {
       const next = new Set(prev);
       if (next.has(edgeType)) {
         next.delete(edgeType);
@@ -105,15 +108,15 @@ function App() {
     // Get set of visible node IDs
     const visibleNodeIds = new Set(
       data.nodes
-        .filter(node => {
+        .filter((node) => {
           const severity = (node.severity || 'default') as SeverityLevel;
           return visibleSeverities.has(severity);
         })
-        .map(node => node.id)
+        .map((node) => node.id)
     );
 
     // Filter nodes: keep if severity is visible
-    const filteredNodes = data.nodes.filter(node => {
+    const filteredNodes = data.nodes.filter((node) => {
       const severity = (node.severity || 'default') as SeverityLevel;
       return visibleSeverities.has(severity);
     });
@@ -121,15 +124,17 @@ function App() {
     // Filter edges: keep if:
     // 1. Edge type is visible AND
     // 2. Both source and target nodes are visible
-    const filteredEdges = data.edges.filter(edge => {
+    const filteredEdges = data.edges.filter((edge) => {
       // Check edge type visibility
       const edgeType = (edge.type || 'default') as EdgeType;
       if (!visibleEdgeTypes.has(edgeType)) {
         return false;
       }
       // Check that both connected nodes are visible
-      const sourceId = typeof edge.source === 'string' ? edge.source : edge.source.id;
-      const targetId = typeof edge.target === 'string' ? edge.target : edge.target.id;
+      const sourceId =
+        typeof edge.source === 'string' ? edge.source : edge.source.id;
+      const targetId =
+        typeof edge.target === 'string' ? edge.target : edge.target.id;
       return visibleNodeIds.has(sourceId) && visibleNodeIds.has(targetId);
     });
 
@@ -163,32 +168,38 @@ function App() {
       />
 
       {/* Truncation warning banner */}
-      {truncatedWarning && (truncatedWarning.nodes || truncatedWarning.edges) && (
-        <div 
-          className="px-4 py-3 bg-yellow-50 border-b flex items-center justify-between"
-          style={{ borderColor: colors.panelBorder }}
-        >
-          <div className="flex-1">
-            <p className="text-sm text-yellow-800 font-medium">
-              ⚠️ Graph visualization truncated at display limits.
-              {truncatedWarning.nodes && ' Too many nodes.'}
-              {truncatedWarning.edges && ' Too many edges.'}
-            </p>
-            <p className="text-xs text-yellow-700 mt-1">
-              To show more data, increase graph limits in aiready.json:
-              <code className="bg-yellow-100 px-1 rounded" style={{ marginLeft: '4px' }}>
-                {'"visualizer": { "graph": { "maxNodes": 2000, "maxEdges": 5000 } }'}
-              </code>
-            </p>
-          </div>
-          <button
-            onClick={() => setTruncatedWarning(null)}
-            className="text-yellow-600 hover:text-yellow-800 ml-4 flex-shrink-0"
+      {truncatedWarning &&
+        (truncatedWarning.nodes || truncatedWarning.edges) && (
+          <div
+            className="px-4 py-3 bg-yellow-50 border-b flex items-center justify-between"
+            style={{ borderColor: colors.panelBorder }}
           >
-            ✕
-          </button>
-        </div>
-      )}
+            <div className="flex-1">
+              <p className="text-sm text-yellow-800 font-medium">
+                ⚠️ Graph visualization truncated at display limits.
+                {truncatedWarning.nodes && ' Too many nodes.'}
+                {truncatedWarning.edges && ' Too many edges.'}
+              </p>
+              <p className="text-xs text-yellow-700 mt-1">
+                To show more data, increase graph limits in aiready.json:
+                <code
+                  className="bg-yellow-100 px-1 rounded"
+                  style={{ marginLeft: '4px' }}
+                >
+                  {
+                    '"visualizer": { "graph": { "maxNodes": 2000, "maxEdges": 5000 } }'
+                  }
+                </code>
+              </p>
+            </div>
+            <button
+              onClick={() => setTruncatedWarning(null)}
+              className="text-yellow-600 hover:text-yellow-800 ml-4 flex-shrink-0"
+            >
+              ✕
+            </button>
+          </div>
+        )}
 
       <div className="flex flex-1 overflow-hidden">
         <div ref={containerRef} className="flex-1 relative">
@@ -204,19 +215,22 @@ function App() {
         </div>
 
         {/* Right panel: Legend OR NodeDetails */}
-        <div 
-          className="w-80 border-l flex flex-col h-full" 
-          style={{ backgroundColor: colors.panel, borderColor: colors.panelBorder }}
+        <div
+          className="w-80 border-l flex flex-col h-full"
+          style={{
+            backgroundColor: colors.panel,
+            borderColor: colors.panelBorder,
+          }}
         >
           {selectedNode ? (
-            <NodeDetails 
-              colors={colors} 
-              selectedNode={selectedNode} 
-              onClose={() => setSelectedNode(null)} 
+            <NodeDetails
+              colors={colors}
+              selectedNode={selectedNode}
+              onClose={() => setSelectedNode(null)}
             />
           ) : (
             <div className="flex-1 overflow-y-auto">
-              <LegendPanel 
+              <LegendPanel
                 colors={colors}
                 visibleSeverities={visibleSeverities}
                 visibleEdgeTypes={visibleEdgeTypes}

package/web/src/components/ErrorDisplay.tsx

@@ -7,31 +7,45 @@ interface ErrorDisplayProps {
 
 export function ErrorDisplay({ colors, error }: ErrorDisplayProps) {
   return (
-    <div className="flex h-screen items-center justify-center" style={{ backgroundColor: colors.bg, color: colors.text }}>
+    <div
+      className="flex h-screen items-center justify-center"
+      style={{ backgroundColor: colors.bg, color: colors.text }}
+    >
       <div className="text-center max-w-md p-6">
-        <svg 
-          className="w-16 h-16 mx-auto text-amber-500 mb-4" 
-          fill="none" 
-          viewBox="0 0 24 24" 
+        <svg
+          className="w-16 h-16 mx-auto text-amber-500 mb-4"
+          fill="none"
+          viewBox="0 0 24 24"
           stroke="currentColor"
         >
-          <path 
-            strokeLinecap="round" 
-            strokeLinejoin="round" 
-            strokeWidth={2} 
-            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" 
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
           />
         </svg>
-        <h2 className="text-xl font-semibold mb-2 text-amber-400">No Scan Data Found</h2>
-        <p className="mb-4" style={{ color: colors.textMuted }}>{error}</p>
-        <div 
-          className="text-left p-4 rounded-lg text-sm font-mono" 
+        <h2 className="text-xl font-semibold mb-2 text-amber-400">
+          No Scan Data Found
+        </h2>
+        <p className="mb-4" style={{ color: colors.textMuted }}>
+          {error}
+        </p>
+        <div
+          className="text-left p-4 rounded-lg text-sm font-mono"
           style={{ backgroundColor: colors.cardBg }}
         >
           <p className="text-cyan-400"># Step 1: Run aiready scan</p>
-          <p className="mb-2" style={{ color: colors.textMuted }}>aiready scan . --output json</p>
-          <p className="text-cyan-400"># Step 2: Copy latest report to visualizer</p>
-          <p style={{ color: colors.textMuted }}>cp .aiready/aiready-report-*.json packages/visualizer/web/public/report-data.json</p>
+          <p className="mb-2" style={{ color: colors.textMuted }}>
+            aiready scan . --output json
+          </p>
+          <p className="text-cyan-400">
+            # Step 2: Copy latest report to visualizer
+          </p>
+          <p style={{ color: colors.textMuted }}>
+            cp .aiready/aiready-report-*.json
+            packages/visualizer/web/public/report-data.json
+          </p>
         </div>
       </div>
     </div>

package/web/src/components/GraphCanvas.tsx

@@ -2,7 +2,12 @@ import { useEffect, useRef } from 'react';
 import * as d3 from 'd3';
 import { FileNode, GraphData, ThemeColors, EffectiveTheme } from '../types';
 import { severityColors, edgeColors, GRAPH_CONFIG } from '../constants';
-import { getEdgeDistance, getEdgeStrength, getEdgeOpacity, getEdgeStrokeWidth } from '../utils';
+import {
+  getEdgeDistance,
+  getEdgeStrength,
+  getEdgeOpacity,
+  getEdgeStrokeWidth,
+} from '../utils';
 
 interface GraphCanvasProps {
   data: GraphData;
@@ -26,7 +31,7 @@ export function GraphCanvas({
     if (!data || !svgRef.current || !data.nodes.length) return;
 
     const svg = d3.select(svgRef.current);
-    
+
     // Get actual SVG dimensions from the DOM element
     const svgRect = svgRef.current.getBoundingClientRect();
     const width = svgRect.width;
@@ -37,7 +42,8 @@ export function GraphCanvas({
     const svgGroup = svg.append('g');
 
     // Setup zoom
-    const zoom = d3.zoom<SVGSVGElement, unknown>()
+    const zoom = d3
+      .zoom<SVGSVGElement, unknown>()
       .scaleExtent([GRAPH_CONFIG.zoomMin, GRAPH_CONFIG.zoomMax])
       .on('zoom', (event) => {
         svgGroup.attr('transform', event.transform);
@@ -57,22 +63,40 @@ export function GraphCanvas({
         y: height / 2 + Math.sin(angle) * radius,
       };
     });
-    const links = data.edges.map(d => ({ ...d }));
+    const links = data.edges.map((d) => ({ ...d }));
 
     // Create force simulation
-    const simulation = d3.forceSimulation(nodes as d3.SimulationNodeDatum[])
+    const simulation = d3
+      .forceSimulation(nodes as d3.SimulationNodeDatum[])
       .force(
         'link',
-        d3.forceLink(links)
+        d3
+          .forceLink(links)
           .id((d: unknown) => (d as { id: string }).id)
-          .distance((d: unknown) => getEdgeDistance((d as { type: string }).type))
-          .strength((d: unknown) => getEdgeStrength((d as { type: string }).type))
+          .distance((d: unknown) =>
+            getEdgeDistance((d as { type: string }).type)
+          )
+          .strength((d: unknown) =>
+            getEdgeStrength((d as { type: string }).type)
+          )
+      )
+      .force(
+        'charge',
+        d3.forceManyBody().strength(GRAPH_CONFIG.simulation.chargeStrength)
       )
-      .force('charge', d3.forceManyBody().strength(GRAPH_CONFIG.simulation.chargeStrength))
       .force('center', d3.forceCenter(width / 2, height / 2))
-      .force('collision', d3.forceCollide().radius(GRAPH_CONFIG.collisionRadius))
-      .force('x', d3.forceX(width / 2).strength(GRAPH_CONFIG.simulation.centerStrength))
-      .force('y', d3.forceY(height / 2).strength(GRAPH_CONFIG.simulation.centerStrength));
+      .force(
+        'collision',
+        d3.forceCollide().radius(GRAPH_CONFIG.collisionRadius)
+      )
+      .force(
+        'x',
+        d3.forceX(width / 2).strength(GRAPH_CONFIG.simulation.centerStrength)
+      )
+      .force(
+        'y',
+        d3.forceY(height / 2).strength(GRAPH_CONFIG.simulation.centerStrength)
+      );
 
     // Create link group
     const linkGroup = svgGroup.append('g').attr('class', 'links');
@@ -81,9 +105,17 @@ export function GraphCanvas({
       .data(links)
       .enter()
       .append('line')
-      .attr('stroke', (d: unknown) => edgeColors[(d as { type: string }).type] || edgeColors.default)
-      .attr('stroke-opacity', (d: unknown) => getEdgeOpacity((d as { type: string }).type))
-      .attr('stroke-width', (d: unknown) => getEdgeStrokeWidth((d as { type: string }).type));
+      .attr(
+        'stroke',
+        (d: unknown) =>
+          edgeColors[(d as { type: string }).type] || edgeColors.default
+      )
+      .attr('stroke-opacity', (d: unknown) =>
+        getEdgeOpacity((d as { type: string }).type)
+      )
+      .attr('stroke-width', (d: unknown) =>
+        getEdgeStrokeWidth((d as { type: string }).type)
+      );
 
     // Create node group
     const nodeGroup = svgGroup.append('g').attr('class', 'nodes');
@@ -95,7 +127,8 @@ export function GraphCanvas({
       .append('g')
       .attr('cursor', 'pointer')
       .call(
-        d3.drag<SVGGElement, any>()
+        d3
+          .drag<SVGGElement, any>()
           .on('start', dragstarted)
           .on('drag', dragged)
           .on('end', dragended) as any
@@ -104,17 +137,32 @@ export function GraphCanvas({
     // Add circles to nodes
     node
       .append('circle')
-      .attr('r', (d: unknown) => Math.sqrt((d as { value: number }).value || 10) + GRAPH_CONFIG.nodeBaseRadius)
-      .attr('fill', (d: unknown) => (d as { color: string }).color || severityColors.default)
+      .attr(
+        'r',
+        (d: unknown) =>
+          Math.sqrt((d as { value: number }).value || 10) +
+          GRAPH_CONFIG.nodeBaseRadius
+      )
+      .attr(
+        'fill',
+        (d: unknown) => (d as { color: string }).color || severityColors.default
+      )
       .attr('stroke', effectiveTheme === 'dark' ? '#fff' : '#000')
       .attr('stroke-width', 1.5);
 
     // Add labels to nodes
     node
       .append('text')
-      .text((d: unknown) => ((d as { label: string }).label.split('/').pop() || (d as { label: string }).label))
+      .text(
+        (d: unknown) =>
+          (d as { label: string }).label.split('/').pop() ||
+          (d as { label: string }).label
+      )
       .attr('x', 0)
-      .attr('y', (d: unknown) => Math.sqrt((d as { value: number }).value || 10) + 12)
+      .attr(
+        'y',
+        (d: unknown) => Math.sqrt((d as { value: number }).value || 10) + 12
+      )
       .attr('text-anchor', 'middle')
       .attr('fill', effectiveTheme === 'dark' ? '#e2e8f0' : '#1e293b')
       .attr('font-size', '9px')
@@ -139,12 +187,17 @@ export function GraphCanvas({
         .attr('x2', (d: unknown) => (d as { target: { x: number } }).target.x)
         .attr('y2', (d: unknown) => (d as { target: { y: number } }).target.y);
 
-      node.attr('transform', (d: unknown) => `translate(${(d as { x: number }).x},${(d as { y: number }).y})`);
+      node.attr(
+        'transform',
+        (d: unknown) =>
+          `translate(${(d as { x: number }).x},${(d as { y: number }).y})`
+      );
     });
 
     // Drag functions
     function dragstarted(event: unknown, d: unknown) {
-      if (!(event as { active: boolean }).active) simulation.alphaTarget(0.3).restart();
+      if (!(event as { active: boolean }).active)
+        simulation.alphaTarget(0.3).restart();
       (d as { fx: number | null }).fx = (d as { x: number }).x;
       (d as { fy: number | null }).fy = (d as { y: number }).y;
     }
@@ -178,7 +231,14 @@ export function GraphCanvas({
         ref={svgRef}
         width="100%"
         height="100%"
-        style={{ display: 'block', backgroundColor: 'transparent', zIndex: 10, position: 'absolute', top: 0, left: 0 }}
+        style={{
+          display: 'block',
+          backgroundColor: 'transparent',
+          zIndex: 10,
+          position: 'absolute',
+          top: 0,
+          left: 0,
+        }}
       />
       <div className="absolute bottom-6 left-6 z-20">
         <div
@@ -189,7 +249,13 @@ export function GraphCanvas({
             color: colors.textMuted,
           }}
         >
-          <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <svg
+            width="16"
+            height="16"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
             <path
               strokeLinecap="round"
               strokeLinejoin="round"