Revert "feat: local graph param"

Author: ikoamu

components/contextmenu.tsx

@@ -1,22 +1,53 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import {
+  Box,
   Menu,
   MenuItem,
   MenuList,
+  MenuGroup,
+  MenuItemOption,
+  MenuOptionGroup,
   Heading,
   MenuDivider,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure,
+  Button,
+  PopoverTrigger,
+  PopoverContent,
+  Popover,
+  Flex,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverArrow,
+  PopoverHeader,
+  PopoverFooter,
+  Portal,
+  Text,
+  VStack,
 } from '@chakra-ui/react'
 import {
+  DeleteIcon,
+  EditIcon,
+  CopyIcon,
+  AddIcon,
   ViewIcon,
+  ExternalLinkIcon,
+  ChevronRightIcon,
   PlusSquareIcon,
   MinusIcon,
 } from '@chakra-ui/icons'
 
-import { OrgRoamNode } from '../api'
+import { OrgRoamGraphReponse, OrgRoamLink, OrgRoamNode } from '../api'
+import { deleteNodeInEmacs, openNodeInEmacs, createNodeInEmacs } from '../util/webSocketFunctions'
 import { BiNetworkChart } from 'react-icons/bi'
 import { TagMenu } from './TagMenu'
 import { initialFilter, TagColors } from './config'
