Follow the current Emacs node in real time

1 files changed, 18 insertions, 11 deletions

diff --git a/pages/index.tsx b/pages/index.tsx
index 522b047..e0619ba 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -10,7 +10,6 @@ import { OrgRoamGraphReponse, OrgRoamLink, OrgRoamNode } from '../api'
 import { GraphData, NodeObject } from 'force-graph'
 
 import { useWindowSize } from '@react-hook/window-size'
-import useConstant from 'use-constant'
 
 import {
   Accordion,
@@ -139,7 +138,7 @@ export function GraphPage() {
   const [physics, setPhysics] = usePersistantState('physics', initialPhysics)
   const [theme, setTheme] = useState(initialTheme)
   const [graphData, setGraphData] = useState<GraphData | null>(null)
-  const [emacsNode, setEmacsNode] = useState<string>('')
+  const [emacsNodeId, setEmacsNodeId] = useState<string | null>(null)
 
   const nodeByIdRef = useRef<NodeById>({})
   const linksByNodeIdRef = useRef<LinksByNodeId>({})
@@ -148,9 +147,8 @@ export function GraphPage() {
     const trackEmacs = new EventSource('http://127.0.0.1:35901/current-node-id')
 
     trackEmacs.addEventListener('message', (e) => {
-      setEmacsNode(e.data)
-      console.log(e.data)
-      console.log(emacsNode)
+      const emacsNodeId = e.data
+      setEmacsNodeId(emacsNodeId)
     })
     fetch('http://localhost:35901/theme')
       .then((res) => res.json())
@@ -201,7 +199,7 @@ export function GraphPage() {
           physics,
           graphData,
           threeDim,
-          emacsNode,
+          emacsNodeId,
         }}
       />
     </div>
@@ -530,11 +528,11 @@ export interface GraphProps {
   graphData: GraphData
   physics: typeof initialPhysics
   threeDim: boolean
-  emacsNode: string
+  emacsNodeId: string | null
 }
 
 export const Graph = function (props: GraphProps) {
-  const { physics, graphData, threeDim, linksByNodeId, emacsNode } = props
+  const { physics, graphData, threeDim, linksByNodeId, emacsNodeId } = props
 
   const graph2dRef = useRef<any>(null)
   const graph3dRef = useRef<any>(null)
@@ -547,6 +545,16 @@ export const Graph = function (props: GraphProps) {
   const [hoverNode, setHoverNode] = useState<NodeObject | null>(null)
   const [scope, setScope] = useState<Scope>({ nodeIds: [] })
 
+  useEffect(() => {
+    if (!emacsNodeId) {
+      return
+    }
+
+    setScope({
+      nodeIds: [emacsNodeId],
+    })
+  }, [emacsNodeId])
+
   const centralHighlightedNode = hoverNode
   const highlightedNodes = (() => {
     if (!centralHighlightedNode) {
@@ -687,9 +695,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!] ? 2 : 0
-      return basicSize + highlightSize
+      return 3 + links.length
     },
     nodeCanvasObject: (node, ctx, globalScale) => {
       if (!physics.labels) {
@@ -752,6 +758,7 @@ export const Graph = function (props: GraphProps) {
       return linkIsHighlighted ? '#a991f1' : '#666666'
     },
     linkWidth: (link) => {
+      return physics.linkWidth
       const linkIsHighlighted =
         (link.source as NodeObject).id! === centralHighlightedNode?.id! ||
         (link.target as NodeObject).id! === centralHighlightedNode?.id!