PWA improvements

ShortestPathLab · Oct 19, 2023 · 5209ed4 · 5209ed4
1 parent a655833
commit 5209ed4
Show file tree

Hide file tree

Showing 19 changed files with 226 additions and 81 deletions.
diff --git a/client/src/components/app-bar/FeaturePicker.tsx b/client/src/components/app-bar/FeaturePicker.tsx
@@ -1,12 +1,12 @@
-import { ArrowDropDownOutlined } from "@mui/icons-material";
-import { Button, ButtonProps, Typography as Type } from "@mui/material";
+import { ButtonProps, Typography as Type } from "@mui/material";
+import { Select } from "components/generic/Select";
+import { Space } from "components/generic/Space";
 import { find, map, startCase } from "lodash";
 import { FeatureDescriptor } from "protocol/FeatureQuery";
 import { ReactNode } from "react";
-import { Select } from "components/generic/Select";
-import { Space } from "components/generic/Space";
+import { FeaturePickerButton } from "./FeaturePickerButton";
 
-type Props = {
+export type Props = {
   label?: string;
   value?: string;
   onChange?: (key: string) => void;
@@ -32,15 +32,15 @@ export function FeaturePicker({
     <Select
       placeholder={startCase(label)}
       trigger={(props) => (
-        <Button
+        <FeaturePickerButton
           {...props}
           {...ButtonProps}
           disabled={!items?.length || disabled}
-          startIcon={icon}
-          endIcon={showArrow && <ArrowDropDownOutlined sx={{ ml: -0.5 }} />}
+          icon={icon}
+          showArrow={showArrow}
         >
           {selected?.name ?? label}
-        </Button>
+        </FeaturePickerButton>
       )}
       items={map(items, ({ id, name, description, hidden }) => ({
         value: id,

diff --git a/client/src/components/app-bar/FeaturePickerButton.tsx b/client/src/components/app-bar/FeaturePickerButton.tsx
@@ -0,0 +1,39 @@
+import { KeyboardArrowDownOutlined } from "@mui/icons-material";
+import { Box, Button, ButtonProps } from "@mui/material";
+import { Props } from "./FeaturePicker";
+
+export function FeaturePickerButton({
+  children,
+  icon,
+  showArrow,
+  ...props
+}: ButtonProps & Pick<Props, "icon" | "showArrow">) {
+  return (
+    <Button
+      {...props}
+      startIcon={icon}
+      endIcon={
+        showArrow && (
+          <KeyboardArrowDownOutlined
+            sx={{
+              ml: -0.5,
+              color: "text.primary",
+              opacity: (t) =>
+                props.disabled ? t.palette.action.disabledOpacity : 1,
+            }}
+          />
+        )
+      }
+    >
+      <Box
+        sx={{
+          color: "text.primary",
+          opacity: (t) =>
+            props.disabled ? t.palette.action.disabledOpacity : 1,
+        }}
+      >
+        {children}
+      </Box>
+    </Button>
+  );
+}
diff --git a/client/src/components/app-bar/FeaturePickerMulti.tsx b/client/src/components/app-bar/FeaturePickerMulti.tsx
@@ -1,10 +1,10 @@
-import { ArrowDropDownOutlined } from "@mui/icons-material";
-import { Button, Typography as Type } from "@mui/material";
+import { Typography as Type } from "@mui/material";
 import { SelectMulti } from "components/generic/SelectMulti";
 import { Space } from "components/generic/Space";
 import { filter, head, map, startCase } from "lodash";
 import { FeatureDescriptor } from "protocol/FeatureQuery";
 import { ReactNode } from "react";
+import { FeaturePickerButton } from "./FeaturePickerButton";
 
 type Props = {
   label?: string;
@@ -38,14 +38,14 @@ export function FeaturePickerMulti({
       defaultChecked
       placeholder={startCase(label)}
       trigger={(props) => (
-        <Button
+        <FeaturePickerButton
           {...props}
           disabled={!items?.length}
-          startIcon={icon}
-          endIcon={showArrow && <ArrowDropDownOutlined sx={{ ml: -0.5 }} />}
+          icon={icon}
+          showArrow={showArrow}
         >
           {buttonLabel}
-        </Button>
+        </FeaturePickerButton>
       )}
       items={map(items, ({ id, name, description, hidden }) => ({
         value: id,

diff --git a/client/src/components/app-bar/Input.tsx b/client/src/components/app-bar/Input.tsx
@@ -9,6 +9,7 @@ import { useConnections } from "slices/connections";
 import { useFeatures } from "slices/features";
 import { useLoadingState } from "slices/loading";
 import { Map, UploadedTrace } from "slices/UIState";
+import { FeaturePickerButton } from "./FeaturePickerButton";
 
 export const mapDefaults = { start: undefined, end: undefined };
 
@@ -58,8 +59,8 @@ export function TracePicker({ onChange, value }: EditorProps<UploadedTrace>) {
   const notify = useSnackbar();
   const usingLoadingState = useLoadingState("specimen");
   return (
-    <Button
-      startIcon={<FileOpenOutlined />}
+    <FeaturePickerButton
+      icon={<FileOpenOutlined />}
       onClick={async () => {
         try {
           const f = await uploadTrace();
@@ -77,7 +78,7 @@ export function TracePicker({ onChange, value }: EditorProps<UploadedTrace>) {
       }}
     >
       {value?.id ? `Uploaded Trace - ${value.name}` : "Choose File"}
-    </Button>
+    </FeaturePickerButton>
   );
 }
 

diff --git a/client/src/components/generic/ListEditor.tsx b/client/src/components/generic/ListEditor.tsx
@@ -1,6 +1,6 @@
 import {
   Add,
-  DeleteOutlined as DeleteIcon,
+  ClearOutlined as DeleteIcon,
   DragHandleOutlined,
   EditOutlined as EditIcon,
   LabelOutlined as LabelIcon,
@@ -16,6 +16,7 @@ import {
   ListSubheader,
   Switch,
   Typography,
+  alpha,
   useTheme,
 } from "@mui/material";
 import { filter, map, sortBy, uniqBy } from "lodash";
@@ -383,18 +384,25 @@ export default function Editor<T>(props: Props<T>) {
             </Typography>
           </Box>
         </Collapse>
-        <Box p={2} mb={-3}>
+        <Box p={2} pt={1} mb={-3}>
           <Button
             disableElevation
-            variant="contained"
+            variant="outlined"
             startIcon={<Add />}
             color="primary"
             onClick={() => {
               onAddItem();
               setNewIndex(items.length);
             }}
+            sx={{
+              borderColor: (t) =>
+                alpha(
+                  t.palette.text.primary,
+                  t.palette.action.activatedOpacity
+                ),
+            }}
           >
-            {addItemLabel}
+            <Box sx={{ color: "text.primary" }}>{addItemLabel}</Box>
           </Button>
           {extras}
         </Box>

diff --git a/client/src/components/inspector/ViewTree.tsx b/client/src/components/inspector/ViewTree.tsx
@@ -39,14 +39,22 @@ export function ViewTree<T>({
   const { palette, spacing, transitions } = useTheme();
 
   const dragCls = useCss({
-    background: palette.text.secondary,
-    opacity: 1 - palette.action.activatedOpacity,
-    transition: transitions.create("opacity"),
+    "div&": {
+      background: palette.text.secondary,
+      opacity: 1 - palette.action.activatedOpacity,
+      transition: transitions.create("opacity"),
+      "&.Horizontal": { width: "3px" },
+      "&.Vertical": { height: "3px" },
+    },
   });
 
   const gutterCls = useCss({
-    background: palette.background.default,
-    [`&:hover .${dragCls}`]: { opacity: 1 },
+    "div&": {
+      background: palette.background.default,
+      [`&:hover .${dragCls}`]: { opacity: 1 },
+      "&.Horizontal": { padding: 0 },
+      "&.Vertical": { padding: 0 },
+    },
   });
 
   const getSpacing = (n: number) => Number(spacing(n).slice(0, -2));

diff --git a/client/src/components/layer-editor/LayerEditor.tsx b/client/src/components/layer-editor/LayerEditor.tsx
@@ -1,6 +1,5 @@
 import { EditOutlined } from "@mui/icons-material";
 import {
-  Avatar,
   Box,
   IconButton,
   Stack,
@@ -14,7 +13,7 @@ import {
   AppBarTitle as Title,
 } from "components/generic/Modal";
 import { Space } from "components/generic/Space";
-import { debounce, set, slice, startCase } from "lodash";
+import { debounce, set, startCase } from "lodash";
 import { produce } from "produce";
 import {
   ForwardedRef,
@@ -91,10 +90,7 @@ function Component(
   return (
     <>
       <Stack alignItems="center" direction="row" gap={2}>
-        <Avatar sx={{ borderRadius: (t) => t.spacing(2) }}>
-          {slice(name, 0, 2)}
-        </Avatar>
-        <Box py={1}>
+        <Box py={1} ml={-1}>
           <Type>{name}</Type>
           <Type variant="body2" color="text.secondary">
             {startCase(draft.source?.type)}

diff --git a/client/src/components/layer-editor/layers/TracePreview.tsx b/client/src/components/layer-editor/layers/TracePreview.tsx
@@ -0,0 +1,35 @@
+import { Box } from "@mui/material";
+import { ScriptViewer } from "components/script-editor/ScriptEditor";
+import beautify from "json-beautify";
+import { take } from "lodash";
+import { Trace } from "protocol";
+
+export function TracePreview({
+  trace,
+  language = "json",
+}: {
+  trace?: Trace;
+  language?: string;
+}) {
+  return (
+    <Box sx={{ width: "100%", height: "100%" }}>
+      <ScriptViewer
+        options={{ readOnly: true }}
+        language={language}
+        value={
+          trace
+            ? beautify(
+                {
+                  ...trace,
+                  events: take(trace.events, 10),
+                },
+                null as any,
+                2,
+                1
+              )
+            : "No data"
+        }
+      />
+    </Box>
+  );
+}
diff --git a/client/src/components/layer-editor/layers/queryLayerSource.tsx b/client/src/components/layer-editor/layers/queryLayerSource.tsx
@@ -1,4 +1,4 @@
-import { Typography as Type } from "@mui/material";
+import { Box, Typography as Type } from "@mui/material";
 import { FeaturePicker } from "components/app-bar/FeaturePicker";
 import { useSnackbar } from "components/generic/Snackbar";
 import { filter, find, set } from "lodash";
@@ -9,9 +9,11 @@ import { Connection, useConnections } from "slices/connections";
 import { useFeatures } from "slices/features";
 import { useEffectWhenAsync } from "../../../hooks/useEffectWhen";
 import { LayerSource, inferLayerName } from "./LayerSource";
-import { Option } from "./Option";
+import { Heading, Option } from "./Option";
 import { MapLayerData } from "./mapLayerSource";
 import { TraceLayerData, traceLayerSource } from "./traceLayerSource";
+import { TracePreview } from "./TracePreview";
+import { CodeOutlined, LayersOutlined } from "@mui/icons-material";
 
 async function findConnection(
   connections: Connection[],
@@ -50,6 +52,7 @@ export const queryLayerSource: LayerSource<"query", QueryLayerData> = {
           content={
             <FeaturePicker
               showArrow
+              icon={<CodeOutlined />}
               label="Choose Algorithm"
               value={algorithm}
               items={algorithms.map((c) => ({
@@ -72,6 +75,7 @@ export const queryLayerSource: LayerSource<"query", QueryLayerData> = {
           content={
             <FeaturePicker
               showArrow
+              icon={<LayersOutlined />}
               label="Choose Layer"
               value={mapLayerKey}
               items={filteredLayers.map((c) => ({
@@ -85,11 +89,15 @@ export const queryLayerSource: LayerSource<"query", QueryLayerData> = {
           }
         />
         {selectedLayer && (
-          <Type variant="body2" color="text.secondary" sx={{ mb: 1 }}>
-            Hint: Define source and destination nodes by clicking on valid
-            regions on {inferLayerName(selectedLayer)}
+          <Type variant="body2" color="text.secondary" sx={{ mb: 1, mt: 1 }}>
+            Define source and destination nodes by clicking on valid regions on{" "}
+            {inferLayerName(selectedLayer)}
           </Type>
         )}
+        <Heading label="Preview" />
+        <Box sx={{ height: 240, mx: -2, mb: -2 }}>
+          <TracePreview trace={value?.source?.trace?.content} />
+        </Box>
       </>
     );
   }),

diff --git a/client/src/components/layer-editor/layers/traceLayerSource.tsx b/client/src/components/layer-editor/layers/traceLayerSource.tsx
@@ -1,5 +1,5 @@
 import { ArrowOutwardRounded } from "@mui/icons-material";
-import { useTheme } from "@mui/material";
+import { Box, useTheme } from "@mui/material";
 import { FeaturePicker } from "components/app-bar/FeaturePicker";
 import { TracePicker } from "components/app-bar/Input";
 import { PropertyList } from "components/inspector/PropertyList";
@@ -33,7 +33,8 @@ import { Layer, UploadedTrace } from "slices/UIState";
 import { usePlayback } from "slices/playback";
 import { useTraceContent } from "../../../hooks/useTraceContent";
 import { LayerSource, inferLayerName } from "./LayerSource";
-import { Option } from "./Option";
+import { Heading, Option } from "./Option";
+import { TracePreview } from "./TracePreview";
 
 const isNullish = (x: KeyRef): x is Exclude<KeyRef, Key> =>
   x === undefined || x === null;
@@ -128,6 +129,10 @@ export const traceLayerSource: LayerSource<"trace", TraceLayerData> = {
             />
           }
         />
+        <Heading label="Preview" />
+        <Box sx={{ height: 240, mx: -2, mb: -2 }}>
+          <TracePreview trace={value?.source?.trace?.content} />
+        </Box>
       </>
     );
   }),

diff --git a/client/src/components/renderer/colors.tsx b/client/src/components/renderer/colors.tsx
@@ -1,6 +1,6 @@
-import { mapValues } from "lodash";
-import { EventTypeColors } from "protocol";
-import { TraceEventType } from "protocol/Trace";
+import { mapValues } from "lodash";
+import { EventTypeColors } from "protocol";
+import { TraceEventType } from "protocol/Trace";
 import {
   blue,
   deepPurple,
@@ -12,9 +12,6 @@ import {
   yellow,
 } from "@mui/material/colors";
 
-
-
-
 const tint = "500";
 
 export function hex(h: string) {
@@ -42,4 +39,4 @@ export function getColor(key?: TraceEventType) {
 
 export function getColorHex(key?: TraceEventType) {
   return (key && colorsHex[key]) ?? grey[tint];
-}
+}