Merge branch 'feature-ui' of https://github.com/path-visualiser/app i…

…nto feature-ui
ShortestPathLab · Jan 12, 2024 · a5bd5ba · a5bd5ba
2 parents b21ca30 + 5300df4
commit a5bd5ba
Show file tree

Hide file tree

Showing 13 changed files with 155 additions and 80 deletions.
diff --git a/client/src/components/app-bar/FeaturePicker.tsx b/client/src/components/app-bar/FeaturePicker.tsx
@@ -1,20 +1,23 @@
-import { ButtonProps, Typography as Type } from "@mui/material";
+import { Box, ButtonProps, Typography as Type, useTheme } 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 { ReactElement, ReactNode, cloneElement } from "react";
+import { AccentColor, getShade } from "theme";
 import { FeaturePickerButton } from "./FeaturePickerButton";
+import { Flex } from "components/generic/Flex";
+import { Space } from "components/generic/Space";
 
 export type Props = {
   label?: string;
   value?: string;
   onChange?: (key: string) => void;
-  items?: FeatureDescriptor[];
+  items?: (FeatureDescriptor & { icon?: ReactNode; color?: AccentColor })[];
   icon?: ReactNode;
   showArrow?: boolean;
   disabled?: boolean;
   ButtonProps?: ButtonProps;
+  itemOrientation?: "vertical" | "horizontal";
 };
 
 export function FeaturePicker({
@@ -26,7 +29,18 @@ export function FeaturePicker({
   showArrow,
   disabled,
   ButtonProps,
+  itemOrientation = "horizontal",
 }: Props) {
+  const { palette } = useTheme();
+
+  const getIcon = (icon: ReactNode, color?: AccentColor) =>
+    icon &&
+    cloneElement(icon as ReactElement, {
+      sx: {
+        color: color ? getShade(color, palette.mode) : "primary.main",
+      },
+    });
+
   const selected = find(items, { id: value });
   return (
     <Select
@@ -36,23 +50,26 @@ export function FeaturePicker({
           {...props}
           {...ButtonProps}
           disabled={!items?.length || disabled}
-          icon={icon}
+          icon={selected?.icon ? getIcon(selected.icon, selected.color) : icon}
           showArrow={showArrow}
         >
           {selected?.name ?? label}
         </FeaturePickerButton>
       )}
-      items={map(items, ({ id, name, description, hidden }) => ({
+      items={map(items, ({ id, name, description, hidden, icon, color }) => ({
         value: id,
         label: (
-          <>
-            <Type>{name}</Type>
-            <Space />
+          <Flex vertical={itemOrientation === "vertical"}>
+            <Type>
+              {name}
+              <Space />
+            </Type>
             <Type variant="body2" color="text.secondary">
               {description}
             </Type>
-          </>
+          </Flex>
         ),
+        icon: getIcon(icon, color),
         disabled: hidden,
       }))}
       value={selected?.id}

diff --git a/client/src/components/generic/ListEditor.tsx b/client/src/components/generic/ListEditor.tsx
@@ -424,7 +424,7 @@ export default function Editor<T>(props: Props<T>) {
 
 export function ListEditor<T extends { key: string }>({
   onChange,
-  value = [],
+  value,
   editor,
   create,
   ...props
@@ -441,7 +441,7 @@ export function ListEditor<T extends { key: string }>({
     onChange?.(next);
   }
   useEffect(() => {
-    setState(value);
+    setState(value ?? []);
   }, [value]);
   return (
     <Box sx={{ ml: -2 }}>

diff --git a/client/src/components/generic/Select.tsx b/client/src/components/generic/Select.tsx
@@ -1,24 +1,26 @@
-import { findIndex, map, max } from "lodash";
-import State, { bindMenu, bindTrigger } from "material-ui-popup-state";
-import { ReactElement, ReactNode } from "react";
-import { useSmallDisplay } from "hooks/useSmallDisplay";
 import {
+  ListItemIcon,
   Menu,
   MenuItem,
   TextField,
   TextFieldProps,
   Tooltip,
 } from "@mui/material";
-
-
-
-
+import { useSmallDisplay } from "hooks/useSmallDisplay";
+import { findIndex, map, max } from "lodash";
+import State, { bindMenu, bindTrigger } from "material-ui-popup-state";
+import { ReactElement, ReactNode } from "react";
 
 type Key = string | number;
 
 export type SelectProps<T extends Key> = {
   trigger?: (props: ReturnType<typeof bindTrigger>) => ReactElement;
-  items?: { value: T; label?: ReactNode; disabled?: boolean }[];
+  items?: {
+    value: T;
+    label?: ReactNode;
+    disabled?: boolean;
+    icon?: ReactNode;
+  }[];
   value?: T;
   onChange?: (value: T) => void;
   placeholder?: string;
@@ -54,7 +56,7 @@ export function Select<T extends string>({
               horizontal: "center",
             }}
           >
-            {map(items, ({ value: v, label, disabled }) => (
+            {map(items, ({ value: v, label, disabled, icon }) => (
               <MenuItem
                 disabled={disabled}
                 key={v}
@@ -65,6 +67,11 @@ export function Select<T extends string>({
                   onChange?.(v);
                 }}
               >
+                {icon && (
+                  <ListItemIcon sx={{ transform: "scale(0.8)" }}>
+                    {icon}
+                  </ListItemIcon>
+                )}
                 {label}
               </MenuItem>
             ))}
@@ -100,4 +107,4 @@ export function SelectField<T extends string>(props: SelectFieldProps<T>) {
       ))}
     </TextField>
   );
-}
+}
diff --git a/client/src/components/inspector/EventInspector.tsx b/client/src/components/inspector/EventInspector.tsx
@@ -1,4 +1,4 @@
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import { DataObjectOutlined, FiberManualRecord } from "@mui/icons-material";
 import {
   Box,
   Divider,
@@ -15,11 +15,10 @@ import {
 import { getColorHex } from "components/renderer/colors";
 import { pick } from "lodash";
 import { TraceEvent } from "protocol/Trace";
+import { ReactNode } from "react";
 import { useCss } from "react-use";
 import { EventLabel } from "./EventLabel";
 import { PropertyList } from "./PropertyList";
-import { DataObjectOutlined, FiberManualRecord } from "@mui/icons-material";
-import { ReactNode } from "react";
 
 type EventInspectorProps = {
   event?: TraceEvent;
@@ -32,7 +31,7 @@ function Dot({ label }: { label?: ReactNode }) {
   return (
     <Tooltip title={label}>
       <FiberManualRecord
-        sx={{ color: "error.main", transform: "scale(0.5)", pl: 0.5 }}
+        sx={{ color: "error.main", transform: "scale(0.5)", pl: 0.5, mr: 2 }}
         fontSize="small"
       />
     </Tooltip>

diff --git a/client/src/hooks/useBreakpoints.tsx b/client/src/hooks/useBreakpoints.tsx
@@ -84,7 +84,6 @@ export function useBreakpoints(key?: string) {
                 events,
                 node: trees[step],
               });
-            console.log(active, isType, match(), condition);
             if (active && isType && match()) {
               return condition?.needsReference
                 ? {

diff --git a/client/src/pages/DebugPage.tsx b/client/src/pages/DebugPage.tsx
@@ -1,12 +1,11 @@
 import { LayersOutlined as LayersIcon } from "@mui/icons-material";
 import { TabContext, TabList, TabPanel } from "@mui/lab";
-import { Box, Tab, Typography as Type } from "@mui/material";
+import { Box, Divider, Tab, Typography as Type } from "@mui/material";
 import { FeaturePicker } from "components/app-bar/FeaturePicker";
-import { Flex } from "components/generic/Flex";
-import { Space } from "components/generic/Space";
-import { Switch } from "components/generic/Switch";
 import { useViewTreeContext } from "components/inspector/ViewTree";
 import { ScriptEditor } from "components/script-editor/ScriptEditor";
+import { makeTemplate } from "components/script-editor/makeTemplate";
+import { templates } from "components/script-editor/templates";
 import { DebugLayerData } from "hooks/useBreakpoints";
 import { inferLayerName } from "layers/Layer";
 import { map, set, values } from "lodash";
@@ -15,14 +14,20 @@ import { produce } from "produce";
 import { ReactNode, useState } from "react";
 import { useLayer } from "slices/layers";
 import { BreakpointListEditor } from "../components/breakpoint-editor/BreakpointListEditor";
-import { makeTemplate } from "components/script-editor/makeTemplate";
-import { templates } from "components/script-editor/templates";
+
+const divider = (
+  <Divider
+    orientation="vertical"
+    flexItem
+    sx={{ m: 1, height: (t) => t.spacing(3), alignSelf: "auto" }}
+  />
+);
 
 export function DebugPage() {
   const { controls, onChange, state } = useViewTreeContext();
   const [tab, setTab] = useState("standard");
   const { key, setKey, layers, layer, setLayer } = useLayer<DebugLayerData>();
-  const { monotonicF, monotonicG, code } = layer?.source ?? {};
+  const { code } = layer?.source ?? {};
   function renderHeading(label: ReactNode) {
     return (
       <Type variant="overline" color="text.secondary">
@@ -45,6 +50,7 @@ export function DebugPage() {
             onChange={setKey}
             showArrow
           />
+          {divider}
           <TabList onChange={(_, v) => setTab(v)}>
             <Tab label="Standard" value="standard" />
             <Tab label="Advanced" value="advanced" />

diff --git a/client/src/pages/Page.tsx b/client/src/pages/Page.tsx
@@ -89,9 +89,9 @@ export const Page = withSlots<Slots, PageProps>(
                       type,
                     })
                   }
-                  icon={pages[stack!.type!]?.icon}
                   value={stack?.type}
                   items={values(pages)}
+                  itemOrientation="vertical"
                 />
                 {slotProps.Options?.children && (
                   <>

diff --git a/client/src/pages/ViewportPage.tsx b/client/src/pages/ViewportPage.tsx
@@ -15,13 +15,11 @@ import { inferLayerName } from "layers/Layer";
 import {
   Dictionary,
   chain as _,
-  defer,
   delay,
   every,
   filter,
   find,
   head,
-  includes,
   keyBy,
   map,
 } from "lodash";
@@ -78,11 +76,14 @@ export function ViewportPage() {
         _(selectedLayers)
           .filter("viewKey")
           .map("key")
-          .includes(b.meta?.sourceLayer!)
+          .includes(b.meta?.sourceLayer ?? "")
           .value()
       );
     }, 150);
-  }, [rendererInstance, _(selectedLayers).map("viewKey").join(".").value()]);
+  }, [
+    rendererInstance,
+    _(selectedLayers).map("viewKey").sort().join(".").value(),
+  ]);
 
   return (
     <Page onChange={onChange} stack={state}>