From 5e8cbb0f73e03da6c96e91c8a40b604466f0d5f8 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomasfkjorna@gmail.com>
Date: Thu, 22 Jul 2021 19:19:32 +0200
Subject: added highlight node/link size customization

---
 pages/index.tsx | 42 +++++++++++++++++++++++-------------------
 1 file changed, 23 insertions(+), 19 deletions(-)

(limited to 'pages/index.tsx')

diff --git a/pages/index.tsx b/pages/index.tsx
index 522b047..d36d6de 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -72,10 +72,11 @@ const initialPhysics = {
   collisionStrength: 0,
   linkStrength: 0.1,
   linkIts: 1,
-  particles: 0,
+  particles: false,
+  particlesNumber: 0,
+  particlesWidth: 4,
   linkOpacity: 0.4,
   linkWidth: 1,
-  particleWidth: 4,
   nodeRel: 4,
   labels: true,
   labelScale: 1.5,
@@ -92,6 +93,9 @@ const initialPhysics = {
   click: 'select',
   doubleClick: 'local',
   iterations: 0,
+  highlight: true,
+  highlightNodeSize: 2,
+  highlightLinkSize: 2,
 }
 
 const initialTheme = {
@@ -448,36 +452,36 @@ export const Tweaks = function (props: TweakProps) {
               </EnableSection>
               <EnableSection
                 label="Directional Particles"
-                value={physics.particles ? true : false}
-                onChange={() => setPhysics({ ...physics, particles: physics.particles ? 0 : 1 })}
+                value={physics.particles}
+                onChange={() => setPhysics({ ...physics, particles: !physics.particles })}
               >
                 <SliderWithInfo
                   label="Particle Number"
-                  value={physics.particles}
+                  value={physics.particlesNumber}
                   max={5}
                   step={1}
-                  onChange={(value) => setPhysics({ ...physics, particles: value })}
+                  onChange={(value) => setPhysics({ ...physics, particlesNumber: value })}
                 />
                 <SliderWithInfo
                   label="Particle Size"
-                  value={physics.particleWidth}
+                  value={physics.particlesWidth}
                   onChange={(value) => setPhysics({ ...physics, particleWidth: value })}
                 />
               </EnableSection>
               <EnableSection
-                label="Hightlight"
-                onChange={() => setPhysics({ ...physics, highlight: !physics.hightligth })}
-                value={physics.hightlight}
+                label="Highlight"
+                onChange={() => setPhysics({ ...physics, highlight: !physics.highlight })}
+                value={physics.highlight}
               >
                 <SliderWithInfo
                   label="Highlight Link Thickness Multiplier"
-                  value={physics.highlightLink}
-                  onChange={(value) => setPhysics({ ...physics, highlightLink: value })}
+                  value={physics.highlightLinkSize}
+                  onChange={(value) => setPhysics({ ...physics, highlightLinkSize: value })}
                 />
                 <SliderWithInfo
                   label="Highlight Node Size Multiplier"
-                  value={physics.particleWidth}
-                  onChange={(value) => setPhysics({ ...physics, highlightNode: value })}
+                  value={physics.highlightNodeSize}
+                  onChange={(value) => setPhysics({ ...physics, highlightNodeSize: value })}
                 />
                 <Flex justifyContent="space-between">
                   <Text></Text>
@@ -688,8 +692,8 @@ export const Graph = function (props: GraphProps) {
     nodeVal: (node) => {
       const links = linksByNodeId[node.id!] ?? []
       const basicSize = 3 + links.length
-      const highlightSize = highlightedNodes[node.id!] ? 2 : 0
-      return basicSize + highlightSize
+      const highlightSize = highlightedNodes[node.id!] ? physics.highlightNodeSize : 1
+      return basicSize * highlightSize
     },
     nodeCanvasObject: (node, ctx, globalScale) => {
       if (!physics.labels) {
@@ -743,7 +747,7 @@ export const Graph = function (props: GraphProps) {
     },
     nodeCanvasObjectMode: () => 'after',
 
-    linkDirectionalParticles: physics.particles,
+    linkDirectionalParticles: physics.particles ? physics.particlesNumber : undefined,
     linkColor: (link) => {
       const linkIsHighlighted =
         (link.source as NodeObject).id! === centralHighlightedNode?.id! ||
@@ -756,9 +760,9 @@ export const Graph = function (props: GraphProps) {
         (link.source as NodeObject).id! === centralHighlightedNode?.id! ||
         (link.target as NodeObject).id! === centralHighlightedNode?.id!
 
-      return linkIsHighlighted ? 2 * physics.linkWidth : physics.linkWidth
+      return linkIsHighlighted ? physics.highlightLinkSize * physics.linkWidth : physics.linkWidth
     },
-    linkDirectionalParticleWidth: physics.particleWidth,
+    linkDirectionalParticleWidth: physics.particlesWidth,
 
     d3AlphaDecay: physics.alphaDecay,
     d3AlphaMin: physics.alphaMin,
-- 
cgit v1.2.3