Highlight files that imports current file on click

btd · Jul 14, 2022 · b682ac1 · b682ac1
1 parent 9710ad6
commit b682ac1
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -80,7 +80,7 @@
     "typescript": "^4.6.4"
   },
   "engines": {
-    "node": ">=12"
+    "node": ">=14"
   },
   "keywords": [
     "rollup-plugin",

diff --git a/src/network/chart.tsx b/src/network/chart.tsx
@@ -3,15 +3,18 @@ import { useState, useEffect } from "preact/hooks";
 
 import { Tooltip } from "./tooltip";
 import { Network } from "./network";
+import { NodeColorGetter } from "./color";
 import { NetworkLink, NetworkNode } from ".";
 
 export interface ChartProps {
   links: NetworkLink[];
   nodes: NetworkNode[];
   onNodeExclude: (node: NetworkNode) => void;
+  getColor: NodeColorGetter;
+  onNodeSelect: (node: string | undefined) => void;
 }
 
-export const Chart: FunctionalComponent<ChartProps> = ({ links, nodes, onNodeExclude }) => {
+export const Chart: FunctionalComponent<ChartProps> = ({ links, nodes, onNodeExclude, getColor, onNodeSelect }) => {
   const [showTooltip, setShowTooltip] = useState<boolean>(false);
   const [tooltipNode, setTooltipNode] = useState<NetworkNode | undefined>(undefined);
 
@@ -36,6 +39,11 @@ export const Chart: FunctionalComponent<ChartProps> = ({ links, nodes, onNodeExc
           setShowTooltip(true);
         }}
         onNodeDblClick={onNodeExclude}
+        onNodeClick={(node) => onNodeSelect(node.uid)}
+        onCanvasClick={() => {
+          onNodeSelect(undefined);
+        }}
+        getColor={getColor}
       />
       <Tooltip visible={showTooltip} node={tooltipNode} />
     </>

diff --git a/src/network/index.tsx b/src/network/index.tsx
@@ -4,13 +4,12 @@ import { SimulationLinkDatum, SimulationNodeDatum } from "d3-force";
 import { ModuleMeta, ModuleLengths, ModuleUID, SizeKey, VisualizerData } from "../../types/types";
 
 import { getAvailableSizeOptions } from "../sizes";
-import { CssColor } from "../color";
 import { Main } from "./main";
 import { NODE_MODULES } from "./util";
 
 import "../style/style-treemap.scss";
 
-export type NetworkNode = NodeInfo & { color: CssColor; radius: number } & SimulationNodeDatum;
+export type NetworkNode = NodeInfo & { radius: number } & SimulationNodeDatum;
 export type NetworkLink = SimulationLinkDatum<NetworkNode> & { source: NetworkNode; target: NetworkNode };
 
 export interface StaticData {

diff --git a/src/network/main.tsx b/src/network/main.tsx
@@ -6,10 +6,11 @@ import { forceCollide, forceLink, forceManyBody, forceSimulation, forceX, forceY
 
 import { ModuleUID } from "../../types/types";
 
+import { COLOR_BASE } from "../color";
 import { Chart } from "./chart";
 
 import createRainbowColor from "./color";
-import { NetworkNode, StaticContext } from "./index";
+import { NetworkNode, NodeInfo, StaticContext } from "./index";
 
 export const Main: FunctionalComponent = () => {
   const { nodes, data, width, height, nodeGroups, groupLayers, groups } = useContext(StaticContext);
@@ -25,6 +26,18 @@ export const Main: FunctionalComponent = () => {
   }, [groups]);
 
   const [excludedNodes, setExcludedNodes] = useState<ModuleUID[]>([]);
+  const [selectedNode, setSelectedNode] = useState<string>();
+
+  const getColor = (node: NodeInfo) => {
+    if (selectedNode != null) {
+      if (node.uid === selectedNode || data.nodeMetas[selectedNode].importedBy.some(({ uid }) => node.uid === uid)) {
+        return getModuleColor(node);
+      }
+      return COLOR_BASE;
+    } else {
+      return getModuleColor(node);
+    }
+  };
 
   const processedNodes = useMemo(() => {
     const newNodes: NetworkNode[] = [];
@@ -45,11 +58,10 @@ export const Main: FunctionalComponent = () => {
         x: layerIndex * Math.cos((groupId / groupsTotal) * 2 * Math.PI) * 200,
         y: layerIndex * Math.sin((groupId / groupsTotal) * 2 * Math.PI) * 200,
         radius: sizeScale(node.renderedLength),
-        color: getModuleColor(node),
       });
     }
     return newNodes;
-  }, [excludedNodes, getModuleColor, groupLayers, nodeGroups, nodes, sizeScale]);
+  }, [excludedNodes, groupLayers, nodeGroups, nodes, sizeScale]);
 
   const links = useMemo(() => {
     const nodesCache: Record<ModuleUID, NetworkNode> = Object.fromEntries(processedNodes.map((d) => [d.uid, d]));
@@ -108,6 +120,8 @@ export const Main: FunctionalComponent = () => {
       nodes={animatedNodes}
       onNodeExclude={(node) => setExcludedNodes([...excludedNodes, node.uid])}
       links={links}
+      getColor={getColor}
+      onNodeSelect={(uid) => setSelectedNode(uid === selectedNode ? undefined : uid)}
     />
   );
 };
diff --git a/src/network/network.tsx b/src/network/network.tsx
@@ -2,13 +2,17 @@
 import { FunctionalComponent } from "preact";
 import { useContext, useRef, useState } from "preact/hooks";
 import { identityTransform, Transform } from "./transform";
+import { NodeColorGetter } from "./color";
 import { NetworkLink, NetworkNode, StaticContext } from ".";
 
 export interface NetworkProps {
   onNodeHover: (node: NetworkNode) => void;
   onNodeDblClick: (node: NetworkNode) => void;
   nodes: NetworkNode[];
   links: NetworkLink[];
+  getColor: NodeColorGetter;
+  onNodeClick: (node: NetworkNode) => void;
+  onCanvasClick: () => void;
 }
 
 const noEvent = (event: UIEvent) => {
@@ -22,7 +26,15 @@ const translate = (transform: Transform, p0: [number, number], p1: [number, numb
   return x === transform.x && y === transform.y ? transform : new Transform(transform.k, x, y);
 };
 
-export const Network: FunctionalComponent<NetworkProps> = ({ links, nodes, onNodeHover, onNodeDblClick }) => {
+export const Network: FunctionalComponent<NetworkProps> = ({
+  links,
+  nodes,
+  onNodeHover,
+  onNodeDblClick,
+  getColor,
+  onCanvasClick,
+  onNodeClick,
+}) => {
   const { width, height } = useContext(StaticContext);
 
   const [transform, setTransform] = useState<Transform>(identityTransform);
@@ -65,6 +77,7 @@ export const Network: FunctionalComponent<NetworkProps> = ({ links, nodes, onNod
       onMouseDown={handleMouseDown}
       onMouseMove={handleMouseMove}
       onMouseUp={handleMouseUp}
+      onClick={onCanvasClick}
     >
       <g transform={transform.toString()}>
         <g stroke="#fff" stroke-opacity="0.9">
@@ -87,13 +100,17 @@ export const Network: FunctionalComponent<NetworkProps> = ({ links, nodes, onNod
               <circle
                 key={node.uid}
                 r={node.radius}
-                fill={node.color}
+                fill={getColor(node)}
                 cx={node.x}
                 cy={node.y}
                 onMouseOver={(evt) => {
                   noEvent(evt);
                   onNodeHover(node);
                 }}
+                onClick={(evt) => {
+                  noEvent(evt);
+                  onNodeClick(node);
+                }}
                 onDblClick={(evt) => {
                   noEvent(evt);
                   onNodeDblClick(node);