Partially implement new tree renderer

ShortestPathLab · Apr 22, 2024 · ef50b89 · ef50b89
1 parent 1107801
commit ef50b89
Show file tree

Hide file tree

Showing 10 changed files with 1,392 additions and 230 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -3,19 +3,29 @@
   "version": "1.0.5",
   "private": true,
   "dependencies": {
+    "@antv/graphlib": "^2.0.2",
+    "@antv/layout": "^1.2.13",
+    "@antv/layout-wasm": "^1.4.0",
+    "@dagrejs/dagre": "^1.1.2",
     "@devbookhq/splitter": "^1.4.2",
     "@monaco-editor/react": "^4.5.2",
     "@mui/icons-material": "^5.15.10",
     "@mui/lab": "^5.0.0-alpha.146",
     "@mui/material": "^5.15.10",
+    "@react-sigma/core": "^4.0.2",
+    "@react-sigma/layout-forceatlas2": "^4.0.2",
+    "@sigma/edge-curve": "^3.0.0-beta.6",
+    "@types/dagre": "^0.7.52",
     "capture-console-logs": "^2.0.1-rc.1",
     "caught-object-report-json": "^7.1.7",
     "color-interpolate": "^1.0.5",
     "colortranslator": "^4.1.0",
     "css-element-queries": "^1.2.3",
+    "dagre": "^0.8.5",
     "downloadjs": "^1.4.7",
     "eventemitter3": "^5.0.1",
     "file-select-dialog": "^1.5.4",
+    "graphology": "^0.25.4",
     "internal-renderers": "file:../internal-renderers",
     "jimp": "^0.22.10",
     "js-yaml": "^4.1.0",
@@ -51,6 +61,7 @@
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-virtuoso": "^4.6.0",
     "renderer": "file:../renderer",
+    "sigma": "^3.0.0-beta.17",
     "socket.io-client": "^4.7.2",
     "string-template-parser": "^1.2.6",
     "typed-emitter": "^2.1.0",

diff --git a/client/src/components/renderer/colors.tsx b/client/src/components/renderer/colors.tsx
@@ -9,7 +9,7 @@ import {
   orange,
   pink,
   red,
-  yellow,
+  amber,
 } from "@mui/material/colors";
 
 const tint = "500";
@@ -23,7 +23,7 @@ export const colorsHex: EventTypeColors = {
   destination: red["A400"],
   updating: orange[tint],
   expanding: deepPurple[tint],
-  generating: yellow[tint],
+  generating: amber[tint],
   closing: pink[tint],
   end: blue["A400"],
 };
@@ -37,6 +37,9 @@ export function getColor(key?: TraceEventType) {
   return (key && colors[key]) || hex(orange[tint]);
 }
 
-export function getColorHex(key?: TraceEventType) {
-  return (key && colorsHex[key]) ?? grey[tint];
+export function getColorHex(
+  key?: TraceEventType,
+  fallback: string = grey[tint]
+) {
+  return (key && colorsHex[key]) ?? fallback;
 }
diff --git a/client/src/pages/Page.tsx b/client/src/pages/Page.tsx
@@ -50,7 +50,19 @@ export const Page = withSlots<PageSlots, PageProps>(
   ({ slotProps, onChange, stack }) => {
     const acrylic = useAcrylic();
     return (
-      <ErrorBoundary fallback={<>This page encountered an error.</>}>
+      <ErrorBoundary
+        fallback={
+          <Box
+            sx={{
+              p: 6,
+              background: (t) => t.palette.background.paper,
+              height: "100%",
+            }}
+          >
+            This page encountered an error.
+          </Box>
+        }
+      >
         <Flex vertical>
           <Flex sx={{ position: "absolute", top: 0, left: 0, width: "100%" }}>
             <Box

diff --git a/client/src/pages/SidebarPage.tsx b/client/src/pages/SidebarPage.tsx
@@ -12,7 +12,19 @@ export const SidebarPage = withSlots<PageSlots, PageProps>(({ slotProps }) => {
   const bg = useSidebarBackground();
   const acrylic = useAcrylic(bg);
   return (
-    <ErrorBoundary fallback={<>This page encountered an error.</>}>
+    <ErrorBoundary
+      fallback={
+        <Box
+          sx={{
+            p: 6,
+            background: (t) => t.palette.background.paper,
+            height: "100%",
+          }}
+        >
+          This page encountered an error.
+        </Box>
+      }
+    >
       <Flex vertical>
         <Flex sx={{ position: "absolute", top: 0, left: 0, width: "100%" }}>
           <Box