fix(calm-visualizer): resolve React hooks and ReactFlow rendering errors

Fix multiple runtime errors preventing the visualizer from rendering:
- Add Vite resolve aliases to force single React instance across all dependencies
- Add dedupe configuration for React and d3 packages to prevent version conflicts
- Fix controlResolver to handle missing control requirement properties
- Remove invalid defaultSize prop from graph visualization panel
- Install d3-selection, d3-drag, and d3-zoom as direct dependencies

This resolves "Invalid hook call" and "selection5.interrupt is not a function" errors.

Author: pmerrison

calm-visualizer/package.json

@@ -51,6 +51,9 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "d3-drag": "^3.0.0",
+    "d3-selection": "^3.0.0",
+    "d3-zoom": "^3.0.0",
     "dagre": "^0.8.5",
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.6.0",

calm-visualizer/src/pages/Index.tsx

@@ -532,7 +532,7 @@ const Index = () => {
                 {!isEditorCollapsed && <ResizableHandle withHandle />}
 
                 {/* Graph Visualization - Always visible, takes remaining space */}
-                <ResizablePanel defaultSize={100}>
+                <ResizablePanel>
                   <div className="h-full p-6">
                     <ArchitectureGraph
                       jsonData={parsedData}

calm-visualizer/src/utils/controlResolver.ts

@@ -63,9 +63,9 @@ export class ControlResolver {
     architecture.nodes?.forEach(node => {
       if (node.controls) {
         Object.values(node.controls).forEach(control => {
-          control.requirements.forEach(req => {
-            allUrls.add(req['config-url']);
-            allUrls.add(req['requirement-url']);
+          control.requirements?.forEach(req => {
+            if (req['config-url']) allUrls.add(req['config-url']);
+            if (req['requirement-url']) allUrls.add(req['requirement-url']);
           });
         });
       }
@@ -75,9 +75,9 @@ export class ControlResolver {
     architecture.relationships?.forEach(rel => {
       if (rel.controls) {
         Object.values(rel.controls).forEach(control => {
-          control.requirements.forEach(req => {
-            allUrls.add(req['config-url']);
-            allUrls.add(req['requirement-url']);
+          control.requirements?.forEach(req => {
+            if (req['config-url']) allUrls.add(req['config-url']);
+            if (req['requirement-url']) allUrls.add(req['requirement-url']);
           });
         });
       }

calm-visualizer/vite.config.ts

@@ -40,6 +40,10 @@ export default defineConfig(({ mode }) => ({
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),
+      // Force all dependencies to use the same React instance
+      "react": path.resolve(__dirname, "./node_modules/react"),
+      "react-dom": path.resolve(__dirname, "./node_modules/react-dom"),
     },
+    dedupe: ["react", "react-dom", "d3-selection", "d3-drag", "d3-zoom"],
   },
 }));