feat(preview): proper file preview with api routing

author: Thomas F. K. Jorna <[email protected]> 2021-10-08 23:39:37 +0200
committer: Thomas F. K. Jorna <[email protected]> 2021-10-08 23:39:37 +0200
commit: 2384b30a244c7d6477e54de5385fe7f1cc62d43a (patch)
tree: 55c9f82f9475249a7f91ac44e408e04e9f1c9560 /pages
parent: fd4edbd6a854275c10c5b21173f0875921d547d1 (diff)
3 files changed, 107 insertions, 101 deletions
diff --git a/pages/api/notes/[[...slug]].ts b/pages/api/notes/[[...slug]].ts
new file mode 100644
index 0000000..b0df82a
--- /dev/null
+++ b/pages/api/notes/[[...slug]].ts
@@ -0,0 +1,17 @@
+import fs from 'fs'
+
+export default async function handler(req: any, res: any) {
+  const { slug } = req.query
+  const stuff = slug.join('')
+  console.log(stuff)
+  const uri = decodeURIComponent(slug)
+  const prefix = uri.includes('\\') ? '' : '/'
+  const path = `${uri}`
+  try {
+    const text = fs.readFileSync(`${path}`, { encoding: 'utf-8' })
+    res.end(`${text}`)
+  } catch (e) {
+    res.end(`Oopsie Whoopsie! We did a fucky wucky!`)
+    console.log(e)
+  }
+}
diff --git a/pages/filesystemtest.tsx b/pages/filesystemtest.tsx
deleted file mode 100644
index 4cadf0e..0000000
--- a/pages/filesystemtest.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { Button } from '@chakra-ui/react'
-
-async function verifyPermission(fileHandle: any, readWrite: any) {
-  const options: any = {}
-  if (readWrite) {
-    options.mode = 'readwrite'
-  }
-  // Check if permission was already granted. If so, return true.
-  if ((await fileHandle.queryPermission(options)) === 'granted') {
-    return true
-  }
-  // Request permission. If the user grants permission, return true.
-  if ((await fileHandle.requestPermission(options)) === 'granted') {
-    return true
-  }
-  // The user didn't grant permission, so return false.
-  return false
-}
-
-export default function Testpage() {
-  const [text, setText] = useState(0)
-  const [dirHandle, setDirhandle] = useState<any>()
-  const [perm, setPerm] = useState(false)
-
-  const pick = async () => {
-    const dirHandle = await window.showDirectoryPicker()
-    console.log(dirHandle)
-    setDirhandle(dirHandle)
-  }
-
-  useEffect(() => {
-    ;(async () => {
-      console.log(dirHandle)
-      const newFileHandle = dirHandle ? await dirHandle.getFileHandle('inbox.org') : null
-      const file = await newFileHandle.getFile()
-      const ttext = await file.text()
-      setText(ttext)
-      const path = newFileHandle ? await dirHandle.resolve(newFileHandle) : null
-      console.log(path)
-    })()
-  }, [dirHandle])
-
-  return (
-    <div>
-      <Button onClick={() => pick()}> Press </Button>
-      <p>{text}</p>
-      <Button onClick={() => setPerm(verifyPermission(dirHandle, true))}>Check permission</Button>
-      <p>{perm ? '👍' : '👎'}</p>
-    </div>
-  )
-}
diff --git a/pages/index.tsx b/pages/index.tsx
index 48394c0..59fae1a 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -7,6 +7,8 @@ import React, {
   useContext,
   forwardRef,
 } from 'react'
+
+import Head from 'next/head'
 import { usePersistantState } from '../util/persistant-state'
 const d3promise = import('d3-force-3d')
 import * as d3int from 'd3-interpolate'
@@ -22,7 +24,7 @@ import Sidebar from '../components/Sidebar'
 import { useWindowSize } from '@react-hook/window-size'
 import { useAnimation } from '@lilib/hooks'
 
