summaryrefslogtreecommitdiff
path: root/app/components/graph
diff options
context:
space:
mode:
Diffstat (limited to 'app/components/graph')
-rw-r--r--app/components/graph/graph.tsx107
1 files changed, 54 insertions, 53 deletions
diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index 7e0b77e..14de37a 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -121,48 +121,49 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
*
* return rando;
* }, []);
-* const [highlightNodes, setHighlightNodes] = useState(new Set());
-* const [highlightLinks, setHighlightLinks] = useState(new Set());
-* const [hoverNode, setHoverNode] = useState(null);
-*
-* const updateHighlight = () => {
-* setHighlightNodes(highlightNodes);
-* setHighlightLinks(highlightLinks);
-* };
-*
-* const handleNodeHover = node => {
-* highlightNodes.clear();
-* highlightLinks.clear();
-* if (node) {
-* highlightNodes.add(node);
-* node.neighbors.forEach(neighbor => highlightNodes.add(neighbor));
-* node.links.forEach(link => highlightLinks.add(link));
-* }
-*
-* setHoverNode(node || null);
-* updateHighlight();
-* };
-*
-* const handleLinkHover = link => {
-* highlightNodes.clear();
-* highlightLinks.clear();
-*
-* if (link) {
-* highlightLinks.add(link);
-* highlightNodes.add(link.source);
-* highlightNodes.add(link.target);
-* }
-*
-* updateHighlight();
-* };
-*
-* const paintRing = useCallback((node, ctx) => {
-* // add ring just for highlighted nodes
-* ctx.beginPath();
-* ctx.arc(node.x, node.y, NODE_R * 1.4, 0, 2 * Math.PI, false);
-* ctx.fillStyle = node === hoverNode ? 'red' : 'orange';
-* ctx.fill();
-* }, [hoverNode]);
+ */
+ const [highlightNodes, setHighlightNodes] = useState(new Set());
+ const [highlightLinks, setHighlightLinks] = useState(new Set());
+ const [hoverNode, setHoverNode] = useState(null);
+
+ const updateHighlight = () => {
+ setHighlightNodes(highlightNodes);
+ setHighlightLinks(highlightLinks);
+ };
+
+ const handleNodeHover = node => {
+ highlightNodes.clear();
+ highlightLinks.clear();
+ if (node) {
+ highlightNodes.add(node);
+ node.neighbors.forEach(neighbor => highlightNodes.add(neighbor));
+ node.links.forEach(link => highlightLinks.add(link));
+ }
+
+ setHoverNode(node || null);
+ updateHighlight();
+ };
+
+ const handleLinkHover = link => {
+ highlightNodes.clear();
+ highlightLinks.clear();
+
+ if (link) {
+ highlightLinks.add(link);
+ highlightNodes.add(link.source);
+ highlightNodes.add(link.target);
+ }
+
+ updateHighlight();
+ };
+
+ /* const paintRing = useCallback((node, ctx) => {
+* // add ring just for highlighted nodes
+* ctx.beginPath();
+* ctx.arc(node.x, node.y, NODE_R * 1.4, 0, 2 * Math.PI, false);
+* ctx.fillStyle = node === hoverNode ? 'red' : 'orange';
+* ctx.fill();
+* }, [hoverNode]);
*/
/* autoPauseRedraw={false}
@@ -183,6 +184,7 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
{!physics.threedim ? (
<ForceGraph2D
ref={fgRef}
+ autoPauseRedraw={false}
graphData={gData}
//graphData={physics.collapse ? prunedTree : gData}
nodeAutoColorBy="id"
@@ -194,12 +196,14 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
nodeLabel={(node) => node.title}
//nodeVal ={(node)=> node.childLinks.length * 0.5 + 1}
//d3VelocityDecay={visco}
- linkWidth={physics.linkWidth}
+ linkWidth={link => highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth}
linkOpacity={physics.linkOpacity}
nodeRelSize={physics.nodeRel}
+ nodeVal={node => highlightNodes.has(node) ? 10 : 5}
linkDirectionalParticleWidth={physics.particleWidth}
- nodeCanvasObject={(node, ctx, globalScale) => {
- if(physics.labels){
+ nodeCanvasObject={
+ (node, ctx, globalScale) => {
+ if(physics.labels) {
if(globalScale > physics.labelScale ) {
const label = node.title.substring(0, Math.min(node.title.length, 30));
const fontSize = 12/globalScale;
@@ -216,15 +220,12 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
ctx.fillText(label, node.x, node.y);
node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint
- }
- }
- }}
- nodePointerAreaPaint={(node, color, ctx) => {
- ctx.fillStyle = color;
- const bckgDimensions = node.__bckgDimensions;
- bckgDimensions && ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
+ };
+ };
}}
- nodeCanvasObjectMode={()=>'after'}
+ nodeCanvasObjectMode={()=> 'after'}
+ onNodeHover={handleNodeHover}
+ onLinkHover={handleLinkHover}
/>
) : (
<ForceGraph3D