@principal-ai/file-city-react 0.4.1 → 0.4.3

package/dist/components/ArchitectureMapHighlightLayers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArchitectureMapHighlightLayers.d.ts","sourceRoot":"","sources":["../../src/components/ArchitectureMapHighlightLayers.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ArchitectureMapHighlightLayers.d.ts","sourceRoot":"","sources":["../../src/components/ArchitectureMapHighlightLayers.tsx"],"names":[],"mappings":"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"}

package/dist/components/ArchitectureMapHighlightLayers.js

@@ -210,6 +210,9 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
     const isAnimating = targetZoom !== null;
     // Track the last zoomToPath to detect changes
     const lastZoomToPathRef = (0, react_1.useRef)(null);
+    // Throttle ref for hover updates (improves performance with large datasets)
+    const lastHoverUpdateRef = (0, react_1.useRef)(0);
+    const HOVER_THROTTLE_MS = 16; // ~60fps max for hover updates
     (0, react_1.useEffect)(() => {
         // Reset user interaction state when enableZoom is disabled
         if (!enableZoom) {
@@ -693,6 +696,66 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         }
         return layers;
     }, [stableLayers, dynamicLayers, abstractionLayer]);
+    // Memoize abstracted paths lookup - only recalculates when abstraction layer changes
+    const { abstractedPathsSet, abstractedPathLookup } = (0, react_1.useMemo)(() => {
+        const pathsSet = new Set();
+        const abstractionLayerDef = allLayers.find(l => l.id === 'directory-abstraction');
+        if (abstractionLayerDef && abstractionLayerDef.enabled) {
+            abstractionLayerDef.items.forEach(item => {
+                if (item.type === 'directory') {
+                    pathsSet.add(item.path);
+                }
+            });
+        }
+        return {
+            abstractedPathsSet: pathsSet,
+            abstractedPathLookup: new PathHierarchyLookup(pathsSet),
+        };
+    }, [allLayers]);
+    // Memoize visible districts - only recalculates when data or abstraction changes, NOT on hover
+    const visibleDistrictsMemo = (0, react_1.useMemo)(() => {
+        if (!filteredCityData)
+            return [];
+        let districts = abstractedPathLookup.size > 0
+            ? filteredCityData.districts.filter(district => {
+                // Check for root abstraction first
+                if (abstractedPathLookup.has('')) {
+                    return !district.path || district.path === '';
+                }
+                if (!district.path)
+                    return true;
+                if (abstractedPathLookup.has(district.path))
+                    return true;
+                return !abstractedPathLookup.isChildOfAbstracted(district.path);
+            })
+            : filteredCityData.districts;
+        // If root is abstracted and there's no root district, create one for the cover
+        if (abstractedPathsSet.has('')) {
+            const hasRootDistrict = districts.some(d => !d.path || d.path === '');
+            if (!hasRootDistrict) {
+                districts = [
+                    {
+                        path: '',
+                        worldBounds: filteredCityData.bounds,
+                        fileCount: filteredCityData.buildings.length,
+                        type: 'directory',
+                    },
+                    ...districts,
+                ];
+            }
+        }
+        return districts;
+    }, [filteredCityData, abstractedPathLookup, abstractedPathsSet]);
+    // Memoize visible buildings - only recalculates when data or abstraction changes, NOT on hover
+    const visibleBuildingsMemo = (0, react_1.useMemo)(() => {
+        if (!filteredCityData)
+            return [];
+        return abstractedPathLookup.size > 0
+            ? filteredCityData.buildings.filter(building => {
+                return !abstractedPathLookup.isPathAbstracted(building.path);
+            })
+            : filteredCityData.buildings;
+    }, [filteredCityData, abstractedPathLookup]);
     // Update hit test cache when geometry or abstraction changes
     // Note: We don't depend on zoomState here because:
     // 1. The spatial grid only depends on buildings/districts and abstraction
@@ -762,64 +825,12 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
             y: ((z - coordinateSystemData.bounds.minZ) * scale + offsetZ) * zoomState.scale +
                 zoomState.offsetY,
         });
-        // Get abstracted paths for filtering child districts
-        const abstractedPathsForDistricts = new Set();
-        const abstractionLayerForDistricts = allLayers.find(l => l.id === 'directory-abstraction');
-        if (abstractionLayerForDistricts && abstractionLayerForDistricts.enabled) {
-            abstractionLayerForDistricts.items.forEach(item => {
-                if (item.type === 'directory') {
-                    abstractedPathsForDistricts.add(item.path);
-                }
-            });
-        }
-        // Create PathHierarchyLookup for O(depth) containment checks
-        const pathLookup = new PathHierarchyLookup(abstractedPathsForDistricts);
-        // Keep abstracted districts (for covers) but filter out their children
-        let visibleDistricts = pathLookup.size > 0
-            ? filteredCityData.districts.filter(district => {
-                // Check for root abstraction first
-                if (pathLookup.has('')) {
-                    // If root is abstracted, only show root district
-                    return !district.path || district.path === '';
-                }
-                if (!district.path)
-                    return true; // Keep root
-                // Keep the abstracted district itself (we need it for the cover)
-                if (pathLookup.has(district.path)) {
-                    return true;
-                }
-                // Filter out children of abstracted directories using O(depth) lookup
-                return !pathLookup.isChildOfAbstracted(district.path);
-            })
-            : filteredCityData.districts;
-        // If root is abstracted and there's no root district, create one for the cover
-        if (abstractedPathsForDistricts.has('')) {
-            const hasRootDistrict = visibleDistricts.some(d => !d.path || d.path === '');
-            if (!hasRootDistrict) {
-                visibleDistricts = [
-                    {
-                        path: '',
-                        worldBounds: filteredCityData.bounds,
-                        fileCount: filteredCityData.buildings.length, // Total file count
-                        type: 'directory',
-                    },
-                    ...visibleDistricts,
-                ];
-            }
-        }
+        // Use memoized visible districts and buildings (pre-filtered, doesn't recalculate on hover)
         // Draw districts with layer support