-import { Box, Flex, IconButton, useDisclosure, useTheme } from '@chakra-ui/react'
+import { Box, Flex, IconButton, useDisclosure, useTheme, WithCSSVar } from '@chakra-ui/react'
 
 import {
   initialPhysics,
@@ -57,6 +59,7 @@ const ForceGraph3D = (
 export type NodeById = { [nodeId: string]: OrgRoamNode | undefined }
 export type LinksByNodeId = { [nodeId: string]: OrgRoamLink[] | undefined }
 export type NodesByFile = { [file: string]: OrgRoamNode[] | undefined }
+export type NodeByCite = { [key: string]: OrgRoamNode | undefined }
 export type Tags = string[]
 export type Scope = {
   nodeIds: string[]
@@ -72,7 +75,14 @@ export default function Home() {
   if (!showPage) {
     return null
   }
-  return <GraphPage />
+  return (
+    <>
+      <Head>
+        <title>ORUI</title>
+      </Head>
+      <GraphPage />
+    </>
+  )
 }
 
 export function GraphPage() {
@@ -88,10 +98,12 @@ export function GraphPage() {
   const [behavior, setBehavior] = usePersistantState('behavior', initialBehavior)
   const [mouse, setMouse] = usePersistantState('mouse', initialMouse)
   const [previewNode, setPreviewNode] = useState<NodeObject>({})
+  const [sidebarHighlightedNode, setSidebarHighlightedNode] = useState<OrgRoamNode | null>(null)
   const { isOpen, onOpen, onClose } = useDisclosure()
 
   const nodeByIdRef = useRef<NodeById>({})
   const linksByNodeIdRef = useRef<LinksByNodeId>({})
+  const nodeByCiteRef = useRef<NodeByCite>({})
   const tagsRef = useRef<Tags>([])
   const graphRef = useRef<any>(null)
 
@@ -217,6 +229,22 @@ export function GraphPage() {
     }, {})
 
     const nodes = [...importNodes, ...nonExistantNodes]
+
+    nodeByCiteRef.current = nodes.reduce<NodeByCite>((acc, node) => {
+      const ref = node.properties?.ROAM_REFS as string
+      if (!ref?.includes('cite')) {
+        return acc
+      }
+      const key = ref.replaceAll(/cite:(.*)/g, '$1')
+      if (!key) {
+        return acc
+      }
+      return {
+        ...acc,
+        [key]: node,
+      }
+    }, {})
+
     const orgRoamGraphDataProcessed = {
       nodes,
       links,
@@ -471,6 +499,7 @@ export function GraphPage() {
             setScope,
             tagColors,
             setPreviewNode,
+            sidebarHighlightedNode,
           }}
         />
         <Sidebar
@@ -480,9 +509,11 @@ export function GraphPage() {
             onClose,
             previewNode,
             setPreviewNode,
+            setSidebarHighlightedNode,
           }}
           nodeById={nodeByIdRef.current!}
           linksByNodeId={linksByNodeIdRef.current!}
+          nodeByCite={nodeByCiteRef.current!}
         />
       </Flex>
     </Box>
@@ -505,6 +536,7 @@ export interface GraphProps {
   webSocket: any
   tagColors: { [tag: string]: string }
   setPreviewNode: any
+  sidebarHighlightedNode: OrgRoamNode | null
 }
 
 export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
@@ -524,6 +556,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
     webSocket,
     tagColors,
     setPreviewNode,
+    sidebarHighlightedNode,
   } = props
 
   // react-force-graph does not track window size
@@ -763,27 +796,6 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
     setScopedGraphData({ nodes: scopedNodes, links: scopedLinks })
   }, [filter, scope, graphData])
 
