feat: add a toggle project centroids component

.vscode/settings.json

@@ -45,5 +45,5 @@
     "source.organizeImports": "explicit"
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
 }

package.json

@@ -46,20 +46,20 @@
     "react-stately": "^3.33.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.1.0",
-    "@eslint/js": "^9.13.0",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/addon-onboarding": "^8.3.6",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/react": "^8.3.6",
-    "@storybook/react-vite": "^8.3.6",
-    "@storybook/test": "^8.3.6",
+    "@chromatic-com/storybook": "^3.2.2",
+    "@eslint/js": "^9.14.0",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-links": "^8.4.2",
+    "@storybook/addon-onboarding": "^8.4.2",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-vite": "^8.4.2",
+    "@storybook/test": "^8.4.2",
     "@types/eslint__js": "^8.42.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@typescript-eslint/eslint-plugin": "^8.11.0",
+    "@typescript-eslint/eslint-plugin": "^8.14.0",
     "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
     "cpy-cli": "^5.0.0",
@@ -68,20 +68,20 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.1.0-rc-5c56b873-20241107",
-    "eslint-plugin-storybook": "^0.10.1",
+    "eslint-plugin-storybook": "^0.11.0",
     "globals": "^15.12.0",
-    "lucide-react": "^0.454.0",
-    "postcss": "^8.4.47",
+    "lucide-react": "^0.456.0",
+    "postcss": "^8.4.49",
     "prettier": "^3.3.3",
     "prettier-plugin-organize-imports": "^4.1.0",
     "prettier-plugin-packagejson": "^2.5.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
-    "storybook": "^8.3.6",
+    "storybook": "^8.4.2",
     "tailwindcss": "^3.4.14",
     "tailwindcss-react-aria-components": "^1.1.6",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.13.0",
-    "vite": "^5.4.10",
+    "typescript-eslint": "^8.14.0",
+    "vite": "^5.4.11",
     "vite-plugin-package-version": "^1.1.0",
     "vitest": "^2.1.4"
   }

src/App.tsx

@@ -7,6 +7,7 @@ import { useOverlayTrigger } from 'react-aria';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useOverlayTriggerState } from 'react-stately';
 import {
+  CentroidToggle,
   FeatureData,
   MapContainer,
   ReferenceData,
@@ -31,7 +32,7 @@ ErrorFallback.propTypes = {
   error: PropTypes.object,
 };
 
-esriConfig.assetsPath = '/wri/js/ugrc/assets';
+esriConfig.assetsPath = import.meta.env.MODE === 'production' ? '/wri/js/ugrc/assets' : '/js/ugrc/assets';
 
 export default function App() {
   const { mapView, currentMapScale } = useMap();
@@ -61,7 +62,7 @@ export default function App() {
       <section className="relative flex min-h-0 flex-1 gap-2">
         <Drawer main state={sideBarState} {...sideBarTriggerProps}>
           <div className="mx-2 mb-2 grid grid-cols-1 gap-2">
-            <h2 className="text-xl font-bold">Map controls</h2>
+            <h2 className="text-xl font-bold dark:text-zinc-200">Map controls</h2>
             <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
               <ErrorBoundary FallbackComponent={ErrorFallback}>
                 <h5 className="dark:text-zinc-200">Search tool</h5>
@@ -75,6 +76,7 @@ export default function App() {
                 ) : (
                   <TagGroupLoader />
                 )}
+                {featureLayers.length > 0 && <CentroidToggle />}
               </ErrorBoundary>
             </div>
             <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">

src/components/CentroidToggle.tsx

@@ -0,0 +1,69 @@
+import { Button, Switch } from '@ugrc/utah-design-system';
+import { LockIcon, UnlockIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useMap } from './hooks';
+
+const defaultSwitchScale = 75000; // level 13
+
+export const CentroidToggle = () => {
+  const [selected, setSelected] = useState<boolean>(false);
+  const [locked, setLocked] = useState<boolean>(false);
+  const { currentMapScale, mapView } = useMap();
+
+  useEffect(() => {
+    setSelected((currentMapScale ?? 0) >= defaultSwitchScale);
+  }, [currentMapScale]);
+
+  useEffect(() => {
+    if (!mapView || !mapView?.map) {
+      return;
+    }
+
+    if (locked) {
+      return;
+    }
+
+    try {
+      mapView.map.findLayerById('feature-centroids').visible = selected;
+    } catch {
+      console.error('Error setting feature-centroid visibility');
+    }
+    try {
+      mapView.map.findLayerById('feature-polygons').visible = !selected;
+    } catch {
+      console.error('Error setting feature-polygon visibility');
+    }
+    try {
+      mapView.map.findLayerById('feature-lines').visible = !selected;
+    } catch {
+      console.error('Error setting feature-line visibility');
+    }
+    try {
+      mapView.map.findLayerById('feature-points').visible = !selected;
+    } catch {
+      console.error('Error setting feature-point visibility');
+    }
+  });
+
+  return (
+    <div>
+      <Switch aria-label="Toggle project centroids" isSelected={selected} onChange={setSelected} isDisabled={locked}>
+        Project centroids
+      </Switch>
+      <div className="flex items-center gap-1 pl-2">
+        <Button
+          variant="icon"
+          className="min-h-0 px-0.5"
+          aria-label="Lock centroids or features"
+          onPress={() => setLocked(!locked)}
+        >
+          {locked ? <LockIcon className="size-5" /> : <UnlockIcon className="size-5" />}
+        </Button>
+        <span className="text-sm italic text-zinc-600 dark:text-zinc-400">{locked ? 'Unlock' : 'Lock'} choice</span>
+      </div>
+      <p className="pt-0.5 text-sm italic text-zinc-600 dark:text-zinc-400">
+        Displaying {selected ? 'project centroids' : 'all project features'}.
+      </p>
+    </div>
+  );
+};

src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './CentroidToggle.tsx';
 export * from './FeatureData.tsx';
 export * from './Loaders.tsx';
 export * from './MapContainer.tsx';

vite.config.ts

@@ -4,16 +4,18 @@ import { defineConfig } from 'vite';
 import loadVersion from 'vite-plugin-package-version';
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react(), loadVersion()],
-  base: '/wri/',
-  build: {
-    assetsDir: '/wri/js/ugrc',
-    rollupOptions: {
-      input: {
-        main: resolve(__dirname, 'map.html'),
-        dev: resolve(__dirname, 'index.html'),
+export default defineConfig(({ mode }) => {
+  return {
+    plugins: [react(), loadVersion()],
+    base: mode === 'production' ? '/wri/' : '',
+    build: {
+      assetsDir: mode === 'production' ? 'wri/js/ugrc' : 'js/ugrc',
+      rollupOptions: {
+        input: {
+          main: resolve(__dirname, 'map.html'),
+          dev: resolve(__dirname, 'index.html'),
+        },
       },
     },
-  },
+  };
 });