-import { useSearchParams } from 'next/navigation'
 
 export default interface ContextMenuProps {
   background: Boolean
@@ -36,25 +67,30 @@ export default interface ContextMenuProps {
 
 export const ContextMenu = (props: ContextMenuProps) => {
   const {
+    background,
     target,
+    nodeType,
     coordinates,
     handleLocal,
     menuClose,
     scope,
+    webSocket,
     setPreviewNode,
     setTagColors,
     tagColors,
     setFilter,
     filter,
-  } = props;
-  const param = useSearchParams();
+  } = props
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const copyRef = useRef<any>()
   return (
     <>
       <Menu defaultIsOpen closeOnBlur={false} onClose={() => menuClose()}>
         <MenuList
           zIndex="overlay"
           bgColor="white"
           color="black"
+          //borderColor="gray.500"
           position="absolute"
           left={coordinates.left}
           top={coordinates.top}
@@ -94,13 +130,42 @@ export const ContextMenu = (props: ContextMenuProps) => {
                   Open local graph
                 </MenuItem>
               )}
+              {/* Doesn't work at the moment
+                            <MenuItem closeOnSelect={false} closeOnBlur={false}>
+                            <Box _hover={{ bg: 'gray.200' }} width="100%">
+                                <Popover
+                                    initialFocusRef={copyRef}
+                                    trigger="hover"
+                                    placement="right-start"
+                                    gutter={0}
+                                >
+                                    <PopoverTrigger>
+                                        <MenuItem closeOnSelect={false} icon={<CopyIcon />}>
+                                            <Flex justifyContent="space-between" alignItems="center">
+                                                Copy...
+                                                <ChevronRightIcon />
+                                            </Flex>
+                                        </MenuItem>
+                                    </PopoverTrigger>
+                                    <PopoverContent width={100}>
+                                        <Menu defaultIsOpen closeOnBlur={false} closeOnSelect={false}>
+                                            <MenuList bg="alt.100" zIndex="popover">
+                                                <MenuItem ref={copyRef}>ID</MenuItem>
+                                                <MenuItem>Title</MenuItem>
+                                                <MenuItem>File path</MenuItem>
+                                            </MenuList>
+                                        </Menu>
+                                    </PopoverContent>
+                                </Popover>
+                            </Box>
+                        </MenuItem> */}
+
               <MenuItem
                 icon={<ViewIcon />}
                 onClick={() => {
                   setPreviewNode(target)
                   if (target) {
-                    console.log("search is ", window.location.search)
-                    history.replaceState(null, '', window.location.pathname + window.location.search + `#${target.id}`);
+                    history.replaceState(null, '', window.location.pathname + `#${target.id}`)
                   }
                 }}
               >
@@ -115,3 +180,30 @@ export const ContextMenu = (props: ContextMenuProps) => {
     </>
   )
 }
+
+/* <Box>
+ *     <Popover>
+ *         <PopoverTrigger>
+ *                 Permenantly delete node
+ *             </MenuItem>
+ *         </PopoverTrigger>
+ *         <PopoverContent borderColor="red.500" _focus={{}}>
+ *             <PopoverHeader fontWeight="semibold">Delete Node?</PopoverHeader>
+ *             <PopoverArrow />
+ *             <PopoverCloseButton onClick={onClose} />
+ *             <PopoverBody>
+ *                 This will permanently delete your node! Are you sure you want to do this?
+ *             </PopoverBody>
+ *             <PopoverFooter>
+ *                 <Flex justifyContent="space-between" py={1}>
+ *                     <Button colorScheme="gray" bg="gray.800" color="alt.100" width={30} onClick={onClose}>
+ *                         Nah
+ *                     </Button>
+ *                     <Button colorScheme="red" variant="link" onClick={onClose}>
+ *                         Delete node
+ *                     </Button>
+ *                 </Flex>
+ *             </PopoverFooter>
+ *         </PopoverContent>
+ *     </Popover>
+ * </Box> */

pages/index.tsx

@@ -1,17 +1,20 @@
+import { HamburgerIcon } from '@chakra-ui/icons'
 import graphDataJson from '../graphdata.json'
 import {
   Box,
   Flex,
+  Heading,
   IconButton,
+  Slide,
   Tooltip,
   useDisclosure,
   useOutsideClick,
   useTheme,
 } from '@chakra-ui/react'
 import { useAnimation } from '@lilib/hooks'
-import { useWindowSize } from '@react-hook/window-size'
+import { useWindowSize, useWindowWidth } from '@react-hook/window-size'
 import * as d3int from 'd3-interpolate'
-import { GraphData, NodeObject } from 'force-graph'
+import { GraphData, LinkObject, NodeObject } from 'force-graph'
 import Head from 'next/head'
 import React, {
   ComponentPropsWithoutRef,
@@ -61,7 +64,8 @@ import { getNodeColor } from '../util/getNodeColor'
 import { isLinkRelatedToNode } from '../util/isLinkRelatedToNode'
 import { getLinkColor } from '../util/getLinkColor'
 import { Search } from '../components/Search'
-import { useRouter, useSearchParams } from 'next/navigation'
+import { useRouter } from "next/router";
+import { usePathname, useSearchParams } from 'next/navigation'
 import { TITLE_NAME } from '../constants/action'
 
 const d3promise = import('d3-force-3d')
@@ -119,8 +123,7 @@ export function GraphPage() {
   const [threeDim, setThreeDim] = usePersistantState('3d', false)
   const [tagColors, setTagColors] = usePersistantState<TagColors>('tagCols', {})
   const [scope, setScope] = useState<Scope>({ nodeIds: [], excludedNodeIds: [] })
-  const params = useSearchParams();
-  const graphParam = params.get('graph');
+
   const [physics, setPhysics] = usePersistantState('physics', initialPhysics)
   const [filter, setFilter] = usePersistantState('filter', initialFilter)
   const [visuals, setVisuals] = usePersistantState('visuals', initialVisuals)
@@ -130,13 +133,6 @@ export function GraphPage() {
   const [mouse, setMouse] = usePersistantState('mouse', initialMouse)
   const [coloring, setColoring] = usePersistantState('coloring', initialColoring)
   const [local, setLocal] = usePersistantState('local', initialLocal)
-  const router = useRouter();
-
-  useEffect(() => {
-    if (graphParam === 'local' && window.location.hash) {
-      setScope({ nodeIds: [window.location.hash.replace('#', '')], excludedNodeIds: [] })
-    }
-  }, [graphParam]);
 
   const [
     previewNodeState,
@@ -370,6 +366,75 @@ export function GraphPage() {
   const WebSocketRef = useRef<ReconnectingWebSocket | null>(null)
 
   scopeRef.current = scope
+  const followBehavior = (
+    command: string,
+    emacsNode: string,
+    speed: number = 2000,
+    padding: number = 200,
+  ) => {
+    if (command === 'color') {
+      return
+    }
+    const fg = graphRef.current
+    const sr = scopeRef.current
+    const bh = behaviorRef.current
+    const links = linksByNodeIdRef.current[emacsNode] ?? []
+    const nodes = Object.fromEntries(
+      [emacsNode as string, ...links.flatMap((link) => [link.source, link.target])].map(
+        (nodeId) => [nodeId, {}],
+      ),
+    )
+    if (command === 'zoom') {
+      if (sr.nodeIds.length) {
+        setScope({ nodeIds: [], excludedNodeIds: [] })
+      }
+      setTimeout(
+        () => fg.zoomToFit(speed, padding, (node: NodeObject) => nodes[node.id as string]),
+        50,
+      )
+      return
+    }
+    if (!sr.nodeIds.length) {
+      setScope((current: Scope) => ({ ...current, nodeIds: [emacsNode] }))
+      setTimeout(() => {
+        fg.centerAt(0, 0, 10)
+        fg.zoomToFit(1, padding)
+      }, 50)
+      return
+    }
+    if (bh.localSame !== 'add') {
+      setScope((current: Scope) => ({ ...current, nodeIds: [emacsNode] }))
+      setTimeout(() => {
+        fg.centerAt(0, 0, 10)
+        fg.zoomToFit(1, padding)
+      }, 50)
+      return
+    }
+
+    // if the node is in the scoped nodes, add it to scope instead of replacing it
+    if (
+      !sr.nodeIds.includes(emacsNode) ||
+      !sr.nodeIds.some((scopeId: string) => {
+        return nodes[scopeId]
+      })
+    ) {
+      setScope((current: Scope) => ({ ...current, nodeIds: [emacsNode] }))
+      setTimeout(() => {
+        fg.centerAt(0, 0, 10)
+        fg.zoomToFit(1, padding)
+      }, 50)
+      return
+    }
+    setScope((currentScope: Scope) => ({
+      ...currentScope,
+      nodeIds: [...currentScope.nodeIds, emacsNode as string],
+    }))
+    setTimeout(() => {
+      fg.centerAt(0, 0, 10)
+      fg.zoomToFit(1, padding)
+    }, 50)
+  }
+
 
   useEffect(() => {
     const fg = graphRef.current
@@ -383,7 +448,7 @@ export function GraphPage() {
     setTimeout(() => {
       fg.zoomToFit(5, 200)
     }, 50)
-  }, [physics.gravityOn, scope.nodeIds])
+  }, [scope.nodeIds])
 
   const [windowWidth, windowHeight] = useWindowSize()
 
@@ -427,9 +492,6 @@ export function GraphPage() {
       return
     }
     if (command === 'replace') {
-      const newParams = new URLSearchParams({ graph: 'local' });
-      const newUrl = `${window.location.pathname}?${newParams.toString()}#${node.id}`;
-      history.replaceState(null, '', newUrl);
       setScope({ nodeIds: [node.id], excludedNodeIds: [] })
       return
     }
@@ -538,21 +600,25 @@ export function GraphPage() {
         <Box position="relative" zIndex={4} width="100%">
           <Flex className="headerBar" h={10} flexDir="column">
             <Flex alignItems="center" h={10} justifyContent="flex-end">
+              {/* <Flex flexDir="row" alignItems="center">
+               *   <Box color="blue.500" bgColor="alt.100" h="100%" p={3} mr={4}>
+               *     {mainItem.icon}
+               *   </Box>
+               *   <Heading size="sm">{mainItem.title}</Heading>
+               * </Flex> */}
               <Flex height="100%" flexDirection="row">
                 {scope.nodeIds.length > 0 && (
                   <Tooltip label="Return to main graph">
                     <IconButton
                       m={1}
                       icon={<BiNetworkChart />}
                       aria-label="Exit local mode"
-                      onClick={() => {
-                        const hash = window.location.hash;
-                        history.replaceState(null, '', hash ? window.location.pathname : window.location.pathname + `#${hash}`);
+                      onClick={() =>
                         setScope((currentScope: Scope) => ({
                           ...currentScope,
                           nodeIds: [],
                         }))
-                      }}
+                      }
                       variant="subtle"
                     />
                   </Tooltip>
@@ -562,7 +628,6 @@ export function GraphPage() {
                   setPreviewNode={setPreviewNode}
                   onClickResultItem={(id) => {
                     setEmacsNodeId(id)
-                    setScope({ nodeIds: [], excludedNodeIds: [] })
                   }}
                 />
                 <Tooltip label={isOpen ? 'Close sidebar' : 'Open sidebar'}>
@@ -710,7 +775,7 @@ export const Graph = function (props: GraphProps) {
     switch (click) {
       case mouse.preview: {
         setPreviewNode(node)
-        history.replaceState(null, '', window.location.pathname + window.location.search + `#${node.id}`)
+        history.replaceState(null, '', window.location.pathname + `#${node.id}`)
         break
       }
       case mouse.local: {