-        (0, drawLayeredBuildings_1.drawLayeredDistricts)(ctx, visibleDistricts, worldToCanvas, scale * zoomState.scale, allLayers, interactionState.hoveredDistrict, fullSize, resolvedDefaultDirectoryColor, filteredCityData.metadata.layoutConfig, abstractedPathsForDistricts, // Pass abstracted paths to skip labels
+        (0, drawLayeredBuildings_1.drawLayeredDistricts)(ctx, visibleDistrictsMemo, worldToCanvas, scale * zoomState.scale, allLayers, interactionState.hoveredDistrict, fullSize, resolvedDefaultDirectoryColor, filteredCityData.metadata.layoutConfig, abstractedPathsSet, // Pass abstracted paths to skip labels
         showDirectoryLabels, districtBorderRadius);
-        // Filter out buildings that are in abstracted directories
-        // Reuse the pathLookup created earlier for O(depth) containment checks
-        const visibleBuildings = pathLookup.size > 0
-            ? filteredCityData.buildings.filter(building => {
-                // Use PathHierarchyLookup for efficient O(depth) check
-                return !pathLookup.isPathAbstracted(building.path);
-            })
-            : filteredCityData.buildings;
         // Draw buildings with layer support
-        (0, drawLayeredBuildings_1.drawLayeredBuildings)(ctx, visibleBuildings, worldToCanvas, scale * zoomState.scale, allLayers, interactionState.hoveredBuilding, resolvedDefaultBuildingColor, showFileNames, resolvedHoverBorderColor, disableOpacityDimming, showFileTypeIcons, buildingBorderRadius);
+        (0, drawLayeredBuildings_1.drawLayeredBuildings)(ctx, visibleBuildingsMemo, worldToCanvas, scale * zoomState.scale, allLayers, interactionState.hoveredBuilding, resolvedDefaultBuildingColor, showFileNames, resolvedHoverBorderColor, disableOpacityDimming, showFileTypeIcons, buildingBorderRadius);
         // Performance monitoring end available for debugging
         // Performance stats available but not logged to reduce console noise
         // Uncomment for debugging: render time, buildings/districts counts, layer counts
@@ -848,6 +859,10 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         resolvedDefaultBuildingColor,
         districtBorderRadius,
         showFileTypeIcons,
+        // Memoized values for performance (don't recalculate on hover)
+        visibleDistrictsMemo,
+        visibleBuildingsMemo,
+        abstractedPathsSet,
     ]);
     // Optimized hit testing
     const performHitTest = (0, react_1.useCallback)((canvasX, canvasY) => {
@@ -974,6 +989,12 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
     const handleMouseMoveInternal = (0, react_1.useCallback)((e) => {
         if (!canvasRef.current || !containerRef.current || !filteredCityData || zoomState.isDragging)
             return;
+        // Throttle hover updates to improve performance with large datasets
+        const now = performance.now();
+        if (now - lastHoverUpdateRef.current < HOVER_THROTTLE_MS) {
+            return;
+        }
+        lastHoverUpdateRef.current = now;
         // Get the container rect for mouse position
         const containerRect = containerRef.current.getBoundingClientRect();
         // Get mouse position relative to the container

package/dist/stories/stress-test-data.d.ts

@@ -0,0 +1,17 @@
+import { CityData } from '@principal-ai/file-city-builder';
+/**
+ * Generate a large number of file paths with realistic nested directory structures
+ */
+export declare function generateLargeFilePaths(fileCount: number): string[];
+/**
+ * Create CityData with a large number of files for stress testing subdirectory zoom
+ *
+ * @param fileCount - Number of files to generate (default: 8000)
+ * @param useCache - Whether to cache results (default: true)
+ */
+export declare function createStressTestCityData(fileCount?: number, useCache?: boolean): CityData;
+/**
+ * Clear the stress test cache (useful for testing memory)
+ */
+export declare function clearStressTestCache(): void;
+//# sourceMappingURL=stress-test-data.d.ts.map

package/dist/stories/stress-test-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stress-test-data.d.ts","sourceRoot":"","sources":["../../src/stories/stress-test-data.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EAGT,MAAM,iCAAiC,CAAC;AA2CzC;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,CAoElE;AAoBD;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,SAAS,GAAE,MAAa,EAAE,QAAQ,GAAE,OAAc,GAAG,QAAQ,CAwBrG;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAE3C"}

package/dist/stories/stress-test-data.js

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateLargeFilePaths = generateLargeFilePaths;
+exports.createStressTestCityData = createStressTestCityData;
+exports.clearStressTestCache = clearStressTestCache;
+const file_city_builder_1 = require("@principal-ai/file-city-builder");
+// Common file extensions for realistic distribution
+const FILE_EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.css', '.json', '.md', '.test.ts', '.spec.tsx'];
+// Top-level source directories
+const TOP_LEVEL_DIRS = ['src', 'lib', 'packages', 'modules'];
+// Second-level directories (domain areas)
+const DOMAIN_DIRS = ['components', 'utils', 'services', 'hooks', 'types', 'helpers', 'core', 'api', 'features', 'pages'];
+// Third-level directories (categories within domains)
+const CATEGORY_DIRS = ['ui', 'forms', 'layout', 'navigation', 'data', 'auth', 'common', 'shared', 'internal', 'public'];
+// Fourth-level directories (specific feature areas)
+const FEATURE_DIRS = ['Button', 'Modal', 'Table', 'Card', 'Input', 'Select', 'Dialog', 'Menu', 'Tabs', 'List', 'Grid', 'Panel'];
+// Fifth-level directories (variants/subfeatures)
+const VARIANT_DIRS = ['variants', 'styles', 'hooks', 'utils', 'types', 'tests', '__tests__', 'stories', 'docs'];
+// File name prefixes for realistic naming
+const FILE_PREFIXES = ['index', 'main', 'handler', 'controller', 'service', 'helper', 'util', 'config', 'constants', 'types'];
+/**
+ * Seeded random number generator for consistent results
+ */
+function seededRandom(seed) {
+    return () => {
+        seed = (seed * 1103515245 + 12345) & 0x7fffffff;
+        return seed / 0x7fffffff;
+    };
+}
+/**
+ * Generate a large number of file paths with realistic nested directory structures
+ */
+function generateLargeFilePaths(fileCount) {
+    const files = [];
+    const random = seededRandom(42); // Consistent seed for reproducible results
+    for (let i = 0; i < fileCount; i++) {
+        const extension = FILE_EXTENSIONS[i % FILE_EXTENSIONS.length];
+        // Determine nesting depth (0-5 levels) with weighted distribution
+        // More files at medium depths (2-3), fewer at extremes
+        const depthRoll = random();
+        let depth;
+        if (depthRoll < 0.1)
+            depth = 1; // 10% at depth 1
+        else if (depthRoll < 0.25)
+            depth = 2; // 15% at depth 2
+        else if (depthRoll < 0.50)
+            depth = 3; // 25% at depth 3
+        else if (depthRoll < 0.75)
+            depth = 4; // 25% at depth 4
+        else if (depthRoll < 0.90)
+            depth = 5; // 15% at depth 5
+        else
+            depth = 6; // 10% at depth 6
+        const pathParts = [];
+        // Level 1: Top-level directory
+        // Weight 'src' heavily so it contains ~50% of files (for stress testing large subdirectory zoom)
+        const topLevelRoll = random();
+        if (topLevelRoll < 0.5) {
+            pathParts.push('src'); // 50% of files in src
+        }
+        else if (topLevelRoll < 0.7) {
+            pathParts.push('lib'); // 20% in lib
+        }
+        else if (topLevelRoll < 0.85) {
+            pathParts.push('packages'); // 15% in packages
+        }
+        else {
+            pathParts.push('modules'); // 15% in modules
+        }
+        // Level 2: Domain directory
+        if (depth >= 2) {
+            pathParts.push(DOMAIN_DIRS[Math.floor(random() * DOMAIN_DIRS.length)]);
+        }
+        // Level 3: Category directory
+        if (depth >= 3) {
+            pathParts.push(CATEGORY_DIRS[Math.floor(random() * CATEGORY_DIRS.length)]);
+        }
+        // Level 4: Feature directory
+        if (depth >= 4) {
+            pathParts.push(FEATURE_DIRS[Math.floor(random() * FEATURE_DIRS.length)]);
+        }
+        // Level 5: Variant directory
+        if (depth >= 5) {
+            pathParts.push(VARIANT_DIRS[Math.floor(random() * VARIANT_DIRS.length)]);
+        }
+        // Level 6: Additional nesting for very deep files
+        if (depth >= 6) {
+            pathParts.push(`nested${Math.floor(random() * 5)}`);
+        }
+        // Generate filename
+        const prefix = FILE_PREFIXES[Math.floor(random() * FILE_PREFIXES.length)];
+        const suffix = Math.floor(i / 10); // Group files by suffix number
+        const fileName = `${prefix}${suffix}${extension}`;
+        pathParts.push(fileName);
+        files.push(pathParts.join('/'));
+    }
+    return files;
+}
+/**
+ * Convert file paths to FileInfo objects
+ */
+function createFileInfoList(paths) {
+    return paths.map(path => ({
+        name: path.split('/').pop() || path,
+        path: path,
+        relativePath: path,
+        size: 500 + Math.floor(Math.random() * 5000), // 500-5500 bytes
+        extension: path.includes('.') ? '.' + (path.split('.').pop() || '') : '',
+        lastModified: new Date(),
+        isDirectory: false,
+    }));
+}
+// Cache for stress test data to avoid regenerating
+const stressTestCache = new Map();
+/**
+ * Create CityData with a large number of files for stress testing subdirectory zoom
+ *
+ * @param fileCount - Number of files to generate (default: 8000)
+ * @param useCache - Whether to cache results (default: true)
+ */
+function createStressTestCityData(fileCount = 8000, useCache = true) {
+    if (useCache && stressTestCache.has(fileCount)) {
+        return stressTestCache.get(fileCount);
+    }
+    const filePaths = generateLargeFilePaths(fileCount);
+    const fileInfos = createFileInfoList(filePaths);
+    const fileTree = (0, file_city_builder_1.buildFileSystemTreeFromFileInfoList)(fileInfos, `stress-test-${fileCount}`);
+    const builder = new file_city_builder_1.CodeCityBuilderWithGrid();
+    const cityData = builder.buildCityFromFileSystem(fileTree, '', {
+        paddingTop: 2,
+        paddingBottom: 2,
+        paddingLeft: 2,
+        paddingRight: 2,
+        paddingInner: 1,
+        paddingOuter: 3,
+    });
+    if (useCache) {
+        stressTestCache.set(fileCount, cityData);
+    }
+    return cityData;
+}
+/**
+ * Clear the stress test cache (useful for testing memory)
+ */
+function clearStressTestCache() {
+    stressTestCache.clear();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/file-city-react",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "React components for File City visualization",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/ArchitectureMapHighlightLayers.tsx

@@ -358,6 +358,10 @@ function ArchitectureMapHighlightLayersInner({
   // Track the last zoomToPath to detect changes
   const lastZoomToPathRef = useRef<string | null>(null);
 
+  // Throttle ref for hover updates (improves performance with large datasets)
+  const lastHoverUpdateRef = useRef<number>(0);
+  const HOVER_THROTTLE_MS = 16; // ~60fps max for hover updates
+
   useEffect(() => {
     // Reset user interaction state when enableZoom is disabled
     if (!enableZoom) {
@@ -1003,6 +1007,70 @@ function ArchitectureMapHighlightLayersInner({
     return layers;
   }, [stableLayers, dynamicLayers, abstractionLayer]);
 
+  // Memoize abstracted paths lookup - only recalculates when abstraction layer changes
+  const { abstractedPathsSet, abstractedPathLookup } = useMemo(() => {
+    const pathsSet = new Set<string>();
+    const abstractionLayerDef = allLayers.find(l => l.id === 'directory-abstraction');
+    if (abstractionLayerDef && abstractionLayerDef.enabled) {
+      abstractionLayerDef.items.forEach(item => {
+        if (item.type === 'directory') {
+          pathsSet.add(item.path);
+        }
+      });
+    }
+    return {
+      abstractedPathsSet: pathsSet,
+      abstractedPathLookup: new PathHierarchyLookup(pathsSet),
+    };
+  }, [allLayers]);
+
+  // Memoize visible districts - only recalculates when data or abstraction changes, NOT on hover
+  const visibleDistrictsMemo = useMemo(() => {
+    if (!filteredCityData) return [];
+
+    let districts =
+      abstractedPathLookup.size > 0
+        ? filteredCityData.districts.filter(district => {
+            // Check for root abstraction first
+            if (abstractedPathLookup.has('')) {
+              return !district.path || district.path === '';
+            }
+            if (!district.path) return true;
+            if (abstractedPathLookup.has(district.path)) return true;
+            return !abstractedPathLookup.isChildOfAbstracted(district.path);
+          })
+        : filteredCityData.districts;
+
+    // If root is abstracted and there's no root district, create one for the cover
+    if (abstractedPathsSet.has('')) {
+      const hasRootDistrict = districts.some(d => !d.path || d.path === '');
+      if (!hasRootDistrict) {
+        districts = [
+          {
+            path: '',
+            worldBounds: filteredCityData.bounds,
+            fileCount: filteredCityData.buildings.length,
+            type: 'directory' as const,
+          },
+          ...districts,
+        ];
+      }
+    }
+
+    return districts;
+  }, [filteredCityData, abstractedPathLookup, abstractedPathsSet]);
+
+  // Memoize visible buildings - only recalculates when data or abstraction changes, NOT on hover
+  const visibleBuildingsMemo = useMemo(() => {
+    if (!filteredCityData) return [];
+
+    return abstractedPathLookup.size > 0
+      ? filteredCityData.buildings.filter(building => {
+          return !abstractedPathLookup.isPathAbstracted(building.path);
+        })
+      : filteredCityData.buildings;
+  }, [filteredCityData, abstractedPathLookup]);
+
   // Update hit test cache when geometry or abstraction changes
   // Note: We don't depend on zoomState here because:
   // 1. The spatial grid only depends on buildings/districts and abstraction
@@ -1106,63 +1174,11 @@ function ArchitectureMapHighlightLayersInner({
         zoomState.offsetY,
     });
 
-    // Get abstracted paths for filtering child districts
-    const abstractedPathsForDistricts = new Set<string>();
-    const abstractionLayerForDistricts = allLayers.find(l => l.id === 'directory-abstraction');
-    if (abstractionLayerForDistricts && abstractionLayerForDistricts.enabled) {
-      abstractionLayerForDistricts.items.forEach(item => {
-        if (item.type === 'directory') {
-          abstractedPathsForDistricts.add(item.path);
-        }
-      });
-    }
-
-    // Create PathHierarchyLookup for O(depth) containment checks
-    const pathLookup = new PathHierarchyLookup(abstractedPathsForDistricts);
-
-    // Keep abstracted districts (for covers) but filter out their children
-    let visibleDistricts =
-      pathLookup.size > 0
-        ? filteredCityData.districts.filter(district => {
-            // Check for root abstraction first
-            if (pathLookup.has('')) {
-              // If root is abstracted, only show root district
-              return !district.path || district.path === '';
-            }
-
-            if (!district.path) return true; // Keep root
-
-            // Keep the abstracted district itself (we need it for the cover)
-            if (pathLookup.has(district.path)) {
-              return true;
-            }
-
-            // Filter out children of abstracted directories using O(depth) lookup
-            return !pathLookup.isChildOfAbstracted(district.path);
-          })
-        : filteredCityData.districts;
-
-    // If root is abstracted and there's no root district, create one for the cover
-    if (abstractedPathsForDistricts.has('')) {
-      const hasRootDistrict = visibleDistricts.some(d => !d.path || d.path === '');
-
-      if (!hasRootDistrict) {
-        visibleDistricts = [
-          {
-            path: '',
-            worldBounds: filteredCityData.bounds,
-            fileCount: filteredCityData.buildings.length, // Total file count
-            type: 'directory',
-          },
-          ...visibleDistricts,
-        ];
-      }
-    }
-
+    // Use memoized visible districts and buildings (pre-filtered, doesn't recalculate on hover)
     // Draw districts with layer support
     drawLayeredDistricts(
       ctx,
-      visibleDistricts,
+      visibleDistrictsMemo,
       worldToCanvas,
       scale * zoomState.scale,
       allLayers,
@@ -1170,25 +1186,15 @@ function ArchitectureMapHighlightLayersInner({
       fullSize,
       resolvedDefaultDirectoryColor,
       filteredCityData.metadata.layoutConfig,
-      abstractedPathsForDistricts, // Pass abstracted paths to skip labels
+      abstractedPathsSet, // Pass abstracted paths to skip labels
       showDirectoryLabels,
       districtBorderRadius,
     );
 
-    // Filter out buildings that are in abstracted directories
-    // Reuse the pathLookup created earlier for O(depth) containment checks
-    const visibleBuildings =
-      pathLookup.size > 0
-        ? filteredCityData.buildings.filter(building => {
-            // Use PathHierarchyLookup for efficient O(depth) check
-            return !pathLookup.isPathAbstracted(building.path);
-          })
-        : filteredCityData.buildings;
-
     // Draw buildings with layer support
     drawLayeredBuildings(
       ctx,
-      visibleBuildings,
+      visibleBuildingsMemo,
       worldToCanvas,
       scale * zoomState.scale,
       allLayers,
@@ -1229,6 +1235,10 @@ function ArchitectureMapHighlightLayersInner({
     resolvedDefaultBuildingColor,
     districtBorderRadius,
     showFileTypeIcons,
+    // Memoized values for performance (don't recalculate on hover)
+    visibleDistrictsMemo,
+    visibleBuildingsMemo,
+    abstractedPathsSet,
   ]);
 
   // Optimized hit testing
@@ -1406,6 +1416,13 @@ function ArchitectureMapHighlightLayersInner({
       if (!canvasRef.current || !containerRef.current || !filteredCityData || zoomState.isDragging)
         return;
 
+      // Throttle hover updates to improve performance with large datasets
+      const now = performance.now();
+      if (now - lastHoverUpdateRef.current < HOVER_THROTTLE_MS) {
+        return;
+      }
+      lastHoverUpdateRef.current = now;
+
       // Get the container rect for mouse position
       const containerRect = containerRef.current.getBoundingClientRect();
       // Get mouse position relative to the container

package/src/stories/StressTest.stories.tsx

@@ -0,0 +1,443 @@
+import React, { useMemo, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ArchitectureMapHighlightLayers } from '../components/ArchitectureMapHighlightLayers';
+import { HighlightLayer } from '../render/client/drawLayeredBuildings';
+import { createStressTestCityData } from './stress-test-data';
+
+// Wrapper component that regenerates cityData when fileCount changes
+// and includes the click-to-zoom panel
+function StressTestWrapper({
+  fileCount,
+  ...props
+}: {
+  fileCount: number;
+} & Omit<React.ComponentProps<typeof ArchitectureMapHighlightLayers>, 'cityData'>) {
+  const [zoomToPath, setZoomToPath] = useState<string | null>(null);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  const cityData = useMemo(() => {
+    console.log(`Generating city data for ${fileCount} files...`);
+    const start = performance.now();
+    const data = createStressTestCityData(fileCount, true);
+    const elapsed = performance.now() - start;
+    console.log(`Generated in ${elapsed.toFixed(2)}ms`);
+    return data;
+  }, [fileCount]);
+
+  // Get unique top-level directories for navigation buttons
+  const topLevelDirs = useMemo(() => {
+    return Array.from(
+      new Set(
+        cityData.districts
+          .map(d => d.path.split('/')[0])
+          .filter(Boolean),
+      ),
+    ).sort();
+  }, [cityData]);
+
+  // Get nested directories at different levels for navigation
+  const nestedDirs = useMemo(() => {
+    const allPaths = cityData.districts.map(d => d.path);
+
+    // Get depth-2 directories (e.g., src/components)
+    const depth2 = Array.from(
+      new Set(allPaths.filter(p => p.split('/').length === 2)),
+    ).sort().slice(0, 6);
+
+    // Get depth-3 directories (e.g., src/components/ui)
+    const depth3 = Array.from(
+      new Set(allPaths.filter(p => p.split('/').length === 3)),
+    ).sort().slice(0, 6);
+
+    // Get depth-4 directories (e.g., src/components/ui/Button)
+    const depth4 = Array.from(
+      new Set(allPaths.filter(p => p.split('/').length === 4)),
+    ).sort().slice(0, 4);
+
+    return { depth2, depth3, depth4 };
+  }, [cityData]);
+
+  const handleZoomTo = (path: string | null) => {
+    setIsAnimating(true);
+    setZoomToPath(path);
+  };
+
+  const handleZoomComplete = () => {
+    setIsAnimating(false);
+  };
+
+  // Create highlight layer for the focused directory
+  const highlightLayers: HighlightLayer[] = zoomToPath
+    ? [
+        {
+          id: 'zoom-focus',
+          name: 'Zoom Focus',
+          enabled: true,
+          color: '#3b82f6',
+          priority: 1,
+          items: [{ path: zoomToPath, type: 'directory' }],
+        },
+      ]
+    : [];
+
+  return (
+    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+      <ArchitectureMapHighlightLayers
+        cityData={cityData}
+        zoomToPath={zoomToPath}
+        onZoomComplete={handleZoomComplete}
+        zoomAnimationSpeed={0.1}
+        highlightLayers={highlightLayers}
+        onFileClick={(path, type) => {
+          if (type === 'directory') {
+            handleZoomTo(path);
+          }
+        }}
+        {...props}
+      />
+
+      {/* Navigation Controls */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 20,
+          left: 20,
+          zIndex: 100,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+          backgroundColor: 'rgba(0, 0, 0, 0.8)',
+          padding: '16px',
+          borderRadius: '8px',
+          maxWidth: '220px',
+          maxHeight: 'calc(100vh - 100px)',
+          overflowY: 'auto',
+        }}
+      >
+        <div
+          style={{
+            color: '#3b82f6',
+            fontFamily: 'monospace',
+            fontSize: '12px',
+            fontWeight: 'bold',
+          }}
+        >
+          Stress Test: {fileCount.toLocaleString()} files
+        </div>
+        <div
+          style={{
+            color: '#9ca3af',
+            fontFamily: 'monospace',
+            fontSize: '10px',
+            marginBottom: '8px',
+          }}
+        >
+          {isAnimating ? 'Animating...' : 'Click to zoom'}
+        </div>
+
+        {/* Reset button */}
+        <button
+          onClick={() => handleZoomTo(null)}
+          disabled={isAnimating}
+          style={{
+            padding: '8px 12px',
+            backgroundColor: zoomToPath === null ? '#3b82f6' : '#374151',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: isAnimating ? 'not-allowed' : 'pointer',
+            fontFamily: 'monospace',
+            fontSize: '12px',
+            opacity: isAnimating ? 0.6 : 1,
+          }}
+        >
+          Reset View
+        </button>
+
+        {/* Top-level directory buttons */}
+        {topLevelDirs.map(dir => (
+          <button
+            key={dir}
+            onClick={() => handleZoomTo(dir)}
+            disabled={isAnimating}
+            style={{
+              padding: '8px 12px',
+              backgroundColor: zoomToPath === dir ? '#3b82f6' : '#374151',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: isAnimating ? 'not-allowed' : 'pointer',
+              fontFamily: 'monospace',
+              fontSize: '12px',
+              textAlign: 'left',
+              opacity: isAnimating ? 0.6 : 1,
+            }}
+          >
+            {dir}
+          </button>
+        ))}
+
+        {/* Depth 2 directories (e.g., src/components) */}
+        {nestedDirs.depth2.length > 0 && (
+          <div
+            style={{
+              borderTop: '1px solid #4b5563',
+              paddingTop: '8px',
+              marginTop: '4px',
+            }}
+          >
+            <div
+              style={{
+                color: '#9ca3af',
+                fontFamily: 'monospace',
+                fontSize: '10px',
+                marginBottom: '4px',
+              }}
+            >
+              Depth 2:
+            </div>
+            {nestedDirs.depth2.map(dir => (
+              <button
+                key={dir}
+                onClick={() => handleZoomTo(dir)}
+                disabled={isAnimating}
+                style={{
+                  padding: '6px 10px',
+                  backgroundColor: zoomToPath === dir ? '#3b82f6' : '#1f2937',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: isAnimating ? 'not-allowed' : 'pointer',
+                  fontFamily: 'monospace',
+                  fontSize: '10px',
+                  textAlign: 'left',
+                  marginBottom: '4px',
+                  width: '100%',
+                  opacity: isAnimating ? 0.6 : 1,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+                title={dir}
+              >
+                {dir}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* Depth 3 directories (e.g., src/components/ui) */}
+        {nestedDirs.depth3.length > 0 && (
+          <div
+            style={{
+              borderTop: '1px solid #4b5563',
+              paddingTop: '8px',
+              marginTop: '4px',
+            }}
+          >
+            <div
+              style={{
+                color: '#9ca3af',
+                fontFamily: 'monospace',
+                fontSize: '10px',
+                marginBottom: '4px',
+              }}
+            >
+              Depth 3:
+            </div>
+            {nestedDirs.depth3.map(dir => (
+              <button
+                key={dir}
+                onClick={() => handleZoomTo(dir)}
+                disabled={isAnimating}
+                style={{
+                  padding: '6px 10px',
+                  backgroundColor: zoomToPath === dir ? '#10b981' : '#1f2937',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: isAnimating ? 'not-allowed' : 'pointer',
+                  fontFamily: 'monospace',
+                  fontSize: '10px',
+                  textAlign: 'left',
+                  marginBottom: '4px',
+                  width: '100%',
+                  opacity: isAnimating ? 0.6 : 1,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+                title={dir}
+              >
+                {dir}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* Depth 4 directories (e.g., src/components/ui/Button) */}
+        {nestedDirs.depth4.length > 0 && (
+          <div
+            style={{
+              borderTop: '1px solid #4b5563',
+              paddingTop: '8px',
+              marginTop: '4px',
+            }}
+          >
+            <div
+              style={{
+                color: '#9ca3af',
+                fontFamily: 'monospace',
+                fontSize: '10px',
+                marginBottom: '4px',
+              }}
+            >
+              Depth 4:
+            </div>
+            {nestedDirs.depth4.map(dir => (
+              <button
+                key={dir}
+                onClick={() => handleZoomTo(dir)}
+                disabled={isAnimating}
+                style={{
+                  padding: '6px 10px',
+                  backgroundColor: zoomToPath === dir ? '#f59e0b' : '#1f2937',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: isAnimating ? 'not-allowed' : 'pointer',
+                  fontFamily: 'monospace',
+                  fontSize: '10px',
+                  textAlign: 'left',
+                  marginBottom: '4px',
+                  width: '100%',
+                  opacity: isAnimating ? 0.6 : 1,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+                title={dir}
+              >
+                {dir}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Status info */}
+      <div
+        style={{
+          position: 'absolute',
+          bottom: 20,
+          left: 20,
+          zIndex: 100,
+          backgroundColor: 'rgba(0, 0, 0, 0.8)',
+          padding: '12px',
+          borderRadius: '8px',
+          color: 'white',
+          fontFamily: 'monospace',
+          fontSize: '11px',
+        }}
+      >
+        <div>Zoomed to: {zoomToPath || '(root)'}</div>
+        <div style={{ color: '#9ca3af', marginTop: '4px' }}>
+          Click directories in the map or use buttons above
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Performance/Stress Test',
+  component: StressTestWrapper,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    Story => (
+      <div style={{ width: '100vw', height: '100vh' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    fileCount: {
+      control: { type: 'number', min: 100, max: 20000, step: 100 },
+      description: 'Number of files to generate for stress testing',
+    },
+  },
+} satisfies Meta<typeof StressTestWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Test subdirectory zoom with a large number of files.
+ * Use the fileCount control to adjust the number of files.
+ *
+ * Try clicking on directories to zoom in and test performance.
+ */
+export const SubdirectoryZoom: Story = {
+  args: {
+    fileCount: 8000,
+    enableZoom: true,
+    showGrid: true,
+    showFileNames: false,
+    fullSize: true,
+  },
+};
+
+/**
+ * Smaller stress test starting point (1000 files)
+ */
+export const SmallStressTest: Story = {
+  args: {
+    fileCount: 1000,
+    enableZoom: true,
+    showGrid: true,
+    showFileNames: false,
+    fullSize: true,
+  },
+};
+
+/**
+ * Medium stress test (5000 files)
+ */
+export const MediumStressTest: Story = {
+  args: {
+    fileCount: 5000,
+    enableZoom: true,
+    showGrid: true,
+    showFileNames: false,
+    fullSize: true,
+  },
+};
+
+/**
+ * Large stress test (10000 files)
+ */
+export const LargeStressTest: Story = {
+  args: {
+    fileCount: 10000,
+    enableZoom: true,
+    showGrid: true,
+    showFileNames: false,
+    fullSize: true,
+  },
+};
+
+/**
+ * Extreme stress test (20000 files) - may be slow!
+ */
+export const ExtremeStressTest: Story = {
+  args: {
+    fileCount: 20000,
+    enableZoom: true,
+    showGrid: true,
+    showFileNames: false,
+    fullSize: true,
+  },
+};

package/src/stories/stress-test-data.ts

@@ -0,0 +1,176 @@
+import {
+  CityData,
+  CodeCityBuilderWithGrid,
+  buildFileSystemTreeFromFileInfoList,
+} from '@principal-ai/file-city-builder';
+
+interface FileInfo {
+  name: string;
+  path: string;
+  relativePath: string;
+  size: number;
+  extension: string;
+  lastModified: Date;
+  isDirectory: boolean;
+}
+
+// Common file extensions for realistic distribution
+const FILE_EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.css', '.json', '.md', '.test.ts', '.spec.tsx'];
+
+// Top-level source directories
+const TOP_LEVEL_DIRS = ['src', 'lib', 'packages', 'modules'];
+
+// Second-level directories (domain areas)
+const DOMAIN_DIRS = ['components', 'utils', 'services', 'hooks', 'types', 'helpers', 'core', 'api', 'features', 'pages'];
+
+// Third-level directories (categories within domains)
+const CATEGORY_DIRS = ['ui', 'forms', 'layout', 'navigation', 'data', 'auth', 'common', 'shared', 'internal', 'public'];
+
+// Fourth-level directories (specific feature areas)
+const FEATURE_DIRS = ['Button', 'Modal', 'Table', 'Card', 'Input', 'Select', 'Dialog', 'Menu', 'Tabs', 'List', 'Grid', 'Panel'];
+
+// Fifth-level directories (variants/subfeatures)
+const VARIANT_DIRS = ['variants', 'styles', 'hooks', 'utils', 'types', 'tests', '__tests__', 'stories', 'docs'];
+
+// File name prefixes for realistic naming
+const FILE_PREFIXES = ['index', 'main', 'handler', 'controller', 'service', 'helper', 'util', 'config', 'constants', 'types'];
+
+/**
+ * Seeded random number generator for consistent results
+ */
+function seededRandom(seed: number): () => number {
+  return () => {
+    seed = (seed * 1103515245 + 12345) & 0x7fffffff;
+    return seed / 0x7fffffff;
+  };
+}
+
+/**
+ * Generate a large number of file paths with realistic nested directory structures
+ */
+export function generateLargeFilePaths(fileCount: number): string[] {
+  const files: string[] = [];
+  const random = seededRandom(42); // Consistent seed for reproducible results
+
+  for (let i = 0; i < fileCount; i++) {
+    const extension = FILE_EXTENSIONS[i % FILE_EXTENSIONS.length];
+
+    // Determine nesting depth (0-5 levels) with weighted distribution
+    // More files at medium depths (2-3), fewer at extremes
+    const depthRoll = random();
+    let depth: number;
+    if (depthRoll < 0.1) depth = 1;       // 10% at depth 1
+    else if (depthRoll < 0.25) depth = 2; // 15% at depth 2
+    else if (depthRoll < 0.50) depth = 3; // 25% at depth 3
+    else if (depthRoll < 0.75) depth = 4; // 25% at depth 4
+    else if (depthRoll < 0.90) depth = 5; // 15% at depth 5
+    else depth = 6;                        // 10% at depth 6
+
+    const pathParts: string[] = [];
+
+    // Level 1: Top-level directory
+    // Weight 'src' heavily so it contains ~50% of files (for stress testing large subdirectory zoom)
+    const topLevelRoll = random();
+    if (topLevelRoll < 0.5) {
+      pathParts.push('src'); // 50% of files in src
+    } else if (topLevelRoll < 0.7) {
+      pathParts.push('lib'); // 20% in lib
+    } else if (topLevelRoll < 0.85) {
+      pathParts.push('packages'); // 15% in packages
+    } else {
+      pathParts.push('modules'); // 15% in modules
+    }
+
+    // Level 2: Domain directory
+    if (depth >= 2) {
+      pathParts.push(DOMAIN_DIRS[Math.floor(random() * DOMAIN_DIRS.length)]);
+    }
+
+    // Level 3: Category directory
+    if (depth >= 3) {
+      pathParts.push(CATEGORY_DIRS[Math.floor(random() * CATEGORY_DIRS.length)]);
+    }
+
+    // Level 4: Feature directory
+    if (depth >= 4) {
+      pathParts.push(FEATURE_DIRS[Math.floor(random() * FEATURE_DIRS.length)]);
+    }
+
+    // Level 5: Variant directory
+    if (depth >= 5) {
+      pathParts.push(VARIANT_DIRS[Math.floor(random() * VARIANT_DIRS.length)]);
+    }
+
+    // Level 6: Additional nesting for very deep files
+    if (depth >= 6) {
+      pathParts.push(`nested${Math.floor(random() * 5)}`);
+    }
+
+    // Generate filename
+    const prefix = FILE_PREFIXES[Math.floor(random() * FILE_PREFIXES.length)];
+    const suffix = Math.floor(i / 10); // Group files by suffix number
+    const fileName = `${prefix}${suffix}${extension}`;
+
+    pathParts.push(fileName);
+    files.push(pathParts.join('/'));
+  }
+
+  return files;
+}
+
+/**
+ * Convert file paths to FileInfo objects
+ */
+function createFileInfoList(paths: string[]): FileInfo[] {
+  return paths.map(path => ({
+    name: path.split('/').pop() || path,
+    path: path,
+    relativePath: path,
+    size: 500 + Math.floor(Math.random() * 5000), // 500-5500 bytes
+    extension: path.includes('.') ? '.' + (path.split('.').pop() || '') : '',
+    lastModified: new Date(),
+    isDirectory: false,
+  }));
+}
+
+// Cache for stress test data to avoid regenerating
+const stressTestCache = new Map<number, CityData>();
+
+/**
+ * Create CityData with a large number of files for stress testing subdirectory zoom
+ *
+ * @param fileCount - Number of files to generate (default: 8000)
+ * @param useCache - Whether to cache results (default: true)
+ */
+export function createStressTestCityData(fileCount: number = 8000, useCache: boolean = true): CityData {
+  if (useCache && stressTestCache.has(fileCount)) {
+    return stressTestCache.get(fileCount)!;
+  }
+
+  const filePaths = generateLargeFilePaths(fileCount);
+  const fileInfos = createFileInfoList(filePaths);
+  const fileTree = buildFileSystemTreeFromFileInfoList(fileInfos as any, `stress-test-${fileCount}`);
+
+  const builder = new CodeCityBuilderWithGrid();
+  const cityData = builder.buildCityFromFileSystem(fileTree, '', {
+    paddingTop: 2,
+    paddingBottom: 2,
+    paddingLeft: 2,
+    paddingRight: 2,
+    paddingInner: 1,
+    paddingOuter: 3,
+  });
+
+  if (useCache) {
+    stressTestCache.set(fileCount, cityData);
+  }
+
+  return cityData;
+}
+
+/**
+ * Clear the stress test cache (useful for testing memory)
+ */
+export function clearStressTestCache(): void {
+  stressTestCache.clear();
+}