WIP

seasketch · Jan 16, 2024 · 49b9534 · 49b9534
1 parent 023cfc1
commit 49b9534
Show file tree

Hide file tree

Showing 8 changed files with 269 additions and 168 deletions.
diff --git a/packages/client/src/admin/data/DataSettings.tsx b/packages/client/src/admin/data/DataSettings.tsx
@@ -9,6 +9,7 @@ import DataUploadDropzone from "../uploads/DataUploadDropzone";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import Legend, { LegendItem } from "../../dataLayers/Legend";
+import useCommonLegendProps from "../../dataLayers/useCommonLegendProps";
 
 export default function DataSettings() {
   const { path } = useRouteMatch();
@@ -40,15 +41,7 @@ export default function DataSettings() {
     }
   }, [mapContext.legends, mapContext.layerStatesByTocStaticId]);
 
-  const hiddenItems = useMemo(() => {
-    const hiddenItems: string[] = [];
-    for (const id in mapContext.layerStatesByTocStaticId) {
-      if (mapContext.layerStatesByTocStaticId[id].hidden) {
-        hiddenItems.push(id);
-      }
-    }
-    return hiddenItems;
-  }, [mapContext.layerStatesByTocStaticId]);
+  const legendProps = useCommonLegendProps(mapContext);
 
   return (
     <>
@@ -70,20 +63,11 @@ export default function DataSettings() {
                       maxHeight={800}
                       className="absolute ml-5 top-5 z-10"
                       items={legendState.items}
-                      hiddenItems={hiddenItems}
                       opacity={{}}
                       zOrder={{}}
                       map={mapContext.manager?.map}
                       onZOrderChange={() => {}}
-                      onHiddenItemsChange={(id, hidden) => {
-                        if (hidden) {
-                          console.log("hide");
-                          mapContext.manager?.hideLayer(id);
-                        } else {
-                          console.log("show");
-                          mapContext.manager?.showLayer(id);
-                        }
-                      }}
+                      {...legendProps}
                     />
                   )}
                   {data?.projectBySlug && (

diff --git a/packages/client/src/admin/data/TableOfContentsEditor.tsx b/packages/client/src/admin/data/TableOfContentsEditor.tsx
@@ -2,10 +2,7 @@ import { Suspense, useCallback, useContext, useEffect, useState } from "react";
 import { Route, useHistory, useParams } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 import Spinner from "../../components/Spinner";
-import {
-  MapContext,
-  sourceTypeIsCustomGLSource,
-} from "../../dataLayers/MapContextManager";
+import { MapContext } from "../../dataLayers/MapContextManager";
 import TableOfContentsMetadataModal from "../../dataLayers/TableOfContentsMetadataModal";
 import {
   useDeleteBranchMutation,
@@ -22,10 +19,8 @@ import useDialog from "../../components/useDialog";
 import FolderEditor from "./FolderEditor";
 import TreeView, { TreeItem } from "../../components/TreeView";
 import { useOverlayState } from "../../components/TreeView";
-import { currentSidebarState } from "../../projects/ProjectAppSidebar";
 import { DropdownOption } from "../../components/DropdownButton";
 import { DropdownDividerProps } from "../../components/ContextMenuDropdown";
-import { createBoundsRecursive } from "../../projects/OverlayLayers";
 import { SortingState } from "../../projects/Sketches/TreeItemComponent";
 import { OverlayFragment } from "../../generated/queries";
 import * as Menubar from "@radix-ui/react-menubar";
@@ -59,18 +54,22 @@ export default function TableOfContentsEditor() {
   const history = useHistory();
   const { slug } = useParams<{ slug: string }>();
 
-  const setSelectedView = useCallback((view: string) => {
-    if (view === "order") {
-      // eslint-disable-next-line i18next/no-literal-string
-      history.push(`/${slug}/admin/data/zindex`);
-    } else {
-      // eslint-disable-next-line i18next/no-literal-string
-      history.push(`/${slug}/admin/data`);
-    }
-  }, [history, slug]);
-
+  const setSelectedView = useCallback(
+    (view: string) => {
+      if (view === "order") {
+        // eslint-disable-next-line i18next/no-literal-string
+        history.push(`/${slug}/admin/data/zindex`);
+      } else {
+        // eslint-disable-next-line i18next/no-literal-string
+        history.push(`/${slug}/admin/data`);
+      }
+    },
+    [history, slug]
+  );
 
-  const selectedView = /zindex/.test(history.location.pathname) ? "order" : "tree";
+  const selectedView = /zindex/.test(history.location.pathname)
+    ? "order"
+    : "tree";
   const { manager } = useContext(MapContext);
   const { t } = useTranslation("nav");
 
@@ -86,10 +85,10 @@ export default function TableOfContentsEditor() {
   const [openMetadataViewerState, setOpenMetadataViewerState] = useState<
     | undefined
     | {
-      itemId: number;
-      sublayerId?: string;
-      customGLSource?: CustomGLSource<any>;
-    }
+        itemId: number;
+        sublayerId?: string;
+        customGLSource?: CustomGLSource<any>;
+      }
   >();
   const [openMetadataItemId, setOpenMetadataItemId] = useState<number>();
   const [publishOpen, setPublishOpen] = useState(false);
@@ -155,7 +154,6 @@ export default function TableOfContentsEditor() {
         tocQuery.data?.projectBySlug?.draftTableOfContentsItems || [];
       const item = items.find((item) => item.stableId === treeItem.id);
       if (item) {
-        const sidebar = currentSidebarState();
         const contextMenuOptions: (DropdownOption | DropdownDividerProps)[] =
           [];
         if (
@@ -167,50 +165,7 @@ export default function TableOfContentsEditor() {
             disabled: !item.bounds && !checkedItems.includes(item.stableId),
             label: t("Zoom to bounds"),
             onClick: async () => {
-              let bounds: [number, number, number, number] | undefined;
-              if (item.isFolder) {
-                bounds = createBoundsRecursive(item, items);
-              } else {
-                if (item.bounds) {
-                  bounds = item.bounds.map((coord: string) =>
-                    parseFloat(coord)
-                  ) as [number, number, number, number];
-                } else {
-                  const layer =
-                    layersAndSources.data?.projectBySlug?.dataLayersForItems?.find(
-                      (l) => l.id === item.dataLayerId
-                    );
-                  if (layer && layer.dataSourceId) {
-                    const source =
-                      layersAndSources.data?.projectBySlug?.dataSourcesForItems?.find(
-                        (s) => s.id === layer.dataSourceId
-                      );
-                    if (source && sourceTypeIsCustomGLSource(source.type)) {
-                      const customSource =
-                        mapContext.manager?.getCustomGLSource(source.id);
-                      const metadata =
-                        await customSource?.getComputedMetadata();
-                      if (metadata?.bounds) {
-                        bounds = metadata.bounds;
-                      }
-                    }
-                  }
-                }
-              }
-              if (
-                bounds &&
-                [180.0, 90.0, -180.0, -90.0].join(",") !== bounds.join(",")
-              ) {
-                mapContext.manager?.map?.fitBounds(bounds, {
-                  animate: true,
-                  padding: {
-                    bottom: 100,
-                    top: 100,
-                    left: sidebar.open ? sidebar.width + 100 : 100,
-                    right: 100,
-                  },
-                });
-              }
+              mapContext.manager?.zoomToTocItem(item.stableId);
             },
           });
         }
@@ -283,7 +238,6 @@ export default function TableOfContentsEditor() {
       mapContext.manager,
       t,
       tocQuery,
-      layersAndSources.data,
       checkedItems,
     ]
   );
@@ -472,8 +426,8 @@ export default function TableOfContentsEditor() {
         lastPublished={
           tocQuery.data?.projectBySlug?.tableOfContentsLastPublished
             ? new Date(
-              tocQuery.data.projectBySlug.tableOfContentsLastPublished!
-            )
+                tocQuery.data.projectBySlug.tableOfContentsLastPublished!
+              )
             : undefined
         }
       />
@@ -510,7 +464,8 @@ export default function TableOfContentsEditor() {
             // @ts-ignore
             dataSources={
               layersAndSources.data?.projectBySlug?.dataSourcesForItems
-            } />
+            }
+          />
         </Route>
       </div>
       {openLayerItemId && (
@@ -670,10 +625,11 @@ function Header({
               <Tooltip.Trigger>
                 <button
                   // disabled={Boolean(publishDisabled)}
-                  className={`${publishDisabled
-                    ? "bg-white text-black opacity-80"
-                    : "bg-primary-500 text-white"
-                    } rounded px-2 py-0.5 mx-1 shadow-sm`}
+                  className={`${
+                    publishDisabled
+                      ? "bg-white text-black opacity-80"
+                      : "bg-primary-500 text-white"
+                  } rounded px-2 py-0.5 mx-1 shadow-sm`}
                   onClick={onRequestPublish}
                 >
                   <Trans ns="admin:data">Publish</Trans>

diff --git a/packages/client/src/dataLayers/LayerInteractivityManager.ts b/packages/client/src/dataLayers/LayerInteractivityManager.ts
@@ -57,7 +57,7 @@ export default class LayerInteractivityManager extends EventEmitter {
   private sketchLayerIds: string[] = [];
   private focusedSketchId?: number;
   private customSources: { [sourceId: string]: CustomGLSource<any> } = {};
-  private tocItemLabels: { [stableId: string]: string } = {};
+  private tocItemLabels: { [stableId: string]: { label?: string } } = {};
   private selectedFeature?: mapboxgl.FeatureIdentifier;
   private hoveredFeature?: mapboxgl.FeatureIdentifier;
 
@@ -117,7 +117,11 @@ export default class LayerInteractivityManager extends EventEmitter {
     dataLayers: DataLayerDetailsFragment[],
     dataSources: { [dataSourceId: string]: DataSourceDetailsFragment },
     basemap: BasemapDetailsFragment,
-    tocItemLabels: { [stableId: string]: string }
+    tocItemLabels: {
+      [stableId: string]: {
+        label?: string;
+      };
+    }
   ) {
     this.tocItemLabels = tocItemLabels;
     const newActiveLayers: { [layerId: string]: DataLayerDetailsFragment } = {};
@@ -404,7 +408,7 @@ export default class LayerInteractivityManager extends EventEmitter {
         }));
         const lyr = this.layers[top.layer.id];
         // @ts-ignore
-        const layerLabel = (this.tocItemLabels || {})[lyr?.tocId];
+        const layerLabel = (this.tocItemLabels || {})[lyr?.tocId]?.label;
         new Popup({ closeOnClick: true, closeButton: true })
           .setLngLat([e.lngLat.lng, e.lngLat.lat])
           .setHTML(
@@ -615,7 +619,7 @@ export default class LayerInteractivityManager extends EventEmitter {
                   l.dataSourceId === data.sourceId
               );
               // @ts-ignore
-              layerLabel = (this.tocItemLabels || {})[lyr?.tocId];
+              const layerLabel = (this.tocItemLabels || {})[lyr?.tocId]?.label;
             }
 
             const properties = sublayerData[0]?.attributes || {};