Improve visualiser

ShortestPathLab · Dec 25, 2024 · e2766bd · e2766bd
1 parent 5cc5453
commit e2766bd
Show file tree

Hide file tree

Showing 8 changed files with 222 additions and 219 deletions.
diff --git a/client/src/layout/BentoLayout.tsx b/client/src/layout/BentoLayout.tsx
@@ -1,44 +1,11 @@
 import { TabContext, TabList, TabPanel } from "@mui/lab";
-import { Box, Divider, Stack, Tab, Typography } from "@mui/material";
+import { Divider, Stack, Tab, Typography } from "@mui/material";
 import { Scroll } from "components/dialog/Scrollbars";
-import { useSm, useXs } from "components/dialog/useSmallDisplay";
-import { ReactNode, useRef, useState } from "react";
-import { useRafLoop } from "react-use";
+import { useSm } from "components/dialog/useSmallDisplay";
+import { ReactNode, useState } from "react";
 import Layout, { LayoutProps } from "./Layout";
-import { navbarHeight } from "./navbarHeight";
 import { topbarHeight } from "./topbarHeight";
-
-function TabBar({ children }: { children?: ReactNode }) {
-  const sm = useSm();
-  const xs = useXs();
-  const ref = useRef<HTMLElement>(null);
-  const threshold = navbarHeight(sm);
-  const [top, setTop] = useState(false);
-  useRafLoop(() => {
-    if (ref.current) {
-      const rect = ref.current.getBoundingClientRect();
-      setTop(rect.top >= threshold);
-    }
-  });
-  return (
-    <Box
-      ref={ref}
-      sx={{
-        borderBottom: 1,
-        borderColor: "divider",
-        mx: xs ? -2 : -3,
-        px: xs ? 0 : 1,
-        position: "sticky",
-        top: 0,
-        zIndex: 1,
-        transition: (t) => t.transitions.create("background-color"),
-        bgcolor: top ? "background.default" : "background.paper",
-      }}
-    >
-      {children}
-    </Box>
-  );
-}
+import { TabBar } from "./TabBar";
 
 export function BentoLayout({
   contentLeft,

diff --git a/client/src/layout/DataInspectorLayout.tsx b/client/src/layout/DataInspectorLayout.tsx
@@ -4,6 +4,7 @@ import { FlatCard } from "components/FlatCard";
 import { useSm } from "components/dialog/useSmallDisplay";
 import { ReactNode, useState } from "react";
 import { setFromParam } from "utils/set";
+import { TabBar } from "./TabBar";
 
 export function DataInspectorLayout({
   data: dataContent,
@@ -21,40 +22,30 @@ export function DataInspectorLayout({
   return (
     <TabContext value={tab}>
       <Stack sx={{ px: sm ? 0 : 2 }}>
-        <TabList
-          variant={sm ? "fullWidth" : "standard"}
-          sx={{
-            position: "sticky",
-            top: 0,
-            mt: sm ? 0 : -2,
-            pt: sm ? 0 : 2,
-            pb: sm ? 0 : 2,
-            zIndex: 2,
-            bgcolor: "background.default",
-            mx: -2,
-          }}
-          onChange={setFromParam(setTab)}
-        >
-          {[
-            { label: dataTabName, value: "data" },
-            { label: analysisTabName, value: "analysis" },
-          ].map(({ label, value }) => (
-            <Tab
-              sx={{ minWidth: 0, px: sm ? 2 : 0, mr: sm ? 0 : 4 }}
-              label={label}
-              value={value}
-              key={value}
-            />
-          ))}
-        </TabList>
+        <TabBar>
+          <TabList onChange={setFromParam(setTab)}>
+            {[
+              { label: dataTabName, value: "data" },
+              { label: analysisTabName, value: "analysis" },
+            ].map(({ label, value }) => (
+              <Tab
+                sx={{ minWidth: 0, px: sm ? 2 : 0, mr: sm ? 0 : 4 }}
+                label={label}
+                value={value}
+                key={value}
+              />
+            ))}
+          </TabList>
+        </TabBar>
         {[
-          { value: "data", content: dataContent },
+          {
+            value: "data",
+            content: <Box sx={{ py: sm ? 0 : 3 }}>{dataContent}</Box>,
+          },
           {
             value: "analysis",
             content: (
-              <Box sx={{ px: sm ? 2 : 0, py: sm ? 3 : 0 }}>
-                {analysisContent}
-              </Box>
+              <Box sx={{ px: sm ? 2 : 0, py: 3 }}>{analysisContent}</Box>
             ),
           },
         ].map(({ value, content }) => (

diff --git a/client/src/layout/PageHeader.tsx b/client/src/layout/PageHeader.tsx
@@ -20,13 +20,25 @@ export default function PageHeader({
   return (
     <Stack
       sx={{
-        gap: 1,
+        gap: 2,
         mb: sm ? -1 : 0,
       }}
     >
-      <Typography variant="h2">{current}</Typography>
+      <Typography
+        variant="h2"
+        sx={{
+          fontSize: sm ? "2rem" : "2.25rem",
+          pt: sm ? 3 : 0,
+        }}
+      >
+        {current}
+      </Typography>
       {description && (
-        <Typography color="text.secondary" variant="subtitle1">
+        <Typography
+          color="text.secondary"
+          variant="subtitle2"
+          sx={{ maxWidth: "80%" }}
+        >
           {description}
         </Typography>
       )}

diff --git a/client/src/layout/TabBar.tsx b/client/src/layout/TabBar.tsx
@@ -0,0 +1,36 @@
+import { Box } from "@mui/material";
+import { useSm, useXs } from "components/dialog/useSmallDisplay";
+import { ReactNode, useRef, useState } from "react";
+import { useRafLoop } from "react-use";
+import { navbarHeight } from "./navbarHeight";
+
+export function TabBar({ children }: { children?: ReactNode }) {
+  const sm = useSm();
+  const xs = useXs();
+  const ref = useRef<HTMLElement>(null);
+  const threshold = navbarHeight(sm);
+  const [top, setTop] = useState(true);
+  useRafLoop(() => {
+    if (ref.current) {
+      const rect = ref.current.getBoundingClientRect();
+      setTop(!(sm && rect.top <= threshold));
+    }
+  });
+  return (
+    <Box
+      ref={ref}
+      sx={{
+        borderBottom: 1,
+        borderColor: "background.paper",
+        mx: xs ? -2 : -3,
+        px: xs ? 0 : 1,
+        position: "sticky",
+        top: 0,
+        zIndex: 10,
+        bgcolor: top ? "background.default" : "background.paper",
+      }}
+    >
+      {children}
+    </Box>
+  );
+}