-  centralHighlightedNode.current = hoverNode
-  const highlightedNodes = useMemo(() => {
-    if (!centralHighlightedNode.current) {
-      return {}
-    }
-
-    const links = filteredLinksByNodeIdRef.current[centralHighlightedNode.current.id!]
-    if (!links) {
-      return {}
-    }
-    return Object.fromEntries(
-      [
-        centralHighlightedNode.current.id! as string,
-        ...links.flatMap((link) => [link.source, link.target]),
-      ].map((nodeId) => [nodeId, {}]),
-    )
-  }, [
-    JSON.stringify(centralHighlightedNode.current),
-    JSON.stringify(filteredLinksByNodeIdRef.current),
-  ])
-
   useEffect(() => {
     ;(async () => {
       const fg = graphRef.current
@@ -831,9 +843,36 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
       algorithm: algos[visuals.algorithmName],
     },
   )
+  useEffect(() => {
+    console.log('aaa')
+    if (sidebarHighlightedNode?.id) {
+      setHoverNode(sidebarHighlightedNode)
+    } else {
+      setHoverNode(null)
+    }
+  }, [sidebarHighlightedNode])
+  const highlightedNodes = useMemo(() => {
+    if (!centralHighlightedNode.current) {
+      return {}
+    }
 
+    const links = filteredLinksByNodeIdRef.current[centralHighlightedNode.current.id!]
+    if (!links) {
+      return {}
+    }
+    return Object.fromEntries(
+      [
+        centralHighlightedNode.current.id! as string,
+        ...links.flatMap((link) => [link.source, link.target]),
+      ].map((nodeId) => [nodeId, {}]),
+    )
+  }, [
+    JSON.stringify(centralHighlightedNode.current),
+    JSON.stringify(filteredLinksByNodeIdRef.current),
+  ])
   const lastHoverNode = useRef<OrgRoamNode | null>(null)
   useEffect(() => {
+    centralHighlightedNode.current = hoverNode
     if (hoverNode) {
       lastHoverNode.current = hoverNode as OrgRoamNode
     }
@@ -850,20 +889,13 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
     }
   }, [hoverNode])
 
-  const getThemeColor = (name: string) => {
-    if (!theme) {
-      return
-    }
-    return name.split('.').reduce((o, i) => o[i], theme.colors)
-  }
-
   const highlightColors = useMemo(() => {
     return Object.fromEntries(
       colorList.map((color) => {
-        const color1 = getThemeColor(color)
+        const color1 = getThemeColor(color, theme)
         const crisscross = colorList.map((color2) => [
           color2,
-          d3int.interpolate(color1, getThemeColor(color2)),
+          d3int.interpolate(color1, getThemeColor(color2, theme)),
         ])
         return [color, Object.fromEntries(crisscross)]
       }),
@@ -899,10 +931,15 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
       : getNodeColorById(targetId)
   }
 
-  const getLinkColor = (sourceId: string, targetId: string, needsHighlighting: boolean) => {
+  const getLinkColor = (
+    sourceId: string,
+    targetId: string,
+    needsHighlighting: boolean,
+    theme: any,
+  ) => {
     if (!visuals.linkHighlight && !visuals.linkColorScheme && !needsHighlighting) {
       const nodeColor = getLinkNodeColor(sourceId, targetId)
-      return getThemeColor(nodeColor)
+      return getThemeColor(nodeColor, theme)
     }
 
     if (!needsHighlighting && !visuals.linkColorScheme) {
@@ -918,11 +955,11 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
 
     if (!visuals.linkHighlight && !visuals.linkColorScheme) {
       const nodeColor = getLinkNodeColor(sourceId, targetId)
-      return getThemeColor(nodeColor)
+      return getThemeColor(nodeColor, theme)
     }
 
     if (!visuals.linkHighlight) {
-      return getThemeColor(visuals.linkColorScheme)
+      return getThemeColor(visuals.linkColorScheme, theme)
     }
 
     if (!visuals.linkColorScheme) {
@@ -932,12 +969,12 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
     return highlightColors[visuals.linkColorScheme][visuals.linkHighlight](opacity)
   }
 
-  const getNodeColor = (node: OrgRoamNode) => {
+  const getNodeColor = (node: OrgRoamNode, theme: any) => {
     const needsHighlighting = highlightedNodes[node.id!] || previouslyHighlightedNodes[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) {
-      return getThemeColor(visuals.emacsNodeColor)
+      return getThemeColor(visuals.emacsNodeColor, theme)
     }
     if (tagColors && node.tags.some((tag) => tagColors[tag])) {
       const tagColor = tagColors[node.tags.filter((tag) => tagColors[tag])[0]]
@@ -945,14 +982,14 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
     }
     if (visuals.citeNodeColor && node.properties.ROAM_REFS && node.properties.FILELESS) {
       return needsHighlighting
-        ? getThemeColor(visuals.citeNodeColor)
+        ? getThemeColor(visuals.citeNodeColor, theme)
         : highlightColors[visuals.citeNodeColor][visuals.backgroundColor](
             visuals.highlightFade * opacity,
           )
     }
     if (visuals.refNodeColor && node.properties.ROAM_REFS) {
       return needsHighlighting
-        ? getThemeColor(visuals.refNodeColor)
+        ? getThemeColor(visuals.refNodeColor, theme)
         : highlightColors[visuals.refNodeColor][visuals.backgroundColor](
             visuals.highlightFade * opacity,
           )
@@ -963,18 +1000,18 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
       )
     }
     if (!visuals.nodeHighlight) {
-      return getThemeColor(getNodeColorById(node.id as string))
+      return getThemeColor(getNodeColorById(node.id as string), theme)
     }
     return highlightColors[getNodeColorById(node.id as string)][visuals.nodeHighlight](opacity)
   }
 
   const labelTextColor = useMemo(
-    () => getThemeColor(visuals.labelTextColor),
+    () => getThemeColor(visuals.labelTextColor, theme),
     [visuals.labelTextColor, emacsTheme],
   )
 
   const labelBackgroundColor = useMemo(
-    () => getThemeColor(visuals.labelBackgroundColor),
+    () => getThemeColor(visuals.labelBackgroundColor, theme),
     [visuals.labelBackgroundColor, emacsTheme],
   )
 
@@ -1005,7 +1042,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
     onZoom: ({ k, x, y }) => setZoom(k),
     nodeLabel: (node) => (node as OrgRoamNode).title,
     nodeColor: (node) => {
-      return getNodeColor(node as OrgRoamNode)
+      return getNodeColor(node as OrgRoamNode, theme)
     },
     nodeRelSize: visuals.nodeRel,
     nodeVal: (node) => {
@@ -1090,7 +1127,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
     linkDirectionalArrowLength: visuals.arrows ? visuals.arrowsLength : undefined,
     linkDirectionalArrowRelPos: visuals.arrowsPos,
     linkDirectionalArrowColor: visuals.arrowsColor
-      ? () => getThemeColor(visuals.arrowsColor)
+      ? () => getThemeColor(visuals.arrowsColor, theme)
       : undefined,
     linkColor: (link) => {
       const sourceId = typeof link.source === 'object' ? link.source.id! : (link.source as string)
@@ -1119,7 +1156,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
             )
       }
 
-      return getLinkColor(sourceId as string, targetId as string, needsHighlighting)
+      return getLinkColor(sourceId as string, targetId as string, needsHighlighting, theme)
     },
     linkWidth: (link) => {
       if (visuals.highlightLinkSize === 1) {
@@ -1226,8 +1263,8 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
               return
             }
             const sprite = new SpriteText(node.title.substring(0, 40))
-            sprite.color = getThemeColor(visuals.labelTextColor)
-            sprite.backgroundColor = getThemeColor(visuals.labelBackgroundColor)
+            sprite.color = getThemeColor(visuals.labelTextColor, theme)
+            sprite.backgroundColor = getThemeColor(visuals.labelBackgroundColor, theme)
             sprite.padding = 2
             sprite.textHeight = 8
 
@@ -1274,7 +1311,11 @@ export function normalizeLinkEnds(link: OrgRoamLink | LinkObject): [string, stri
   return [sourceId, targetId]
 }
 
-function hexToRGBA(hex: string, opacity: number) {
+export function getThemeColor(name: string, theme: any) {
+  return name.split('.').reduce((o, i) => o[i], theme.colors)
+}
+
+export function hexToRGBA(hex: string, opacity: number) {
   return (
     'rgba(' +
     (hex = hex.replace('#', ''))
author	Thomas F. K. Jorna <[email protected]>	2021-10-08 23:39:37 +0200
committer	Thomas F. K. Jorna <[email protected]>	2021-10-08 23:39:37 +0200
commit	2384b30a244c7d6477e54de5385fe7f1cc62d43a (patch)
tree	55c9f82f9475249a7f91ac44e408e04e9f1c9560 /pages
parent	fd4edbd6a854275c10c5b21173f0875921d547d1 (diff)