panel management

packages/panorama-daemon/src/apps/index.ts

@@ -38,7 +38,7 @@ export async function loadApps(): Promise<Map<string, CustomApp>> {
         const app = await loadApp(child);
         apps.set(app.name, app);
       } catch (e) {
-        console.error("Error setting up " + child + ": " + e.message)
+        console.error(`Error setting up ${child}: ${e.message}`);
       }
     }
   }

ui/src/App.tsx

@@ -6,30 +6,29 @@ import "@fontsource/inter/700.css";
 import "./global.scss";
 import "katex/dist/katex.min.css";
 import { useEffect } from "react";
-import NodeDisplay from "./components/NodeDisplay";
+import PanelDisplay from "./components/PanelDisplay";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import TimeAgo from "javascript-time-ago";
 import en from "javascript-time-ago/locale/en";
 import Sidebar from "./components/Sidebar";
-import { atom, useAtom, useAtomValue } from "jotai";
-import { OrderedSet } from "immutable";
+import { useAtomValue } from "jotai";
 import { PANORAMA_DAEMON_URL } from "./lib/constants";
+import { panelsOpenedAtom, usePanelControls } from "./lib/panelManagement";
 
 const queryClient = new QueryClient();
 
 TimeAgo.addDefaultLocale(en);
 
