feat(algos): merge

2 files changed, 47 insertions, 74 deletions

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 9833717..976785c 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -180,7 +180,13 @@ function SubApp(props: any) {
               backgroundColor: highlightColor,
             },
             filledTrack: {
-              backgroundColor: 'gray.200',
+              backgroundColor: 'gray.400',
+            },
+            track: {
+              backgroundColor: 'gray.400',
+              borderColor: 'gray.400',
+              borderWidth: '5px',
+              borderRadius: 'lg',
             },
           }),
         },
diff --git a/pages/index.tsx b/pages/index.tsx
index a2c99be..1d8ae78 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -43,6 +43,7 @@ import {
   initialBehavior,
   initialColoring,
   initialFilter,
+  initialLocal,
   initialMouse,
   initialPhysics,
   initialVisuals,
@@ -54,6 +55,7 @@ import { Tweaks } from '../components/Tweaks'
 import { usePersistantState } from '../util/persistant-state'
 import { ThemeContext, ThemeContextProps } from '../util/themecontext'
 import { openNodeInEmacs } from '../util/webSocketFunctions'
+import { drawLabels } from '../components/Graph/drawLabels'
 
 const d3promise = import('d3-force-3d')
 
@@ -109,6 +111,8 @@ export function GraphPage() {
   const [behavior, setBehavior] = usePersistantState('behavior', initialBehavior)
   const [mouse, setMouse] = usePersistantState('mouse', initialMouse)
   const [coloring, setColoring] = usePersistantState('coloring', initialColoring)
+  const [local, setLocal] = usePersistantState('local', initialLocal)
+
   const [
     previewNodeState,
     {
@@ -546,6 +550,8 @@ export function GraphPage() {
           setTagColors,
           coloring,
           setColoring,
+          local,
+          setLocal,
         }}
         tags={tagsRef.current}
       />
@@ -582,6 +588,7 @@ export function GraphPage() {
               graphRef,
               clusterRef,
               coloring,
+              local,
             }}
           />
         )}
