1 files changed, 36 insertions, 28 deletions

diff --git a/pages/index.tsx b/pages/index.tsx
index 04f1fc7..06c7dc2 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -71,10 +71,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,
@@ -91,6 +92,9 @@ const initialPhysics = {
   click: 'select',
   doubleClick: 'local',
   iterations: 0,
+  highlight: true,
+  highlightNodeSize: 2,
+  highlightLinkSize: 2,
 }
 
 const initialTheme = {
@@ -186,16 +190,18 @@ export function GraphPage() {
 
   return (
     <div>
-      {showTweeks && <Tweaks
-        {...{
-          physics,
-          setPhysics,
-          threeDim,
-        }}
-        onClose={() => {
-          setShowTweeks(false)
-        }}
-      />}
+      {showTweeks && (
+        <Tweaks
+          {...{
+            physics,
+            setPhysics,
+            threeDim,
+          }}
+          onClose={() => {
+            setShowTweeks(false)
+          }}
+        />
+      )}
       <Graph
         nodeById={nodeByIdRef.current!}
         linksByNodeId={linksByNodeIdRef.current!}
@@ -451,36 +457,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>
@@ -700,7 +706,9 @@ export const Graph = function (props: GraphProps) {
     nodeRelSize: physics.nodeRel,
     nodeVal: (node) => {
       const links = linksByNodeId[node.id!] ?? []
-      return 3 + links.length
+      const basicSize = 3 + links.length
+      const highlightSize = highlightedNodes[node.id!] ? physics.highlightNodeSize : 1
+      return basicSize * highlightSize
     },
     nodeCanvasObject: (node, ctx, globalScale) => {
       if (!physics.labels) {
@@ -754,7 +762,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! ||
@@ -768,9 +776,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,