Feat/treemap imported by

src/treemap/index.tsx

@@ -35,6 +35,7 @@ export interface ChartData {
   getModuleSize: (node: ModuleTree | ModuleTreeLeaf, sizeKey: SizeKey) => number;
   getModuleIds: (node: ModuleTree | ModuleTreeLeaf) => ModuleIds;
   getModuleColor: NodeColorGetter;
+  getModuleImports: (node: ModuleTree | ModuleTreeLeaf) => string[];
 }
 
 export type Context = StaticData & ChartData;
@@ -69,9 +70,13 @@ const drawChart = (
 
   const nodeIdsCache = new Map<ModuleTree | ModuleTreeLeaf, ModuleIds>();
 
+  const nodeImportsCache = new Map<ModuleTree | ModuleTreeLeaf, Set<string>>();
+
   const getModuleSize = (node: ModuleTree | ModuleTreeLeaf, sizeKey: SizeKey) =>
     nodeSizesCache.get(node)?.[sizeKey] ?? 0;
 
+  const getModuleImports = (node: ModuleTree | ModuleTreeLeaf) => [...(nodeImportsCache.get(node) ?? [])].sort();
+
   console.time("rawHierarchy eachAfter cache");
   rawHierarchy.eachAfter((node) => {
     const nodeData = node.data;
@@ -88,11 +93,34 @@ const drawChart = (
           (acc, child) => getModuleSize(child, sizeKey) + acc,
           0
         );
+        nodeImportsCache.set(
+          nodeData,
+          new Set(
+            nodeData.children.reduce((acc, child) => {
+              const imported = getModuleImports(child).filter((id) => {
+                return !id.includes(nodeData.name);
+              });
+
+              return acc.concat(imported);
+            }, [] as string[])
+          )
+        );
       }
     } else {
+      const { nodeParts, nodeMetas } = data;
+      const mainUid = nodeParts[nodeData.uid].mainUid;
+
       for (const sizeKey of availableSizeProperties) {
-        sizes[sizeKey] = data.nodeParts[nodeData.uid][sizeKey] ?? 0;
+        sizes[sizeKey] = nodeParts[nodeData.uid][sizeKey] ?? 0;
       }
+      nodeImportsCache.set(
+        nodeData,
+        new Set(
+          nodeMetas[mainUid].importedBy
+            .filter(({ uid }) => Object.values(nodeMetas[uid].moduleParts).some((moduleId) => moduleId in nodeParts))
+            .map(({ uid }) => nodeMetas[uid].id)
+        )
+      );
     }
     nodeSizesCache.set(nodeData, sizes);
   });
@@ -116,6 +144,7 @@ const drawChart = (
         getModuleColor,
         rawHierarchy,
         layout,
+        getModuleImports,
       }}
     >
       <Main />

src/treemap/tooltip.tsx

@@ -5,7 +5,7 @@ import { format as formatBytes } from "bytes";
 import { FunctionalComponent } from "preact";
 import { HierarchyRectangularNode } from "d3-hierarchy";
 import { LABELS } from "../sizes";
-import { isModuleTree, ModuleTree, ModuleTreeLeaf, SizeKey } from "../../types/types";
+import { ModuleTree, ModuleTreeLeaf, SizeKey } from "../../types/types";
 import { StaticContext } from ".";
 
 export interface TooltipProps {
@@ -47,7 +47,7 @@ export const Tooltip: FunctionalComponent<TooltipProps> = ({
   root,
   sizeProperty,
 }) => {
-  const { availableSizeProperties, getModuleSize, data } = useContext(StaticContext);
+  const { availableSizeProperties, getModuleSize, data, getModuleImports } = useContext(StaticContext);
 
   const ref = useRef<HTMLDivElement>(null);
   const [style, setStyle] = useState({});
@@ -67,11 +67,7 @@ export const Tooltip: FunctionalComponent<TooltipProps> = ({
       .map((d) => d.data.name)
       .join("/");
 
-    let dataNode = null;
-    if (!isModuleTree(node.data)) {
-      const mainUid = data.nodeParts[node.data.uid].mainUid;
-      dataNode = data.nodeMetas[mainUid];
-    }
+    const imports = getModuleImports(node.data);
 
     return (
       <>
@@ -95,13 +91,12 @@ export const Tooltip: FunctionalComponent<TooltipProps> = ({
           }
         })}
         <br />
-        {dataNode && dataNode.importedBy.length > 0 && (
+        {imports.length > 0 && (
           <div>
             <div>
               <b>Imported By</b>:
             </div>
-            {dataNode.importedBy.map(({ uid }) => {
-              const id = data.nodeMetas[uid].id;
+            {imports.map((id) => {
               return <div key={id}>{id}</div>;
             })}
           </div>
@@ -116,7 +111,7 @@ export const Tooltip: FunctionalComponent<TooltipProps> = ({
         )}
       </>
     );
-  }, [availableSizeProperties, data, getModuleSize, node, root.data, sizeProperty]);
+  }, [availableSizeProperties, data, getModuleSize, node, root.data, sizeProperty, getModuleImports]);
 
   const updatePosition = (mouseCoords: { x: number; y: number }) => {
     if (!ref.current) return;