From b682ac15556d30e4b59ae2b38c4e56f446aa19ec Mon Sep 17 00:00:00 2001 From: Denis Bardadym Date: Thu, 14 Jul 2022 13:25:27 +0200 Subject: [PATCH] Highlight files that imports current file on click --- package.json | 2 +- src/network/chart.tsx | 10 +++++++++- src/network/index.tsx | 3 +-- src/network/main.tsx | 20 +++++++++++++++++--- src/network/network.tsx | 21 +++++++++++++++++++-- 5 files changed, 47 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 4b2f06b..8c719fc 100644 --- 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 index fcb3605..fb3a749 100644 --- 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 = ({ links, nodes, onNodeExclude }) => { +export const Chart: FunctionalComponent = ({ links, nodes, onNodeExclude, getColor, onNodeSelect }) => { const [showTooltip, setShowTooltip] = useState(false); const [tooltipNode, setTooltipNode] = useState(undefined); @@ -36,6 +39,11 @@ export const Chart: FunctionalComponent = ({ links, nodes, onNodeExc setShowTooltip(true); }} onNodeDblClick={onNodeExclude} + onNodeClick={(node) => onNodeSelect(node.uid)} + onCanvasClick={() => { + onNodeSelect(undefined); + }} + getColor={getColor} /> diff --git a/src/network/index.tsx b/src/network/index.tsx index f170adc..a8839b1 100644 --- 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 & { source: NetworkNode; target: NetworkNode }; export interface StaticData { diff --git a/src/network/main.tsx b/src/network/main.tsx index b16c55d..a31cc9d 100644 --- 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([]); + const [selectedNode, setSelectedNode] = useState(); + + 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 = 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 index 33bf7d0..8f19ba0 100644 --- a/src/network/network.tsx +++ b/src/network/network.tsx @@ -2,6 +2,7 @@ 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 { @@ -9,6 +10,9 @@ export interface NetworkProps { 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 = ({ links, nodes, onNodeHover, onNodeDblClick }) => { +export const Network: FunctionalComponent = ({ + links, + nodes, + onNodeHover, + onNodeDblClick, + getColor, + onCanvasClick, + onNodeClick, +}) => { const { width, height } = useContext(StaticContext); const [transform, setTransform] = useState(identityTransform); @@ -65,6 +77,7 @@ export const Network: FunctionalComponent = ({ links, nodes, onNod onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} + onClick={onCanvasClick} > @@ -87,13 +100,17 @@ export const Network: FunctionalComponent = ({ links, nodes, onNod { noEvent(evt); onNodeHover(node); }} + onClick={(evt) => { + noEvent(evt); + onNodeClick(node); + }} onDblClick={(evt) => { noEvent(evt); onNodeDblClick(node);