@@ -689,6 +696,7 @@ export interface GraphProps {
   visuals: typeof initialVisuals
   behavior: typeof initialBehavior
   mouse: typeof initialMouse
+  local: typeof initialLocal
   scope: Scope
   setScope: any
   webSocket: any
@@ -723,6 +731,7 @@ export const Graph = function (props: GraphProps) {
     behavior,
     mouse,
     scope,
+    local,
     setScope,
     webSocket,
     tagColors,
@@ -922,7 +931,7 @@ export const Graph = function (props: GraphProps) {
     }
     const oldScopedNodes = scope.nodeIds.length > 1 ? scopedGraphData.nodes : []
     const oldScopedNodeIds = oldScopedNodes.map((node) => node.id as string)
-    const neighbs = findNthNeighbors(scope.nodeIds, 1)
+    const neighbs = findNthNeighbors(scope.nodeIds, local.neighbors)
     const newScopedNodes = filteredGraphData.nodes
       .filter((node) => {
         if (oldScopedNodes.length) {
@@ -970,7 +979,14 @@ export const Graph = function (props: GraphProps) {
     const scopedLinks = [...oldScopedLinks, ...newScopedLinks]
 
     setScopedGraphData({ nodes: scopedNodes, links: scopedLinks })
-  }, [filter, scope, JSON.stringify(graphData), filteredGraphData.links, filteredGraphData.nodes])
+  }, [
+    local.neighbors,
+    filter,
+    scope,
+    JSON.stringify(graphData),
+    filteredGraphData.links,
+    filteredGraphData.nodes,
+  ])
 
   useEffect(() => {
     ;(async () => {
@@ -1150,6 +1166,7 @@ export const Graph = function (props: GraphProps) {
 
   const getNodeColor = (node: OrgRoamNode, theme: any) => {
     const needsHighlighting = highlightedNodes[node.id!] || previouslyHighlightedNodes[node.id!]
+    //const needsHighlighting = hoverNode?.id === node.id! || lastHoverNode?.current?.id === node.id
     // if we are matching the node color and don't have a highlight color
     // or we don't have our own scheme and we're not being highlighted
     if (visuals.emacsNodeColor && node.id === emacsNodeId) {
@@ -1222,7 +1239,7 @@ export const Graph = function (props: GraphProps) {
     warmupTicks: scope.nodeIds.length === 1 ? 100 : scope.nodeIds.length > 1 ? 20 : 0,
     //onZoom: ({ k, x, y }) => setZoom(k),
     onZoom: ({ k, x, y }) => (scaleRef.current = k),
-    //nodeLabel: (node) => (node as OrgRoamNode).title,
+    //nodeLabel: (node) => ,
     nodeColor: (node) => {
       return getNodeColor(node as OrgRoamNode, theme)
     },
@@ -1231,76 +1248,23 @@ export const Graph = function (props: GraphProps) {
       return nodeSize(node) / Math.pow(scaleRef.current, visuals.nodeZoomSize)
     },
     nodeCanvasObject: (node, ctx, globalScale) => {
-      if (!node) {
-        return
-      }
-      if (dragging) {
-        return
-      }
-
-      if (!visuals.labels) {
-        return
-      }
-      const wasHighlightedNode = previouslyHighlightedNodes[node.id!]
-
-      if (
-        (globalScale <= visuals.labelScale || visuals.labels === 1) &&
-        !highlightedNodes[node.id!] &&
-        !wasHighlightedNode
-      ) {
-        return
-      }
-
-      const nodeTitle = (node as OrgRoamNode).title!
-      const label = nodeTitle.substring(0, visuals.labelLength)
-      const fontSize = visuals.labelFontSize / (0.75 * Math.min(Math.max(0.5, globalScale), 3))
-      const textWidth = ctx.measureText(label).width
-      const bckgDimensions = [textWidth * 1.1, fontSize].map((n) => n + fontSize * 0.5) as [
-        number,
-        number,
-      ] // some padding
-
-      const fadeFactor = Math.min((3 * (globalScale - visuals.labelScale)) / visuals.labelScale, 1)
-
-      // draw label background
-      const getLabelOpacity = () => {
-        if (visuals.labels === 1) {
-          return opacity
-        }
-        if (globalScale <= visuals.labelScale) {
-          return opacity
-        }
-        return highlightedNodes[node.id!] || previouslyHighlightedNodes[node.id!]
-          ? Math.max(fadeFactor, opacity)
-          : 1 * fadeFactor * (-1 * (visuals.highlightFade * opacity - 1))
-      }
-      const nodeS = 8 * Math.cbrt(nodeSize(node) * visuals.nodeRel)
-      if (visuals.labelBackgroundColor && visuals.labelBackgroundOpacity) {
-        const backgroundOpacity = getLabelOpacity() * visuals.labelBackgroundOpacity
-        const labelBackground = hexToRGBA(labelBackgroundColor, backgroundOpacity)
-        ctx.fillStyle = labelBackground
-        ctx.fillRect(
-          node.x! - bckgDimensions[0] / 2,
-          node.y! - bckgDimensions[1] / 2 + nodeS,
-          ...bckgDimensions,
-        )
-      }
-
-      // draw label text
-      const textOpacity = getLabelOpacity()
-      ctx.textAlign = 'center'
-      ctx.textBaseline = 'middle'
-      const labelText = hexToRGBA(labelTextColor, textOpacity)
-      ctx.fillStyle = labelText
-      ctx.font = `${fontSize}px Sans-Serif`
-      const wordsArray = wrap(label, { width: visuals.labelWordWrap }).split('\n')
-
-      const truncatedWords =
-        nodeTitle.length > visuals.labelLength
-          ? [...wordsArray.slice(0, -1), `${wordsArray.slice(-1)}...`]
-          : wordsArray
-      truncatedWords.forEach((word, index) => {
-        ctx.fillText(word, node.x!, node.y! + nodeS + visuals.labelLineSpace * fontSize * index)
+      drawLabels({
+        nodeRel: visuals.nodeRel,
+        filteredLinksByNodeId: filteredLinksByNodeIdRef.current,
+        lastHoverNode: lastHoverNode.current,
+        ...{
+          node,
+          ctx,
+          globalScale,
+          highlightedNodes,
+          previouslyHighlightedNodes,
+          visuals,
+          opacity,
+          nodeSize,
+          labelTextColor,
+          labelBackgroundColor,
+          hoverNode,
+        },
       })
     },
     nodeCanvasObjectMode: () => 'after',
@@ -1392,6 +1356,9 @@ export const Graph = function (props: GraphProps) {
       if (!visuals.highlight) {
         return
       }
+      if (dragging) {
+        return
+      }
 
       if (!hoverNode) {
         fadeOutCancel()