-export const nodesOpenedAtom = atom<OrderedSet<string>>(OrderedSet<string>());
+// export const nodesOpenedAtom = atom<OrderedSet<string>>(OrderedSet<string>());
 
 function App() {
-  const nodesOpened = useAtomValue(nodesOpenedAtom);
-  const { openNode } = useNodeControls();
+  const panelsOpened = useAtomValue(panelsOpenedAtom);
+  const { openNode } = usePanelControls();
 
   // Open today's journal entry if it's not already opened
   useEffect(() => {
     (async () => {
-      console.log("ndoes", nodesOpened);
-      if (nodesOpened.size === 0) {
+      if (panelsOpened.size === 0) {
         console.log("Opening today's entry.");
         const resp = await fetch(
           `${PANORAMA_DAEMON_URL}/journal/get_todays_journal_id`,
@@ -39,10 +38,10 @@ function App() {
         openNode(data.node_id);
       }
     })();
-  }, [nodesOpened, openNode]);
+  }, [openNode]);
 
-  const nodes = [...nodesOpened.reverse().values()].map((nodeId, idx) => (
-    <NodeDisplay idx={idx} key={nodeId} id={nodeId} />
+  const panels = [...panelsOpened.reverse().values()].map((panelInfo, idx) => (
+    <PanelDisplay idx={idx} key={JSON.stringify(panelInfo)} />
   ));
 
   return (
@@ -52,7 +51,7 @@ function App() {
 
         <div className={styles.main}>
           <Sidebar />
-          <div className={styles.nodeContainer}>{nodes}</div>
+          <div className={styles.nodeContainer}>{panels}</div>
         </div>
       </div>
     </QueryClientProvider>
@@ -60,20 +59,3 @@ function App() {
 }
 
 export default App;
-
-export function useNodeControls() {
-  const [nodesOpened, setNodesOpened] = useAtom(nodesOpenedAtom);
-  return {
-    isOpen: (node_id: string) => nodesOpened.has(node_id),
-    toggleNode: (node_id: string) => {
-      if (nodesOpened.has(node_id)) setNodesOpened(nodesOpened.remove(node_id));
-      else setNodesOpened(nodesOpened.remove(node_id).add(node_id));
-    },
-    openNode: (node_id: string) => {
-      setNodesOpened(nodesOpened.remove(node_id).add(node_id));
-    },
-    closeNode: (node_id: string) => {
-      setNodesOpened(nodesOpened.remove(node_id));
-    },
-  };
-}

ui/src/components/Header.tsx

@@ -5,7 +5,6 @@ import ListIcon from "@mui/icons-material/List";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import { useSetAtom } from "jotai";
 import { sidebarExpandedAtom } from "./Sidebar";
-import { useNodeControls } from "../App";
 import { useCallback, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { getVersion } from "@tauri-apps/api/app";
@@ -19,9 +18,10 @@ import {
   useInteractions,
 } from "@floating-ui/react";
 import { PANORAMA_DAEMON_URL } from "../lib/constants";
+import { usePanelControls } from "../lib/panelManagement";
 
 export default function Header() {
-  const { openNode } = useNodeControls();
+  const { openNode } = usePanelControls();
   const setSidebarExpanded = useSetAtom(sidebarExpandedAtom);
   const versionData = useQuery({
     queryKey: ["appVersion"],

ui/src/components/NodeDisplay.tsx

@@ -5,16 +5,16 @@ import { getNode } from "../lib/getNode";
 import FirstPageIcon from "@mui/icons-material/FirstPage";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import CloseIcon from "@mui/icons-material/Close";
-import { useNodeControls } from "../App";
+import { usePanelControls } from "../lib/panelManagement";
 
 export interface NodeDisplayProps {
-	id: string;
+  nodeId: string;
   idx?: number | undefined;
 }
 
-export default function NodeDisplay({ id, idx }: NodeDisplayProps) {
+export default function NodeDisplay({ nodeId, idx }: NodeDisplayProps) {
   const query = useQuery({
-		queryKey: ["fetchNode", id],
+    queryKey: ["fetchNode", nodeId],
     queryFn: getNode,
   });
 
@@ -31,25 +31,25 @@ export default function NodeDisplay({ id, idx }: NodeDisplayProps) {
     <div className={styles.container}>
       <div className={styles.header}>
         {isSuccess ? (
-					<NodeDisplayHeaderLoaded idx={idx} id={id} data={data} />
+          <NodeDisplayHeaderLoaded idx={idx} id={nodeId} data={data} />
         ) : (
           <>
-						ID {id} ({status})
+            ID {nodeId} ({status})
           </>
         )}
       </div>
 
       <div className={styles.body}>
-				{Component && <Component id={id} data={data} />}
+        {Component && <Component id={nodeId} data={data} />}
       </div>
 
-			<div className={styles.footer}>{id}</div>
+      <div className={styles.footer}>{nodeId}</div>
     </div>
   );
 }
 
 function NodeDisplayHeaderLoaded({ idx, id, data }) {
-	const { openNode, closeNode } = useNodeControls();
+  const { openNode, closeNode } = usePanelControls();
   const updatedAt = data.updated_at && Date.parse(data.updated_at);
 
   return (

ui/src/components/PanelDisplay.tsx

@@ -0,0 +1,9 @@
+import type { PanelInfo } from "../lib/panelManagement";
+
+export interface PanelDisplayProps {
+  info: PanelInfo;
+}
+
+export default function PanelDisplay({ info }: PanelDisplayProps) {
+  return <>Panel {JSON.stringify(info)}</>;
+}

ui/src/components/SearchBar.tsx

@@ -11,8 +11,8 @@ import {
 } from "@floating-ui/react";
 import { useCallback, useEffect, useState } from "react";
 import { atom, useAtom, useSetAtom } from "jotai";
-import { useNodeControls } from "../App";
 import { useDebounce, useDebouncedCallback } from "use-debounce";
+import { usePanelControls } from "../lib/panelManagement";
 
 const searchQueryAtom = atom("");
 const showMenuAtom = atom(false);
@@ -90,7 +90,7 @@ export default function SearchBar() {
 function SearchMenu({ results }) {
   const setSearchQuery = useSetAtom(searchQueryAtom);
   const setShowMenu = useSetAtom(showMenuAtom);
-	const { openNode } = useNodeControls();
+  const { openNode } = usePanelControls();
 
   return (
     <div className={styles.searchResults}>

ui/src/components/Sidebar.tsx

@@ -3,13 +3,13 @@ import styles from "./Sidebar.module.scss";
 import classNames from "classnames";
 import EmailIcon from "@mui/icons-material/Email";
 import SettingsIcon from "@mui/icons-material/Settings";
-import { useNodeControls } from "../App";
+import { usePanelControls } from "../lib/panelManagement";
 
 export const sidebarExpandedAtom = atom(false);
 
 export default function Sidebar() {
   const sidebarExpanded = useAtomValue(sidebarExpandedAtom);
-	const { toggleNode, isOpen } = useNodeControls();
+  const { toggleNodePanel, isNodeOpen } = usePanelControls();
 
   return (
     <div
@@ -22,9 +22,9 @@ export default function Sidebar() {
         type="button"
         className={classNames(
           styles.item,
-					isOpen("panorama/mail") && styles.active,
+          isNodeOpen("panorama/mail") && styles.active,
         )}
-				onClick={() => toggleNode("panorama/mail")}
+        onClick={() => toggleNodePanel("panorama/mail")}
       >
         <EmailIcon />
         <span className={styles.label}>Email</span>

ui/src/components/nodes/Query.tsx

@@ -0,0 +1,13 @@
+export interface QueryTableProps {}
+
+export default function QueryTable({}: QueryTableProps) {
+  return (
+    <div>
+      <div>
+        <input placeholder="Search..." />
+      </div>
+
+      <div></div>
+    </div>
+  );
+}

ui/src/lib/panelManagement.ts

@@ -0,0 +1,29 @@
+import { OrderedSet } from "immutable";
+import { atom, useAtom } from "jotai";
+
+export type PanelInfo = { type: "node"; nodeId: string };
+
+export const panelsOpenedAtom = atom<OrderedSet<PanelInfo>>(
+  OrderedSet<PanelInfo>(),
+);
+
+export function usePanelControls() {
+  const [nodesOpened, setNodesOpened] = useAtom(panelsOpenedAtom);
+
+  return {
+    isNodeOpen: (nodeId: string) => nodesOpened.has({ type: "node", nodeId }),
+    toggleNodePanel: (nodeId: string) => {
+      const info: PanelInfo = { type: "node", nodeId };
+      if (nodesOpened.has(info)) setNodesOpened(nodesOpened.remove(info));
+      else setNodesOpened(nodesOpened.remove(info).add(info));
+    },
+    openNode: (nodeId: string) => {
+      const info: PanelInfo = { type: "node", nodeId };
+      setNodesOpened(nodesOpened.remove(info).add(info));
+    },
+    closeNode: (nodeId: string) => {
+      const info: PanelInfo = { type: "node", nodeId };
+      setNodesOpened(nodesOpened.remove(info));
+    },
+  };
+}