Homepage legend

seasketch · Dec 7, 2023 · e3a2bfd · e3a2bfd
1 parent f4d6ac9
commit e3a2bfd
Show file tree

Hide file tree

Showing 11 changed files with 128 additions and 78 deletions.
diff --git a/packages/client/src/admin/MetadataEditor.tsx b/packages/client/src/admin/MetadataEditor.tsx
@@ -13,7 +13,7 @@ import { MutationResult } from "@apollo/client";
 import { Trans, useTranslation } from "react-i18next";
 import useDialog from "../components/useDialog";
 import Modal from "../components/Modal";
-import { Link1Icon, Pencil1Icon } from "@radix-ui/react-icons";
+import { Pencil1Icon } from "@radix-ui/react-icons";
 
 const { schema, plugins } = editorConfig;
 interface MetadataEditorProps {

diff --git a/packages/client/src/admin/data/ArcGISTiledRasterSettings.tsx b/packages/client/src/admin/data/ArcGISTiledRasterSettings.tsx
@@ -1,15 +1,8 @@
-import { Trans, useTranslation } from "react-i18next";
 import {
   DataSourceDetailsFragment,
   useSetMaxZoomMutation,
 } from "../../generated/graphql";
-import {
-  SettingsDLListItem,
-  SettingsDefinitionList,
-} from "../SettingsDefinitionList";
-import Skeleton from "../../components/Skeleton";
-import { useContext, useEffect, useMemo, useState } from "react";
-import InputBlock from "../../components/InputBlock";
+import { useContext, useEffect } from "react";
 import { useGlobalErrorHandler } from "../../components/GlobalErrorHandler";
 import { MapContext } from "../../dataLayers/MapContextManager";
 import { isArcGISTiledMapservice } from "@seasketch/mapbox-gl-esri-sources/dist/src/ArcGISTiledMapService";
@@ -20,8 +13,6 @@ export default function ArcGISTiledRasterSettings({
 }: {
   source: DataSourceDetailsFragment;
 }) {
-  const { t } = useTranslation("admin:data");
-
   const onError = useGlobalErrorHandler();
   const [setMaxZoom] = useSetMaxZoomMutation({
     optimisticResponse: (data) => ({

diff --git a/packages/client/src/admin/data/BasemapEditor.tsx b/packages/client/src/admin/data/BasemapEditor.tsx
@@ -17,7 +17,7 @@ import useDialog from "../../components/useDialog";
 export default function BaseMapEditor() {
   const mapContext = useContext(MapContext);
   const { slug } = useParams<{ slug: string }>();
-  const { data, loading, error } = useGetBasemapsQuery({
+  const { data } = useGetBasemapsQuery({
     variables: {
       slug: slug,
     },

diff --git a/packages/client/src/admin/data/BasemapEditorPanel.tsx b/packages/client/src/admin/data/BasemapEditorPanel.tsx
@@ -10,7 +10,6 @@ import {
   useSet3dTerrainMutation,
   useUpdateTerrainExaggerationMutation,
   useUpdateBasemapUrlMutation,
-  useSetMaxZoomMutation,
   useSetBasemapMaxZoomMutation,
 } from "../../generated/graphql";
 import { gql, useApolloClient } from "@apollo/client";
@@ -29,10 +28,6 @@ import { useMediaQuery } from "beautiful-react-hooks";
 import { Link } from "react-router-dom";
 import { ArrowLeftIcon } from "@heroicons/react/outline";
 import TranslatedPropControl from "../../components/TranslatedPropControl";
-import {
-  SettingsDLListItem,
-  SettingsDefinitionList,
-} from "../SettingsDefinitionList";
 import ArcGISTiledRasterBaseSettings from "./ArcGISTiledRasterBaseSettings";
 import { useGlobalErrorHandler } from "../../components/GlobalErrorHandler";
 

diff --git a/packages/client/src/admin/data/LayerTableOfContentsItemEditor.tsx b/packages/client/src/admin/data/LayerTableOfContentsItemEditor.tsx
@@ -45,7 +45,6 @@ import {
 import { useGlobalErrorHandler } from "../../components/GlobalErrorHandler";
 import FeatureLayerPerformanceDetailsModal from "./FeatureLayerPerformanceDetailsModal";
 import { ChartBarIcon } from "@heroicons/react/solid";
-import Skeleton from "../../components/Skeleton";
 import ArcGISTiledRasterSettings from "./ArcGISTiledRasterSettings";
 
 interface LayerTableOfContentsItemEditorProps {
@@ -94,8 +93,7 @@ export default function LayerTableOfContentsItemEditor(
       };
     },
   });
-  const [updateQueryParameters, updateQueryParametersState] =
-    useUpdateQueryParametersMutation();
+  const [updateQueryParameters] = useUpdateQueryParametersMutation();
   const [mutateLayer, mutateLayerState] = useUpdateLayerMutation();
   const [updateGLStyleMutation, updateGLStyleMutationState] =
     useUpdateLayerMutation();

diff --git a/packages/client/src/dataLayers/Legend.tsx b/packages/client/src/dataLayers/Legend.tsx
@@ -20,6 +20,7 @@ import LegendListPanel from "./legends/LegendListPanel";
 import LegendMarkerSizePanel from "./legends/LegendMarkerSizePanel";
 import LegendStepPanel from "./legends/LegendStepPanel";
 import LegendSimpleSymbolPanel from "./legends/LegendSimpleSymbolPanel";
+import { useLocalForage } from "../useLocalForage";
 require("../admin/data/arcgis/Accordion.css");
 
 interface SingleImageLegendItem {
@@ -68,6 +69,7 @@ export default function Legend({
   map,
   maxHeight,
   backdropBlur: blur,
+  persistedStateKey,
 }: {
   backdropBlur?: boolean;
   items: LegendItem[];
@@ -81,9 +83,15 @@ export default function Legend({
   loading?: boolean;
   map?: Map;
   maxHeight?: number;
+  persistedStateKey?: string;
 }) {
   const { t } = useTranslation("homepage");
   maxHeight = maxHeight || undefined;
+  const [hidden, setHidden] = useLocalForage<boolean>(
+    persistedStateKey || "legend",
+    true
+  );
+
   return (
     <div
       style={
@@ -93,25 +101,32 @@ export default function Legend({
             }
           : {}
       }
-      className={`${
-        className || ""
-      } shadow rounded bg-white bg-opacity-90 w-64 text-sm flex flex-col overflow-hidden`}
+      className={`${className || ""} shadow rounded bg-white bg-opacity-90 ${
+        hidden ? "w-auto" : "w-64"
+      } text-sm flex flex-col overflow-hidden`}
     >
-      <Accordion.Root type="single" collapsible defaultValue="legend">
+      <Accordion.Root type="single" value={hidden ? "" : "legend"}>
         <Accordion.Item value="legend">
-          <Accordion.Header className="flex-none flex p-2">
+          <Accordion.Header
+            onClick={(e) => {
+              setHidden((prev) => !prev);
+            }}
+            className="flex-none flex p-2 py-1.5"
+          >
             <Accordion.Trigger className="flex w-full AccordionTrigger">
               <h3 className="flex-1 text-left flex items-center">
                 <span>{t("Legend")}</span>
-                {loading && <Spinner className="scale-75 transform ml-1" />}
+                {loading && !hidden && (
+                  <Spinner className="scale-75 transform ml-1" />
+                )}
               </h3>
               <CaretDownIcon
                 className="w-5 h-5 AccordionChevron text-gray-500"
                 aria-hidden
               />
             </Accordion.Trigger>
           </Accordion.Header>
-          <Accordion.Content className="flex-1 max-h-full overflow-y-auto border-t border-gray-200">
+          <Accordion.Content className="flex-1 max-h-full overflow-y-auto border-t border-black border-opacity-10">
             <ul
               className="list-none space-y-1 overflow-y-auto p-2 pr-2.5"
               style={{ maxHeight }}
@@ -141,17 +156,19 @@ export default function Legend({
                         <span title={item.label} className="truncate flex-1">
                           {item.label}
                         </span>
-                        <Toggle
-                          onChange={() => {
-                            if (onHiddenItemsChange) {
-                              onHiddenItemsChange(
-                                item.id,
-                                !hiddenItems.includes(item.id)
-                              );
-                            }
-                          }}
-                          visible={visible}
-                        />
+                        {onHiddenItemsChange && (
+                          <Toggle
+                            onChange={() => {
+                              if (onHiddenItemsChange) {
+                                onHiddenItemsChange(
+                                  item.id,
+                                  !hiddenItems.includes(item.id)
+                                );
+                              }
+                            }}
+                            visible={visible}
+                          />
+                        )}
                       </li>
                     );
                   } else if (legend.type === "MultipleSymbolGLLegend") {
@@ -166,17 +183,19 @@ export default function Legend({
                           <span title={item.label} className="truncate flex-1">
                             {item.label}
                           </span>
-                          <Toggle
-                            onChange={() => {
-                              if (onHiddenItemsChange) {
-                                onHiddenItemsChange(
-                                  item.id,
-                                  !hiddenItems.includes(item.id)
-                                );
-                              }
-                            }}
-                            visible={visible}
-                          />
+                          {onHiddenItemsChange && (
+                            <Toggle
+                              onChange={() => {
+                                if (onHiddenItemsChange) {
+                                  onHiddenItemsChange(
+                                    item.id,
+                                    !hiddenItems.includes(item.id)
+                                  );
+                                }
+                              }}
+                              visible={visible}
+                            />
+                          )}
                         </div>
                         <ul className="text-sm mb-1">
                           {legend.panels.map((panel) => (
@@ -212,17 +231,19 @@ export default function Legend({
                         <span title={item.label} className="truncate flex-1">
                           {item.label}
                         </span>
-                        <Toggle
-                          onChange={() => {
-                            if (onHiddenItemsChange) {
-                              onHiddenItemsChange(
-                                item.id,
-                                !hiddenItems.includes(item.id)
-                              );
-                            }
-                          }}
-                          visible={visible}
-                        />
+                        {onHiddenItemsChange && (
+                          <Toggle
+                            onChange={() => {
+                              if (onHiddenItemsChange) {
+                                onHiddenItemsChange(
+                                  item.id,
+                                  !hiddenItems.includes(item.id)
+                                );
+                              }
+                            }}
+                            visible={visible}
+                          />
+                        )}
                       </li>
                     );
                   } else {
@@ -237,17 +258,19 @@ export default function Legend({
                           <span title={item.label} className="truncate flex-1">
                             {item.label}
                           </span>
-                          <Toggle
-                            onChange={() => {
-                              if (onHiddenItemsChange) {
-                                onHiddenItemsChange(
-                                  item.id,
-                                  !hiddenItems.includes(item.id)
-                                );
-                              }
-                            }}
-                            visible={visible}
-                          />
+                          {onHiddenItemsChange && (
+                            <Toggle
+                              onChange={() => {
+                                if (onHiddenItemsChange) {
+                                  onHiddenItemsChange(
+                                    item.id,
+                                    !hiddenItems.includes(item.id)
+                                  );
+                                }
+                              }}
+                              visible={visible}
+                            />
+                          )}
                         </div>
                         <ul className="text-sm mb-1">
                           {item.symbols.map((symbol) => {

diff --git a/packages/client/src/dataLayers/MapContextManager.ts b/packages/client/src/dataLayers/MapContextManager.ts
@@ -1074,7 +1074,7 @@ class MapContextManager extends EventEmitter {
           raster: {
             type: "raster",
             tiles: [basemap.url],
-            tileSize: 256 / window.devicePixelRatio,
+            tileSize: 256,
             ...(basemap.maxzoom ? { maxzoom: basemap.maxzoom } : {}),
           },
         },
@@ -2756,6 +2756,11 @@ class MapContextManager extends EventEmitter {
             }
           }
         }
+      } else {
+        if (id in this.internalState.legends) {
+          delete newLegendState[id];
+          changes = true;
+        }
       }
     }
     if (changes) {

diff --git a/packages/client/src/projects/ProjectApp.tsx b/packages/client/src/projects/ProjectApp.tsx
@@ -28,6 +28,7 @@ import {
   ShowScaleBar,
 } from "../draw/MapSettingsPopup";
 import { MeasureControlContextProvider } from "../MeasureControl";
+import ProjectMapLegend from "./ProjectMapLegend";
 
 const LazyOverlays = React.lazy(
   () => import(/* webpackChunkName: "Overlays" */ "./OverlayLayers")
@@ -97,6 +98,7 @@ export default function ProjectApp() {
             <SketchUIStateContextProvider>
               {/* <ProjectAppHeader /> */}
               <div className="flex flex-grow w-full">
+                <ProjectMapLegend />
                 <MapboxMap
                   className="ml-2"
                   showNavigationControls={true}

diff --git a/packages/client/src/projects/ProjectMapLegend.tsx b/packages/client/src/projects/ProjectMapLegend.tsx
@@ -0,0 +1,40 @@
+import { useContext, useMemo } from "react";
+import { MapContext } from "../dataLayers/MapContextManager";
+import Legend, { LegendItem } from "../dataLayers/Legend";
+
+export default function ProjectMapLegend() {
+  const mapContext = useContext(MapContext);
+  const legendItems = useMemo(
+    () =>
+      Object.values(mapContext?.legends || {}).filter(
+        (l) => !!l
+      ) as LegendItem[],
+    [mapContext.legends]
+  );
+  const loading = useMemo(() => {
+    for (const key in mapContext.layerStatesByTocStaticId) {
+      if (mapContext.layerStatesByTocStaticId[key].loading) {
+        return true;
+      }
+    }
+    return false;
+  }, [mapContext.layerStatesByTocStaticId]);
+  if (legendItems.length > 0) {
+    return (
+      <Legend
+        className="absolute -top-1.5 right-8 m-4 z-20"
+        items={legendItems}
+        hiddenItems={[]}
+        backdropBlur
+        maxHeight={500}
+        opacity={{}}
+        zOrder={{}}
+        map={mapContext.manager?.map}
+        loading={loading}
+        persistedStateKey="project-map-legend"
+      />
+    );
+  } else {
+    return null;
+  }
+}
diff --git a/packages/mapbox-gl-esri-sources/dist/bundle.js b/packages/mapbox-gl-esri-sources/dist/bundle.js
@@ -1888,9 +1888,7 @@ var MapBoxGLEsriSources = (function () {
 	        const sourceData = {
 	            type: "raster",
 	            tiles: [`${this.options.url}/tile/{z}/{y}/{x}`],
-	            tileSize: this.options.supportHighDpiDisplays
-	                ? tileSize / window.devicePixelRatio
-	                : tileSize,
+	            tileSize,
 	            minzoom,
 	            maxzoom: this.options.maxZoom || maxzoom,
 	            attribution,

diff --git a/packages/mapbox-gl-esri-sources/src/ArcGISTiledMapService.ts b/packages/mapbox-gl-esri-sources/src/ArcGISTiledMapService.ts
@@ -241,9 +241,7 @@ export class ArcGISTiledMapService
     const sourceData = {
       type: "raster",
       tiles: [`${this.options.url}/tile/{z}/{y}/{x}`],
-      tileSize: this.options.supportHighDpiDisplays
-        ? tileSize / window.devicePixelRatio
-        : tileSize,
+      tileSize,
       minzoom,
       maxzoom: this.options.maxZoom || maxzoom,
       attribution,