From ad3c2df63a7c7c7cdf82b13cc371bdb3b1a1ccb4 Mon Sep 17 00:00:00 2001
From: Kirill Rogovoy <kirill@rogovoy.me>
Date: Thu, 29 Jul 2021 18:26:06 +0300
Subject: Refactoring: kill superfluous useMemo

---
 pages/index.tsx | 56 ++++++++++++++++++++++----------------------------------
 1 file changed, 22 insertions(+), 34 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 08bf12e..18cce7c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -240,6 +240,16 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
   const [hoverNode, setHoverNode] = useState<NodeObject | null>(null)
   const [scope, setScope] = useState<Scope>({ nodeIds: [] })
 
+  const getNeighborNodes = (id: string) => {
+    const links = linksByNodeId[id]! ?? []
+    return Object.fromEntries(
+      [id as string, ...links.flatMap((link) => [link.source, link.target])].map((nodeId) => [
+        nodeId,
+        {},
+      ]),
+    )
+  }
+
   useEffect(() => {
     if (!emacsNodeId) {
       return
@@ -247,21 +257,17 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
     const fg = graphRef.current
     if (behavior.followLocalOrZoom) {
       setScope({ nodeIds: [emacsNodeId] })
+      setTimeout(() => {
+        fg?.zoomToFit(1000, numberWithinRange(20, 200, windowWidth / 8), (node: NodeObject) =>
+      getNeighborNodes(emacsNodeId)[node.id!],
+      )
+      }, 1)
     } else {
       fg?.zoomToFit(1000, 200, (node: NodeObject) => getNeighborNodes(emacsNodeId)[node.id!])
       setHoverNode(nodeById[emacsNodeId] as NodeObject)
     }
   }, [emacsNodeId])
 
-  const getNeighborNodes = (id: string) => {
-    const links = linksByNodeId[id]! ?? []
-    return Object.fromEntries(
-      [id as string, ...links.flatMap((link) => [link.source, link.target])].map((nodeId) => [
-        nodeId,
-        {},
-      ]),
-    )
-  }
   const centralHighlightedNode = useRef<NodeObject | null>(null)
   centralHighlightedNode.current = hoverNode
   const highlightedNodes = useMemo(() => {
@@ -282,8 +288,8 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
     )
   }, [centralHighlightedNode.current, linksByNodeId])
 
-  const filteredNodes = useMemo(() => {
-    return graphData.nodes.filter((node) => {
+  const scopedGraphData = useMemo(() => {
+    const filteredNodes = graphData.nodes.filter((node) => {
       const links = linksByNodeId[node.id as string] ?? []
       if (!filter.orphans) {
         return true
@@ -299,17 +305,13 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
 
       return !links.some((link) => !['parent', 'cite'].includes(link.type))
     })
-  }, [filter, graphData.nodes, linksByNodeId])
 
-  const filteredLinks = useMemo(() => {
-    return graphData.links.filter((linkArg) => {
+    const filteredLinks = graphData.links.filter((linkArg) => {
       const link = linkArg as OrgRoamLink
       return link.type !== 'cite' && (filter.parents || link.type !== 'parent')
     })
-  }, [filter, JSON.stringify(graphData.links)])
 
-  const scopedNodes = useMemo(() => {
-    return filteredNodes.filter((node) => {
+    const scopedNodes = filteredNodes.filter((node) => {
       const links = linksByNodeId[node.id as string] ?? []
       return (
         scope.nodeIds.includes(node.id as string) ||
@@ -318,11 +320,9 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
         })
       )
     })
-  }, [filteredNodes, linksByNodeId, scope.nodeIds])
 
-  const scopedNodeIds = scopedNodes.map((node) => node.id as string)
+    const scopedNodeIds = scopedNodes.map((node) => node.id as string)
 
-  const scopedGraphData = useMemo(() => {
     const scopedLinks = filteredLinks.filter((link) => {
       // we need to cover both because force-graph modifies the original data
       // but if we supply the original data on each render, the graph will re-render sporadically
@@ -342,18 +342,6 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
         }
   }, [filter, scope, JSON.stringify(Object.keys(nodeById))])
 
-  // make sure the camera position and zoom are fine when the list of nodes to render is changed
-  useEffect(() => {
-    // this setTimeout was added holistically because the behavior is better when we put
-    // zoomToFit off a little bit
-    setTimeout(() => {
-      const fg = graphRef.current
-      fg?.zoomToFit(1000, numbereWithinRange(20, 200, windowWidth / 8), (node: NodeObject) =>
-        scopedNodeIds.some((n) => n === node.id),
-      )
-    }, 1)
-  }, [JSON.stringify(scopedNodeIds)])
-
   useEffect(() => {
     ;(async () => {
       const fg = graphRef.current
@@ -481,7 +469,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
     const neighbors = filter.parents ? linklen : linklen - parentCiteNeighbors!
 
     return visuals.nodeColorScheme[
-      numbereWithinRange(neighbors, 0, visuals.nodeColorScheme.length - 1)
+      numberWithinRange(neighbors, 0, visuals.nodeColorScheme.length - 1)
     ]
   }
   const getLinkNodeColor = (sourceId: string, targetId: string) => {
@@ -708,6 +696,6 @@ function isLinkRelatedToNode(link: LinkObject, node: NodeObject | null) {
   )
 }
 
-function numbereWithinRange(num: number, min: number, max: number) {
+function numberWithinRange(num: number, min: number, max: number) {
   return Math.min(Math.max(num, min), max)
 }
-- 
cgit v1.2.3