feat: add style component (wip)

apps/web/components/ArrowPoper.tsx

@@ -15,6 +15,7 @@ interface Props {
   arrow?: boolean;
   placement?: PopperPlacementType;
   disablePortal?: boolean;
+  isClickAwayEnabled?: boolean;
 }
 
 const Popper = styled(MuiPopper, {
@@ -111,6 +112,7 @@ export function ArrowPopper({
   onClose = () => undefined,
   content,
   children,
+  isClickAwayEnabled = true,
 }: Props) {
   const [arrowRef, setArrowRef] = useState<HTMLElement | null>(null);
   const [childNode, setChildNode] = useState<HTMLElement | null>(null);
@@ -152,16 +154,26 @@ export function ArrowPopper({
               element: arrowRef,
             },
           },
-        ]}>
+        ]}
+      >
         {({ TransitionProps }) => (
           <Grow {...TransitionProps} timeout={150}>
             <Paper
               sx={{
                 boxShadow: "none",
-              }}>
-              <ClickAwayListener onClickAway={onClose}>
+              }}
+            >
+              <ClickAwayListener
+                onClickAway={() => {
+                  if (isClickAwayEnabled) {
+                    onClose();
+                  }
+                }}
+              >
                 <Paper elevation={0}>
-                  {arrow ? <Arrow ref={setArrowRef} className="MuiPopper-arrow" /> : null}
+                  {arrow ? (
+                    <Arrow ref={setArrowRef} className="MuiPopper-arrow" />
+                  ) : null}
                   <Box>{content}</Box>
                 </Paper>
               </ClickAwayListener>

apps/web/components/common/DragHandle.tsx

@@ -0,0 +1,25 @@
+import { styled } from "@mui/material";
+
+const StyledDragHandle = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  color: theme.palette.text.secondary,
+  transition: theme.transitions.create(["opacity"], {
+    duration: theme.transitions.duration.standard,
+  }),
+  opacity: 0,
+  ":hover": {
+    cursor: "move",
+    color: theme.palette.text.primary,
+  },
+}));
+
+export const DragHandle: React.FC<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  listeners?: any;
+  children?: React.ReactNode;
+}> = ({ listeners, children }) => (
+  <StyledDragHandle {...(listeners ? listeners : {})}>
+    {children}
+  </StyledDragHandle>
+);

apps/web/components/common/FormLabelHelper.tsx

