From 73308af061af5e17ac7d4a73fa027a2f303c70dd Mon Sep 17 00:00:00 2001
From: Kirill Rogovoy <kirill@rogovoy.me>
Date: Fri, 23 Jul 2021 11:02:26 +0300
Subject: Update graph data when Emacs node changes + minor improvements

---
 pages/index.tsx | 98 +++++++++++++++++++++++++--------------------------------
 1 file changed, 43 insertions(+), 55 deletions(-)

(limited to 'pages')

diff --git a/pages/index.tsx b/pages/index.tsx
index c278394..a020545 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -147,19 +147,8 @@ export function GraphPage() {
   const nodeByIdRef = useRef<NodeById>({})
   const linksByNodeIdRef = useRef<LinksByNodeId>({})
 
-  useEffect(() => {
-    const trackEmacs = new EventSource('http://127.0.0.1:35901/current-node-id')
-
-    trackEmacs.addEventListener('message', (e) => {
-      const emacsNodeId = e.data
-      setEmacsNodeId(emacsNodeId)
-    })
-    fetch('http://localhost:35901/theme')
-      .then((res) => res.json())
-      .then((emacsTheme) => {
-        setTheme(emacsTheme)
-      })
-    fetch('http://localhost:35901/graph')
+  const updateGraphData = () => {
+    return fetch('http://localhost:35901/graph')
       .then((res) => res.json())
       .then((orgRoamGraphData: OrgRoamGraphReponse) => {
         nodeByIdRef.current = Object.fromEntries(
@@ -179,8 +168,32 @@ export function GraphPage() {
         const orgRoamGraphDataClone = JSON.parse(JSON.stringify(orgRoamGraphData))
         setGraphData(orgRoamGraphDataClone)
       })
+  }
+
+  useEffect(() => {
+    const trackEmacs = new EventSource('http://127.0.0.1:35901/current-node-id')
+
+    trackEmacs.addEventListener('message', (e) => {
+      const emacsNodeId = e.data
+      setEmacsNodeId(emacsNodeId)
+    })
+
+    fetch('http://localhost:35901/theme')
+      .then((res) => res.json())
+      .then((emacsTheme) => {
+        setTheme(emacsTheme)
+      })
+
+    updateGraphData()
   }, [])
 
+  useEffect(() => {
+    if (!emacsNodeId) {
+      return
+    }
+    updateGraphData()
+  }, [emacsNodeId])
+
   const [threeDim, setThreeDim] = useState(false)
   const [showTweaks, setShowTweaks] = useState(true)
 
@@ -554,7 +567,7 @@ export interface GraphProps {
 }
 
 export const Graph = function (props: GraphProps) {
-  const { physics, graphData, threeDim, linksByNodeId, emacsNodeId } = props
+  const { physics, graphData, threeDim, linksByNodeId, emacsNodeId, nodeById } = props
 
   const graph2dRef = useRef<any>(null)
   const graph3dRef = useRef<any>(null)
@@ -625,7 +638,7 @@ export const Graph = function (props: GraphProps) {
             nodes: scopedNodes,
             links: scopedLinks,
           },
-    [scope],
+    [scope, JSON.stringify(Object.keys(nodeById))],
   )
 
   // make sure the camera position and zoom or fine when the list of nodes to render is changed
@@ -642,31 +655,10 @@ export const Graph = function (props: GraphProps) {
     ;(async () => {
       const fg = threeDim ? graph3dRef.current : graph2dRef.current
       const d3 = await d3promise
-      if (physics.gravityOn) {
-        fg.d3Force('x', d3.forceX().strength(physics.gravity))
-        fg.d3Force('y', d3.forceY().strength(physics.gravity))
-        if (threeDim) {
-          if (physics.galaxy) {
-            fg.d3Force('x', d3.forceX().strength(physics.gravity / 5))
-            fg.d3Force('z', d3.forceZ().strength(physics.gravity / 5))
-          } else {
-            fg.d3Force('x', d3.forceX().strength(physics.gravity))
-            fg.d3Force('z', d3.forceZ().strength(physics.gravity))
-          }
-        } else {
-          fg.d3Force('z', null)
-        }
-      } else {
-        fg.d3Force('x', null)
-        fg.d3Force('y', null)
-        threeDim ? fg.d3Force('z', null) : null
-      }
-      fg.d3Force('link').strength(physics.linkStrength)
-      fg.d3Force('link').iterations(physics.linkIts)
-      physics.collision
-        ? fg.d3Force('collide', d3.forceCollide().radius(20))
-        : fg.d3Force('collide', null)
-      fg.d3Force('charge').strength(physics.charge)
+      // fg.d3Force('x', null)
+      //   fg.d3Force('y', null)
+      fg.d3Force('collide', d3.forceCollide().radius(10))
+      // fg.d3Force('charge').strength(1)
     })()
   })
 
@@ -730,9 +722,7 @@ export const Graph = function (props: GraphProps) {
     nodeRelSize: physics.nodeRel,
     nodeVal: (node) => {
       const links = linksByNodeId[node.id!] ?? []
-      const basicSize = 3 + links.length
-      const highlightSize = highlightedNodes[node.id!] ? physics.highlightNodeSize : 1
-      return basicSize * highlightSize
+      return links.length
     },
     nodeCanvasObject: (node, ctx, globalScale) => {
       if (!physics.labels) {
@@ -771,15 +761,15 @@ export const Graph = function (props: GraphProps) {
       )
 
       // draw label text
-      const textOpacity = (Object.keys(highlightedNodes).length === 0
-        ? fadeFactor
-        : highlightedNodes[node.id!]
+      const textOpacity =
+        Object.keys(highlightedNodes).length === 0
+          ? fadeFactor
+          : highlightedNodes[node.id!]
           ? 1
-          : 0.3 * fadeFactor)
+          : 0.3 * fadeFactor
       ctx.textAlign = 'center'
       ctx.textBaseline = 'middle'
-      ctx.fillStyle =
-        `rgb(255, 255, 255, ${textOpacity})`
+      ctx.fillStyle = `rgb(255, 255, 255, ${textOpacity})`
       ctx.font = `${fontSize}px Sans-Serif`
       ctx.fillText(label, node.x!, node.y!)
     },
@@ -793,14 +783,12 @@ export const Graph = function (props: GraphProps) {
 
       return linkIsHighlighted ? '#a991f1' : '#666666'
     },
-    linkWidth: () => {
-      return physics.linkWidth
-    },
+    linkWidth: physics.linkWidth,
     linkDirectionalParticleWidth: physics.particlesWidth,
 
-    d3AlphaDecay: physics.alphaDecay,
-    d3AlphaMin: physics.alphaMin,
-    d3VelocityDecay: physics.velocityDecay,
+    // d3AlphaDecay: physics.alphaDecay,
+    // d3AlphaMin: physics.alphaMin,
+    // d3VelocityDecay: physics.velocityDecay,
 
     onNodeClick: onNodeClick,
     onBackgroundClick: () => {
-- 
cgit v1.2.3