Legend and layer settings sync

client/package.json

@@ -33,6 +33,7 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "1.0.7",
     "@t3-oss/env-nextjs": "0.6.1",
+    "@tailwindcss/typography": "^0.5.10",
     "@tanstack/react-query": "4.35.3",
     "@typescript-eslint/eslint-plugin": "6.7.3",
     "@typescript-eslint/parser": "6.7.3",
@@ -46,7 +47,7 @@
     "lodash-es": "^4.17.21",
     "mapbox-gl": "2.15.0",
     "next": "13.5.3",
-    "next-usequerystate": "^1.8.4",
+    "next-usequerystate": "^1.9.1",
     "pino": "8.15.1",
     "pino-http": "8.5.0",
     "pino-pretty": "10.2.0",
@@ -60,7 +61,6 @@
     "tailwind-merge": "1.14.0",
     "tailwindcss": "3.3.3",
     "tailwindcss-animate": "1.0.7",
-    "@tailwindcss/typography": "^0.5.10",
     "typescript": "5.2.2",
     "zod": "3.22.2"
   },

client/src/app/url-query-params.ts

@@ -11,11 +11,8 @@ export const useSyncLayersSettings = () => {
   return useQueryState(
     "layers-settings",
     parseAsJson<{
-      [key: string]: {
-        opacity: number;
-        visibility: boolean;
-      };
-    }>().withDefault({}),
+      [key: string]: Record<string, unknown>;
+    }>(),
   );
 };
 

client/src/components/map/legend/item/index.tsx

@@ -28,21 +28,16 @@ export const LegendItem: React.FC<PropsWithChildren & LegendItemProps> = ({
   // events
   onChangeOpacity,
   onChangeVisibility,
-  onChangeExpand,
 }) => {
-  const { expand } = settings || {};
-
   const validChildren = useMemo(() => {
     const chldn = Children.map(children, (Child) => {
       return isValidElement(Child);
     });
     return chldn && chldn.some((c) => !!c);
   }, [children]);
 
-  const acordionState = expand ? `${id}` : undefined;
-
   return (
-    <Accordion type="single" value={acordionState} asChild>
+    <Accordion type="single" defaultValue={`${id}`} asChild>
       <AccordionItem value={`${id}`} asChild>
         <div
           className={cn({
@@ -83,7 +78,6 @@ export const LegendItem: React.FC<PropsWithChildren & LegendItemProps> = ({
               settingsManager={settingsManager}
               onChangeOpacity={onChangeOpacity}
               onChangeVisibility={onChangeVisibility}
-              onChangeExpand={onChangeExpand}
               InfoContent={InfoContent}
             />
           </header>

client/src/components/map/legend/item/toolbar/index.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { PopoverArrow } from "@radix-ui/react-popover";
-import { LuEye, LuEyeOff, LuDroplet, LuChevronDown, LuInfo } from "react-icons/lu";
+import { LuEye, LuEyeOff, LuDroplet, LuInfo } from "react-icons/lu";
 
 import { cn } from "@/lib/classnames";
 
@@ -19,10 +19,9 @@ export const LegendItemToolbar: React.FC<LegendItemToolbarProps> = ({
   settingsManager,
   onChangeOpacity,
   onChangeVisibility,
-  onChangeExpand,
 }: LegendItemToolbarProps) => {
   const [popoverOpen, setPopoverOpen] = useState(false);
-  const { opacity = 1, visibility = true, expand = true } = settings || {};
+  const { opacity = 1, visibility = true } = settings || {};
 
   return (
     <div id="legend-toolbar" className="mt-0.5 flex divide-x">
@@ -136,41 +135,6 @@ export const LegendItemToolbar: React.FC<LegendItemToolbarProps> = ({
           </div>
         )}
       </div>
-
-      {settingsManager?.expand && (
-        <div className="pl-2">
-          <div className="flex items-start">
-            <Tooltip delayDuration={500}>
-              {/* <AccordionTrigger> */}
-              <TooltipTrigger
-                type="button"
-                aria-label={expand ? "Collapse layer" : "Expand layer"}
-                className={cn({
-                  "pointer-events-none": popoverOpen,
-                })}
-                onClick={() => {
-                  if (onChangeExpand) onChangeExpand(!expand);
-                }}
-              >
-                <LegendItemButton
-                  Icon={LuChevronDown}
-                  className={cn({
-                    "rotate-180": !expand,
-                    "rotate-0 transform transition-transform": expand,
-                  })}
-                />
-              </TooltipTrigger>
-              {/* </AccordionTrigger> */}
-
-              <TooltipContent side="top" align="end" alignOffset={-10}>
-                <div className="text-xxs">{expand ? "Collapse layer" : "Expand layer"}</div>
-
-                <TooltipArrow className="fill-white" width={10} height={5} />
-              </TooltipContent>
-            </Tooltip>
-          </div>
-        </div>
-      )}
     </div>
   );
 };

client/src/components/map/legend/types.ts

@@ -14,26 +14,22 @@ type Sortable = {
 type OnChangeOrder = (id: string[]) => void;
 type OnChangeOpacity = (opacity: number) => void;
 type OnChangeVisibility = (visibility: boolean) => void;
-type OnChangeExpand = (expand: boolean) => void;
 type OnChangeColumn = (column: string) => void;
 
 export type Settings = Record<string, unknown> & {
   opacity?: number;
   visibility?: boolean;
-  expand?: boolean;
 };
 
 export type SettingsManager = {
   opacity?: boolean;
   visibility?: boolean;
-  expand?: boolean;
   info?: boolean;
 };
 
 export type LegendItemEvents = {
   onChangeOpacity?: OnChangeOpacity;
   onChangeVisibility?: OnChangeVisibility;
-  onChangeExpand?: OnChangeExpand;
   onChangeColumn?: OnChangeColumn;
 };
 /*