@@ -35,4 +35,4 @@ const FormLabelHelper: React.FC<FormLabelHelperProps> = ({
   </Stack>
 );
 
-export default FormLabelHelper;
+export default FormLabelHelper;

apps/web/components/map/Layers.tsx

@@ -1,8 +1,10 @@
 import React from "react";
+import type { LayerProps } from "react-map-gl";
 import { Source, Layer as MapLayer } from "react-map-gl";
 import type { ProjectLayer } from "@/lib/validations/project";
 import { GEOAPI_BASE_URL } from "@/lib/constants";
 import { useSortedLayers } from "@/hooks/map/LayerPanelHooks";
+import { transformToMapboxLayerStyleSpec } from "@/lib/transformers/layer";
 
 interface LayersProps {
   projectId: string;
@@ -16,14 +18,7 @@ const Layers = (props: LayersProps) => {
       {sortedLayers?.length
         ? sortedLayers.map((layer: ProjectLayer) =>
             (() => {
-              if (
-                ["feature", "external_vector_tile"].includes(layer.type) &&
-                layer.properties &&
-                ["circle", "fill", "line", "symbol"].includes(
-                  layer.properties.type,
-                )
-              ) {
-
+              if (["feature", "external_vector_tile"].includes(layer.type)) {
                 return (
                   <Source
                     key={layer.updated_at}
@@ -42,7 +37,12 @@ const Layers = (props: LayersProps) => {
                         }`,
                     ]}
                   >
-                    <MapLayer {...layer.properties} source-layer="default" />
+                    <MapLayer
+                      {...(transformToMapboxLayerStyleSpec(
+                        layer,
+                      ) as LayerProps)}
+                      source-layer="default"
+                    />
                   </Source>
                 );
               } else if (layer.type === "external_imagery") {

apps/web/components/map/panels/ProjectLayerDropdown.tsx

@@ -40,7 +40,6 @@ const ProjectLayerDropdown = ({
             id="select-active-layer"
             value={activeLayer.id}
             label="Active Layer"
-            autoWidth
             onChange={(event) => {
               const id = event.target.value as number;
               dispatch(setActiveLayer(id));

apps/web/components/map/panels/ProjectNavigation.tsx

@@ -42,7 +42,7 @@ const ProjectNavigation = ({ projectId }) => {
   const activeBasemap = useAppSelector((state) => state.map.activeBasemap);
   const activeLeft = useAppSelector((state) => state.map.activeLeftPanel);
   const activeRight = useAppSelector((state) => state.map.activeRightPanel);
-  const {activeLayer} = useActiveLayer(projectId);
+  const { activeLayer } = useActiveLayer(projectId);
 
   const prevActiveLeftRef = useRef<MapSidebarItemID | undefined>(undefined);
   const prevActiveRightRef = useRef<MapSidebarItemID | undefined>(undefined);

apps/web/components/map/panels/layer/Layer.tsx

@@ -8,7 +8,6 @@ import {
   Card,
   Grid,
   IconButton,
-  styled,
   Typography,
   Stack,
   Tooltip,
@@ -61,36 +60,13 @@ import { setActiveLeftPanel, setActiveRightPanel } from "@/lib/store/map/slice";
 import { MapSidebarItemID } from "@/types/map/common";
 import DatasetUploadModal from "@/components/modals/DatasetUpload";
 import DatasetExplorerModal from "@/components/modals/DatasetExplorer";
+import { DragHandle } from "@/components/common/DragHandle";
 
 interface PanelProps {
   onCollapse?: () => void;
   projectId: string;
 }
 
-const StyledDragHandle = styled("div")(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  color: theme.palette.text.secondary,
-  transition: theme.transitions.create(["opacity"], {
-    duration: theme.transitions.duration.standard,
-  }),
-  opacity: 0,
-  ":hover": {
-    cursor: "move",
-    color: theme.palette.text.primary,
-  },
-}));
-
-export const DragHandle: React.FC<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  listeners?: any;
-  children?: React.ReactNode;
-}> = ({ listeners, children }) => (
-  <StyledDragHandle {...(listeners ? listeners : {})}>
-    {children}
-  </StyledDragHandle>
-);
-
 type SortableLayerTileProps = {
   id: number;
   layer: ProjectLayer;
@@ -302,14 +278,8 @@ const LayerPanel = ({ projectId }: PanelProps) => {
     if (!properties) {
       properties = {};
     }
-    if (!properties?.layout) {
-      properties.layout = {};
-    }
-    properties.layout.visibility =
-      !properties.layout.visibility ||
-      properties.layout.visibility === "visible"
-        ? "none"
-        : "visible";
+
+    properties.visibility = !properties.visibility;
 
     layerToUpdate.properties = properties;
     await mutateProjectLayers(layers, false);
@@ -506,7 +476,7 @@ const LayerPanel = ({ projectId }: PanelProps) => {
                           <Tooltip
                             key={layer.id}
                             title={
-                              layer.properties?.layout?.visibility === "none"
+                              layer.properties.visibility
                                 ? t("show_layer")
                                 : t("hide_layer")
                             }
@@ -527,17 +497,12 @@ const LayerPanel = ({ projectId }: PanelProps) => {
                                       theme.transitions.duration.standard,
                                   },
                                 ),
-                                opacity:
-                                  layer.properties?.layout?.visibility ===
-                                  "none"
-                                    ? 1
-                                    : 0,
+                                opacity: !layer.properties.visibility ? 1 : 0,
                               }}
                             >
                               <Icon
                                 iconName={
-                                  layer.properties?.layout?.visibility ===
-                                  "none"
+                                  !layer.properties.visibility
                                     ? ICON_NAME.EYE_SLASH
                                     : ICON_NAME.EYE
                                 }

apps/web/components/map/panels/properties/Properties.tsx

@@ -96,18 +96,18 @@ const Visibility = ({
 }) => {
   const { layers: projectLayers, mutate: mutateProjectLayers } =
     useProjectLayers(projectId);
-  const layerType = layer.properties.type;
+  const layerType = layer.type;
 
   const opacity = useMemo(() => {
-    if (!layer.properties.paint) return 100;
-    return layer.properties.paint[`${layerType}-opacity`] * 100;
-  }, [layer.properties.paint, layerType]);
+    if (!layer.properties.opacity) return 80;
+    return layer.properties.opacity * 100;
+  }, [layer.properties.opacity]);
 
   const visibilityRange = useMemo(() => {
-    const minZoom = layer.properties.minzoom || 0;
-    const maxZoom = layer.properties.maxzoom || 22;
+    const minZoom = layer.properties.min_zoom || 0;
+    const maxZoom = layer.properties.max_zoom || 22;
     return [minZoom, maxZoom];
-  }, [layer.properties.minzoom, layer.properties.maxzoom]);
+  }, [layer.properties.min_zoom, layer.properties.max_zoom]);
 
   const [opacityValue, setOpacityValue] = useState<number>(opacity);
   const [visibilityRangeValue, setVisibilityRangeValue] =
@@ -211,7 +211,7 @@ const Symbology = () => {
 
 const PropertiesPanel = ({ projectId }: { projectId: string }) => {
   const dispatch = useAppDispatch();
-  const {activeLayer} = useActiveLayer(projectId);
+  const { activeLayer } = useActiveLayer(projectId);
   return (
     <Container
       title="Properties"