feat: basic preview feature

1 files changed, 71 insertions, 66 deletions

diff --git a/pages/index.tsx b/pages/index.tsx
index 5b3c35d..ad01741 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -17,11 +17,12 @@ import type {
 } from 'react-force-graph'
 import { OrgRoamGraphReponse, OrgRoamLink, OrgRoamNode } from '../api'
 import { GraphData, NodeObject, LinkObject } from 'force-graph'
+import Sidebar from '../components/Sidebar'
 
 import { useWindowSize } from '@react-hook/window-size'
 import { useAnimation } from '@lilib/hooks'
 
-import { Box, useDisclosure, useTheme } from '@chakra-ui/react'
+import { Box, Flex, IconButton, useDisclosure, useTheme } from '@chakra-ui/react'
 
 import {
   initialPhysics,
@@ -41,6 +42,8 @@ import SpriteText from 'three-spritetext'
 import wrap from 'word-wrap'
 import ReconnectingWebSocket from 'reconnecting-websocket'
 
+import { getOrgText, deleteNodeInEmacs, openNodeInEmacs, createNodeInEmacs } from "../util/webSocketFunctions"
+import { ChevronLeftIcon } from '@chakra-ui/icons'
 // react-force-graph fails on import when server-rendered
 // https://github.com/vasturiano/react-force-graph/issues/155
 const ForceGraph2D = (
@@ -84,11 +87,9 @@ export function GraphPage() {
   const [emacsNodeId, setEmacsNodeId] = useState<string | null>(null)
   const [behavior, setBehavior] = usePersistantState('behavior', initialBehavior)
   const [mouse, setMouse] = usePersistantState('mouse', initialMouse)
-  const [orgText, setOrgText] = useState('')
-
-  useEffect(() => {
-    console.log(orgText)
-  }, [orgText])
+  const [orgText, setOrgText] = useState("")
+  const [previewNode, setPreviewNode] = useState<NodeObject>({})
+  const { isOpen, onOpen, onClose } = useDisclosure()
 
   const nodeByIdRef = useRef<NodeById>({})
   const linksByNodeIdRef = useRef<LinksByNodeId>({})
@@ -364,7 +365,7 @@ export function GraphPage() {
         case 'graphdata':
           return updateGraphData(message.data)
         case 'orgText':
-          return setOrgText(message.data)
+              return setOrgText(message.data)
         case 'theme':
           return setEmacsTheme(message.data)
         case 'command':
@@ -414,25 +415,50 @@ export function GraphPage() {
 
   return (
     <Box display="flex" alignItems="flex-start" flexDirection="row" height="100%" overflow="hidden">
-      <Tweaks
-        {...{
-          physics,
-          setPhysics,
-          threeDim,
-          setThreeDim,
-          filter,
-          setFilter,
-          visuals,
-          setVisuals,
-          mouse,
-          setMouse,
-          behavior,
-          setBehavior,
-          tagColors,
-          setTagColors,
+      <Box display="flex" justifyContent="space-between" flexDirection="row" height="100%" width="100%">
+        <Sidebar
+            {...{
+          isOpen,
+          onClose,
+          previewNode,
+          orgText,
         }}
-        tags={tagsRef.current}
-      />
+        />
+        <Tweaks
+          {...{
+            physics,
+            setPhysics,
+            threeDim,
+            setThreeDim,
+            filter,
+            setFilter,
+            visuals,
+            setVisuals,
+            mouse,
+            setMouse,
+            behavior,
+            setBehavior,
+            tagColors,
+            setTagColors,
+          }}
+          tags={tagsRef.current}
+        />
+      <Flex height="100%" flexDirection="column" marginLeft="auto">
+        {!isOpen && (
+          <IconButton
+            icon={<ChevronLeftIcon />}
+            height={100}
+            aria-label="Open org-viewer"
+            position="relative"
+            zIndex="overlay"
+            colorScheme="purple"
+            onClick={onOpen}
+            variant="ghost"
+            marginTop={10}
+          />
+        )}
+      </Flex>
+      </Box>
       <Box position="absolute" alignItems="top" overflow="hidden">
         <Graph
           ref={graphRef}
@@ -451,6 +477,7 @@ export function GraphPage() {
             scope,
             setScope,
             tagColors,
+            setPreviewNode,
           }}
         />
       </Box>
@@ -473,9 +500,10 @@ export interface GraphProps {
   setScope: any
   webSocket: any
   tagColors: { [tag: string]: string }
+    setPreviewNode: any
 }
 
-export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
+export const Graph = forwardRef(function(props: GraphProps, graphRef: any) {
   const {
     physics,
     graphData,
@@ -491,6 +519,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
     setScope,
     webSocket,
     tagColors,
+      setPreviewNode,
   } = props
 
   // react-force-graph does not track window size
@@ -522,28 +551,6 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
     return
   }
 
-  const sendMessageToEmacs = (command: string, data: {}) => {
-    webSocket.send(JSON.stringify({ command: command, data: data }))
-  }
-
-  const getOrgText = (node: OrgRoamNode) => {
-    sendMessageToEmacs('getText', { id: node.id })
-  }
-
-  const openNodeInEmacs = (node: OrgRoamNode) => {
-    sendMessageToEmacs('open', { id: node.id })
-  }
-
-  const deleteNodeInEmacs = (node: OrgRoamNode) => {
-    if (node.level !== 0) {
-      return
-    }
-    sendMessageToEmacs('delete', { id: node.id, file: node.file })
-  }
-
-  const createNodeInEmacs = (node: OrgRoamNode) => {
-    sendMessageToEmacs('create', { id: node.id, title: node.title, ref: node.properties.ROAM_REFS })
-  }
 
   const contextMenu = useDisclosure()
 
@@ -560,7 +567,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
         break
       }
       case mouse.follow: {
-        openNodeInEmacs(node)
+        openNodeInEmacs(node, webSocket)
         break
       }
       case mouse.context: {
@@ -772,7 +779,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
   ])
 
   useEffect(() => {
-    ;(async () => {
+    ; (async () => {
       const fg = graphRef.current
       const d3 = await d3promise
       if (physics.gravityOn && !(scope.nodeIds.length && !physics.gravityLocal)) {
@@ -934,15 +941,15 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
       return needsHighlighting
         ? getThemeColor(visuals.citeNodeColor)
         : highlightColors[visuals.citeNodeColor][visuals.backgroundColor](
-            visuals.highlightFade * opacity,
-          )
+          visuals.highlightFade * opacity,
+        )
     }
     if (visuals.refNodeColor && node.properties.ROAM_REFS) {
       return needsHighlighting
         ? getThemeColor(visuals.refNodeColor)
         : highlightColors[visuals.refNodeColor][visuals.backgroundColor](
-            visuals.highlightFade * opacity,
-          )
+          visuals.highlightFade * opacity,
+        )
     }
     if (!needsHighlighting) {
       return highlightColors[getNodeColorById(node.id as string)][visuals.backgroundColor](
@@ -1090,20 +1097,20 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
       if (visuals.refLinkColor && roamLink.type === 'ref') {
         return needsHighlighting && (visuals.refLinkHighlightColor || visuals.linkHighlight)
           ? highlightColors[visuals.refLinkColor][
-              visuals.refLinkHighlightColor || visuals.linkHighlight
-            ](opacity)
+            visuals.refLinkHighlightColor || visuals.linkHighlight
+          ](opacity)
           : highlightColors[visuals.refLinkColor][visuals.backgroundColor](
-              visuals.highlightFade * opacity,
-            )
+            visuals.highlightFade * opacity,
+          )
       }
       if (visuals.citeLinkColor && roamLink.type?.includes('cite')) {
         return needsHighlighting && (visuals.citeLinkHighlightColor || visuals.linkHighlight)
           ? highlightColors[visuals.citeLinkColor][
-              visuals.citeLinkHighlightColor || visuals.linkHighlight
-            ](opacity)
+            visuals.citeLinkHighlightColor || visuals.linkHighlight
+          ](opacity)
           : highlightColors[visuals.citeLinkColor][visuals.backgroundColor](
-              visuals.highlightFade * opacity,
-            )
+            visuals.highlightFade * opacity,
+          )
       }
 
       return getLinkColor(sourceId as string, targetId as string, needsHighlighting)
@@ -1192,10 +1199,8 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
           coordinates={contextPos}
           handleLocal={handleLocal}
           menuClose={contextMenu.onClose.bind(contextMenu)}
-          openNodeInEmacs={openNodeInEmacs}
-          deleteNodeInEmacs={deleteNodeInEmacs}
-          createNodeInEmacs={createNodeInEmacs}
-          getOrgText={getOrgText}
+          webSocket={webSocket}
+        setPreviewNode={setPreviewNode}
         />
       )}
       {threeDim ? (