Major improvements to layer workflow

ShortestPathLab · Feb 25, 2024 · a6233d2 · a6233d2
1 parent 862b755
commit a6233d2
Show file tree

Hide file tree

Showing 30 changed files with 528 additions and 349 deletions.
diff --git a/client/src/components/app-bar/FeaturePicker.tsx b/client/src/components/app-bar/FeaturePicker.tsx
@@ -5,7 +5,7 @@ import { Space } from "components/generic/Space";
 import { find, map, startCase, truncate } from "lodash";
 import { FeatureDescriptor } from "protocol/FeatureQuery";
 import { ReactElement, ReactNode, cloneElement } from "react";
-import { AccentColor, getShade } from "theme";
+import { AccentColor, getShade, usePaper } from "theme";
 import { FeaturePickerButton } from "./FeaturePickerButton";
 
 export type Props = {
@@ -15,11 +15,12 @@ export type Props = {
   onChange?: (key: string) => void;
   items?: (FeatureDescriptor & { icon?: ReactNode; color?: AccentColor })[];
   icon?: ReactNode;
-  showArrow?: boolean;
+  arrow?: boolean;
   disabled?: boolean;
   ButtonProps?: ButtonProps;
   itemOrientation?: "vertical" | "horizontal";
   ellipsis?: number;
+  paper?: boolean;
 };
 
 export function FeaturePicker({
@@ -28,13 +29,15 @@ export function FeaturePicker({
   onChange,
   items,
   icon,
-  showArrow,
+  arrow,
   disabled,
   ButtonProps,
   showTooltip,
   itemOrientation = "horizontal",
   ellipsis = Infinity,
+  paper: _paper,
 }: Props) {
+  const paper = usePaper();
   const { palette } = useTheme();
 
   const getIcon = (icon: ReactNode, color?: AccentColor) =>
@@ -54,9 +57,10 @@ export function FeaturePicker({
         <FeaturePickerButton
           {...props}
           {...ButtonProps}
+          sx={_paper ? { ...paper(1), m: 0.5, px: 1.25, py: 0.5 } : {}}
           disabled={!items?.length || disabled}
           icon={selected?.icon ? getIcon(selected.icon, selected.color) : icon}
-          showArrow={showArrow}
+          arrow={arrow}
         >
           {truncate(selected?.name ?? label, { length: ellipsis })}
         </FeaturePickerButton>

diff --git a/client/src/components/app-bar/FeaturePickerButton.tsx b/client/src/components/app-bar/FeaturePickerButton.tsx
@@ -5,9 +5,9 @@ import { Props } from "./FeaturePicker";
 export function FeaturePickerButton({
   children,
   icon,
-  showArrow,
+  arrow,
   ...props
-}: ButtonProps & Pick<Props, "icon" | "showArrow">) {
+}: ButtonProps & Pick<Props, "icon" | "arrow">) {
   return (
     <Button
       {...props}
@@ -17,7 +17,7 @@ export function FeaturePickerButton({
       }}
       startIcon={icon}
       endIcon={
-        showArrow && (
+        arrow && (
           <KeyboardArrowDownOutlined
             sx={{
               ml: -0.5,

diff --git a/client/src/components/app-bar/FeaturePickerMulti.tsx b/client/src/components/app-bar/FeaturePickerMulti.tsx
@@ -44,7 +44,7 @@ export function FeaturePickerMulti({
           {...props}
           disabled={!items?.length}
           icon={icon}
-          showArrow={showArrow}
+          arrow={showArrow}
         >
           {truncate(buttonLabel, { length: ellipsis })}
         </FeaturePickerButton>

diff --git a/client/src/components/app-bar/Input.tsx b/client/src/components/app-bar/Input.tsx
@@ -24,7 +24,9 @@ export function MapPicker({ onChange, value }: EditorProps<Map>) {
   return (
     <FeaturePicker
       showTooltip
-      showArrow
+      arrow
+      paper
+      ellipsis={30}
       icon={<FileOpenOutlined />}
       label="Choose Map"
       value={value?.id}
@@ -80,7 +82,9 @@ export function TracePicker({
   return (
     <FeaturePicker
       showTooltip
-      showArrow
+      paper
+      arrow
+      ellipsis={30}
       icon={<FileOpenOutlined />}
       label="Choose Trace"
       value={value?.id}