handled all the link color cases

2 files changed, 101 insertions, 24 deletions

diff --git a/pages/_app.tsx b/pages/_app.tsx
index c2edb69..f8ff942 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -110,7 +110,6 @@ function SubApp(props: any) {
   const missingColor = d3int.interpolate(emacsTheme.base1, emacsTheme.base2)(0.2)
   const borderColor = getBorderColor()
   const theme = useMemo(() => {
-    console.log('ii')
     return {
       colors: {
         white: emacsTheme.bg,
@@ -171,6 +170,8 @@ function SubApp(props: any) {
             },
             ghost: {
               color: highlightColor + '.500',
+              _hover: { bg: `inherit`, border: '1px solid', borderColor: highlightColor + '.500' },
+              _active: { color: `inherit`, bg: highlightColor + '.500' },
             },
           },
         },
diff --git a/pages/index.tsx b/pages/index.tsx
index caf216c..bb801a4 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -133,13 +133,10 @@ export function GraphPage() {
       console.log(typeof message.type)
       switch (message.type) {
         case 'graphdata':
-          console.log('hey')
           parseGraphData(message.data)
           break
         case 'theme':
           console.log('Received theme data')
-          console.log(message.data)
-          console.log(setEmacsTheme)
           setEmacsTheme(message.data)
           break
         case 'command':
@@ -157,7 +154,6 @@ export function GraphPage() {
                 ].map((nodeId) => [nodeId, {}]),
               )
               /* zoomToFit(500, 200, (node: OrgRoamNode)=>nodes[node.id!]) */
-              console.log(nodes)
             }
             default:
               console.log('oopsie whoopsie')
@@ -437,6 +433,35 @@ export const Graph = function (props: GraphProps) {
     [theme],
   )
 
+  const highlightColors = useMemo(() => {
+    const allColors = [].concat(
+      visuals.nodeColorScheme /* && visuals.nodeColorScheme.map((c) => theme.colors[c][500]))  */ ||
+        [],
+      visuals.linkColorScheme /* && theme.colors.gray[visuals.linkColorScheme])]]  */ || [],
+      visuals.linkHighlight /* && theme.colors[visuals.linkHighlight][500])  */ || [],
+      visuals.nodeHighlight /* && theme.colors[visuals.linkHighlight][500]) */ || [],
+    )
+
+    console.log(visuals.linkColorScheme)
+    const getColor = (c) => (isNaN(c) ? theme.colors[c][500] : theme.colors.gray[c])
+    const highlightColors = Object.fromEntries(
+      allColors.map((color) => {
+        const color1 = getColor(color)
+        const crisscross = allColors.map((color2) => [
+          color2,
+          d3int.interpolate(color1, getColor(color2)),
+        ])
+        return [color, Object.fromEntries(crisscross)]
+      }),
+    )
+    console.log(highlightColors)
+    return highlightColors
+  }, [
+    visuals.nodeColorScheme,
+    visuals.linkHighlight,
+    visuals.nodeHighlight,
+    visuals.linkColorScheme,
+  ])
   const highlightedLinks = useMemo(() => linksByNodeId[hoverNode?.id!] ?? [], [hoverNode])
 
   const previouslyHighlightedLinks = useMemo(
@@ -455,11 +480,67 @@ export const Graph = function (props: GraphProps) {
     [hoverNode, previouslyHighlightedLinks, lastHoverNode],
   )
 
+  const getNodeColorById = (id: string) => {
+    const linklen = linksByNodeId[id!]?.length ?? 0
+    const parentCiteNeighbors = linklen
+      ? linksByNodeId[id!]?.filter((link) => link.type === 'parent' || link.type === 'cite').length
+      : 0
+    const neighbors = filter.parents ? linklen : linklen - parentCiteNeighbors!
+
+    return visuals.nodeColorScheme[
+      numbereWithinRange(neighbors, 0, visuals.nodeColorScheme.length - 1)
+    ]
+  }
+  const getLinkNodeColor = (link: OrgRoamLinkObject) =>
+    linksByNodeId[link.target.id!]?.length < linksByNodeId[link.source.id!]?.length
+      ? getNodeColorById(link.target.id!)
+      : getNodeColorById(link.source.id!)
+
+  const getLinkColor = (link: OrgRoamLinkObject) => {
+    // I'm so sorry
+    const linkIsHighlighted = isLinkRelatedToNode(link, centralHighlightedNode)
+    const linkWasHighlighted = isLinkRelatedToNode(link, lastHoverNode.current)
+    const needsHighlighting = linkIsHighlighted || linkWasHighlighted
+    // 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.linkHighlight && !visuals.linkColorScheme && !needsHighlighting) {
+      const nodeColor = getLinkNodeColor(link)
+      return theme.colors[nodeColor][500]
+    }
+    if (!needsHighlighting && !visuals.linkColorScheme) {
+      const nodeColor = getLinkNodeColor(link)
+      return theme.colors[nodeColor][500]
+    }
+    if (!needsHighlighting && !visuals.linkColorScheme) {
+      const nodeColor = getLinkNodeColor(link)
+      return theme.colors[nodeColor][500]
+    }
+    if (!needsHighlighting) {
+      return theme.colors.gray[visuals.linkColorScheme]
+    }
+
+    if (!visuals.linkHighlight && !visuals.linkColorScheme) {
+      const nodeColor = getLinkNodeColor(link)
+      return theme.colors[nodeColor][500]
+    }
+    if (!visuals.linkHighlight) {
+      return theme.colors.gray[visuals.linkColorScheme]
+    }
+    if (!visuals.linkColorScheme) {
+      return highlightColors[getLinkNodeColor(link)][visuals.linkHighlight](opacity)
+    }
+    return highlightColors[visuals.linkColorScheme][visuals.linkHighlight](opacity)
+  }
+
+  const getLinkBaseColor = (link: OrgRoamLinkObject) => {
+    if (!visuals.linkColorScheme) {
+    }
+  }
   const graphCommonProps: ComponentPropsWithoutRef<typeof TForceGraph2D> = {
     graphData: scopedGraphData,
     width: windowWidth,
     height: windowHeight,
-    backgroundColor: theme.white,
+    backgroundColor: theme.colors.gray[visuals.backgroundColor],
     nodeLabel: (node) => (node as OrgRoamNode).title,
     nodeColor: (node) => {
       if (!physics.colorful) {
@@ -468,20 +549,9 @@ export const Graph = function (props: GraphProps) {
           : interGray(opacity)
       }
       if (node.id === emacsNodeId) {
-        return theme.colors['red'][500]
+        return theme.colors[visuals.emacsNodeColor][500]
       }
 
-      const palette = [
-        'pink',
-        'purple',
-        'blue',
-        'cyan',
-        'teal',
-        'green',
-        'yellow',
-        'orange',
-        'red',
-      ].filter((color) => !['red'].includes(color))
       // otherwise links with parents get shown as having one note
       const linklen = linksByNodeId[node.id!]?.length ?? 0
       const parentCiteNeighbors = linklen
@@ -490,7 +560,11 @@ export const Graph = function (props: GraphProps) {
         : 0
       const neighbors = filter.parents ? linklen : linklen - parentCiteNeighbors!
 
-      return theme.colors[palette[numbereWithinRange(neighbors, 0, palette.length - 1)]][500]
+      return theme.colors[
+        visuals.nodeColorScheme[
+          numbereWithinRange(neighbors, 0, visuals.nodeColorScheme.length - 1)
+        ]
+      ][500]
     },
     nodeRelSize: physics.nodeRel,
     nodeVal: (node) => {
@@ -570,11 +644,13 @@ export const Graph = function (props: GraphProps) {
 
     linkDirectionalParticles: physics.particles ? physics.particlesNumber : undefined,
     linkColor: (link) => {
-      const linkIsHighlighted = isLinkRelatedToNode(link, centralHighlightedNode)
-      const linkWasHighlighted = isLinkRelatedToNode(link, lastHoverNode.current)
-      return linkIsHighlighted || linkWasHighlighted
-        ? interHighlight(opacity)
-        : theme.colors.gray[500]
+      /* if (!physics.highlight || !visuals.linkHighlight) {
+       *   return visuals.linkColorScheme
+       *     ? theme.colors.gray[visuals.linkColorScheme]
+       *     : theme.colors[getLinkNodeColor(link)][500]
+       * } */
+
+      return getLinkColor(link)
     },
     linkWidth: (link) => {
       const linkIsHighlighted = isLinkRelatedToNode(link, centralHighlightedNode)