1 files changed, 33 insertions, 23 deletions

diff --git a/pages/index.tsx b/pages/index.tsx
index e0619ba..16a0f31 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 = {
@@ -283,7 +287,7 @@ export interface TweakProps {
   setPhysics: any
   threeDim: boolean
 }
-export const Tweaks = function (props: TweakProps) {
+export const Tweaks = function(props: TweakProps) {
   const { physics, setPhysics, threeDim } = props
   return (
     <Box
@@ -446,36 +450,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>
@@ -531,7 +535,7 @@ export interface GraphProps {
   emacsNodeId: string | null
 }
 
-export const Graph = function (props: GraphProps) {
+export const Graph = function(props: GraphProps) {
   const { physics, graphData, threeDim, linksByNodeId, emacsNodeId } = props
 
   const graph2dRef = useRef<any>(null)
@@ -599,12 +603,12 @@ export const Graph = function (props: GraphProps) {
     scope.nodeIds.length === 0
       ? graphData
       : {
-          nodes: scopedNodes,
-          links: scopedLinks,
-        }
+        nodes: scopedNodes,
+        links: scopedLinks,
+      }
 
   useEffect(() => {
-    ;(async () => {
+    ; (async () => {
       const fg = threeDim ? graph3dRef.current : graph2dRef.current
       const d3 = await d3promise
       if (physics.gravityOn) {
@@ -695,7 +699,13 @@ export const Graph = function (props: GraphProps) {
     nodeRelSize: physics.nodeRel,
     nodeVal: (node) => {
       const links = linksByNodeId[node.id!] ?? []
+<<<<<<< variant A
+      const basicSize = 3 + links.length
+      const highlightSize = highlightedNodes[node.id!] ? physics.highlightNodeSize : 1
+      return basicSize * highlightSize
+>>>>>>> variant B
       return 3 + links.length
+======= end
     },
     nodeCanvasObject: (node, ctx, globalScale) => {
       if (!physics.labels) {
@@ -749,7 +759,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! ||
@@ -763,9 +773,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,