From 37db0e6d16ee2f88a76e85117316872138d6131d Mon Sep 17 00:00:00 2001
From: daniel-slaugh <daniel.slaugh@hotmail.com>
Date: Fri, 26 Jun 2026 11:56:44 -0600
Subject: [PATCH 01/19] Material Design 3 style nav rail

---
 apps/qc-app/src/assets/icon-color-thick.svg   |  23 ++
 .../components/Navigation/NavigationRail.vue  | 290 ++++++++++++++----
 .../Navigation/PerformanceCalibration.vue     | 128 ++++++--
 3 files changed, 355 insertions(+), 86 deletions(-)
 create mode 100644 apps/qc-app/src/assets/icon-color-thick.svg

diff --git a/apps/qc-app/src/assets/icon-color-thick.svg b/apps/qc-app/src/assets/icon-color-thick.svg
new file mode 100644
index 00000000..24a5ec10
--- /dev/null
+++ b/apps/qc-app/src/assets/icon-color-thick.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1280">
+  <defs>
+    <style>
+      .wave {
+        fill: #478fcc;
+        stroke: #478fcc;
+        stroke-linejoin: round;
+        stroke-width: 24px;
+      }
+
+      .graph {
+        fill: #4daf4e;
+        stroke: #4daf4e;
+        stroke-linejoin: round;
+        stroke-width: 18px;
+      }
+    </style>
+  </defs>
+  <path class="wave" d="m1072.1,936.38c-93.56,76.2-191.35,140.64-272.57,96.41-16.39-8.92-31.79-22.26-48.09-36.38-28.5-24.68-57.96-50.19-97.42-55.85-33.89-4.87-65.68,6.99-93.74,17.48l-7.44,2.77c-90.83,33.44-160.86,34.28-214.09,2.48-17.22-10.27-33.05-24.25-49.81-39.06-20.71-18.29-42.14-37.2-67.85-50.27-57.56-29.28-119.6-22.39-181.08-4.04v50.83c57.23-18.84,111.64-27.6,159.06-3.48,20.22,10.28,38.43,26.37,57.71,43.39,17.69,15.61,35.98,31.76,57.06,44.35,65.75,39.23,151.81,39.7,255.81,1.38l7.64-2.83c24.8-9.27,48.21-17.94,69.83-14.92,25.34,3.64,48.25,23.49,72.51,44.5,17.53,15.19,35.67,30.89,56.67,42.33,26.6,14.47,53.78,20.52,80.8,20.52,95.98,0,189.67-76.31,245.69-121.93,57.12-46.52,103.11-65.49,137.22-56.77v-49.73c-47.05-6.73-103.23,16.16-167.9,68.82Z"/>
+  <path class="wave" d="m1057.45,743.24c-93.56,76.2-191.35,140.66-272.57,96.41-16.39-8.92-31.79-22.27-48.1-36.4-28.49-24.66-57.95-50.18-97.43-55.85-33.82-4.87-65.65,7.02-93.72,17.5l-7.44,2.77c-90.83,33.44-160.87,34.26-214.09,2.48-17.22-10.28-33.06-24.27-49.84-39.07-20.71-18.29-42.12-37.19-67.83-50.27-53-26.96-109.78-23.23-166.44-8.16v50.37c51.85-15.47,101.05-20.91,144.41,1.1,20.21,10.28,38.41,26.35,57.7,43.39,17.69,15.61,35.99,31.78,57.09,44.37,65.73,39.25,151.8,39.7,255.8,1.38l7.64-2.83c24.82-9.27,48.25-17.99,69.82-14.93,25.35,3.65,48.25,23.49,72.51,44.51,17.54,15.19,35.68,30.89,56.68,42.33,26.6,14.47,53.78,20.52,80.8,20.52,95.98,0,189.67-76.31,245.69-121.93,65.76-53.57,116.78-70.59,151.86-50.89v-52.5c-49.88-14.44-111.03,7.46-182.55,65.71Z"/>
+  <path class="graph" d="m1133.58,223.8c-58.78,0-106.42,47.65-106.42,106.42,0,27.14,10.25,51.84,26.98,70.64l-130.8,147.72c-17.19-11.92-38.04-18.95-60.54-18.95s-43.44,7.07-60.66,19.04l-166.82-188.04c16.5-18.75,26.58-43.27,26.58-70.2,0-58.78-47.65-106.42-106.42-106.42s-104.91,46.28-106.29,103.86l-197.21,19.48c-10.48-47.77-52.98-83.54-103.89-83.54-58.77,0-106.42,47.65-106.42,106.42s47.65,106.42,106.42,106.42,105.06-46.41,106.3-104.1l197.13-19.47c5.88,27.13,22.06,50.42,44.3,65.5l-51.11,100.28c-11.32-4.1-23.48-6.46-36.22-6.46-58.78,0-106.42,47.65-106.42,106.42s47.65,106.42,106.42,106.42,106.42-47.65,106.42-106.42c0-37-18.9-69.57-47.56-88.64l51.02-100.1c11.57,4.31,24.04,6.78,37.11,6.78,22.72,0,43.73-7.18,61.01-19.3l166.77,187.98c-16.67,18.79-26.88,43.44-26.88,70.53,0,58.78,47.65,106.42,106.42,106.42s106.42-47.65,106.42-106.42c0-27.14-10.25-51.83-26.98-70.63l130.8-147.72c17.19,11.92,38.04,18.95,60.54,18.95,58.77,0,106.42-47.65,106.42-106.42s-47.65-106.42-106.42-106.42ZM148.2,404.27c-40.82,0-73.9-33.09-73.9-73.9s33.09-73.9,73.9-73.9,73.9,33.09,73.9,73.9-33.09,73.9-73.9,73.9Zm260.28,248.43c-40.82,0-73.9-33.09-73.9-73.9s33.09-73.9,73.9-73.9,73.9,33.09,73.9,73.9-33.09,73.9-73.9,73.9Zm146.99-288.37c-40.82,0-73.9-33.09-73.9-73.9s33.09-73.9,73.9-73.9,73.9,33.09,73.9,73.9-33.09,73.9-73.9,73.9Zm307.32,345.62c-40.82,0-73.9-33.09-73.9-73.9s33.09-73.9,73.9-73.9,73.9,33.09,73.9,73.9-33.09,73.9-73.9,73.9Zm270.79-305.83c-40.82,0-73.9-33.09-73.9-73.9s33.09-73.9,73.9-73.9,73.9,33.09,73.9,73.9-33.09,73.9-73.9,73.9Z"/>
+</svg>
diff --git a/apps/qc-app/src/components/Navigation/NavigationRail.vue b/apps/qc-app/src/components/Navigation/NavigationRail.vue
index 0a88206e..027da2d9 100644
--- a/apps/qc-app/src/components/Navigation/NavigationRail.vue
+++ b/apps/qc-app/src/components/Navigation/NavigationRail.vue
@@ -1,17 +1,19 @@
 <template>
-  <v-navigation-drawer permanent rail class="bg-navbar">
-    <v-list-item
-      class="pa-2 d-flex justify-center"
-      role="link"
-      aria-label="Home"
-      @click="guardExit(goHome)"
-    >
-      <v-img :src="HydroServerIcon" width="28" height="28" alt="Home" />
-    </v-list-item>
-
-    <v-divider />
-
-    <v-list density="compact" nav>
+  <v-navigation-drawer permanent :width="88" class="nav-rail">
+    <div class="rail-main">
+      <button
+        class="home-icon-btn"
+        aria-label="Home"
+        @click="guardExit(goHome)"
+      >
+        <v-img
+          :src="HydroServerIcon"
+          width="30"
+          height="30"
+          alt="HydroServer Icon"
+        />
+      </button>
+
       <v-tooltip
         v-for="item in items"
         :key="item.title"
@@ -19,56 +21,97 @@
         :open-delay="400"
       >
         <template #activator="{ props: tipProps }">
-          <v-list-item
+          <button
             v-bind="tipProps"
-            class="nav-rail__item"
-            color="primary"
-            :prepend-icon="item.icon"
-            :value="item.title"
-            :active="currentView === item.title"
-            :disabled="item.title === 'Edit' && !qcDatastream"
+            class="rail-btn"
+            :class="{
+              active: currentView === item.title,
+              disabled: item.title === 'Edit' && !qcDatastream,
+            }"
+            :aria-disabled="item.title === 'Edit' && !qcDatastream"
+            :tabindex="item.title === 'Edit' && !qcDatastream ? -1 : 0"
+            :style="
+              currentView === item.title
+                ? {
+                    '--accent': 'rgb(var(--v-theme-primary))',
+                    '--accent-light': 'rgba(var(--v-theme-primary), 0.14)',
+                  }
+                : {}
+            "
             :data-testid="`nav-rail-item-${item.title.toLowerCase()}`"
-            @click="guardExit(() => onRailItemClicked(item.title as DrawerType))"
-          />
+            @click="onMainRailItemClicked(item.title as DrawerType)"
+          >
+            <span
+              class="rail-pill"
+              :style="
+                currentView === item.title
+                  ? { background: 'var(--accent-light)' }
+                  : {}
+              "
+            >
+              <v-icon
+                :icon="item.icon"
+                size="22"
+                :color="currentView === item.title ? 'primary' : undefined"
+              />
+            </span>
+            <span
+              class="rail-label"
+              :style="
+                currentView === item.title
+                  ? { color: 'var(--accent)', fontWeight: 600 }
+                  : {}
+              "
+            >
+              {{ item.title }}
+            </span>
+          </button>
         </template>
         <span v-if="item.title === 'Edit' && !qcDatastream">
           Edit: select a datastream for quality control before navigating here.
         </span>
         <span v-else>{{ item.title }}</span>
       </v-tooltip>
-    </v-list>
+    </div>
 
-    <template #append>
-      <v-divider />
-      <v-list density="compact" nav>
-        <PerformanceCalibration />
-        <v-tooltip location="right" :open-delay="400">
-          <template #activator="{ props: tipProps }">
-            <v-list-item
-              v-bind="tipProps"
-              prepend-icon="mdi-view-grid-outline"
-              @click.prevent="guardExit(onSwitchWorkspace)"
-            />
-          </template>
-          <span>
-            <template v-if="selectedWorkspace">
-              Workspace: {{ selectedWorkspace.name }} · click to switch
-            </template>
-            <template v-else>Select a workspace</template>
-          </span>
-        </v-tooltip>
-        <v-tooltip location="right" :open-delay="400">
-          <template #activator="{ props: tipProps }">
-            <v-list-item
-              v-bind="tipProps"
-              prepend-icon="mdi-logout"
-              @click.prevent="guardExit(onLogout)"
-            />
+    <div class="rail-bottom">
+      <PerformanceCalibration rail-button />
+      <v-tooltip location="right" :open-delay="400">
+        <template #activator="{ props: tipProps }">
+          <button
+            v-bind="tipProps"
+            class="rail-btn rail-btn-secondary"
+            @click.prevent="guardExit(onSwitchWorkspace)"
+          >
+            <span class="rail-pill rail-pill-secondary">
+              <v-icon icon="mdi-briefcase-outline" size="22" />
+            </span>
+            <span class="rail-label">Workspaces</span>
+          </button>
+        </template>
+        <span>
+          <template v-if="selectedWorkspace">
+            Workspace: {{ selectedWorkspace.name }} · click to switch
           </template>
-          <span>Log out</span>
-        </v-tooltip>
-      </v-list>
-    </template>
+          <template v-else>Select a workspace</template>
+        </span>
+      </v-tooltip>
+      <v-tooltip location="right" :open-delay="400">
+        <template #activator="{ props: tipProps }">
+          <button
+            v-bind="tipProps"
+            class="rail-btn rail-btn-secondary"
+            @click.prevent="guardExit(onLogout)"
+          >
+            <span class="rail-pill rail-pill-secondary">
+              <v-icon icon="mdi-logout" size="22" />
+            </span>
+            <span class="rail-label">Log out</span>
+          </button>
+        </template>
+        <span>Log out</span>
+      </v-tooltip>
+    </div>
   </v-navigation-drawer>
 
   <SelectDrawer v-if="isDrawerOpen && selectedDrawer === DrawerType.Select" />
@@ -124,7 +167,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import HydroServerIcon from '@/assets/favicon-32x32.png'
+import HydroServerIcon from '@/assets/icon-color-thick.svg'
 import SelectDrawer from '@/components/Navigation/SelectDrawer.vue'
 import PerformanceCalibration from '@/components/Navigation/PerformanceCalibration.vue'
 import { useUIStore, DrawerType } from '@/store/userInterface'
@@ -145,7 +188,8 @@ const { qcDatastream, qcDatastreamId } = storeToRefs(useDataVisStore())
 const { hs } = storeToRefs(useHydroServer())
 const workspaceStore = useWorkspaceStore()
 const { selectedWorkspace } = storeToRefs(workspaceStore)
-const { editHistory, isUpdating, selectedSeries } = storeToRefs(usePlotlyStore())
+const { editHistory, isUpdating, selectedSeries } =
+  storeToRefs(usePlotlyStore())
 const { redraw } = usePlotlyStore()
 const { submitQcEdits } = useQcSubmission()
 const { clearSelected } = useDataSelection()
@@ -228,6 +272,11 @@ const items = ref([
   { title: 'Edit', icon: 'mdi-pencil' },
 ])
 
+function onMainRailItemClicked(item: DrawerType) {
+  if (item === DrawerType.Edit && !qcDatastream.value) return
+  guardExit(() => onRailItemClicked(item))
+}
+
 async function onLogout() {
   await hs.value.session.logout()
   workspaceStore.clearSelection()
@@ -248,16 +297,129 @@ async function onSwitchWorkspace() {
 </script>
 
 <style scoped>
-.nav-rail__item.v-list-item--active {
-  background-color: rgba(var(--v-theme-primary), 0.14);
+.nav-rail {
+  width: 88px;
+  border-right: 1px solid #e8e8e8;
+  background: #fafafa;
+  flex-shrink: 0;
+}
+
+.nav-rail :deep(.v-navigation-drawer__content) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 0;
+  overflow: hidden;
+}
+
+.rail-main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  width: 100%;
+}
+
+.home-icon-btn {
+  width: 48px;
+  height: 48px;
+  margin: 0 0 10px;
+  border: none;
+  border-radius: 14px;
+  background: #ffffff;
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.18),
+    0 1px 2px rgba(0, 0, 0, 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    box-shadow 0.15s,
+    transform 0.15s;
+}
+
+.home-icon-btn:hover {
+  background: #f8fbff;
+  box-shadow:
+    0 2px 6px rgba(0, 0, 0, 0.2),
+    0 1px 3px rgba(0, 0, 0, 0.14);
+}
+
+.home-icon-btn:active {
+  transform: translateY(1px);
+}
+
+.rail-bottom {
+  margin-top: auto;
+  width: 100%;
+  padding-top: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.rail-btn,
+:deep(.rail-btn) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 4px;
+  width: 100%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.rail-btn:hover .rail-pill,
+:deep(.rail-btn:hover .rail-pill) {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.rail-btn.disabled {
+  cursor: default;
+  color: #9aa0a6;
+}
+
+.rail-btn.disabled:hover .rail-pill {
+  background: transparent;
+}
+
+.rail-pill,
+:deep(.rail-pill) {
+  width: 58px;
+  height: 32px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition: background 0.15s;
+}
+
+.rail-btn-secondary,
+:deep(.rail-btn-secondary) {
+  color: #5f6368;
+}
+
+.rail-btn-secondary:hover .rail-pill-secondary,
+:deep(.rail-btn-secondary:hover .rail-pill-secondary) {
+  background: rgba(21, 101, 192, 0.08);
+}
+
+.rail-pill-secondary,
+:deep(.rail-pill-secondary) {
+  background: transparent;
 }
 
-.nav-rail__item.v-list-item--active::before {
-  content: '';
-  position: absolute;
-  inset: 4px auto 4px 0;
-  width: 3px;
-  border-radius: 0 2px 2px 0;
-  background-color: rgb(var(--v-theme-primary));
+.rail-label,
+:deep(.rail-label) {
+  font-size: 10.5px;
+  color: #49454f;
+  line-height: 1.2;
+  text-align: center;
 }
 </style>
diff --git a/apps/qc-app/src/components/Navigation/PerformanceCalibration.vue b/apps/qc-app/src/components/Navigation/PerformanceCalibration.vue
index e61cce2e..17d6e90e 100644
--- a/apps/qc-app/src/components/Navigation/PerformanceCalibration.vue
+++ b/apps/qc-app/src/components/Navigation/PerformanceCalibration.vue
@@ -8,7 +8,20 @@
     <template #activator="{ props: menuProps }">
       <v-tooltip location="right" :open-delay="400">
         <template #activator="{ props: tipProps }">
+          <button
+            v-if="props.railButton"
+            v-bind="{ ...menuProps, ...tipProps }"
+            type="button"
+            class="rail-btn rail-btn-secondary"
+            data-testid="calibration-button"
+          >
+            <span class="rail-pill rail-pill-secondary">
+              <v-icon icon="mdi-speedometer" size="22" />
+            </span>
+            <span class="rail-label">Performance</span>
+          </button>
           <v-list-item
+            v-else
             v-bind="{ ...menuProps, ...tipProps }"
             prepend-icon="mdi-speedometer"
             data-testid="calibration-button"
@@ -58,15 +71,17 @@
           density="compact"
           class="mt-2 text-body-small"
         >
-          SharedArrayBuffer is unavailable in this context: all operations
-          are forced inline. Enable COOP/COEP headers to restore workers.
+          SharedArrayBuffer is unavailable in this context: all operations are
+          forced inline. Enable COOP/COEP headers to restore workers.
         </v-alert>
 
         <template v-if="isDev">
           <v-divider class="my-3" />
           <v-expansion-panels variant="accordion" flat>
             <v-expansion-panel>
-              <v-expansion-panel-title class="text-body-small font-weight-medium">
+              <v-expansion-panel-title
+                class="text-body-small font-weight-medium"
+              >
                 Benchmark details
               </v-expansion-panel-title>
               <v-expansion-panel-text class="text-body-small">
@@ -74,15 +89,21 @@
                   <tbody>
                     <tr>
                       <td>Spawn overhead</td>
-                      <td class="numeric">{{ fmt(profile.spawnOverheadMs, 'ms') }}</td>
+                      <td class="numeric">
+                        {{ fmt(profile.spawnOverheadMs, 'ms') }}
+                      </td>
                     </tr>
                     <tr>
                       <td>Inline throughput</td>
-                      <td class="numeric">{{ fmt(profile.inlineThroughput, 'k el/ms', 1000) }}</td>
+                      <td class="numeric">
+                        {{ fmt(profile.inlineThroughput, 'k el/ms', 1000) }}
+                      </td>
                     </tr>
                     <tr>
                       <td>Worker throughput</td>
-                      <td class="numeric">{{ fmt(profile.workerThroughput, 'k el/ms', 1000) }}</td>
+                      <td class="numeric">
+                        {{ fmt(profile.workerThroughput, 'k el/ms', 1000) }}
+                      </td>
                     </tr>
                     <tr>
                       <td>Hardware concurrency</td>
@@ -101,15 +122,21 @@
                     <tbody>
                       <tr>
                         <td>Spawn roundtrip</td>
-                        <td class="numeric">{{ fmtSamples(detail.samples.spawnRoundtripMs) }}</td>
+                        <td class="numeric">
+                          {{ fmtSamples(detail.samples.spawnRoundtripMs) }}
+                        </td>
                       </tr>
                       <tr>
                         <td>Inline scan</td>
-                        <td class="numeric">{{ fmtSamples(detail.samples.inlineScanMs) }}</td>
+                        <td class="numeric">
+                          {{ fmtSamples(detail.samples.inlineScanMs) }}
+                        </td>
                       </tr>
                       <tr>
                         <td>Worker scan</td>
-                        <td class="numeric">{{ fmtSamples(detail.samples.workerScanMs) }}</td>
+                        <td class="numeric">
+                          {{ fmtSamples(detail.samples.workerScanMs) }}
+                        </td>
                       </tr>
                     </tbody>
                   </table>
@@ -118,22 +145,22 @@
             </v-expansion-panel>
 
             <v-expansion-panel>
-              <v-expansion-panel-title class="text-body-small font-weight-medium">
+              <v-expansion-panel-title
+                class="text-body-small font-weight-medium"
+              >
                 Operation table
               </v-expansion-panel-title>
               <v-expansion-panel-text class="text-body-small">
                 <p class="text-medium-emphasis mb-2">
-                  Weight is the operation's relative per-element cost
-                  against the reference
-                  <code>VALUE_THRESHOLD</code> scan (weight 1.0). It
-                  describes the algorithm, not the machine, so it's
-                  shipped with qc-utils, not measured at runtime.
-                  Recalibration only re-measures the three device
-                  primitives above; weights stay fixed. The dispatch
-                  formula is
-                  <code>weight × N / throughput</code>, so one
-                  universal weight per op plus your per-device
-                  throughputs covers the full operation catalog.
+                  Weight is the operation's relative per-element cost against
+                  the reference
+                  <code>VALUE_THRESHOLD</code> scan (weight 1.0). It describes
+                  the algorithm, not the machine, so it's shipped with qc-utils,
+                  not measured at runtime. Recalibration only re-measures the
+                  three device primitives above; weights stay fixed. The
+                  dispatch formula is <code>weight × N / throughput</code>, so
+                  one universal weight per op plus your per-device throughputs
+                  covers the full operation catalog.
                 </p>
                 <table class="calibration-table op-table">
                   <thead>
@@ -148,7 +175,13 @@
                       <td>{{ row.op }}</td>
                       <td>
                         <v-chip
-                          :color="row.mode === 'calibrated' ? 'primary' : (row.mode === 'always-inline' ? 'success' : 'default')"
+                          :color="
+                            row.mode === 'calibrated'
+                              ? 'primary'
+                              : row.mode === 'always-inline'
+                                ? 'success'
+                                : 'default'
+                          "
                           size="x-small"
                           variant="tonal"
                         >
@@ -180,6 +213,10 @@ import {
   type DeviceProfile,
 } from '@uwrl/qc-utils'
 
+const props = withDefaults(defineProps<{ railButton?: boolean }>(), {
+  railButton: false,
+})
+
 const isDev = import.meta.env.DEV
 const open = ref(false)
 const running = ref(false)
@@ -258,6 +295,53 @@ function fmtSamples(arr: number[] | undefined): string {
   letter-spacing: 0.03em;
 }
 
+.rail-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 4px;
+  width: 100%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.rail-btn:hover .rail-pill {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.rail-pill {
+  width: 58px;
+  height: 32px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition: background 0.15s;
+}
+
+.rail-btn-secondary {
+  color: #5f6368;
+}
+
+.rail-btn-secondary:hover .rail-pill-secondary {
+  background: rgba(21, 101, 192, 0.08);
+}
+
+.rail-pill-secondary {
+  background: transparent;
+}
+
+.rail-label {
+  font-size: 10.5px;
+  color: #49454f;
+  line-height: 1.2;
+  text-align: center;
+}
+
 .calibration-table td.numeric,
 .calibration-table th.numeric {
   text-align: right;

From 443d05c3af1c60991ccb18d2b2b42af95843f0f3 Mon Sep 17 00:00:00 2001
From: daniel-slaugh <daniel.slaugh@hotmail.com>
Date: Fri, 26 Jun 2026 13:02:43 -0600
Subject: [PATCH 02/19] Make iconography consistent

---
 .../components/Browse/BrowseFilterTool.vue    | 14 ++++--
 .../components/Datastream/DatastreamTable.vue | 27 ++++++------
 .../Metadata/ObservedPropertyTable.vue        |  4 +-
 .../Metadata/ProcessingLevelTable.vue         |  4 +-
 .../Metadata/ResultQualifierTable.vue         |  4 +-
 .../src/components/Metadata/SensorTable.vue   |  4 +-
 .../src/components/Metadata/UnitTable.vue     |  4 +-
 .../data-products/RatingCurveTable.vue        |  8 ++--
 .../VisualizeData/DataVisFiltersDrawer.vue    | 17 ++++---
 .../Workspace/AccessControl/ManageApiKeys.vue |  4 +-
 .../OrchestrationWorkspaceManager.vue         | 15 ++-----
 .../components/Workspace/WorkspaceToolbar.vue | 44 +++++++++----------
 .../src/components/base/Navbar.vue            | 24 +++++-----
 .../src/pages/account/Profile.vue             |  7 ++-
 14 files changed, 93 insertions(+), 87 deletions(-)

diff --git a/apps/data-management/src/components/Browse/BrowseFilterTool.vue b/apps/data-management/src/components/Browse/BrowseFilterTool.vue
index 3f4c7f09..47230162 100644
--- a/apps/data-management/src/components/Browse/BrowseFilterTool.vue
+++ b/apps/data-management/src/components/Browse/BrowseFilterTool.vue
@@ -32,7 +32,7 @@
           item-title="name"
           return-object
           clearable
-          :prepend-inner-icon="mdiMapMarker"
+          :prepend-inner-icon="mdiMapMarkerOutline"
           label="Search sites"
           autocomplete="new-password"
           hide-details
@@ -51,7 +51,7 @@
           item-title="name"
           return-object
           clearable
-          :prepend-inner-icon="mdiDomain"
+          :prepend-inner-icon="mdiBriefcaseOutline"
           label="Workspaces"
           autocomplete="new-password"
           multiple
@@ -116,7 +116,12 @@ import {
 } from '@/utils/browseFilters'
 import hs, { Workspace } from '@hydroserver/client'
 import type { ThingMarker } from '@/types'
-import { mdiClose, mdiDomain, mdiMapMarker, mdiWaterPump } from '@mdi/js'
+import {
+  mdiBriefcaseOutline,
+  mdiClose,
+  mdiMapMarkerOutline,
+  mdiWaterPump,
+} from '@mdi/js'
 
 const vocabularyStore = useVocabularyStore()
 const route = useRoute()
@@ -231,7 +236,8 @@ const applyRouteState = () => {
   isApplyingRouteState.value = true
 
   selectedSite.value = state.siteIds.length
-    ? sortedThings.value.find((thing) => thing.id === state.siteIds[0]) ?? null
+    ? (sortedThings.value.find((thing) => thing.id === state.siteIds[0]) ??
+      null)
     : null
   selectedWorkspaces.value = state.workspaceIds.length
     ? workspaces.value.filter((workspace) =>
diff --git a/apps/data-management/src/components/Datastream/DatastreamTable.vue b/apps/data-management/src/components/Datastream/DatastreamTable.vue
index 0f097c42..b0aca068 100644
--- a/apps/data-management/src/components/Datastream/DatastreamTable.vue
+++ b/apps/data-management/src/components/Datastream/DatastreamTable.vue
@@ -168,8 +168,8 @@
                 !linkedTasksForDatastream(item.id).length
                   ? mdiLinkOff
                   : linkedTasksForDatastream(item.id).length > 1
-                  ? mdiAlertOctagon
-                  : linkedTasksForDatastream(item.id)[0].icon
+                    ? mdiAlertOctagon
+                    : linkedTasksForDatastream(item.id)[0].icon
               "
               size="20"
             />
@@ -180,8 +180,8 @@
                     linkedTasksForDatastream(item.id).length > 1
                       ? 'Multiple task targets'
                       : linkedTasksForDatastream(item.id).length === 1
-                      ? linkedTasksForDatastream(item.id)[0].label
-                      : 'No task connected'
+                        ? linkedTasksForDatastream(item.id)[0].label
+                        : 'No task connected'
                   }}
                 </span>
                 <template v-if="linkedTasksForDatastream(item.id).length === 1">
@@ -442,7 +442,7 @@
                   "
                 >
                   <v-list-item
-                    :prepend-icon="mdiDelete"
+                    :prepend-icon="mdiTrashCanOutline"
                     title="Delete datastream"
                     :data-testid="`delete-datastream-${item.id}`"
                     @click="openDialog(item, 'delete')"
@@ -456,7 +456,7 @@
                       workspace
                     )
                   "
-                  :prepend-icon="mdiDeleteOutline"
+                  :prepend-icon="mdiTrashCanOutline"
                   title="Delete data from datastream"
                   :data-testid="`delete-datastream-data-${item.id}`"
                   @click="openObservationDialog(item)"
@@ -742,7 +742,7 @@
                     "
                   >
                     <v-list-item
-                      :prepend-icon="mdiDelete"
+                      :prepend-icon="mdiTrashCanOutline"
                       title="Delete datastream"
                       :data-testid="`delete-datastream-${item.id}`"
                       @click="openDialog(item, 'delete')"
@@ -756,7 +756,7 @@
                         workspace
                       )
                     "
-                    :prepend-icon="mdiDeleteOutline"
+                    :prepend-icon="mdiTrashCanOutline"
                     title="Delete data from datastream"
                     :data-testid="`delete-datastream-data-${item.id}`"
                     @click="openObservationDialog(item)"
@@ -815,8 +815,8 @@
               !linkedTasksForDatastream(item.id).length
                 ? mdiLinkOff
                 : linkedTasksForDatastream(item.id).length > 1
-                ? mdiAlertOctagon
-                : linkedTasksForDatastream(item.id)[0].icon
+                  ? mdiAlertOctagon
+                  : linkedTasksForDatastream(item.id)[0].icon
             "
             size="20"
           />
@@ -827,8 +827,8 @@
                   linkedTasksForDatastream(item.id).length > 1
                     ? 'Multiple task targets'
                     : linkedTasksForDatastream(item.id).length === 1
-                    ? linkedTasksForDatastream(item.id)[0].label
-                    : 'No task connected'
+                      ? linkedTasksForDatastream(item.id)[0].label
+                      : 'No task connected'
                 }}
               </span>
               <template v-if="linkedTasksForDatastream(item.id).length === 1">
@@ -1053,8 +1053,7 @@ import {
   mdiChartLine,
   mdiChevronRight,
   mdiContentCopy,
-  mdiDelete,
-  mdiDeleteOutline,
+  mdiTrashCanOutline,
   mdiDotsVertical,
   mdiDownload,
   mdiFileEyeOutline,
diff --git a/apps/data-management/src/components/Metadata/ObservedPropertyTable.vue b/apps/data-management/src/components/Metadata/ObservedPropertyTable.vue
index 4b8edec8..224c691a 100644
--- a/apps/data-management/src/components/Metadata/ObservedPropertyTable.vue
+++ b/apps/data-management/src/components/Metadata/ObservedPropertyTable.vue
@@ -8,7 +8,7 @@
   >
     <template v-slot:item.actions="{ item }" v-if="canEdit">
       <v-icon :icon="mdiPencil" @click="openDialog(item, 'edit')" />
-      <v-icon :icon="mdiDelete" @click="openDialog(item, 'delete')" />
+      <v-icon :icon="mdiTrashCanOutline" @click="openDialog(item, 'delete')" />
     </template>
   </v-data-table-virtual>
 
@@ -44,7 +44,7 @@ import hs, { ObservedProperty } from '@hydroserver/client'
 import { useTableLogic } from '@/composables/useTableLogic'
 import { computed, toRef } from 'vue'
 import { useSystemTableLogic } from '@/composables/useSystemTableLogic'
-import { mdiDelete, mdiPencil } from '@mdi/js'
+import { mdiTrashCanOutline, mdiPencil } from '@mdi/js'
 
 const props = defineProps<{
   search: string | undefined
diff --git a/apps/data-management/src/components/Metadata/ProcessingLevelTable.vue b/apps/data-management/src/components/Metadata/ProcessingLevelTable.vue
index 1ce4f8f6..1f78a75d 100644
--- a/apps/data-management/src/components/Metadata/ProcessingLevelTable.vue
+++ b/apps/data-management/src/components/Metadata/ProcessingLevelTable.vue
@@ -8,7 +8,7 @@
   >
     <template v-slot:item.actions="{ item }" v-if="canEdit">
       <v-icon :icon="mdiPencil" @click="openDialog(item, 'edit')" />
-      <v-icon :icon="mdiDelete" @click="openDialog(item, 'delete')" />
+      <v-icon :icon="mdiTrashCanOutline" @click="openDialog(item, 'delete')" />
     </template>
   </v-data-table-virtual>
 
@@ -41,7 +41,7 @@ import hs, { ProcessingLevel } from '@hydroserver/client'
 import { useTableLogic } from '@/composables/useTableLogic'
 import { computed, toRef } from 'vue'
 import { useSystemTableLogic } from '@/composables/useSystemTableLogic'
-import { mdiDelete, mdiPencil } from '@mdi/js'
+import { mdiTrashCanOutline, mdiPencil } from '@mdi/js'
 
 const props = defineProps<{
   search: string | undefined
diff --git a/apps/data-management/src/components/Metadata/ResultQualifierTable.vue b/apps/data-management/src/components/Metadata/ResultQualifierTable.vue
index d1416053..bec74c07 100644
--- a/apps/data-management/src/components/Metadata/ResultQualifierTable.vue
+++ b/apps/data-management/src/components/Metadata/ResultQualifierTable.vue
@@ -8,7 +8,7 @@
   >
     <template v-slot:item.actions="{ item }" v-if="canEdit">
       <v-icon :icon="mdiPencil" @click="openDialog(item, 'edit')" />
-      <v-icon :icon="mdiDelete" @click="openDialog(item, 'delete')" />
+      <v-icon :icon="mdiTrashCanOutline" @click="openDialog(item, 'delete')" />
     </template>
   </v-data-table-virtual>
 
@@ -41,7 +41,7 @@ import DeleteMetadataCard from '@/components/Metadata/DeleteMetadataCard.vue'
 import ResultQualifierFormCard from '@/components/Metadata/ResultQualifierFormCard.vue'
 import { toRef } from 'vue'
 import { useSystemTableLogic } from '@/composables/useSystemTableLogic'
-import { mdiDelete, mdiPencil } from '@mdi/js'
+import { mdiTrashCanOutline, mdiPencil } from '@mdi/js'
 
 const props = defineProps<{
   search: string | undefined
diff --git a/apps/data-management/src/components/Metadata/SensorTable.vue b/apps/data-management/src/components/Metadata/SensorTable.vue
index c1f761cf..8dcb4500 100644
--- a/apps/data-management/src/components/Metadata/SensorTable.vue
+++ b/apps/data-management/src/components/Metadata/SensorTable.vue
@@ -8,7 +8,7 @@
   >
     <template v-slot:item.actions="{ item }" v-if="canEdit">
       <v-icon :icon="mdiPencil" @click="openDialog(item, 'edit')" />
-      <v-icon :icon="mdiDelete" @click="openDialog(item, 'delete')" />
+      <v-icon :icon="mdiTrashCanOutline" @click="openDialog(item, 'delete')" />
     </template>
   </v-data-table-virtual>
 
@@ -41,7 +41,7 @@ import hs, { Sensor } from '@hydroserver/client'
 import { useTableLogic } from '@/composables/useTableLogic'
 import { computed, toRef } from 'vue'
 import { useSystemTableLogic } from '@/composables/useSystemTableLogic'
-import { mdiDelete, mdiPencil } from '@mdi/js'
+import { mdiTrashCanOutline, mdiPencil } from '@mdi/js'
 
 const props = defineProps<{
   search: string | undefined
diff --git a/apps/data-management/src/components/Metadata/UnitTable.vue b/apps/data-management/src/components/Metadata/UnitTable.vue
index 6a728560..78195142 100644
--- a/apps/data-management/src/components/Metadata/UnitTable.vue
+++ b/apps/data-management/src/components/Metadata/UnitTable.vue
@@ -8,7 +8,7 @@
   >
     <template v-slot:item.actions="{ item }" v-if="canEdit">
       <v-icon :icon="mdiPencil" @click="openDialog(item, 'edit')" />
-      <v-icon :icon="mdiDelete" @click="openDialog(item, 'delete')" />
+      <v-icon :icon="mdiTrashCanOutline" @click="openDialog(item, 'delete')" />
     </template>
   </v-data-table-virtual>
 
@@ -41,7 +41,7 @@ import hs, { Unit } from '@hydroserver/client'
 import { useTableLogic } from '@/composables/useTableLogic'
 import { computed, toRef } from 'vue'
 import { useSystemTableLogic } from '@/composables/useSystemTableLogic'
-import { mdiDelete, mdiPencil } from '@mdi/js'
+import { mdiTrashCanOutline, mdiPencil } from '@mdi/js'
 
 const props = defineProps<{
   search: string | undefined
diff --git a/apps/data-management/src/components/Orchestration/data-products/RatingCurveTable.vue b/apps/data-management/src/components/Orchestration/data-products/RatingCurveTable.vue
index 881a43be..3a01d022 100644
--- a/apps/data-management/src/components/Orchestration/data-products/RatingCurveTable.vue
+++ b/apps/data-management/src/components/Orchestration/data-products/RatingCurveTable.vue
@@ -218,7 +218,7 @@
                     <template #activator="{ props: tooltipProps }">
                       <span v-bind="tooltipProps" class="inline-flex">
                         <v-btn
-                          :icon="mdiDelete"
+                          :icon="mdiTrashCanOutline"
                           variant="text"
                           color="delete"
                           :loading="isValidatingDelete(attachment.id)"
@@ -538,7 +538,7 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { mdiAlert, mdiDelete, mdiDownload, mdiPencil } from '@mdi/js'
+import { mdiAlert, mdiTrashCanOutline, mdiDownload, mdiPencil } from '@mdi/js'
 import hs, {
   type RatingCurve,
   type RatingCurveFittingMethod,
@@ -718,7 +718,7 @@ const attachmentCountLabel = computed(() => {
 const selectedFile = computed(() => {
   const value = attachmentFile.value
   if (!value) return null
-  return Array.isArray(value) ? value[0] ?? null : value
+  return Array.isArray(value) ? (value[0] ?? null) : value
 })
 
 const canCreateAttachment = computed(
@@ -731,7 +731,7 @@ const canCreateAttachment = computed(
 const selectedEditFile = computed(() => {
   const value = editAttachmentFile.value
   if (!value) return null
-  return Array.isArray(value) ? value[0] ?? null : value
+  return Array.isArray(value) ? (value[0] ?? null) : value
 })
 const canSaveEditAttachment = computed(
   () =>
diff --git a/apps/data-management/src/components/VisualizeData/DataVisFiltersDrawer.vue b/apps/data-management/src/components/VisualizeData/DataVisFiltersDrawer.vue
index d42cbc5f..daf4b1f9 100644
--- a/apps/data-management/src/components/VisualizeData/DataVisFiltersDrawer.vue
+++ b/apps/data-management/src/components/VisualizeData/DataVisFiltersDrawer.vue
@@ -37,7 +37,7 @@
               return-object
               multiple
               clearable
-              :prepend-inner-icon="mdiDomain"
+              :prepend-inner-icon="mdiBriefcaseOutline"
               label="Workspaces"
               density="compact"
               variant="outlined"
@@ -73,7 +73,7 @@
               return-object
               multiple
               clearable
-              :prepend-inner-icon="mdiMapMarker"
+              :prepend-inner-icon="mdiMapMarkerOutline"
               label="Sites"
               density="compact"
               variant="outlined"
@@ -185,10 +185,10 @@ import { useSidebarStore } from '@/store/useSidebar'
 import { useWorkspaceStore } from '@/store/workspaces'
 import {
   mdiChartLine,
+  mdiBriefcaseOutline,
   mdiClose,
-  mdiDomain,
   mdiLayersOutline,
-  mdiMapMarker,
+  mdiMapMarkerOutline,
 } from '@mdi/js'
 
 const {
@@ -287,7 +287,9 @@ const sortedProcessingLevelNames = computed(() => {
       return
     }
 
-    const definition = dataVisStore.processingLevelById.get(ds.processingLevelId)?.definition
+    const definition = dataVisStore.processingLevelById.get(
+      ds.processingLevelId
+    )?.definition
     if (definition) {
       names.add(definition)
     }
@@ -328,7 +330,9 @@ const sortedObservedPropertyNames = computed(() => {
       return
     }
 
-    const name = dataVisStore.observedPropertyById.get(ds.observedPropertyId)?.name
+    const name = dataVisStore.observedPropertyById.get(
+      ds.observedPropertyId
+    )?.name
     if (name) {
       names.add(name)
     }
@@ -396,5 +400,4 @@ watch(
 .datavis-filters-drawer {
   z-index: 1;
 }
-
 </style>
diff --git a/apps/data-management/src/components/Workspace/AccessControl/ManageApiKeys.vue b/apps/data-management/src/components/Workspace/AccessControl/ManageApiKeys.vue
index e134889f..2a87944c 100644
--- a/apps/data-management/src/components/Workspace/AccessControl/ManageApiKeys.vue
+++ b/apps/data-management/src/components/Workspace/AccessControl/ManageApiKeys.vue
@@ -78,7 +78,7 @@
     <template v-slot:item.actions="{ item }">
       <v-icon :icon="mdiRefresh" @click="onOpenRegenerateDialog(item)" />
       <v-icon :icon="mdiPencil" @click="openDialog(item, 'edit')" />
-      <v-icon :icon="mdiDelete" @click="openDialog(item, 'delete')" />
+      <v-icon :icon="mdiTrashCanOutline" @click="openDialog(item, 'delete')" />
     </template>
   </v-data-table-virtual>
 
@@ -127,7 +127,7 @@ import DeleteApiKey from './DeleteApiKey.vue'
 import ApiKeyRegenerateForm from './ApiKeyRegenerateForm.vue'
 import {
   mdiContentCopy,
-  mdiDelete,
+  mdiTrashCanOutline,
   mdiHelpCircleOutline,
   mdiPencil,
   mdiPlus,
diff --git a/apps/data-management/src/components/Workspace/OrchestrationWorkspaceManager.vue b/apps/data-management/src/components/Workspace/OrchestrationWorkspaceManager.vue
index 0dc79113..bcf7862a 100644
--- a/apps/data-management/src/components/Workspace/OrchestrationWorkspaceManager.vue
+++ b/apps/data-management/src/components/Workspace/OrchestrationWorkspaceManager.vue
@@ -29,12 +29,7 @@
           </template>
 
           <template #denied>
-            <v-btn-add
-              disabled
-              class="mr-2"
-              color="white"
-              variant="outlined"
-            >
+            <v-btn-add disabled class="mr-2" color="white" variant="outlined">
               Add workspace
             </v-btn-add>
           </template>
@@ -63,9 +58,7 @@
               color="grey lighten-1"
             />
             <h4 class="mt-2">No workspaces found</h4>
-            <p class="mb-4">
-              Click the "Add workspace" button to create one.
-            </p>
+            <p class="mb-4">Click the "Add workspace" button to create one.</p>
             <v-icon
               class="mb-4"
               @click="showWorkspaceHelp = !showWorkspaceHelp"
@@ -127,7 +120,7 @@
             variant="text"
             color="red-darken-2"
             @click="openDialog(item, 'delete')"
-            :icon="mdiDelete"
+            :icon="mdiTrashCanOutline"
             :data-testid="`workspace-delete-${item.id}`"
             rounded="xl"
           />
@@ -180,7 +173,7 @@ import hs, {
 } from '@hydroserver/client'
 import {
   mdiBriefcaseOutline,
-  mdiDelete,
+  mdiTrashCanOutline,
   mdiHelpCircleOutline,
   mdiLockPlusOutline,
   mdiMagnify,
diff --git a/apps/data-management/src/components/Workspace/WorkspaceToolbar.vue b/apps/data-management/src/components/Workspace/WorkspaceToolbar.vue
index 4b8887ff..21b684e1 100644
--- a/apps/data-management/src/components/Workspace/WorkspaceToolbar.vue
+++ b/apps/data-management/src/components/Workspace/WorkspaceToolbar.vue
@@ -8,26 +8,26 @@
               {{ title || 'Job orchestration' }}
             </h1>
           </v-col>
-            <v-spacer />
-            <v-col cols="auto">
-              <WorkspaceSelector />
-            </v-col>
-            <v-col v-if="!hideWorkspaceManagement" cols="12" sm="auto">
-              <v-btn
-                @click="openWorkspaceTable = !openWorkspaceTable"
-                rounded="lg"
-                color="primary"
-                variant="outlined"
-                density="comfortable"
-                class="text-none font-weight-regular"
-                :append-icon="openWorkspaceTable ? mdiMenuUp : mdiMenuDown"
-              >
-                Manage workspaces
-              </v-btn>
-            </v-col>
-            <v-col v-if="$slots.actions" cols="12" sm="auto">
-              <slot name="actions" />
-            </v-col>
+          <v-spacer />
+          <v-col cols="auto">
+            <WorkspaceSelector />
+          </v-col>
+          <v-col v-if="!hideWorkspaceManagement" cols="12" sm="auto">
+            <v-btn
+              @click="openWorkspaceTable = !openWorkspaceTable"
+              rounded="lg"
+              color="primary"
+              variant="outlined"
+              density="comfortable"
+              class="text-none font-weight-regular"
+              :append-icon="openWorkspaceTable ? mdiMenuUp : mdiMenuDown"
+            >
+              Manage workspaces
+            </v-btn>
+          </v-col>
+          <v-col v-if="$slots.actions" cols="12" sm="auto">
+            <slot name="actions" />
+          </v-col>
           <v-col cols="12" sm="auto" v-if="pendingWorkspaces.length">
             <v-btn
               @click="openTransferTable = !openTransferTable"
@@ -277,7 +277,7 @@
                 variant="text"
                 color="red-darken-2"
                 @click="openDialog(item, 'delete')"
-                :icon="mdiDelete"
+                :icon="mdiTrashCanOutline"
                 :data-testid="`workspace-delete-${item.id}`"
                 rounded="xl"
               />
@@ -350,7 +350,7 @@ import {
   mdiBriefcaseOutline,
   mdiCheck,
   mdiClose,
-  mdiDelete,
+  mdiTrashCanOutline,
   mdiHelpCircleOutline,
   mdiLockPlusOutline,
   mdiMagnify,
diff --git a/apps/data-management/src/components/base/Navbar.vue b/apps/data-management/src/components/base/Navbar.vue
index 5eb773de..0082e329 100644
--- a/apps/data-management/src/components/base/Navbar.vue
+++ b/apps/data-management/src/components/base/Navbar.vue
@@ -12,7 +12,7 @@
       <v-app-bar-nav-icon
         v-if="sidebar.isOpen"
         :icon="mdiMenuOpen"
-        @click="sidebar.toggle"
+        @click.stop="sidebar.toggle"
         class="mx-3"
         variant="tonal"
         rounded="lg"
@@ -21,7 +21,7 @@
       <v-app-bar-nav-icon
         v-else
         :icon="mdiMenuClose"
-        @click="sidebar.toggle"
+        @click.stop="sidebar.toggle"
         class="mx-3"
         variant="tonal"
         rounded="lg"
@@ -136,7 +136,9 @@
             v-bind="menuItem.attrs || {}"
             :title="menuItem.label"
             :prepend-icon="menuItem.icon"
-            :value="menuItem.attrs?.to || menuItem.attrs?.href || menuItem.label"
+            :value="
+              menuItem.attrs?.to || menuItem.attrs?.href || menuItem.label
+            "
             @click="menuItem.onClick"
           />
         </div>
@@ -188,17 +190,17 @@ import {
   mdiAccountCircle,
   mdiAccountPlusOutline,
   mdiChartLine,
-  mdiCheckCircleOutline,
   mdiDatabaseCog,
-  mdiFileChart,
   mdiInformation,
-  mdiLayersSearch,
   mdiLogin,
   mdiLogout,
-  mdiMapMarkerMultiple,
+  mdiMapMarkerOutline,
   mdiMenuClose,
   mdiMenuDown,
   mdiMenuOpen,
+  mdiShieldCheckOutline,
+  mdiShieldEditOutline,
+  mdiTransitConnectionVariant,
 } from '@mdi/js'
 
 const route = useRoute()
@@ -229,12 +231,12 @@ const paths: NavItem[] = [
   {
     attrs: { to: '/browse' },
     label: 'Browse monitoring sites',
-    icon: mdiLayersSearch,
+    icon: mdiMapMarkerOutline,
   },
   {
     attrs: { to: '/sites' },
     label: 'Your sites',
-    icon: mdiMapMarkerMultiple,
+    icon: mdiMapMarkerOutline,
   },
   {
     attrs: { to: '/visualize-data' },
@@ -253,11 +255,11 @@ const paths: NavItem[] = [
       {
         attrs: { to: '/orchestration' },
         label: 'Job orchestration',
-        icon: mdiFileChart,
+        icon: mdiTransitConnectionVariant,
       },
       {
         label: 'Quality Control',
-        icon: mdiCheckCircleOutline,
+        icon: mdiShieldEditOutline,
         onClick: () => {
           window.location.href = '/qc/'
         },
diff --git a/apps/data-management/src/pages/account/Profile.vue b/apps/data-management/src/pages/account/Profile.vue
index 0fdc9b15..b2b991ac 100644
--- a/apps/data-management/src/pages/account/Profile.vue
+++ b/apps/data-management/src/pages/account/Profile.vue
@@ -16,7 +16,10 @@
         </v-btn-secondary>
       </v-col>
       <v-col cols="auto">
-        <v-btn-delete :prepend-icon="mdiDelete" @click="openDelete = true">
+        <v-btn-delete
+          :prepend-icon="mdiTrashCanOutline"
+          @click="openDelete = true"
+        >
           Delete Account</v-btn-delete
         >
       </v-col>
@@ -45,7 +48,7 @@ import { Snackbar } from '@/utils/notifications'
 import { storeToRefs } from 'pinia'
 import { useUserStore } from '@/store/user'
 import hs from '@hydroserver/client'
-import { mdiDelete, mdiPencil } from '@mdi/js'
+import { mdiTrashCanOutline, mdiPencil } from '@mdi/js'
 
 const { isConnectionEnabled: isHydroShareConnectionEnabled } = useHydroShare()
 const openDelete = ref(false)

From 34a6c67c04515201a3eba5c65953baba5567fff1 Mon Sep 17 00:00:00 2001
From: daniel-slaugh <daniel.slaugh@hotmail.com>
Date: Mon, 29 Jun 2026 09:59:57 -0600
Subject: [PATCH 03/19] Add site list and site selection on browse page; style

---
 .../components/Browse/BrowseFilterTool.vue    | 790 +++++++++++++++---
 .../src/components/Maps/OpenLayersMap.vue     | 244 +++++-
 apps/data-management/src/pages/Browse.vue     |  52 +-
 apps/data-management/src/router/routes.ts     |   1 -
 .../src/utils/__tests__/browseFilters.spec.ts |   6 +
 .../src/utils/browseFilters.ts                |   7 +
 6 files changed, 940 insertions(+), 160 deletions(-)

diff --git a/apps/data-management/src/components/Browse/BrowseFilterTool.vue b/apps/data-management/src/components/Browse/BrowseFilterTool.vue
index 47230162..d85f3c9f 100644
--- a/apps/data-management/src/components/Browse/BrowseFilterTool.vue
+++ b/apps/data-management/src/components/Browse/BrowseFilterTool.vue
@@ -1,113 +1,170 @@
 <template>
-  <v-navigation-drawer v-model="sidebar.isOpen" width="400">
-    <v-list>
-      <v-list-subheader class="text-h6 mb-2 mt-1">
-        Browse data collection sites
-      </v-list-subheader>
-
-      <v-divider />
-
-      <v-list-item class="d-flex justify-end mt-2">
-        <v-btn
-          color="primary-darken-2"
-          variant="outlined"
-          rounded="xl"
-          @click="onClearFilters"
-          :append-icon="mdiClose"
-          >Clear filters</v-btn
-        >
-      </v-list-item>
-
-      <v-list-item>
-        <v-autocomplete
-          class="pt-2"
-          v-model="selectedSite"
-          :items="availableSites"
-          :item-props="
-            (site) => ({
-              subtitle: site.siteType,
-            })
-          "
+  <div
+    class="browse-filter-tool"
+    :class="{ 'browse-filter-tool--expanded': isExpanded }"
+  >
+    <v-btn
+      v-if="!isExpanded"
+      class="filter-chip"
+      elevation="8"
+      rounded="pill"
+      color="surface"
+      @click="setExpanded(true)"
+    >
+      <v-icon :icon="mdiMagnify" size="16" color="primary" />
+      <span class="filter-chip-label">Sites</span>
+      <span class="filter-chip-count">({{ availableSites.length }})</span>
+    </v-btn>
+
+    <v-card v-else class="filter-panel" elevation="10">
+      <div class="filter-header">
+        <h1>Monitoring sites</h1>
+
+        <div class="filter-header-actions">
+          <v-btn
+            icon
+            color="primary"
+            size="34"
+            rounded="lg"
+            aria-label="Add site"
+            to="/sites"
+          >
+            <v-icon :icon="mdiPlus" size="20" />
+          </v-btn>
+
+          <v-btn
+            icon
+            variant="text"
+            color="default"
+            size="34"
+            aria-label="Collapse site filters"
+            @click="setExpanded(false)"
+          >
+            <v-icon :icon="mdiChevronLeft" size="20" />
+          </v-btn>
+        </div>
+      </div>
+
+      <div class="filter-controls">
+        <v-text-field
+          v-model="siteSearch"
+          class="site-search"
           name="browse-site-search"
-          item-title="name"
-          return-object
+          placeholder="Search sites or workspaces"
+          :prepend-inner-icon="mdiMagnify"
           clearable
-          :prepend-inner-icon="mdiMapMarkerOutline"
-          label="Search sites"
-          autocomplete="new-password"
+          density="compact"
           hide-details
+          single-line
+          variant="outlined"
+          bg-color="#f2f4f7"
           color="primary"
-          no-data-text="No sites found"
+          autocomplete="off"
+          @click:clear="siteSearch = ''"
         />
-      </v-list-item>
 
-      <v-list-item>
-        <v-autocomplete
-          class="pt-2"
+        <v-select
           v-model="selectedWorkspaces"
           :items="availableWorkspaces"
-          :item-props="(ws) => ({ subtitle: `Owned by: ${ws?.owner?.name}` })"
+          class="workspace-filter"
           name="browse-workspace-filter"
           item-title="name"
           return-object
-          clearable
-          :prepend-inner-icon="mdiBriefcaseOutline"
-          label="Workspaces"
-          autocomplete="new-password"
           multiple
+          density="compact"
           hide-details
+          variant="outlined"
           color="primary"
+          :prepend-inner-icon="mdiBriefcaseOutline"
+          :placeholder="workspacePlaceholder"
         >
-          <template v-slot:selection="{ item, index }">
-            <v-chip
-              color="primary-darken-2"
-              rounded
-              closable
-              density="comfortable"
-              @click:close="selectedWorkspaces.splice(index, 1)"
-            >
-              <span>{{ item.title }}</span>
-            </v-chip>
+          <template v-slot:selection="{ index }">
+            <span v-if="index === 0" class="workspace-selection">
+              {{ workspaceSelectionLabel }}
+            </span>
           </template>
-        </v-autocomplete>
-      </v-list-item>
-
-      <v-list-item>
-        <v-autocomplete
-          class="pt-2"
-          label="Site types"
-          v-model="selectedSiteTypes"
-          :items="availableSiteTypes"
-          name="browse-site-type-filter"
-          clearable
-          :prepend-inner-icon="mdiWaterPump"
-          autocomplete="new-password"
-          multiple
-          hide-details
-          color="primary"
-        >
-          <template v-slot:selection="{ item, index }">
-            <v-chip
-              color="primary-darken-2"
-              rounded
-              density="comfortable"
-              closable
-              @click:close="selectedSiteTypes.splice(index, 1)"
+        </v-select>
+
+        <section v-if="availableSiteTypes.length" class="filter-section">
+          <div class="filter-section-title">Site type</div>
+          <div class="chip-grid">
+            <v-btn
+              v-for="siteType in availableSiteTypes"
+              :key="siteType"
+              class="filter-pill"
+              :class="{ selected: selectedSiteTypes.includes(siteType) }"
+              :variant="
+                selectedSiteTypes.includes(siteType) ? 'tonal' : 'outlined'
+              "
+              color="default"
+              rounded="pill"
+              @click="toggleSiteType(siteType)"
             >
-              <span>{{ item.title }}</span>
-            </v-chip>
-          </template>
-        </v-autocomplete>
-      </v-list-item>
-    </v-list>
-  </v-navigation-drawer>
+              <v-icon
+                :icon="getSiteTypeIcon(siteType)"
+                :color="
+                  selectedSiteTypes.includes(siteType) ? 'primary' : 'default'
+                "
+                size="16"
+              />
+              <span>{{ siteType }}</span>
+            </v-btn>
+          </div>
+        </section>
+
+        <div v-if="hasActiveFilters" class="filter-actions">
+          <v-btn
+            variant="text"
+            color="primary"
+            density="comfortable"
+            :prepend-icon="mdiClose"
+            @click="onClearFilters"
+          >
+            Clear filters
+          </v-btn>
+        </div>
+      </div>
+
+      <v-divider />
+
+      <div class="site-list">
+        <div class="site-list-count">{{ availableSites.length }} sites</div>
+
+        <div v-if="availableSites.length" class="site-list-items">
+          <button
+            v-for="site in availableSites"
+            :key="site.id"
+            type="button"
+            class="site-row"
+            :class="{ selected: site.id === selectedSiteId }"
+            @click="$emit('select-site', site.id)"
+          >
+            <span class="site-row-icon">
+              <v-icon :icon="getSiteTypeIcon(site.siteType)" size="20" />
+              <span class="site-row-status" />
+            </span>
+
+            <span class="site-row-text">
+              <span class="site-row-name">{{ site.name }}</span>
+              <span class="site-row-workspace">
+                {{ getWorkspaceName(site.workspaceId) }}
+              </span>
+            </span>
+
+            <span class="site-row-type">{{ site.siteType }}</span>
+          </button>
+        </div>
+
+        <div v-else class="empty-sites">No sites match these filters.</div>
+      </div>
+    </v-card>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { useSidebarStore } from '@/store/useSidebar'
 import { useVocabularyStore } from '@/composables/useVocabulary'
 import {
   buildBrowseFilterQuery,
@@ -118,9 +175,32 @@ import hs, { Workspace } from '@hydroserver/client'
 import type { ThingMarker } from '@/types'
 import {
   mdiBriefcaseOutline,
+  mdiChevronLeft,
   mdiClose,
+  mdiEarth,
+  mdiFactory,
+  mdiFlaskOutline,
+  mdiFountain,
+  mdiGauge,
+  mdiGrass,
+  mdiHydroPower,
   mdiMapMarkerOutline,
-  mdiWaterPump,
+  mdiMagnify,
+  mdiPipe,
+  mdiPlus,
+  mdiSnowflake,
+  mdiTerrain,
+  mdiThermometer,
+  mdiThermometerWater,
+  mdiWaterCheckOutline,
+  mdiWaterPercent,
+  mdiWater,
+  mdiWaterWell,
+  mdiWeatherCloudy,
+  mdiWeatherPouring,
+  mdiWeatherSunny,
+  mdiWeatherWindy,
+  mdiWaves,
 } from '@mdi/js'
 
 const vocabularyStore = useVocabularyStore()
@@ -129,13 +209,18 @@ const router = useRouter()
 
 const selectedSiteTypes = ref<string[]>([])
 const selectedWorkspaces = ref<Workspace[]>([])
-const selectedSite = ref<ThingMarker | null>(null)
+const siteSearch = ref('')
 const workspaces = ref<Workspace[]>([])
 const workspacesLoaded = ref(false)
+const isExpanded = ref(true)
 const isApplyingRouteState = ref(false)
 const hasAppliedInitialRouteState = ref(false)
 
-const emit = defineEmits(['filter'])
+const emit = defineEmits<{
+  filter: [ThingMarker[]]
+  'select-site': [string]
+}>()
+
 const props = defineProps({
   things: {
     type: Array as () => ThingMarker[],
@@ -145,23 +230,43 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  selectedSiteId: {
+    type: String,
+    default: undefined,
+  },
 })
 
-const sidebar = useSidebarStore()
 const routeState = parseBrowseFilterQuery(route.query)
 if (routeState.drawer !== null) {
-  sidebar.setOpen(routeState.drawer, true)
-} else {
-  sidebar.setOpen(true)
+  isExpanded.value = routeState.drawer
 }
 
 const sortedThings = computed(() =>
   [...props.things].sort((a, b) => a.name.localeCompare(b.name))
 )
 
+const workspaceById = computed(
+  () => new Map(workspaces.value.map((workspace) => [workspace.id, workspace]))
+)
+
+const searchNeedle = computed(() =>
+  (siteSearch.value ?? '').trim().toLowerCase()
+)
+
+const thingsMatchingSearch = computed(() => {
+  if (!searchNeedle.value) return sortedThings.value
+
+  return sortedThings.value.filter((thing) => {
+    const workspaceName = getWorkspaceName(thing.workspaceId)
+    return [thing.name, workspaceName].some((value) =>
+      value.toLowerCase().includes(searchNeedle.value)
+    )
+  })
+})
+
 const availableSites = computed(() =>
   filterThingMarkers(
-    sortedThings.value,
+    thingsMatchingSearch.value,
     selectedWorkspaces.value,
     selectedSiteTypes.value
   )
@@ -170,10 +275,9 @@ const availableSites = computed(() =>
 const availableWorkspaces = computed(() => {
   const workspaceIds = new Set(
     filterThingMarkers(
-      props.things,
+      thingsMatchingSearch.value,
       [],
-      selectedSiteTypes.value,
-      selectedSite.value
+      selectedSiteTypes.value
     ).map((thing) => thing.workspaceId)
   )
 
@@ -183,24 +287,144 @@ const availableWorkspaces = computed(() => {
 const availableSiteTypes = computed(() => {
   const siteTypes = new Set(
     filterThingMarkers(
-      props.things,
+      thingsMatchingSearch.value,
       selectedWorkspaces.value,
-      [],
-      selectedSite.value
+      []
     ).map((thing) => thing.siteType)
   )
 
   return vocabularyStore.siteTypes.filter((siteType) => siteTypes.has(siteType))
 })
 
-const emitFilteredThings = () => {
-  const filteredThings = filterThingMarkers(
-    props.things,
-    selectedWorkspaces.value,
-    selectedSiteTypes.value,
-    selectedSite.value
+const workspacePlaceholder = computed(() =>
+  selectedWorkspaces.value.length ? '' : 'All workspaces'
+)
+
+const workspaceSelectionLabel = computed(() => {
+  const count = selectedWorkspaces.value.length
+  if (!count) return 'All workspaces'
+  if (count === 1) return selectedWorkspaces.value[0]?.name ?? '1 workspace'
+  return `${count} workspaces`
+})
+
+const hasActiveFilters = computed(
+  () =>
+    Boolean((siteSearch.value ?? '').trim()) ||
+    selectedWorkspaces.value.length > 0 ||
+    selectedSiteTypes.value.length > 0
+)
+
+const getWorkspaceName = (workspaceId: string) =>
+  workspaceById.value.get(workspaceId)?.name || 'Workspace'
+
+const siteTypeIconRules = [
+  {
+    keywords: ['quality', 'chemistry', 'chemical', 'sample', 'sampling'],
+    icon: mdiFlaskOutline,
+  },
+  {
+    keywords: ['gage', 'gauge', 'stage', 'level', 'discharge', 'flow'],
+    icon: mdiGauge,
+  },
+  {
+    keywords: ['weather', 'meteorological', 'met station', 'atmosphere'],
+    icon: mdiWeatherCloudy,
+  },
+  {
+    keywords: ['precipitation', 'rain', 'rainfall', 'storm'],
+    icon: mdiWeatherPouring,
+  },
+  {
+    keywords: ['wind'],
+    icon: mdiWeatherWindy,
+  },
+  {
+    keywords: ['solar', 'radiation', 'sun'],
+    icon: mdiWeatherSunny,
+  },
+  {
+    keywords: ['water temperature'],
+    icon: mdiThermometerWater,
+  },
+  {
+    keywords: ['temperature', 'thermal'],
+    icon: mdiThermometer,
+  },
+  {
+    keywords: ['groundwater', 'ground water', 'well', 'aquifer'],
+    icon: mdiWaterWell,
+  },
+  {
+    keywords: ['reservoir', 'lake', 'pond', 'pool'],
+    icon: mdiWaves,
+  },
+  {
+    keywords: ['stream', 'river', 'creek', 'brook', 'channel'],
+    icon: mdiWater,
+  },
+  {
+    keywords: ['canal', 'pipe', 'pipeline', 'conduit'],
+    icon: mdiPipe,
+  },
+  {
+    keywords: ['spring', 'seep'],
+    icon: mdiFountain,
+  },
+  {
+    keywords: ['wetland', 'marsh', 'swamp'],
+    icon: mdiGrass,
+  },
+  {
+    keywords: ['snow', 'ice', 'glacier'],
+    icon: mdiSnowflake,
+  },
+  {
+    keywords: ['soil', 'terrain', 'land'],
+    icon: mdiTerrain,
+  },
+  {
+    keywords: ['humidity', 'moisture'],
+    icon: mdiWaterPercent,
+  },
+  {
+    keywords: ['water treatment', 'wastewater', 'waste water', 'effluent'],
+    icon: mdiFactory,
+  },
+  {
+    keywords: ['dam', 'hydropower', 'hydro power'],
+    icon: mdiHydroPower,
+  },
+  {
+    keywords: ['water check', 'water status'],
+    icon: mdiWaterCheckOutline,
+  },
+  {
+    keywords: ['earth', 'environmental', 'ecosystem'],
+    icon: mdiEarth,
+  },
+]
+
+const getSiteTypeIcon = (siteType: string) => {
+  const normalized = siteType.toLowerCase()
+  return (
+    siteTypeIconRules.find(({ keywords }) =>
+      keywords.some((keyword) => normalized.includes(keyword))
+    )?.icon ?? mdiMapMarkerOutline
   )
-  emit('filter', filteredThings)
+}
+
+const toggleSiteType = (siteType: string) => {
+  selectedSiteTypes.value = selectedSiteTypes.value.includes(siteType)
+    ? selectedSiteTypes.value.filter((selected) => selected !== siteType)
+    : [...selectedSiteTypes.value, siteType]
+}
+
+const setExpanded = (value: boolean) => {
+  isExpanded.value = value
+}
+
+const emitFilteredThings = () => {
+  emit('filter', availableSites.value)
 }
 
 const querySignature = (query: Record<string, unknown>) =>
@@ -214,10 +438,9 @@ const syncRouteFromSelection = async () => {
   if (isApplyingRouteState.value || !hasAppliedInitialRouteState.value) return
 
   const query = buildBrowseFilterQuery(route.query, {
-    siteId: selectedSite.value?.id,
+    searchText: siteSearch.value,
     workspaceIds: selectedWorkspaces.value.map((workspace) => workspace.id),
     siteTypes: selectedSiteTypes.value,
-    drawer: sidebar.isOpen,
   })
 
   if (querySignature(query) === querySignature(route.query)) return
@@ -235,10 +458,12 @@ const applyRouteState = () => {
   const state = parseBrowseFilterQuery(route.query)
   isApplyingRouteState.value = true
 
-  selectedSite.value = state.siteIds.length
-    ? (sortedThings.value.find((thing) => thing.id === state.siteIds[0]) ??
-      null)
-    : null
+  const linkedSiteName = state.siteIds.length
+    ? sortedThings.value.find((thing) => thing.id === state.siteIds[0])?.name ??
+      ''
+    : ''
+
+  siteSearch.value = state.searchText || linkedSiteName
   selectedWorkspaces.value = state.workspaceIds.length
     ? workspaces.value.filter((workspace) =>
         state.workspaceIds.includes(workspace.id)
@@ -247,7 +472,7 @@ const applyRouteState = () => {
   selectedSiteTypes.value = state.siteTypes
 
   if (state.drawer !== null) {
-    sidebar.setOpen(state.drawer, true)
+    isExpanded.value = state.drawer
   }
 
   isApplyingRouteState.value = false
@@ -259,7 +484,7 @@ const applyRouteState = () => {
 const onClearFilters = () => {
   selectedSiteTypes.value = []
   selectedWorkspaces.value = []
-  selectedSite.value = null
+  siteSearch.value = ''
 }
 
 onMounted(async () => {
@@ -271,16 +496,12 @@ onMounted(async () => {
   applyRouteState()
 })
 
-watch(
-  [selectedSiteTypes, selectedWorkspaces, selectedSite],
-  emitFilteredThings,
-  {
-    deep: true,
-  }
-)
+watch([selectedSiteTypes, selectedWorkspaces, siteSearch], emitFilteredThings, {
+  deep: true,
+})
 
 watch(
-  [selectedSiteTypes, selectedWorkspaces, selectedSite, () => sidebar.isOpen],
+  [selectedSiteTypes, selectedWorkspaces, siteSearch],
   syncRouteFromSelection,
   { deep: true }
 )
@@ -297,16 +518,6 @@ watch(
   { deep: true }
 )
 
-watch(availableSites, (sites) => {
-  if (!props.thingsLoaded) return
-  if (
-    selectedSite.value &&
-    !sites.some((site) => site.id === selectedSite.value?.id)
-  ) {
-    selectedSite.value = null
-  }
-})
-
 // Drop any selected values that are no longer in the available set when the
 // other filters narrow the options.
 const pruneSelectionToAvailable = <T, A>(
@@ -340,3 +551,316 @@ pruneSelectionToAvailable(
   (siteType) => siteType
 )
 </script>
+
+<style scoped>
+.browse-filter-tool {
+  width: min(38vw, 380px);
+  min-width: 340px;
+  max-height: calc(100% - 32px);
+}
+
+.browse-filter-tool--expanded {
+  height: calc(100% - 32px);
+}
+
+.filter-chip {
+  height: 38px;
+  padding-inline: 14px;
+  color: #222529;
+  box-shadow: 0 4px 16px rgba(22, 27, 34, 0.16) !important;
+}
+
+.filter-chip :deep(.v-btn__content) {
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+
+.filter-chip-count {
+  color: #8b8f96;
+  font-weight: 600;
+}
+
+.filter-panel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.filter-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 18px 20px 10px;
+}
+
+.filter-header h1 {
+  margin: 0;
+  color: #202124;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: 0;
+}
+
+.filter-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.filter-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 0 20px 14px;
+}
+
+.site-search :deep(.v-field),
+.workspace-filter :deep(.v-field) {
+  border-radius: 8px;
+  font-size: 13px;
+}
+
+.site-search :deep(.v-field__input),
+.workspace-filter :deep(.v-field__input) {
+  font-size: 13px;
+}
+
+.site-search :deep(input::placeholder) {
+  color: #6f747b;
+  opacity: 1;
+  font-weight: 600;
+}
+
+.workspace-filter :deep(.v-field__input) {
+  font-weight: 600;
+}
+
+.workspace-selection {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.filter-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.filter-section-title {
+  color: #5f6368;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.7px;
+  text-transform: uppercase;
+}
+
+.chip-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.filter-pill {
+  min-height: 30px;
+  padding-inline: 10px;
+  color: #63676d;
+  border-color: #dce0e5;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.filter-pill :deep(.v-btn__content) {
+  gap: 6px;
+  letter-spacing: 0;
+}
+
+.filter-pill.selected {
+  color: #1976d2;
+  border-color: rgba(33, 150, 243, 0.38);
+  background: rgba(33, 150, 243, 0.1);
+}
+
+.filter-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: -6px;
+}
+
+.site-list {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden auto;
+  padding: 12px 20px 16px;
+}
+
+.site-list-count {
+  margin-bottom: 10px;
+  color: #5f6368;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.7px;
+  text-transform: uppercase;
+}
+
+.site-list-items {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.site-row {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 46px;
+  padding: 6px 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font-family: inherit;
+  text-align: left;
+  text-decoration: none;
+}
+
+.site-row:hover,
+.site-row.selected {
+  background: rgba(33, 150, 243, 0.1);
+}
+
+.site-row:hover .site-row-name,
+.site-row.selected .site-row-name {
+  color: rgb(var(--v-theme-primary));
+}
+
+.site-row-icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  background: #f1f3f6;
+  color: #5f6368;
+}
+
+.site-row-status {
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  width: 10px;
+  height: 10px;
+  border: 2px solid #ffffff;
+  border-radius: 999px;
+  background: #43a047;
+}
+
+.site-row-text {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.site-row-name,
+.site-row-workspace {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.site-row-name {
+  color: #202124;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.site-row-workspace {
+  color: #5f6368;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.site-row-type {
+  max-width: 96px;
+  overflow: hidden;
+  color: #2e7d32;
+  font-size: 11px;
+  font-weight: 700;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.empty-sites {
+  display: flex;
+  min-height: 120px;
+  align-items: center;
+  justify-content: center;
+  color: #8a8d91;
+  font-size: 12px;
+  font-weight: 600;
+  text-align: center;
+}
+
+@media (max-width: 900px) {
+  .browse-filter-tool {
+    width: min(380px, calc(100vw - 24px));
+    min-width: 0;
+  }
+}
+
+@media (max-width: 560px) {
+  .browse-filter-tool {
+    width: 100%;
+  }
+
+  .browse-filter-tool--expanded {
+    height: calc(100% - 24px);
+  }
+
+  .filter-panel {
+    border-radius: 10px;
+  }
+
+  .filter-header {
+    padding: 16px 16px 10px;
+  }
+
+  .filter-header h1 {
+    font-size: 17px;
+  }
+
+  .filter-header-actions {
+    gap: 6px;
+  }
+
+  .filter-controls,
+  .site-list {
+    padding-inline: 16px;
+  }
+
+  .site-row {
+    grid-template-columns: 34px minmax(0, 1fr);
+  }
+
+  .site-row-type {
+    display: none;
+  }
+}
+</style>
diff --git a/apps/data-management/src/components/Maps/OpenLayersMap.vue b/apps/data-management/src/components/Maps/OpenLayersMap.vue
index 7a534435..e1d4d17d 100644
--- a/apps/data-management/src/components/Maps/OpenLayersMap.vue
+++ b/apps/data-management/src/components/Maps/OpenLayersMap.vue
@@ -73,6 +73,14 @@ const props = defineProps({
   colorKey: { type: String, default: '' },
   startInSatellite: Boolean,
   singleMarkerMode: Boolean,
+  fitPadding: {
+    type: Array as unknown as PropType<[number, number, number, number]>,
+    default: () => [100, 100, 100, 100],
+  },
+  selectedThingId: {
+    type: String,
+    default: undefined,
+  },
 })
 const emit = defineEmits(['location-clicked'])
 
@@ -128,6 +136,10 @@ const detailedThingCache = new Map<string, Thing>()
 
 let map: OlMap
 let rasterLayer: TileLayer
+let popupOverlay: Overlay | undefined
+let selectedThingTransitionId = 0
+let selectedThingPopupTimer: number | undefined
+let activeFlyId = 0
 const vectorSource = new VectorSource<Feature>()
 const markerLayer = ref<WebGLVectorLayer>()
 
@@ -168,6 +180,19 @@ const createFeature = (thing: MapThingWithColor) => {
   return f
 }
 
+const fitViewToMarkers = (duration = 0) => {
+  if (!map) return
+
+  const extent = vectorSource.getExtent() as Extent
+  if (extentIsEmpty(extent) || props.singleMarkerMode) return
+
+  map.getView().fit(extent, {
+    padding: props.fitPadding,
+    maxZoom: 16,
+    duration,
+  })
+}
+
 const getPopupThing = async (thing: MapThing): Promise<MapThing> => {
   if (!isThingMarker(thing)) return thing
 
@@ -185,6 +210,172 @@ const getPopupThing = async (thing: MapThing): Promise<MapThing> => {
   }
 }
 
+const getFeatureThing = (feature: Feature) =>
+  feature.get('thing') as MapThing | undefined
+
+const findFeatureByThingId = (thingId: string) =>
+  vectorSource
+    .getFeatures()
+    .find((feature) => getFeatureThing(feature)?.id === thingId)
+
+const openPopupForFeature = async (feature: Feature) => {
+  const thing = getFeatureThing(feature)
+  const geometry = feature.getGeometry()
+  if (!thing || !(geometry instanceof Point) || !popupOverlay) return
+
+  const popupThing = await getPopupThing(thing)
+  popupContent.value!.innerHTML = generateMarkerContent(popupThing)
+  popupOverlay.setPosition(geometry.getCoordinates())
+}
+
+const getPaddedCenter = (
+  coordinates: [number, number],
+  zoom: number
+): [number, number] => {
+  const [top, right, bottom, left] = props.fitPadding
+  const resolution = map.getView().getResolutionForZoom(zoom)
+
+  return [
+    coordinates[0] - ((left - right) / 2) * resolution,
+    coordinates[1] + ((top - bottom) / 2) * resolution,
+  ]
+}
+
+/**
+ * Smooth zoom-and-pan that mirrors Leaflet's `flyTo`, using the
+ * van Wijk & Nuij "Smooth and efficient zooming and panning" algorithm.
+ * OpenLayers' `view.animate` interpolates center and zoom linearly, which
+ * feels abrupt over long distances; this drives the view per frame instead so
+ * the camera arcs out and back in along an optimal path.
+ */
+const flyTo = (
+  targetCenter: [number, number],
+  targetZoom: number,
+  { duration, onComplete }: { duration?: number; onComplete?: () => void } = {}
+) => {
+  if (!map) return
+  const view = map.getView()
+  const size = map.getSize()
+  const from = view.getCenter()
+  const startResolution = view.getResolution()
+  const endResolution = view.getResolutionForZoom(targetZoom)
+
+  view.cancelAnimations()
+  const flyId = ++activeFlyId
+
+  if (!size || !from || startResolution == null) {
+    view.setCenter(targetCenter)
+    view.setResolution(endResolution)
+    onComplete?.()
+    return
+  }
+
+  const maxPx = Math.max(size[0], size[1])
+  const dx = targetCenter[0] - from[0]
+  const dy = targetCenter[1] - from[1]
+  const u1 = Math.hypot(dx, dy)
+  const pixelDistance = u1 / startResolution
+
+  const easeOutFly = (k: number) => 1 - Math.pow(1 - k, 1.5)
+  const start = performance.now()
+
+  // Negligible pan: the van Wijk path degenerates, so just ease the
+  // resolution (and the tiny center delta) directly.
+  if (pixelDistance < 2) {
+    const totalDuration = duration ?? 350
+    const step = (now: number) => {
+      if (flyId !== activeFlyId) return
+      const k = Math.min(1, (now - start) / totalDuration)
+      const e = easeOutFly(k)
+      view.setCenter([from[0] + dx * e, from[1] + dy * e])
+      view.setResolution(
+        startResolution + (endResolution - startResolution) * e
+      )
+      if (k < 1) requestAnimationFrame(step)
+      else onComplete?.()
+    }
+    requestAnimationFrame(step)
+    return
+  }
+
+  // van Wijk smooth zoom-and-pan. Work in projection units (meters): viewport
+  // width in world units is resolution * pixels, so widths are zoom-independent.
+  const w0 = Math.max(startResolution * maxPx, 1e-6)
+  const w1 = Math.max(endResolution * maxPx, 1e-6)
+  const rho = 1.42
+  const rho2 = rho * rho
+  const cosh = (n: number) => (Math.exp(n) + Math.exp(-n)) / 2
+  const sinh = (n: number) => (Math.exp(n) - Math.exp(-n)) / 2
+  const tanh = (n: number) => sinh(n) / cosh(n)
+  const r = (i: 0 | 1) => {
+    const s1 = i ? -1 : 1
+    const s2 = i ? w1 : w0
+    const t1 = w1 * w1 - w0 * w0 + s1 * rho2 * rho2 * u1 * u1
+    const b = t1 / (2 * s2 * rho2 * u1)
+    const sq = Math.sqrt(b * b + 1) - b
+    return sq < 1e-9 ? -18 : Math.log(sq)
+  }
+  const r0 = r(0)
+  const bigS = (r(1) - r0) / rho
+  const w = (s: number) => (w0 * cosh(r0)) / cosh(rho * s + r0)
+  const u = (s: number) =>
+    (w0 * (cosh(r0) * tanh(rho * s + r0) - sinh(r0))) / rho2
+  const totalDuration = duration ?? Math.max(300, bigS * 0.8 * 1000)
+
+  const step = (now: number) => {
+    if (flyId !== activeFlyId) return
+    const k = Math.min(1, (now - start) / totalDuration)
+    if (k < 1) {
+      const s = easeOutFly(k) * bigS
+      const frac = u(s) / u1
+      view.setCenter([from[0] + dx * frac, from[1] + dy * frac])
+      view.setResolution(w(s) / maxPx)
+      requestAnimationFrame(step)
+    } else {
+      view.setCenter(targetCenter)
+      view.setResolution(endResolution)
+      onComplete?.()
+    }
+  }
+  requestAnimationFrame(step)
+}
+
+const focusThingById = (thingId?: string | null) => {
+  selectedThingTransitionId++
+  const transitionId = selectedThingTransitionId
+
+  if (selectedThingPopupTimer !== undefined) {
+    window.clearTimeout(selectedThingPopupTimer)
+    selectedThingPopupTimer = undefined
+  }
+
+  if (!map || !thingId) {
+    activeFlyId++ // cancel any in-flight fly
+    popupOverlay?.setPosition(undefined)
+    return
+  }
+
+  const feature = findFeatureByThingId(thingId)
+  const geometry = feature?.getGeometry()
+  if (!feature || !(geometry instanceof Point)) return
+
+  const view = map.getView()
+  const currentZoom = view.getZoom() ?? 0
+  const targetZoom = Math.max(currentZoom, 12.5)
+  const targetCoordinates = geometry.getCoordinates() as [number, number]
+  const targetCenter = getPaddedCenter(targetCoordinates, targetZoom)
+
+  popupOverlay?.setPosition(undefined)
+
+  flyTo(targetCenter, targetZoom, {
+    duration: 700,
+    onComplete: () => {
+      if (transitionId !== selectedThingTransitionId) return
+      void openPopupForFeature(feature)
+    },
+  })
+}
+
 async function updateFeatures() {
   // 1) Rebuild features
   coloredThings.value = props.colorKey
@@ -203,13 +394,8 @@ async function updateFeatures() {
   vectorSource.addFeatures(features)
 
   // 3) zoom to the extent of whatever source we used
-  const extent = vectorSource.getExtent() as Extent
-  if (extentIsEmpty(extent) || props.singleMarkerMode) return
-  map.getView().fit(extent, {
-    padding: [100, 100, 100, 100],
-    maxZoom: 16,
-    duration: 0,
-  })
+  fitViewToMarkers()
+  focusThingById(props.selectedThingId)
 }
 
 const initializeMap = () => {
@@ -256,17 +442,20 @@ const initializeMap = () => {
     },
   })
 
-  const overlay = new Overlay({
+  popupOverlay = new Overlay({
     element: popupContainer.value,
     autoPan: props.singleMarkerMode ? false : { animation: { duration: 250 } },
   })
 
-  popupCloser.value!.onclick = () => overlay.setPosition(undefined)
+  popupCloser.value!.onclick = () => {
+    popupOverlay?.setPosition(undefined)
+    return false
+  }
 
   map = new OlMap({
     target: mapContainer.value,
     layers: [rasterLayer, markerLayer.value],
-    overlays: [overlay],
+    overlays: [popupOverlay],
     view: new View(defaultView),
   })
 
@@ -285,17 +474,14 @@ const initializeMap = () => {
 
     const rawFeatures = map.forEachFeatureAtPixel(evt.pixel, (f) => f)
     if (!rawFeatures) {
-      overlay.setPosition(undefined)
+      popupOverlay?.setPosition(undefined)
       return
     }
     // if it’s a cluster, OL puts real features in a “features” array
     const clicked = Array.isArray(rawFeatures.get('features'))
       ? rawFeatures.get('features')[0]
       : rawFeatures
-
-    const thing = await getPopupThing(clicked.get('thing') as MapThing)
-    popupContent.value!.innerHTML = generateMarkerContent(thing)
-    overlay.setPosition(evt.coordinate)
+    await openPopupForFeature(clicked as Feature)
   })
 
   map.on('pointermove', function (e) {
@@ -306,17 +492,11 @@ const initializeMap = () => {
 
   updateFeatures()
 
-  const extent = vectorSource.getExtent() as Extent
-
   // The sites likely aren't loaded at this point. Skip fitting the view and let the update function handle fitting when they arrive.
   const features = vectorSource.getFeatures()
   if (!features.length) return
 
-  map.getView().fit(extent, {
-    padding: [100, 100, 100, 100],
-    maxZoom: 16,
-    duration: 0,
-  })
+  fitViewToMarkers()
 }
 
 onMounted(async () => {
@@ -326,6 +506,13 @@ onMounted(async () => {
 
 watch(() => [props.things] as const, updateFeatures, { deep: true })
 
+watch(
+  () => props.selectedThingId,
+  (thingId) => {
+    void focusThingById(thingId)
+  }
+)
+
 function getConfigByName(name: string): ConfigTileSource {
   const found = basemapTileSources.find((cfg) => cfg.name === name)
   return found || basemapTileSources[0]
@@ -348,6 +535,19 @@ watch(
   height: 100%;
 }
 
+:deep(.ol-zoom) {
+  top: auto;
+  right: 14px;
+  bottom: 56px;
+  left: auto;
+}
+
+:deep(.ol-zoom button) {
+  width: 36px;
+  height: 36px;
+  font-size: 1.4rem;
+}
+
 /* 2) Position the dropdown in the top-right corner */
 .basemap-select-container {
   position: absolute;
diff --git a/apps/data-management/src/pages/Browse.vue b/apps/data-management/src/pages/Browse.vue
index 8c90e4ba..cd8caa7a 100644
--- a/apps/data-management/src/pages/Browse.vue
+++ b/apps/data-management/src/pages/Browse.vue
@@ -1,11 +1,20 @@
 <template>
-  <div class="d-flex fill-height">
+  <div class="browse-page">
     <BrowseFilterTool
+      class="browse-filter-overlay"
       :things="things"
       :things-loaded="loaded"
+      :selected-site-id="selectedThingId"
       @filter="updateFilteredThings"
+      @select-site="selectedThingId = $event"
+    />
+    <OpenLayersMap
+      v-if="loaded"
+      class="browse-map"
+      :things="filteredThings"
+      :fit-padding="mapFitPadding"
+      :selected-thing-id="selectedThingId"
     />
-    <OpenLayersMap v-if="loaded" :things="filteredThings" />
     <FullScreenLoader v-else loading-text="Loading map..." />
   </div>
 </template>
@@ -20,19 +29,54 @@ import type { ThingMarker } from '@hydroserver/client'
 
 const things = ref<ThingMarker[]>([])
 const filteredThings = ref<ThingMarker[]>([])
+const selectedThingId = ref<string>()
 const loaded = ref(false)
+const mapFitPadding: [number, number, number, number] = [44, 88, 96, 400]
 
 const updateFilteredThings = (updatedThings: ThingMarker[]) => {
   filteredThings.value = updatedThings
+  if (
+    selectedThingId.value &&
+    !updatedThings.some((thing) => thing.id === selectedThingId.value)
+  ) {
+    selectedThingId.value = undefined
+  }
 }
 
 onMounted(async () => {
   const res = await hs.things.listMarkers()
   filteredThings.value = things.value = res.ok ? res.data : []
 
-  // The BroseFilterTool changes the Canvas size of the Map, making it zoom too close.
-  // Wait until we're sure the drawer has opened, then render map
   await new Promise((r) => setTimeout(r, 100))
   loaded.value = true
 })
 </script>
+
+<style scoped>
+.browse-page {
+  position: relative;
+  height: calc(100dvh - var(--v-layout-top, 0px));
+  min-height: 520px;
+  overflow: hidden;
+}
+
+.browse-map {
+  width: 100%;
+  height: 100%;
+}
+
+.browse-filter-overlay {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  z-index: 1000;
+}
+
+@media (max-width: 700px) {
+  .browse-filter-overlay {
+    top: 12px;
+    left: 12px;
+    right: 12px;
+  }
+}
+</style>
diff --git a/apps/data-management/src/router/routes.ts b/apps/data-management/src/router/routes.ts
index c040795f..ccfd142a 100644
--- a/apps/data-management/src/router/routes.ts
+++ b/apps/data-management/src/router/routes.ts
@@ -44,7 +44,6 @@ export const routes: RouteRecordRaw[] = [
     component: () => import('@/pages/Browse.vue'),
     meta: {
       hideFooter: true,
-      hasSidebar: true,
       title: 'Browse Monitoring Sites',
       metaTags: [
         {
diff --git a/apps/data-management/src/utils/__tests__/browseFilters.spec.ts b/apps/data-management/src/utils/__tests__/browseFilters.spec.ts
index d1bbc129..636dac5a 100644
--- a/apps/data-management/src/utils/__tests__/browseFilters.spec.ts
+++ b/apps/data-management/src/utils/__tests__/browseFilters.spec.ts
@@ -103,6 +103,7 @@ describe('parseBrowseFilterQuery', () => {
       })
     ).toEqual({
       siteIds: ['thing-1'],
+      searchText: '',
       workspaceIds: ['workspace-1', 'workspace-2'],
       siteTypes: ['Lake', 'Stream'],
       drawer: false,
@@ -117,10 +118,12 @@ describe('parseBrowseFilterQuery', () => {
         workspace: 'workspace-1,workspace-2',
         workspaceIds: ['workspace-2'],
         siteType: ['Lake', 'Lake'],
+        search: 'Logan',
         drawer: 'yes',
       })
     ).toEqual({
       siteIds: ['thing-1'],
+      searchText: 'Logan',
       workspaceIds: ['workspace-1', 'workspace-2'],
       siteTypes: ['Lake'],
       drawer: true,
@@ -140,6 +143,7 @@ describe('buildBrowseFilterQuery', () => {
         {},
         {
           siteId: 'thing-1',
+          searchText: 'Logan',
           workspaceIds: ['workspace-1', 'workspace-2'],
           siteTypes: ['Lake'],
           drawer: true,
@@ -147,6 +151,7 @@ describe('buildBrowseFilterQuery', () => {
       )
     ).toEqual({
       sites: 'thing-1',
+      search: 'Logan',
       workspaces: ['workspace-1', 'workspace-2'],
       siteTypes: 'Lake',
     })
@@ -163,6 +168,7 @@ describe('buildBrowseFilterQuery', () => {
         },
         {
           siteId: null,
+          searchText: '',
           workspaceIds: [],
           siteTypes: [],
           drawer: false,
diff --git a/apps/data-management/src/utils/browseFilters.ts b/apps/data-management/src/utils/browseFilters.ts
index c1c3d6fd..b58579a7 100644
--- a/apps/data-management/src/utils/browseFilters.ts
+++ b/apps/data-management/src/utils/browseFilters.ts
@@ -4,6 +4,7 @@ import type { LocationQuery } from 'vue-router'
 
 export interface BrowseFilterRouteState {
   siteIds: string[]
+  searchText: string
   workspaceIds: string[]
   siteTypes: string[]
   drawer: boolean | null
@@ -11,6 +12,7 @@ export interface BrowseFilterRouteState {
 
 export interface BrowseFilterSelectionState {
   siteId?: string | null
+  searchText?: string | null
   workspaceIds: string[]
   siteTypes: string[]
   drawer?: boolean
@@ -20,6 +22,8 @@ const BROWSE_FILTER_QUERY_KEYS = [
   'sites',
   'site',
   'siteId',
+  'search',
+  'q',
   'workspaces',
   'workspace',
   'workspaceIds',
@@ -64,6 +68,7 @@ export function parseBrowseFilterQuery(
 ): BrowseFilterRouteState {
   return {
     siteIds: readQueryValues(query, ['sites', 'site', 'siteId']),
+    searchText: queryValues(query.search)[0] ?? queryValues(query.q)[0] ?? '',
     workspaceIds: readQueryValues(query, [
       'workspaces',
       'workspace',
@@ -83,11 +88,13 @@ export function buildBrowseFilterQuery(
   BROWSE_FILTER_QUERY_KEYS.forEach((key) => delete nextQuery[key])
 
   const siteIds = state.siteId ? [state.siteId] : []
+  const searchText = state.searchText?.trim()
   const sites = queryArray(siteIds)
   const workspaces = queryArray(state.workspaceIds)
   const siteTypes = queryArray(state.siteTypes)
 
   if (sites !== undefined) nextQuery.sites = sites
+  if (searchText) nextQuery.search = searchText
   if (workspaces !== undefined) nextQuery.workspaces = workspaces
   if (siteTypes !== undefined) nextQuery.siteTypes = siteTypes
   if (state.drawer === false) nextQuery.drawer = '0'

From c0b59098012fb74b781a97c0db4e859aa8913a9a Mon Sep 17 00:00:00 2001
From: daniel-slaugh <daniel.slaugh@hotmail.com>
Date: Mon, 29 Jun 2026 10:19:36 -0600
Subject: [PATCH 04/19] Add fixed site details card

---
 .../src/components/Maps/OpenLayersMap.vue     | 325 +++++++++++++++++-
 apps/data-management/src/pages/Browse.vue     |   2 +
 2 files changed, 323 insertions(+), 4 deletions(-)

diff --git a/apps/data-management/src/components/Maps/OpenLayersMap.vue b/apps/data-management/src/components/Maps/OpenLayersMap.vue
index e1d4d17d..bd621434 100644
--- a/apps/data-management/src/components/Maps/OpenLayersMap.vue
+++ b/apps/data-management/src/components/Maps/OpenLayersMap.vue
@@ -37,11 +37,61 @@
         </li>
       </ul>
     </div>
+
+    <transition name="detail-card">
+      <div v-if="selectable && detailThing" class="site-detail-card">
+        <div class="detail-accent" />
+        <div class="detail-body">
+          <div class="detail-header">
+            <div class="detail-heading">
+              <h2 class="detail-name">{{ detailThing.name }}</h2>
+              <div v-if="detailSubtitle" class="detail-meta">
+                <v-icon :icon="mdiMapMarker" size="14" />
+                <span>{{ detailSubtitle }}</span>
+              </div>
+            </div>
+            <button
+              class="detail-close"
+              aria-label="Close"
+              @click="emit('select', undefined)"
+            >
+              <v-icon :icon="mdiClose" size="18" />
+            </button>
+          </div>
+
+          <div v-if="detailCoordinates" class="detail-grid">
+            <div class="detail-field-label">Coordinates</div>
+            <div class="detail-field-value detail-mono">
+              {{ detailCoordinates }}
+            </div>
+          </div>
+
+          <div class="detail-actions">
+            <v-btn
+              color="primary"
+              variant="flat"
+              style="flex: 1"
+              :append-icon="mdiChevronRight"
+              :href="`/sites/${detailThing.id}`"
+            >
+              View details
+            </v-btn>
+          </div>
+        </div>
+      </div>
+    </transition>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, computed, type PropType } from 'vue'
+import {
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+  computed,
+  type PropType,
+} from 'vue'
 import hs, { Thing } from '@hydroserver/client'
 import { MapThing, MapThingWithColor } from '@/types'
 import {
@@ -53,9 +103,12 @@ import {
 import OlMap from 'ol/Map'
 import View from 'ol/View'
 import TileLayer from 'ol/layer/Tile'
+import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
 import { Feature, Overlay } from 'ol'
+import type { FeatureLike } from 'ol/Feature'
 import Point from 'ol/geom/Point'
+import { Style, Icon, Text, Fill, Stroke } from 'ol/style'
 import { fromLonLat, toLonLat } from 'ol/proj'
 import { settings } from '@/config/settings'
 import { Extent, isEmpty as extentIsEmpty } from 'ol/extent'
@@ -63,7 +116,7 @@ import { fetchLocationData } from '@/utils/maps/location'
 import WebGLVectorLayer from 'ol/layer/WebGLVector'
 import mapMarkerUrl from '@/assets/map-marker-64.png?url'
 import { OSM, XYZ } from 'ol/source'
-import { mdiMapMarker } from '@mdi/js'
+import { mdiMapMarker, mdiChevronRight, mdiClose } from '@mdi/js'
 
 const props = defineProps({
   things: {
@@ -81,8 +134,12 @@ const props = defineProps({
     type: String,
     default: undefined,
   },
+  // Browse-style selection: clicking a marker selects it (instead of opening
+  // the anchored popup), the selected marker grows + shows its name label, and
+  // details render in a fixed card rather than a marker-tethered popup.
+  selectable: Boolean,
 })
-const emit = defineEmits(['location-clicked'])
+const emit = defineEmits(['location-clicked', 'select'])
 
 interface ConfigTileSource {
   name: string
@@ -143,6 +200,41 @@ let activeFlyId = 0
 const vectorSource = new VectorSource<Feature>()
 const markerLayer = ref<WebGLVectorLayer>()
 
+// ── Browse-style selection (only used when `selectable`) ──
+const detailThing = ref<MapThing>()
+const selectionSource = new VectorSource<Feature>()
+let selectionLayer: VectorLayer | undefined
+// Final scale of the grown selection marker, relative to the 64px source png.
+const SELECTION_SCALE = 0.78
+let selectionScale = SELECTION_SCALE
+let selectionAnimId = 0
+
+const detailSubtitle = computed(() => {
+  const thing = detailThing.value
+  if (!thing) return ''
+  const parts: string[] = []
+  if (isThingMarker(thing)) {
+    if (thing.siteType) parts.push(thing.siteType)
+  } else {
+    if (thing.siteType) parts.push(thing.siteType)
+    const area = [thing.location.adminArea2, thing.location.adminArea1]
+      .filter(Boolean)
+      .join(', ')
+    if (area) parts.push(area)
+  }
+  return parts.join(' · ')
+})
+
+const detailCoordinates = computed(() => {
+  const thing = detailThing.value
+  if (!thing) return ''
+  const [lng, lat] = getThingCoordinates(thing as MapThingWithColor)
+  const latNum = Number(lat)
+  const lngNum = Number(lng)
+  if (!isFinite(latNum) || !isFinite(lngNum)) return ''
+  return `${latNum.toFixed(4)}, ${lngNum.toFixed(4)}`
+})
+
 const uniqueColoredThings = computed(() => {
   const firstOccurrenceMap = new Map()
   coloredThings.value.forEach((thing) => {
@@ -228,6 +320,77 @@ const openPopupForFeature = async (feature: Feature) => {
   popupOverlay.setPosition(geometry.getCoordinates())
 }
 
+// Style for the grown, labelled selection marker drawn on top of the WebGL
+// markers. Mirrors the design: enlarged pin + the site name beside it.
+const selectionStyle = (feature: FeatureLike) => {
+  const thing = getFeatureThing(feature as Feature)
+  const color = (feature.get('markerColor') as string) || '#D32F2F'
+  return new Style({
+    image: new Icon({
+      src: mapMarkerUrl,
+      anchor: [0.5, 1],
+      color,
+      scale: selectionScale,
+    }),
+    text: new Text({
+      text: thing?.name ?? '',
+      font: "600 13px Roboto, 'Helvetica Neue', Arial, sans-serif",
+      textAlign: 'left',
+      textBaseline: 'middle',
+      offsetX: 14,
+      offsetY: -Math.round(64 * selectionScale * 0.5),
+      fill: new Fill({ color: 'rgba(0,0,0,0.78)' }),
+      backgroundFill: new Fill({ color: 'rgba(255,255,255,0.95)' }),
+      backgroundStroke: new Stroke({ color: 'rgba(0,0,0,0.12)', width: 1 }),
+      padding: [3, 8, 3, 8],
+    }),
+  })
+}
+
+// Quick "pop" as the marker grows in, for parity with the design's CSS scale.
+const animateSelectionScale = (from: number, to: number, duration = 180) => {
+  const animId = ++selectionAnimId
+  const start = performance.now()
+  const ease = (k: number) => 1 - Math.pow(1 - k, 2)
+  const step = (now: number) => {
+    if (animId !== selectionAnimId) return
+    const k = Math.min(1, (now - start) / duration)
+    selectionScale = from + (to - from) * ease(k)
+    selectionLayer?.changed()
+    if (k < 1) requestAnimationFrame(step)
+  }
+  requestAnimationFrame(step)
+}
+
+const updateSelectionMarker = (thingId?: string | null) => {
+  selectionSource.clear()
+  if (!thingId) {
+    selectionAnimId++ // stop any in-flight grow
+    return
+  }
+  const feature = findFeatureByThingId(thingId)
+  const geometry = feature?.getGeometry()
+  if (!feature || !(geometry instanceof Point)) return
+
+  const clone = new Feature({ geometry: geometry.clone() })
+  clone.set('markerColor', feature.get('markerColor'))
+  clone.set('thing', getFeatureThing(feature))
+  selectionSource.addFeature(clone)
+  animateSelectionScale(SELECTION_SCALE * 0.78, SELECTION_SCALE)
+}
+
+const loadDetailThing = async (thingId?: string | null) => {
+  if (!thingId) {
+    detailThing.value = undefined
+    return
+  }
+  const base = props.things.find((thing) => thing.id === thingId)
+  if (!base) return
+  detailThing.value = base // show immediately, then enrich
+  const detailed = await getPopupThing(base)
+  if (props.selectedThingId === thingId) detailThing.value = detailed
+}
+
 const getPaddedCenter = (
   coordinates: [number, number],
   zoom: number
@@ -352,6 +515,7 @@ const focusThingById = (thingId?: string | null) => {
   if (!map || !thingId) {
     activeFlyId++ // cancel any in-flight fly
     popupOverlay?.setPosition(undefined)
+    if (props.selectable) updateSelectionMarker(undefined)
     return
   }
 
@@ -367,6 +531,13 @@ const focusThingById = (thingId?: string | null) => {
 
   popupOverlay?.setPosition(undefined)
 
+  if (props.selectable) {
+    // Browse mode: grow the marker + show its label; details live in the card.
+    updateSelectionMarker(thingId)
+    flyTo(targetCenter, targetZoom, { duration: 700 })
+    return
+  }
+
   flyTo(targetCenter, targetZoom, {
     duration: 700,
     onComplete: () => {
@@ -442,6 +613,11 @@ const initializeMap = () => {
     },
   })
 
+  selectionLayer = new VectorLayer({
+    source: selectionSource,
+    style: selectionStyle,
+  })
+
   popupOverlay = new Overlay({
     element: popupContainer.value,
     autoPan: props.singleMarkerMode ? false : { animation: { duration: 250 } },
@@ -454,7 +630,7 @@ const initializeMap = () => {
 
   map = new OlMap({
     target: mapContainer.value,
-    layers: [rasterLayer, markerLayer.value],
+    layers: [rasterLayer, markerLayer.value, selectionLayer],
     overlays: [popupOverlay],
     view: new View(defaultView),
   })
@@ -473,6 +649,21 @@ const initializeMap = () => {
     }
 
     const rawFeatures = map.forEachFeatureAtPixel(evt.pixel, (f) => f)
+
+    // Browse mode: clicks drive selection rather than opening a popup.
+    if (props.selectable) {
+      if (!rawFeatures) {
+        emit('select', undefined)
+        return
+      }
+      const clickedFeature = Array.isArray(rawFeatures.get('features'))
+        ? rawFeatures.get('features')[0]
+        : rawFeatures
+      const thingId = getFeatureThing(clickedFeature as Feature)?.id
+      if (thingId) emit('select', thingId)
+      return
+    }
+
     if (!rawFeatures) {
       popupOverlay?.setPosition(undefined)
       return
@@ -499,9 +690,21 @@ const initializeMap = () => {
   fitViewToMarkers()
 }
 
+const onKeydown = (e: KeyboardEvent) => {
+  if (e.key === 'Escape' && props.selectedThingId) emit('select', undefined)
+}
+
 onMounted(async () => {
   if (!mapContainer.value) return
   initializeMap()
+  if (props.selectable) {
+    void loadDetailThing(props.selectedThingId)
+    window.addEventListener('keydown', onKeydown)
+  }
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKeydown)
 })
 
 watch(() => [props.things] as const, updateFeatures, { deep: true })
@@ -510,6 +713,7 @@ watch(
   () => props.selectedThingId,
   (thingId) => {
     void focusThingById(thingId)
+    if (props.selectable) void loadDetailThing(thingId)
   }
 )
 
@@ -580,6 +784,119 @@ watch(
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
+/* ── Browse selected-site detail card ── */
+.site-detail-card {
+  position: absolute;
+  left: 412px;
+  bottom: 16px;
+  width: 348px;
+  z-index: 6;
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.22);
+  overflow: hidden;
+}
+
+.detail-accent {
+  height: 4px;
+  background: rgb(var(--v-theme-primary));
+}
+
+.detail-body {
+  padding: 13px 16px 15px;
+}
+
+.detail-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.detail-heading {
+  flex: 1;
+  min-width: 0;
+}
+
+.detail-name {
+  font-size: 16.5px;
+  font-weight: 600;
+  line-height: 1.25;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.detail-meta {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 4px;
+  font-size: 12.5px;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.detail-close {
+  flex-shrink: 0;
+  display: flex;
+  border: none;
+  background: transparent;
+  border-radius: 50%;
+  padding: 5px;
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.detail-close:hover {
+  background: rgba(0, 0, 0, 0.07);
+}
+
+.detail-grid {
+  margin: 13px 0;
+  padding: 11px 12px;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 10px;
+}
+
+.detail-field-label {
+  font-size: 10.5px;
+  color: rgba(0, 0, 0, 0.6);
+  margin-bottom: 2px;
+}
+
+.detail-field-value {
+  font-size: 12.5px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.detail-mono {
+  font-family: 'Roboto Mono', monospace;
+  font-weight: 400;
+}
+
+.detail-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.detail-card-enter-active,
+.detail-card-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
+}
+
+.detail-card-enter-from,
+.detail-card-leave-to {
+  opacity: 0;
+  transform: translateY(14px);
+}
+
+@media (max-width: 900px) {
+  .site-detail-card {
+    left: 12px;
+    right: 12px;
+    bottom: 12px;
+    width: auto;
+  }
+}
+
 .ol-popup {
   position: absolute;
   background-color: white;
diff --git a/apps/data-management/src/pages/Browse.vue b/apps/data-management/src/pages/Browse.vue
index cd8caa7a..86ee9fad 100644
--- a/apps/data-management/src/pages/Browse.vue
+++ b/apps/data-management/src/pages/Browse.vue
@@ -11,9 +11,11 @@
     <OpenLayersMap
       v-if="loaded"
       class="browse-map"
+      selectable
       :things="filteredThings"
       :fit-padding="mapFitPadding"
       :selected-thing-id="selectedThingId"
+      @select="selectedThingId = $event"
     />
     <FullScreenLoader v-else loading-text="Loading map..." />
   </div>

From 792e388a20e176d44a4bf27690491c318a3e39d6 Mon Sep 17 00:00:00 2001
From: daniel-slaugh <daniel.slaugh@hotmail.com>
Date: Mon, 29 Jun 2026 10:34:17 -0600
Subject: [PATCH 05/19] Replace 'add' button with clear filters

---
 .../components/Browse/BrowseFilterTool.vue    | 42 +++++++++----------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/apps/data-management/src/components/Browse/BrowseFilterTool.vue b/apps/data-management/src/components/Browse/BrowseFilterTool.vue
index d85f3c9f..47e241e3 100644
--- a/apps/data-management/src/components/Browse/BrowseFilterTool.vue
+++ b/apps/data-management/src/components/Browse/BrowseFilterTool.vue
@@ -22,14 +22,16 @@
 
         <div class="filter-header-actions">
           <v-btn
-            icon
+            v-if="hasActiveFilters"
+            class="reset-filters-btn"
+            variant="text"
             color="primary"
-            size="34"
-            rounded="lg"
-            aria-label="Add site"
-            to="/sites"
+            size="small"
+            :prepend-icon="mdiFilterOffOutline"
+            title="Clear all filters"
+            @click="onClearFilters"
           >
-            <v-icon :icon="mdiPlus" size="20" />
+            Reset
           </v-btn>
 
           <v-btn
@@ -112,17 +114,6 @@
           </div>
         </section>
 
-        <div v-if="hasActiveFilters" class="filter-actions">
-          <v-btn
-            variant="text"
-            color="primary"
-            density="comfortable"
-            :prepend-icon="mdiClose"
-            @click="onClearFilters"
-          >
-            Clear filters
-          </v-btn>
-        </div>
       </div>
 
       <v-divider />
@@ -176,9 +167,9 @@ import type { ThingMarker } from '@/types'
 import {
   mdiBriefcaseOutline,
   mdiChevronLeft,
-  mdiClose,
   mdiEarth,
   mdiFactory,
+  mdiFilterOffOutline,
   mdiFlaskOutline,
   mdiFountain,
   mdiGauge,
@@ -187,7 +178,6 @@ import {
   mdiMapMarkerOutline,
   mdiMagnify,
   mdiPipe,
-  mdiPlus,
   mdiSnowflake,
   mdiTerrain,
   mdiThermometer,
@@ -690,10 +680,16 @@ pruneSelectionToAvailable(
   background: rgba(33, 150, 243, 0.1);
 }
 
-.filter-actions {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: -6px;
+.reset-filters-btn {
+  min-width: 0;
+  padding-inline: 8px;
+  font-size: 11.5px;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.reset-filters-btn :deep(.v-btn__prepend) {
+  margin-inline-end: 4px;
 }
 
 .site-list {

From 6afe35a734bf273ce693c7e090a92ef0e07d9499 Mon Sep 17 00:00:00 2001
From: daniel-slaugh <daniel.slaugh@hotmail.com>
Date: Mon, 29 Jun 2026 12:38:27 -0600
Subject: [PATCH 06/19] Add site type iconography; add on-enter site selection

---
 .../components/Browse/BrowseFilterTool.vue    | 572 ++++++++++++++----
 .../src/components/Maps/OpenLayersMap.vue     |  65 +-
 2 files changed, 505 insertions(+), 132 deletions(-)

diff --git a/apps/data-management/src/components/Browse/BrowseFilterTool.vue b/apps/data-management/src/components/Browse/BrowseFilterTool.vue
index 47e241e3..a2222525 100644
--- a/apps/data-management/src/components/Browse/BrowseFilterTool.vue
+++ b/apps/data-management/src/components/Browse/BrowseFilterTool.vue
@@ -52,40 +52,47 @@
           v-model="siteSearch"
           class="site-search"
           name="browse-site-search"
-          placeholder="Search sites or workspaces"
+          label="Search sites"
           :prepend-inner-icon="mdiMagnify"
           clearable
-          density="compact"
           hide-details
-          single-line
-          variant="outlined"
-          bg-color="#f2f4f7"
           color="primary"
           autocomplete="off"
+          @keydown.enter.prevent="onSiteSearchEnter"
           @click:clear="siteSearch = ''"
         />
 
-        <v-select
+        <v-autocomplete
           v-model="selectedWorkspaces"
           :items="availableWorkspaces"
           class="workspace-filter"
           name="browse-workspace-filter"
+          label="Workspaces"
           item-title="name"
           return-object
           multiple
-          density="compact"
+          clearable
           hide-details
-          variant="outlined"
           color="primary"
           :prepend-inner-icon="mdiBriefcaseOutline"
-          :placeholder="workspacePlaceholder"
         >
-          <template v-slot:selection="{ index }">
-            <span v-if="index === 0" class="workspace-selection">
-              {{ workspaceSelectionLabel }}
+          <template v-slot:selection="{ item, index }">
+            <v-chip
+              v-if="index < 2"
+              size="small"
+              closable
+              @click:close="selectedWorkspaces.splice(index, 1)"
+            >
+              <span>{{ item.title }}</span>
+            </v-chip>
+            <span
+              v-else-if="index === 2"
+              class="text-caption text-medium-emphasis ms-1"
+            >
+              +{{ selectedWorkspaces.length - 2 }} more
             </span>
           </template>
-        </v-select>
+        </v-autocomplete>
 
         <section v-if="availableSiteTypes.length" class="filter-section">
           <div class="filter-section-title">Site type</div>
@@ -113,7 +120,6 @@
             </v-btn>
           </div>
         </section>
-
       </div>
 
       <v-divider />
@@ -132,7 +138,6 @@
           >
             <span class="site-row-icon">
               <v-icon :icon="getSiteTypeIcon(site.siteType)" size="20" />
-              <span class="site-row-status" />
             </span>
 
             <span class="site-row-text">
@@ -141,8 +146,6 @@
                 {{ getWorkspaceName(site.workspaceId) }}
               </span>
             </span>
-
-            <span class="site-row-type">{{ site.siteType }}</span>
           </button>
         </div>
 
@@ -165,32 +168,85 @@ import {
 import hs, { Workspace } from '@hydroserver/client'
 import type { ThingMarker } from '@/types'
 import {
+  mdiAccessPoint,
+  mdiBacteria,
+  mdiBeach,
+  mdiBiohazard,
   mdiBriefcaseOutline,
+  mdiBridge,
   mdiChevronLeft,
+  mdiCity,
+  mdiCloudOutline,
+  mdiCounter,
+  mdiCrosshairsGps,
+  mdiCupWater,
+  mdiDatabaseMarkerOutline,
   mdiEarth,
   mdiFactory,
+  mdiFerry,
+  mdiFilterVariant,
   mdiFilterOffOutline,
-  mdiFlaskOutline,
+  mdiForest,
   mdiFountain,
   mdiGauge,
+  mdiGate,
+  mdiGreenhouse,
   mdiGrass,
+  mdiHomeFlood,
   mdiHydroPower,
+  mdiLayersTripleOutline,
+  mdiLifebuoy,
   mdiMapMarkerOutline,
+  mdiMapMarkerRadiusOutline,
   mdiMagnify,
+  mdiMoleculeCo2,
+  mdiOfficeBuildingMarkerOutline,
   mdiPipe,
+  mdiPipeDisconnected,
+  mdiRadar,
+  mdiRecycle,
+  mdiRoadVariant,
+  mdiRoutes,
+  mdiSatelliteVariant,
+  mdiScaleBalance,
+  mdiSignCaution,
+  mdiSlopeUphill,
+  mdiSmog,
   mdiSnowflake,
+  mdiSnowflakeMelt,
+  mdiSolarPower,
+  mdiSpeedometer,
+  mdiSprout,
+  mdiSprinkler,
   mdiTerrain,
+  mdiTestTube,
   mdiThermometer,
   mdiThermometerWater,
+  mdiTransmissionTower,
+  mdiTractor,
+  mdiValve,
+  mdiWarehouse,
+  mdiWaterAlertOutline,
   mdiWaterCheckOutline,
+  mdiWaterCircle,
+  mdiWaterMinus,
+  mdiWaterOutline,
   mdiWaterPercent,
+  mdiWaterPlus,
   mdiWater,
+  mdiWaterPump,
+  mdiWaterSync,
   mdiWaterWell,
   mdiWeatherCloudy,
+  mdiWeatherFog,
+  mdiWeatherHazy,
+  mdiWeatherPartlyCloudy,
   mdiWeatherPouring,
   mdiWeatherSunny,
   mdiWeatherWindy,
   mdiWaves,
+  mdiWavesArrowRight,
+  mdiWavesArrowUp,
 } from '@mdi/js'
 
 const vocabularyStore = useVocabularyStore()
@@ -286,17 +342,6 @@ const availableSiteTypes = computed(() => {
   return vocabularyStore.siteTypes.filter((siteType) => siteTypes.has(siteType))
 })
 
-const workspacePlaceholder = computed(() =>
-  selectedWorkspaces.value.length ? '' : 'All workspaces'
-)
-
-const workspaceSelectionLabel = computed(() => {
-  const count = selectedWorkspaces.value.length
-  if (!count) return 'All workspaces'
-  if (count === 1) return selectedWorkspaces.value[0]?.name ?? '1 workspace'
-  return `${count} workspaces`
-})
-
 const hasActiveFilters = computed(
   () =>
     Boolean((siteSearch.value ?? '').trim()) ||
@@ -307,99 +352,435 @@ const hasActiveFilters = computed(
 const getWorkspaceName = (workspaceId: string) =>
   workspaceById.value.get(workspaceId)?.name || 'Workspace'
 
+const normalizeSiteType = (siteType: string) =>
+  siteType
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, ' ')
+    .trim()
+    .replace(/\s+/g, ' ')
+
 const siteTypeIconRules = [
   {
-    keywords: ['quality', 'chemistry', 'chemical', 'sample', 'sampling'],
-    icon: mdiFlaskOutline,
+    keywords: ['iot', 'sensor network', 'access point'],
+    icon: mdiAccessPoint,
   },
   {
-    keywords: ['gage', 'gauge', 'stage', 'level', 'discharge', 'flow'],
-    icon: mdiGauge,
+    keywords: [
+      'air quality',
+      'air monitor',
+      'air monitoring',
+      'particulate',
+      'pm2 5',
+      'pm10',
+      'smoke',
+    ],
+    icon: mdiSmog,
   },
   {
-    keywords: ['weather', 'meteorological', 'met station', 'atmosphere'],
-    icon: mdiWeatherCloudy,
+    keywords: ['bacteria', 'pathogen', 'e coli', 'coliform'],
+    icon: mdiBacteria,
   },
   {
-    keywords: ['precipitation', 'rain', 'rainfall', 'storm'],
-    icon: mdiWeatherPouring,
+    keywords: ['irrigation', 'irrigated'],
+    icon: mdiSprinkler,
   },
   {
-    keywords: ['wind'],
-    icon: mdiWeatherWindy,
+    keywords: ['coastal', 'beach', 'shore', 'shoreline', 'estuary', 'tidal'],
+    icon: mdiBeach,
   },
   {
-    keywords: ['solar', 'radiation', 'sun'],
-    icon: mdiWeatherSunny,
+    keywords: [
+      'toxic',
+      'contamination',
+      'contaminant',
+      'hazard',
+      'pollution',
+      'spill',
+    ],
+    icon: mdiBiohazard,
   },
   {
-    keywords: ['water temperature'],
-    icon: mdiThermometerWater,
+    keywords: ['bridge', 'crossing'],
+    icon: mdiBridge,
   },
   {
-    keywords: ['temperature', 'thermal'],
-    icon: mdiThermometer,
+    keywords: [
+      'reservoir profile',
+      'reservoir profiles',
+      'water column profile',
+      'profile',
+    ],
+    icon: mdiLayersTripleOutline,
   },
   {
-    keywords: ['groundwater', 'ground water', 'well', 'aquifer'],
-    icon: mdiWaterWell,
+    keywords: ['urban', 'municipal', 'city'],
+    icon: mdiCity,
   },
   {
-    keywords: ['reservoir', 'lake', 'pond', 'pool'],
-    icon: mdiWaves,
+    keywords: ['cloud', 'cloud cover'],
+    icon: mdiCloudOutline,
   },
   {
-    keywords: ['stream', 'river', 'creek', 'brook', 'channel'],
-    icon: mdiWater,
+    keywords: ['flow meter', 'flowmeter', 'meter', 'counter', 'totalizer'],
+    icon: mdiCounter,
   },
   {
-    keywords: ['canal', 'pipe', 'pipeline', 'conduit'],
-    icon: mdiPipe,
+    keywords: ['reference', 'benchmark', 'survey', 'gps'],
+    icon: mdiCrosshairsGps,
+  },
+  {
+    keywords: ['drinking water', 'potable'],
+    icon: mdiCupWater,
+  },
+  {
+    keywords: ['model', 'grid', 'database'],
+    icon: mdiDatabaseMarkerOutline,
+  },
+  {
+    keywords: ['earth', 'environmental', 'ecosystem'],
+    icon: mdiEarth,
+  },
+  {
+    keywords: ['industrial', 'industry', 'factory'],
+    icon: mdiFactory,
   },
   {
-    keywords: ['spring', 'seep'],
+    keywords: ['boat', 'harbor', 'marine'],
+    icon: mdiFerry,
+  },
+  {
+    keywords: ['forest', 'riparian', 'watershed'],
+    icon: mdiForest,
+  },
+  {
+    keywords: ['spring', 'seep', 'fountain'],
     icon: mdiFountain,
   },
+  {
+    keywords: ['dry dam release', 'dry dam', 'dam'],
+    icon: mdiGate,
+  },
+  {
+    keywords: [
+      'stream gage',
+      'stream gauge',
+      'gage',
+      'gauge',
+      'stage',
+      'level',
+      'discharge',
+      'flow station',
+    ],
+    icon: mdiGauge,
+  },
   {
     keywords: ['wetland', 'marsh', 'swamp'],
     icon: mdiGrass,
   },
   {
-    keywords: ['snow', 'ice', 'glacier'],
+    keywords: ['greenhouse'],
+    icon: mdiGreenhouse,
+  },
+  {
+    keywords: ['flood', 'floodplain'],
+    icon: mdiHomeFlood,
+  },
+  {
+    keywords: ['hydropower', 'hydro power', 'power generation'],
+    icon: mdiHydroPower,
+  },
+  {
+    keywords: ['monitoring station', 'station', 'site'],
+    icon: mdiMapMarkerRadiusOutline,
+  },
+  {
+    keywords: ['co2', 'carbon dioxide', 'greenhouse gas'],
+    icon: mdiMoleculeCo2,
+  },
+  {
+    keywords: ['facility', 'building', 'public works'],
+    icon: mdiOfficeBuildingMarkerOutline,
+  },
+  {
+    keywords: ['pipe', 'pipeline', 'conduit'],
+    icon: mdiPipe,
+  },
+  {
+    keywords: ['buoy'],
+    icon: mdiLifebuoy,
+  },
+  {
+    keywords: ['radar', 'doppler'],
+    icon: mdiRadar,
+  },
+  {
+    keywords: [
+      'combined sewer',
+      'sanitary sewer',
+      'wastewater',
+      'waste water',
+      'effluent',
+      'sewer',
+    ],
+    icon: mdiRecycle,
+  },
+  {
+    keywords: ['culvert', 'road crossing', 'road'],
+    icon: mdiRoadVariant,
+  },
+  {
+    keywords: [
+      'channel',
+      'conveyance',
+      'diversion',
+      'delivery',
+      'route',
+      'transfer',
+      'distribution',
+      'ditch',
+      'lateral',
+      'canal',
+      'aqueduct',
+    ],
+    icon: mdiRoutes,
+  },
+  {
+    keywords: ['remote sensing', 'satellite'],
+    icon: mdiSatelliteVariant,
+  },
+  {
+    keywords: ['warning', 'alert', 'watch'],
+    icon: mdiSignCaution,
+  },
+  {
+    keywords: ['slope', 'hillslope'],
+    icon: mdiSlopeUphill,
+  },
+  {
+    keywords: ['snow', 'snowpack', 'snotel', 'ice', 'glacier'],
     icon: mdiSnowflake,
   },
+  {
+    keywords: ['snowmelt', 'snow melt'],
+    icon: mdiSnowflakeMelt,
+  },
+  {
+    keywords: ['solar power', 'solar panel'],
+    icon: mdiSolarPower,
+  },
+  {
+    keywords: ['pressure', 'speed', 'velocity'],
+    icon: mdiSpeedometer,
+  },
+  {
+    keywords: ['soil moisture'],
+    icon: mdiSprout,
+  },
   {
     keywords: ['soil', 'terrain', 'land'],
     icon: mdiTerrain,
   },
+  {
+    keywords: [
+      'water quality sample',
+      'water quality samples',
+      'quality sample',
+      'grab sample',
+      'field sample',
+      'chemistry',
+      'chemical',
+      'sample',
+      'sampling',
+      'lab',
+      'laboratory',
+    ],
+    icon: mdiTestTube,
+  },
+  {
+    keywords: ['temperature', 'thermal'],
+    icon: mdiThermometer,
+  },
+  {
+    keywords: ['water temperature'],
+    icon: mdiThermometerWater,
+  },
+  {
+    keywords: ['agricultural', 'agriculture', 'farm', 'crop'],
+    icon: mdiTractor,
+  },
+  {
+    keywords: ['telemetry', 'telemetred', 'telemetered', 'radio', 'tower'],
+    icon: mdiTransmissionTower,
+  },
+  {
+    keywords: ['valve', 'turnout', 'gate valve'],
+    icon: mdiValve,
+  },
+  {
+    keywords: ['warehouse', 'storage'],
+    icon: mdiWarehouse,
+  },
+  {
+    keywords: ['creek', 'river', 'stream', 'brook'],
+    icon: mdiWater,
+  },
+  {
+    keywords: ['drought', 'dry'],
+    icon: mdiWaterAlertOutline,
+  },
+  // TODO: no dedicated treatment-plant icon in MDI 7.4.47; revisit
+  {
+    keywords: ['water treatment', 'treatment plant', 'treatment works'],
+    icon: mdiFilterVariant,
+  },
+  {
+    keywords: [
+      'water quality',
+      'water quality sensor',
+      'quality sensor',
+      'sonde',
+      'multiparameter',
+      'conductivity',
+      'dissolved oxygen',
+      'turbidity',
+      'ph',
+      'chlorophyll',
+      'nutrient',
+      'water check',
+      'water status',
+    ],
+    icon: mdiWaterCheckOutline,
+  },
+  {
+    keywords: ['water supply', 'supply', 'source water'],
+    icon: mdiWaterCircle,
+  },
+  {
+    keywords: ['withdrawal', 'intake', 'diverted'],
+    icon: mdiWaterMinus,
+  },
+  {
+    keywords: ['surface water'],
+    icon: mdiWaterOutline,
+  },
   {
     keywords: ['humidity', 'moisture'],
     icon: mdiWaterPercent,
   },
   {
-    keywords: ['water treatment', 'wastewater', 'waste water', 'effluent'],
-    icon: mdiFactory,
+    keywords: ['injection', 'recharge', 'addition'],
+    icon: mdiWaterPlus,
   },
   {
-    keywords: ['dam', 'hydropower', 'hydro power'],
-    icon: mdiHydroPower,
+    keywords: ['pump station', 'pump', 'pumping'],
+    icon: mdiWaterPump,
   },
   {
-    keywords: ['water check', 'water status'],
-    icon: mdiWaterCheckOutline,
+    keywords: ['reclaimed', 'reuse'],
+    icon: mdiWaterSync,
   },
   {
-    keywords: ['earth', 'environmental', 'ecosystem'],
-    icon: mdiEarth,
+    keywords: ['water balance', 'water budget', 'sync'],
+    icon: mdiScaleBalance,
+  },
+  {
+    keywords: [
+      'well',
+      'ground water',
+      'groundwater',
+      'groundwater well',
+      'wellfield',
+      'aquifer',
+      'piezometer',
+    ],
+    icon: mdiWaterWell,
+  },
+  {
+    keywords: [
+      'reservoir',
+      'reservoir lake',
+      'lake',
+      'pond',
+      'pool',
+      'impoundment',
+    ],
+    icon: mdiWaves,
+  },
+  {
+    keywords: ['reservoir release', 'release', 'outflow', 'spillway'],
+    icon: mdiWavesArrowRight,
+  },
+  {
+    keywords: [
+      'weather station',
+      'weather',
+      'meteorological',
+      'meteorology',
+      'met station',
+    ],
+    icon: mdiWeatherCloudy,
+  },
+  {
+    keywords: ['fog', 'visibility', 'mist'],
+    icon: mdiWeatherFog,
+  },
+  {
+    keywords: ['dust', 'smoke haze', 'haze', 'hazy'],
+    icon: mdiWeatherHazy,
+  },
+  // TODO: no drain/storm-sewer icon in MDI 7.4.47; pipe-disconnected is a stand-in
+  {
+    keywords: [
+      'storm sewer',
+      'storm drain',
+      'stormwater',
+      'storm water',
+      'drainage',
+      'drain',
+    ],
+    icon: mdiPipeDisconnected,
+  },
+  {
+    keywords: ['atmospheric deposition', 'atmospheric', 'deposition'],
+    icon: mdiWeatherPartlyCloudy,
+  },
+  {
+    keywords: ['precipitation', 'precip', 'rain', 'rainfall', 'storm'],
+    icon: mdiWeatherPouring,
+  },
+  {
+    keywords: ['solar', 'radiation', 'sun'],
+    icon: mdiWeatherSunny,
+  },
+  {
+    keywords: ['evaporation', 'evapotranspiration'],
+    icon: mdiWavesArrowUp,
+  },
+  {
+    keywords: ['wind', 'anemometer'],
+    icon: mdiWeatherWindy,
   },
 ]
 
+const matchesSiteTypeKeyword = (normalizedSiteType: string, keyword: string) =>
+  ` ${normalizedSiteType} `.includes(` ${normalizeSiteType(keyword)} `)
+
+// Prefer the longest / most specific keyword so multi-word site types resolve
+// before generic substrings like "moisture" or "sample".
 const getSiteTypeIcon = (siteType: string) => {
-  const normalized = siteType.toLowerCase()
+  const normalized = normalizeSiteType(siteType)
   return (
-    siteTypeIconRules.find(({ keywords }) =>
-      keywords.some((keyword) => normalized.includes(keyword))
-    )?.icon ?? mdiMapMarkerOutline
+    siteTypeIconRules
+      .flatMap(({ keywords, icon }) =>
+        keywords.map((keyword) => ({ keyword, icon }))
+      )
+      .filter(({ keyword }) => matchesSiteTypeKeyword(normalized, keyword))
+      .sort(
+        (a, b) =>
+          normalizeSiteType(b.keyword).length -
+          normalizeSiteType(a.keyword).length
+      )[0]?.icon ??
+    mdiMapMarkerOutline
   )
 }
 
@@ -413,6 +794,15 @@ const setExpanded = (value: boolean) => {
   isExpanded.value = value
 }
 
+// Let the user quickly jump to a site: typing a query and pressing Enter
+// selects the first match while leaving the search field focused and intact.
+const onSiteSearchEnter = () => {
+  const firstSite = availableSites.value[0]
+  if (firstSite) {
+    emit('select-site', firstSite.id)
+  }
+}
+
 const emitFilteredThings = () => {
   emit('filter', availableSites.value)
 }
@@ -624,22 +1014,6 @@ pruneSelectionToAvailable(
   font-size: 13px;
 }
 
-.site-search :deep(input::placeholder) {
-  color: #6f747b;
-  opacity: 1;
-  font-weight: 600;
-}
-
-.workspace-filter :deep(.v-field__input) {
-  font-weight: 600;
-}
-
-.workspace-selection {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .filter-section {
   display: flex;
   flex-direction: column;
@@ -716,7 +1090,7 @@ pruneSelectionToAvailable(
 
 .site-row {
   display: grid;
-  grid-template-columns: 34px minmax(0, 1fr) auto;
+  grid-template-columns: 34px minmax(0, 1fr);
   align-items: center;
   gap: 10px;
   width: 100%;
@@ -754,17 +1128,6 @@ pruneSelectionToAvailable(
   color: #5f6368;
 }
 
-.site-row-status {
-  position: absolute;
-  right: -2px;
-  bottom: -2px;
-  width: 10px;
-  height: 10px;
-  border: 2px solid #ffffff;
-  border-radius: 999px;
-  background: #43a047;
-}
-
 .site-row-text {
   display: flex;
   min-width: 0;
@@ -792,17 +1155,6 @@ pruneSelectionToAvailable(
   font-weight: 500;
 }
 
-.site-row-type {
-  max-width: 96px;
-  overflow: hidden;
-  color: #2e7d32;
-  font-size: 11px;
-  font-weight: 700;
-  text-align: right;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .empty-sites {
   display: flex;
   min-height: 120px;
@@ -850,13 +1202,5 @@ pruneSelectionToAvailable(
   .site-list {
     padding-inline: 16px;
   }
-
-  .site-row {
-    grid-template-columns: 34px minmax(0, 1fr);
-  }
-
-  .site-row-type {
-    display: none;
-  }
 }
 </style>
diff --git a/apps/data-management/src/components/Maps/OpenLayersMap.vue b/apps/data-management/src/components/Maps/OpenLayersMap.vue
index bd621434..8488e620 100644
--- a/apps/data-management/src/components/Maps/OpenLayersMap.vue
+++ b/apps/data-management/src/components/Maps/OpenLayersMap.vue
@@ -25,6 +25,10 @@
       <div ref="popupContent" />
     </div>
 
+    <div ref="selectionLabelContainer" class="selected-site-label">
+      {{ selectedSiteLabel }}
+    </div>
+
     <div v-if="uniqueColoredThings.length" class="legend">
       <h3>Legend</h3>
       <ul>
@@ -108,7 +112,7 @@ import VectorSource from 'ol/source/Vector'
 import { Feature, Overlay } from 'ol'
 import type { FeatureLike } from 'ol/Feature'
 import Point from 'ol/geom/Point'
-import { Style, Icon, Text, Fill, Stroke } from 'ol/style'
+import { Style, Icon } from 'ol/style'
 import { fromLonLat, toLonLat } from 'ol/proj'
 import { settings } from '@/config/settings'
 import { Extent, isEmpty as extentIsEmpty } from 'ol/extent'
@@ -186,6 +190,7 @@ const mapContainer = ref<HTMLElement>()
 const popupContainer = ref<HTMLElement>()
 const popupContent = ref<HTMLElement>()
 const popupCloser = ref<HTMLElement>()
+const selectionLabelContainer = ref<HTMLElement>()
 
 const coloredThings = ref<MapThingWithColor[]>([])
 const selectedTileSourceName = ref<string>(basemapTileSources[0].name)
@@ -194,6 +199,7 @@ const detailedThingCache = new Map<string, Thing>()
 let map: OlMap
 let rasterLayer: TileLayer
 let popupOverlay: Overlay | undefined
+let selectionLabelOverlay: Overlay | undefined
 let selectedThingTransitionId = 0
 let selectedThingPopupTimer: number | undefined
 let activeFlyId = 0
@@ -208,6 +214,7 @@ let selectionLayer: VectorLayer | undefined
 const SELECTION_SCALE = 0.78
 let selectionScale = SELECTION_SCALE
 let selectionAnimId = 0
+const selectedSiteLabel = ref('')
 
 const detailSubtitle = computed(() => {
   const thing = detailThing.value
@@ -320,10 +327,8 @@ const openPopupForFeature = async (feature: Feature) => {
   popupOverlay.setPosition(geometry.getCoordinates())
 }
 
-// Style for the grown, labelled selection marker drawn on top of the WebGL
-// markers. Mirrors the design: enlarged pin + the site name beside it.
+// Style for the grown selection marker drawn on top of the WebGL markers.
 const selectionStyle = (feature: FeatureLike) => {
-  const thing = getFeatureThing(feature as Feature)
   const color = (feature.get('markerColor') as string) || '#D32F2F'
   return new Style({
     image: new Icon({
@@ -332,18 +337,6 @@ const selectionStyle = (feature: FeatureLike) => {
       color,
       scale: selectionScale,
     }),
-    text: new Text({
-      text: thing?.name ?? '',
-      font: "600 13px Roboto, 'Helvetica Neue', Arial, sans-serif",
-      textAlign: 'left',
-      textBaseline: 'middle',
-      offsetX: 14,
-      offsetY: -Math.round(64 * selectionScale * 0.5),
-      fill: new Fill({ color: 'rgba(0,0,0,0.78)' }),
-      backgroundFill: new Fill({ color: 'rgba(255,255,255,0.95)' }),
-      backgroundStroke: new Stroke({ color: 'rgba(0,0,0,0.12)', width: 1 }),
-      padding: [3, 8, 3, 8],
-    }),
   })
 }
 
@@ -365,17 +358,25 @@ const animateSelectionScale = (from: number, to: number, duration = 180) => {
 const updateSelectionMarker = (thingId?: string | null) => {
   selectionSource.clear()
   if (!thingId) {
+    selectedSiteLabel.value = ''
+    selectionLabelOverlay?.setPosition(undefined)
     selectionAnimId++ // stop any in-flight grow
     return
   }
   const feature = findFeatureByThingId(thingId)
   const geometry = feature?.getGeometry()
-  if (!feature || !(geometry instanceof Point)) return
+  if (!feature || !(geometry instanceof Point)) {
+    selectedSiteLabel.value = ''
+    selectionLabelOverlay?.setPosition(undefined)
+    return
+  }
 
   const clone = new Feature({ geometry: geometry.clone() })
   clone.set('markerColor', feature.get('markerColor'))
   clone.set('thing', getFeatureThing(feature))
   selectionSource.addFeature(clone)
+  selectedSiteLabel.value = getFeatureThing(feature)?.name ?? ''
+  selectionLabelOverlay?.setPosition(geometry.getCoordinates())
   animateSelectionScale(SELECTION_SCALE * 0.78, SELECTION_SCALE)
 }
 
@@ -623,6 +624,13 @@ const initializeMap = () => {
     autoPan: props.singleMarkerMode ? false : { animation: { duration: 250 } },
   })
 
+  selectionLabelOverlay = new Overlay({
+    element: selectionLabelContainer.value,
+    positioning: 'center-left',
+    offset: [42, -26],
+    stopEvent: false,
+  })
+
   popupCloser.value!.onclick = () => {
     popupOverlay?.setPosition(undefined)
     return false
@@ -631,7 +639,7 @@ const initializeMap = () => {
   map = new OlMap({
     target: mapContainer.value,
     layers: [rasterLayer, markerLayer.value, selectionLayer],
-    overlays: [popupOverlay],
+    overlays: [popupOverlay, selectionLabelOverlay],
     view: new View(defaultView),
   })
 
@@ -784,6 +792,27 @@ watch(
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
+.selected-site-label {
+  max-width: 320px;
+  padding: 6px 12px;
+  overflow: hidden;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
+  color: rgba(0, 0, 0, 0.78);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.2;
+  pointer-events: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.selected-site-label:empty {
+  display: none;
+}
+
 /* ── Browse selected-site detail card ── */
 .site-detail-card {
   position: absolute;

From ca8f1cebff08994e42ba3bd5407fefb2965952c2 Mon Sep 17 00:00:00 2001
From: daniel-slaugh <daniel.slaugh@hotmail.com>
Date: Mon, 29 Jun 2026 15:09:33 -0600
Subject: [PATCH 07/19] Make browse page mobile friendly

---
 .../components/Browse/BrowseFilterTool.vue    | 16 +++++---
 .../src/components/Maps/OpenLayersMap.vue     | 18 +++++++++
 apps/data-management/src/pages/Browse.vue     | 37 ++++++++++++++++---
 3 files changed, 61 insertions(+), 10 deletions(-)

diff --git a/apps/data-management/src/components/Browse/BrowseFilterTool.vue b/apps/data-management/src/components/Browse/BrowseFilterTool.vue
index a2222525..1cdddc8b 100644
--- a/apps/data-management/src/components/Browse/BrowseFilterTool.vue
+++ b/apps/data-management/src/components/Browse/BrowseFilterTool.vue
@@ -1173,19 +1173,25 @@ pruneSelectionToAvailable(
   }
 }
 
-@media (max-width: 560px) {
-  .browse-filter-tool {
+@media (max-width: 700px) {
+  .browse-filter-tool--expanded {
     width: 100%;
+    height: 100%;
+    max-height: 100%;
   }
 
-  .browse-filter-tool--expanded {
-    height: calc(100% - 24px);
+  .browse-filter-tool:not(.browse-filter-tool--expanded) {
+    width: max-content;
+    max-width: calc(100vw - 24px);
+    max-height: none;
   }
 
   .filter-panel {
-    border-radius: 10px;
+    border-radius: 0;
   }
+}
 
+@media (max-width: 560px) {
   .filter-header {
     padding: 16px 16px 10px;
   }
diff --git a/apps/data-management/src/components/Maps/OpenLayersMap.vue b/apps/data-management/src/components/Maps/OpenLayersMap.vue
index 8488e620..53c1fe03 100644
--- a/apps/data-management/src/components/Maps/OpenLayersMap.vue
+++ b/apps/data-management/src/components/Maps/OpenLayersMap.vue
@@ -725,6 +725,20 @@ watch(
   }
 )
 
+watch(
+  () => props.fitPadding,
+  () => {
+    if (!map) return
+    map.updateSize()
+    if (props.selectedThingId) {
+      void focusThingById(props.selectedThingId)
+    } else {
+      fitViewToMarkers(250)
+    }
+  },
+  { deep: true }
+)
+
 function getConfigByName(name: string): ConfigTileSource {
   const found = basemapTileSources.find((cfg) => cfg.name === name)
   return found || basemapTileSources[0]
@@ -918,6 +932,10 @@ watch(
 }
 
 @media (max-width: 900px) {
+  .selected-site-label {
+    display: none;
+  }
+
   .site-detail-card {
     left: 12px;
     right: 12px;
diff --git a/apps/data-management/src/pages/Browse.vue b/apps/data-management/src/pages/Browse.vue
index 86ee9fad..dd9745d8 100644
--- a/apps/data-management/src/pages/Browse.vue
+++ b/apps/data-management/src/pages/Browse.vue
@@ -22,18 +22,35 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import OpenLayersMap from '@/components/Maps/OpenLayersMap.vue'
 import BrowseFilterTool from '@/components/Browse/BrowseFilterTool.vue'
 import FullScreenLoader from '@/components/base/FullScreenLoader.vue'
 import hs from '@hydroserver/client'
 import type { ThingMarker } from '@hydroserver/client'
 
+const desktopMapFitPadding: [number, number, number, number] = [
+  44, 88, 96, 400,
+]
+const compactMapFitPadding: [number, number, number, number] = [
+  72, 48, 72, 48,
+]
+
 const things = ref<ThingMarker[]>([])
 const filteredThings = ref<ThingMarker[]>([])
 const selectedThingId = ref<string>()
 const loaded = ref(false)
-const mapFitPadding: [number, number, number, number] = [44, 88, 96, 400]
+const isCompactMapViewport = ref(false)
+const mapFitPadding = computed<[number, number, number, number]>(() =>
+  isCompactMapViewport.value ? compactMapFitPadding : desktopMapFitPadding
+)
+
+let compactMapQuery: MediaQueryList | undefined
+
+const updateCompactMapViewport = (event?: MediaQueryListEvent) => {
+  isCompactMapViewport.value =
+    event?.matches ?? compactMapQuery?.matches ?? false
+}
 
 const updateFilteredThings = (updatedThings: ThingMarker[]) => {
   filteredThings.value = updatedThings
@@ -46,12 +63,20 @@ const updateFilteredThings = (updatedThings: ThingMarker[]) => {
 }
 
 onMounted(async () => {
+  compactMapQuery = window.matchMedia('(max-width: 700px)')
+  updateCompactMapViewport()
+  compactMapQuery.addEventListener('change', updateCompactMapViewport)
+
   const res = await hs.things.listMarkers()
   filteredThings.value = things.value = res.ok ? res.data : []
 
   await new Promise((r) => setTimeout(r, 100))
   loaded.value = true
 })
+
+onBeforeUnmount(() => {
+  compactMapQuery?.removeEventListener('change', updateCompactMapViewport)
+})
 </script>
 
 <style scoped>
@@ -76,9 +101,11 @@ onMounted(async () => {
 
 @media (max-width: 700px) {
   .browse-filter-overlay {
-    top: 12px;
-    left: 12px;
-    right: 12px;
+    inset: 0;
+  }
+
+  .browse-filter-overlay:not(.browse-filter-tool--expanded) {
+    inset: 12px auto auto 12px;
   }
 }
 </style>

From 8277bfc0b314f439fa9ba9774accaaeeaba34344 Mon Sep 17 00:00:00 2001
From: daniel-slaugh <daniel.slaugh@hotmail.com>
Date: Mon, 29 Jun 2026 16:00:07 -0600
Subject: [PATCH 08/19] Save Browse Page State in URL

---
 .../components/Browse/BrowseFilterTool.vue    | 39 ++++++++++++-------
 .../src/components/base/Navbar.vue            |  4 +-
 .../src/utils/__tests__/browseFilters.spec.ts | 25 ++++++------
 .../src/utils/browseFilters.ts                | 22 +++--------
 4 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/apps/data-management/src/components/Browse/BrowseFilterTool.vue b/apps/data-management/src/components/Browse/BrowseFilterTool.vue
index 1cdddc8b..2fb6fb76 100644
--- a/apps/data-management/src/components/Browse/BrowseFilterTool.vue
+++ b/apps/data-management/src/components/Browse/BrowseFilterTool.vue
@@ -156,7 +156,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useVocabularyStore } from '@/composables/useVocabulary'
@@ -261,10 +261,11 @@ const workspacesLoaded = ref(false)
 const isExpanded = ref(true)
 const isApplyingRouteState = ref(false)
 const hasAppliedInitialRouteState = ref(false)
+let routeApplyId = 0
 
 const emit = defineEmits<{
   filter: [ThingMarker[]]
-  'select-site': [string]
+  'select-site': [string | undefined]
 }>()
 
 const props = defineProps({
@@ -814,13 +815,15 @@ const querySignature = (query: Record<string, unknown>) =>
       .map((key) => [key, query[key]])
   )
 
-const syncRouteFromSelection = async () => {
+const syncRouteFromSelection = async (siteId = props.selectedSiteId) => {
   if (isApplyingRouteState.value || !hasAppliedInitialRouteState.value) return
 
   const query = buildBrowseFilterQuery(route.query, {
+    siteId,
     searchText: siteSearch.value,
     workspaceIds: selectedWorkspaces.value.map((workspace) => workspace.id),
     siteTypes: selectedSiteTypes.value,
+    drawer: isExpanded.value,
   })
 
   if (querySignature(query) === querySignature(route.query)) return
@@ -832,18 +835,16 @@ const syncRouteFromSelection = async () => {
   })
 }
 
-const applyRouteState = () => {
+const applyRouteState = async () => {
   if (!props.thingsLoaded || !workspacesLoaded.value) return
 
+  const applyId = ++routeApplyId
   const state = parseBrowseFilterQuery(route.query)
   isApplyingRouteState.value = true
 
-  const linkedSiteName = state.siteIds.length
-    ? sortedThings.value.find((thing) => thing.id === state.siteIds[0])?.name ??
-      ''
-    : ''
+  const linkedSiteId = state.siteIds[0]
 
-  siteSearch.value = state.searchText || linkedSiteName
+  siteSearch.value = state.searchText
   selectedWorkspaces.value = state.workspaceIds.length
     ? workspaces.value.filter((workspace) =>
         state.workspaceIds.includes(workspace.id)
@@ -855,10 +856,17 @@ const applyRouteState = () => {
     isExpanded.value = state.drawer
   }
 
+  if (linkedSiteId !== props.selectedSiteId) {
+    emit('select-site', linkedSiteId)
+  }
+
+  await nextTick()
+  if (applyId !== routeApplyId) return
+
   isApplyingRouteState.value = false
   hasAppliedInitialRouteState.value = true
   emitFilteredThings()
-  void syncRouteFromSelection()
+  void syncRouteFromSelection(linkedSiteId)
 }
 
 const onClearFilters = () => {
@@ -873,7 +881,7 @@ onMounted(async () => {
     expand_related: true,
   })
   workspacesLoaded.value = true
-  applyRouteState()
+  void applyRouteState()
 })
 
 watch([selectedSiteTypes, selectedWorkspaces, siteSearch], emitFilteredThings, {
@@ -881,11 +889,16 @@ watch([selectedSiteTypes, selectedWorkspaces, siteSearch], emitFilteredThings, {
 })
 
 watch(
-  [selectedSiteTypes, selectedWorkspaces, siteSearch],
-  syncRouteFromSelection,
+  [selectedSiteTypes, selectedWorkspaces, siteSearch, isExpanded],
+  () => syncRouteFromSelection(),
   { deep: true }
 )
 
+watch(
+  () => props.selectedSiteId,
+  (siteId) => syncRouteFromSelection(siteId)
+)
+
 watch(
   () =>
     [
diff --git a/apps/data-management/src/components/base/Navbar.vue b/apps/data-management/src/components/base/Navbar.vue
index 0082e329..76f298fa 100644
--- a/apps/data-management/src/components/base/Navbar.vue
+++ b/apps/data-management/src/components/base/Navbar.vue
@@ -182,7 +182,7 @@ import { Snackbar } from '@/utils/notifications'
 import { ref } from 'vue'
 import { useDataVisStore } from '@/store/dataVisualization'
 import { navbarLogo } from '@/config/navbarConfig'
-import { useRoute } from 'vue-router'
+import { RouteLocationRaw, useRoute } from 'vue-router'
 import { useSidebarStore } from '@/store/useSidebar'
 import hs from '@hydroserver/client'
 import router from '@/router/router'
@@ -212,7 +212,7 @@ const sidebar = useSidebarStore()
 const drawer = ref(false)
 
 type NavItemAttrs = {
-  to?: string
+  to?: RouteLocationRaw
   href?: string
 }
 
diff --git a/apps/data-management/src/utils/__tests__/browseFilters.spec.ts b/apps/data-management/src/utils/__tests__/browseFilters.spec.ts
index 636dac5a..4d4e0f13 100644
--- a/apps/data-management/src/utils/__tests__/browseFilters.spec.ts
+++ b/apps/data-management/src/utils/__tests__/browseFilters.spec.ts
@@ -96,28 +96,27 @@ describe('parseBrowseFilterQuery', () => {
   it('reads canonical query params', () => {
     expect(
       parseBrowseFilterQuery({
-        sites: 'thing-1',
+        selectedSite: 'thing-1',
+        search: 'Logan',
         workspaces: ['workspace-1', 'workspace-2'],
         siteTypes: ['Lake', 'Stream'],
         drawer: '0',
       })
     ).toEqual({
       siteIds: ['thing-1'],
-      searchText: '',
+      searchText: 'Logan',
       workspaceIds: ['workspace-1', 'workspace-2'],
       siteTypes: ['Lake', 'Stream'],
       drawer: false,
     })
   })
 
-  it('deduplicates values and accepts legacy singular aliases', () => {
+  it('deduplicates canonical values and accepts comma-separated lists', () => {
     expect(
       parseBrowseFilterQuery({
-        site: 'thing-1',
-        siteId: 'thing-1',
-        workspace: 'workspace-1,workspace-2',
-        workspaceIds: ['workspace-2'],
-        siteType: ['Lake', 'Lake'],
+        selectedSite: ['thing-1', 'thing-1'],
+        workspaces: 'workspace-1,workspace-2',
+        siteTypes: ['Lake', 'Lake'],
         search: 'Logan',
         drawer: 'yes',
       })
@@ -150,20 +149,20 @@ describe('buildBrowseFilterQuery', () => {
         }
       )
     ).toEqual({
-      sites: 'thing-1',
+      selectedSite: 'thing-1',
       search: 'Logan',
       workspaces: ['workspace-1', 'workspace-2'],
       siteTypes: 'Lake',
     })
   })
 
-  it('removes stale Browse aliases while preserving unrelated query params', () => {
+  it('removes stale Browse query params while preserving unrelated query params', () => {
     expect(
       buildBrowseFilterQuery(
         {
-          sites: 'thing-1',
-          workspace: 'workspace-1',
-          siteType: 'Lake',
+          selectedSite: 'thing-1',
+          workspaces: 'workspace-1',
+          siteTypes: 'Lake',
           page: '2',
         },
         {
diff --git a/apps/data-management/src/utils/browseFilters.ts b/apps/data-management/src/utils/browseFilters.ts
index b58579a7..a6fe455f 100644
--- a/apps/data-management/src/utils/browseFilters.ts
+++ b/apps/data-management/src/utils/browseFilters.ts
@@ -19,16 +19,10 @@ export interface BrowseFilterSelectionState {
 }
 
 const BROWSE_FILTER_QUERY_KEYS = [
-  'sites',
-  'site',
-  'siteId',
+  'selectedSite',
   'search',
-  'q',
   'workspaces',
-  'workspace',
-  'workspaceIds',
   'siteTypes',
-  'siteType',
   'drawer',
 ]
 
@@ -67,14 +61,10 @@ export function parseBrowseFilterQuery(
   query: LocationQuery
 ): BrowseFilterRouteState {
   return {
-    siteIds: readQueryValues(query, ['sites', 'site', 'siteId']),
-    searchText: queryValues(query.search)[0] ?? queryValues(query.q)[0] ?? '',
-    workspaceIds: readQueryValues(query, [
-      'workspaces',
-      'workspace',
-      'workspaceIds',
-    ]),
-    siteTypes: readQueryValues(query, ['siteTypes', 'siteType']),
+    siteIds: readQueryValues(query, ['selectedSite']),
+    searchText: queryValues(query.search)[0] ?? '',
+    workspaceIds: readQueryValues(query, ['workspaces']),
+    siteTypes: readQueryValues(query, ['siteTypes']),
     drawer: parseBooleanQuery(query.drawer),
   }
 }
@@ -93,7 +83,7 @@ export function buildBrowseFilterQuery(
   const workspaces = queryArray(state.workspaceIds)
   const siteTypes = queryArray(state.siteTypes)
 
-  if (sites !== undefined) nextQuery.sites = sites
+  if (sites !== undefined) nextQuery.selectedSite = sites
   if (searchText) nextQuery.search = searchText
   if (workspaces !== undefined) nextQuery.workspaces = workspaces
   if (siteTypes !== undefined) nextQuery.siteTypes = siteTypes

From a950c1e2f9f9aea08b705d7a6c1b86ef9c438623 Mon Sep 17 00:00:00 2001
From: daniel-slaugh <daniel.slaugh@hotmail.com>
Date: Mon, 29 Jun 2026 17:21:59 -0600
Subject: [PATCH 09/19] Update icon list

---
 .../components/Browse/BrowseFilterTool.vue    | 80 +++++++++++++------
 1 file changed, 54 insertions(+), 26 deletions(-)

diff --git a/apps/data-management/src/components/Browse/BrowseFilterTool.vue b/apps/data-management/src/components/Browse/BrowseFilterTool.vue
index 2fb6fb76..71c8c030 100644
--- a/apps/data-management/src/components/Browse/BrowseFilterTool.vue
+++ b/apps/data-management/src/components/Browse/BrowseFilterTool.vue
@@ -176,6 +176,7 @@ import {
   mdiBridge,
   mdiChevronLeft,
   mdiCity,
+  mdiCloudArrowDownOutline,
   mdiCloudOutline,
   mdiCounter,
   mdiCrosshairsGps,
@@ -206,9 +207,7 @@ import {
   mdiRadar,
   mdiRecycle,
   mdiRoadVariant,
-  mdiRoutes,
   mdiSatelliteVariant,
-  mdiScaleBalance,
   mdiSignCaution,
   mdiSlopeUphill,
   mdiSmog,
@@ -218,6 +217,7 @@ import {
   mdiSpeedometer,
   mdiSprout,
   mdiSprinkler,
+  mdiStorageTank,
   mdiTerrain,
   mdiTestTube,
   mdiThermometer,
@@ -235,18 +235,17 @@ import {
   mdiWaterPlus,
   mdiWater,
   mdiWaterPump,
-  mdiWaterSync,
   mdiWaterWell,
   mdiWeatherCloudy,
   mdiWeatherFog,
   mdiWeatherHazy,
-  mdiWeatherPartlyCloudy,
   mdiWeatherPouring,
   mdiWeatherSunny,
   mdiWeatherWindy,
   mdiWaves,
   mdiWavesArrowRight,
   mdiWavesArrowUp,
+  mdiVectorPolyline,
 } from '@mdi/js'
 
 const vocabularyStore = useVocabularyStore()
@@ -378,7 +377,19 @@ const siteTypeIconRules = [
     icon: mdiSmog,
   },
   {
-    keywords: ['bacteria', 'pathogen', 'e coli', 'coliform'],
+    keywords: [
+      'bacteria',
+      'pathogen',
+      'e coli',
+      'coliform',
+      'habs',
+      'hab',
+      'algae',
+      'cyanobacteria',
+      'bloom',
+      'algal bloom',
+      'harmful algal bloom',
+    ],
     icon: mdiBacteria,
   },
   {
@@ -409,7 +420,7 @@ const siteTypeIconRules = [
       'reservoir profile',
       'reservoir profiles',
       'water column profile',
-      'profile',
+      'depth profile',
     ],
     icon: mdiLayersTripleOutline,
   },
@@ -458,7 +469,7 @@ const siteTypeIconRules = [
     icon: mdiFountain,
   },
   {
-    keywords: ['dry dam release', 'dry dam', 'dam'],
+    keywords: ['dry dam release', 'dry dam', 'dam', 'weir', 'sluice'],
     icon: mdiGate,
   },
   {
@@ -471,11 +482,13 @@ const siteTypeIconRules = [
       'level',
       'discharge',
       'flow station',
+      'flume',
+      'stilling well',
     ],
     icon: mdiGauge,
   },
   {
-    keywords: ['wetland', 'marsh', 'swamp'],
+    keywords: ['wetland', 'marsh', 'swamp', 'bog', 'fen'],
     icon: mdiGrass,
   },
   {
@@ -522,6 +535,8 @@ const siteTypeIconRules = [
       'waste water',
       'effluent',
       'sewer',
+      'reclaimed',
+      'reuse',
     ],
     icon: mdiRecycle,
   },
@@ -533,7 +548,6 @@ const siteTypeIconRules = [
     keywords: [
       'channel',
       'conveyance',
-      'diversion',
       'delivery',
       'route',
       'transfer',
@@ -543,7 +557,7 @@ const siteTypeIconRules = [
       'canal',
       'aqueduct',
     ],
-    icon: mdiRoutes,
+    icon: mdiVectorPolyline,
   },
   {
     keywords: ['remote sensing', 'satellite'],
@@ -581,6 +595,10 @@ const siteTypeIconRules = [
     keywords: ['soil', 'terrain', 'land'],
     icon: mdiTerrain,
   },
+  {
+    keywords: ['tank', 'storage tank', 'cistern'],
+    icon: mdiStorageTank,
+  },
   {
     keywords: [
       'water quality sample',
@@ -610,11 +628,11 @@ const siteTypeIconRules = [
     icon: mdiTractor,
   },
   {
-    keywords: ['telemetry', 'telemetred', 'telemetered', 'radio', 'tower'],
+    keywords: ['telemetry', 'telemetered', 'radio', 'tower'],
     icon: mdiTransmissionTower,
   },
   {
-    keywords: ['valve', 'turnout', 'gate valve'],
+    keywords: ['valve', 'turnout', 'gate valve', 'headgate'],
     icon: mdiValve,
   },
   {
@@ -622,7 +640,7 @@ const siteTypeIconRules = [
     icon: mdiWarehouse,
   },
   {
-    keywords: ['creek', 'river', 'stream', 'brook'],
+    keywords: ['creek', 'river', 'stream', 'brook', 'tributary'],
     icon: mdiWater,
   },
   {
@@ -649,6 +667,10 @@ const siteTypeIconRules = [
       'nutrient',
       'water check',
       'water status',
+      'sediment',
+      'suspended sediment',
+      'tss',
+      'bedload',
     ],
     icon: mdiWaterCheckOutline,
   },
@@ -657,7 +679,13 @@ const siteTypeIconRules = [
     icon: mdiWaterCircle,
   },
   {
-    keywords: ['withdrawal', 'intake', 'diverted'],
+    keywords: [
+      'withdrawal',
+      'intake',
+      'diverted',
+      'diversion',
+      'point of diversion',
+    ],
     icon: mdiWaterMinus,
   },
   {
@@ -665,25 +693,23 @@ const siteTypeIconRules = [
     icon: mdiWaterOutline,
   },
   {
-    keywords: ['humidity', 'moisture'],
+    keywords: ['humidity', 'moisture', 'dew point'],
     icon: mdiWaterPercent,
   },
   {
-    keywords: ['injection', 'recharge', 'addition'],
+    keywords: [
+      'injection',
+      'recharge',
+      'addition',
+      'infiltration',
+      'managed aquifer recharge',
+    ],
     icon: mdiWaterPlus,
   },
   {
-    keywords: ['pump station', 'pump', 'pumping'],
+    keywords: ['pump station', 'pump', 'pumping', 'lift station'],
     icon: mdiWaterPump,
   },
-  {
-    keywords: ['reclaimed', 'reuse'],
-    icon: mdiWaterSync,
-  },
-  {
-    keywords: ['water balance', 'water budget', 'sync'],
-    icon: mdiScaleBalance,
-  },
   {
     keywords: [
       'well',
@@ -693,6 +719,7 @@ const siteTypeIconRules = [
       'wellfield',
       'aquifer',
       'piezometer',
+      'borehole',
     ],
     icon: mdiWaterWell,
   },
@@ -738,12 +765,13 @@ const siteTypeIconRules = [
       'storm water',
       'drainage',
       'drain',
+      'outfall',
     ],
     icon: mdiPipeDisconnected,
   },
   {
     keywords: ['atmospheric deposition', 'atmospheric', 'deposition'],
-    icon: mdiWeatherPartlyCloudy,
+    icon: mdiCloudArrowDownOutline,
   },
   {
     keywords: ['precipitation', 'precip', 'rain', 'rainfall', 'storm'],

From 4349f178224f84dc6308e832998e28be2f58e8bf Mon Sep 17 00:00:00 2001
From: daniel-slaugh <daniel.slaugh@hotmail.com>
Date: Tue, 30 Jun 2026 08:21:59 -0600
Subject: [PATCH 10/19] Fix pan & workspace select

---
 .../components/Browse/BrowseFilterTool.vue    | 88 ++++++++++++++++++-
 .../src/components/Maps/OpenLayersMap.vue     | 10 ++-
 2 files changed, 93 insertions(+), 5 deletions(-)

diff --git a/apps/data-management/src/components/Browse/BrowseFilterTool.vue b/apps/data-management/src/components/Browse/BrowseFilterTool.vue
index 71c8c030..ed5354cc 100644
--- a/apps/data-management/src/components/Browse/BrowseFilterTool.vue
+++ b/apps/data-management/src/components/Browse/BrowseFilterTool.vue
@@ -13,7 +13,9 @@
     >
       <v-icon :icon="mdiMagnify" size="16" color="primary" />
       <span class="filter-chip-label">Sites</span>
-      <span class="filter-chip-count">({{ availableSites.length }})</span>
+      <span class="filter-chip-count">
+        {{ thingsLoaded ? `(${availableSites.length})` : "..." }}
+      </span>
     </v-btn>
 
     <v-card v-else class="filter-panel" elevation="10">
@@ -58,6 +60,7 @@
           hide-details
           color="primary"
           autocomplete="off"
+          :disabled="!thingsLoaded"
           @keydown.enter.prevent="onSiteSearchEnter"
           @click:clear="siteSearch = ''"
         />
@@ -75,6 +78,7 @@
           hide-details
           color="primary"
           :prepend-inner-icon="mdiBriefcaseOutline"
+          :disabled="!thingsLoaded"
         >
           <template v-slot:selection="{ item, index }">
             <v-chip
@@ -125,9 +129,22 @@
       <v-divider />
 
       <div class="site-list">
-        <div class="site-list-count">{{ availableSites.length }} sites</div>
+        <div class="site-list-count">
+          {{ thingsLoaded ? `${availableSites.length} sites` : 'Loading sites' }}
+        </div>
+
+        <div v-if="!thingsLoaded" class="site-list-items">
+          <div v-for="index in 8" :key="index" class="site-row skeleton-row">
+            <span class="site-row-icon skeleton-icon" />
+
+            <span class="site-row-text">
+              <span class="skeleton-line skeleton-line--name" />
+              <span class="skeleton-line skeleton-line--workspace" />
+            </span>
+          </div>
+        </div>
 
-        <div v-if="availableSites.length" class="site-list-items">
+        <div v-else-if="availableSites.length" class="site-list-items">
           <button
             v-for="site in availableSites"
             :key="site.id"
@@ -338,8 +355,25 @@ const availableSiteTypes = computed(() => {
       []
     ).map((thing) => thing.siteType)
   )
+  const vocabularyOrder = new Map(
+    vocabularyStore.siteTypes.map((siteType, index) => [
+      normalizeSiteType(siteType),
+      index,
+    ])
+  )
+
+  return [...siteTypes]
+    .filter(Boolean)
+    .sort((a, b) => {
+      const aOrder = vocabularyOrder.get(normalizeSiteType(a))
+      const bOrder = vocabularyOrder.get(normalizeSiteType(b))
 
-  return vocabularyStore.siteTypes.filter((siteType) => siteTypes.has(siteType))
+      if (aOrder !== undefined && bOrder !== undefined) return aOrder - bOrder
+      if (aOrder !== undefined) return -1
+      if (bOrder !== undefined) return 1
+
+      return a.localeCompare(b)
+    })
 })
 
 const hasActiveFilters = computed(
@@ -1169,6 +1203,46 @@ pruneSelectionToAvailable(
   color: #5f6368;
 }
 
+.skeleton-row {
+  pointer-events: none;
+}
+
+.skeleton-icon,
+.skeleton-line {
+  position: relative;
+  overflow: hidden;
+  background: #e8ecf1;
+}
+
+.skeleton-icon::after,
+.skeleton-line::after {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.75),
+    transparent
+  );
+  content: "";
+  transform: translateX(-100%);
+  animation: browse-skeleton-shimmer 1.35s ease-in-out infinite;
+}
+
+.skeleton-line {
+  display: block;
+  height: 10px;
+  border-radius: 999px;
+}
+
+.skeleton-line--name {
+  width: min(72%, 190px);
+}
+
+.skeleton-line--workspace {
+  width: min(48%, 140px);
+}
+
 .site-row-text {
   display: flex;
   min-width: 0;
@@ -1207,6 +1281,12 @@ pruneSelectionToAvailable(
   text-align: center;
 }
 
+@keyframes browse-skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
 @media (max-width: 900px) {
   .browse-filter-tool {
     width: min(380px, calc(100vw - 24px));
diff --git a/apps/data-management/src/components/Maps/OpenLayersMap.vue b/apps/data-management/src/components/Maps/OpenLayersMap.vue
index 53c1fe03..94023d47 100644
--- a/apps/data-management/src/components/Maps/OpenLayersMap.vue
+++ b/apps/data-management/src/components/Maps/OpenLayersMap.vue
@@ -565,9 +565,17 @@ async function updateFeatures() {
   vectorSource.clear()
   vectorSource.addFeatures(features)
 
+  if (props.selectedThingId) {
+    if (findFeatureByThingId(props.selectedThingId)) {
+      focusThingById(props.selectedThingId)
+      return
+    }
+
+    if (props.selectable) updateSelectionMarker(undefined)
+  }
+
   // 3) zoom to the extent of whatever source we used
   fitViewToMarkers()
-  focusThingById(props.selectedThingId)
 }
 
 const initializeMap = () => {

From cff87d821bbe24d73fab93755891148b82acbad1 Mon Sep 17 00:00:00 2001
From: daniel-slaugh <daniel.slaugh@hotmail.com>
Date: Tue, 30 Jun 2026 08:52:45 -0600
Subject: [PATCH 11/19] Final tweaks for new Browse page

---
 .../components/Browse/BrowseFilterTool.vue    | 49 +++++--------------
 .../src/components/Maps/OpenLayersMap.vue     | 22 ++++-----
 2 files changed, 24 insertions(+), 47 deletions(-)

diff --git a/apps/data-management/src/components/Browse/BrowseFilterTool.vue b/apps/data-management/src/components/Browse/BrowseFilterTool.vue
index ed5354cc..b8177760 100644
--- a/apps/data-management/src/components/Browse/BrowseFilterTool.vue
+++ b/apps/data-management/src/components/Browse/BrowseFilterTool.vue
@@ -176,7 +176,6 @@
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { useVocabularyStore } from '@/composables/useVocabulary'
 import {
   buildBrowseFilterQuery,
   filterThingMarkers,
@@ -265,7 +264,6 @@ import {
   mdiVectorPolyline,
 } from '@mdi/js'
 
-const vocabularyStore = useVocabularyStore()
 const route = useRoute()
 const router = useRouter()
 
@@ -355,25 +353,8 @@ const availableSiteTypes = computed(() => {
       []
     ).map((thing) => thing.siteType)
   )
-  const vocabularyOrder = new Map(
-    vocabularyStore.siteTypes.map((siteType, index) => [
-      normalizeSiteType(siteType),
-      index,
-    ])
-  )
-
-  return [...siteTypes]
-    .filter(Boolean)
-    .sort((a, b) => {
-      const aOrder = vocabularyOrder.get(normalizeSiteType(a))
-      const bOrder = vocabularyOrder.get(normalizeSiteType(b))
-
-      if (aOrder !== undefined && bOrder !== undefined) return aOrder - bOrder
-      if (aOrder !== undefined) return -1
-      if (bOrder !== undefined) return 1
 
-      return a.localeCompare(b)
-    })
+  return [...siteTypes].filter(Boolean).sort((a, b) => a.localeCompare(b))
 })
 
 const hasActiveFilters = computed(
@@ -825,25 +806,21 @@ const siteTypeIconRules = [
   },
 ]
 
-const matchesSiteTypeKeyword = (normalizedSiteType: string, keyword: string) =>
-  ` ${normalizedSiteType} `.includes(` ${normalizeSiteType(keyword)} `)
+// Flatten the rules once, pre-normalizing keywords and sorting longest-first so
+// multi-word site types resolve before generic substrings like "moisture" or
+// "sample". `find` then returns the most specific match.
+const normalizedSiteTypeIcons = siteTypeIconRules
+  .flatMap(({ keywords, icon }) =>
+    keywords.map((keyword) => ({ keyword: normalizeSiteType(keyword), icon }))
+  )
+  .sort((a, b) => b.keyword.length - a.keyword.length)
 
-// Prefer the longest / most specific keyword so multi-word site types resolve
-// before generic substrings like "moisture" or "sample".
 const getSiteTypeIcon = (siteType: string) => {
-  const normalized = normalizeSiteType(siteType)
+  const normalized = ` ${normalizeSiteType(siteType)} `
   return (
-    siteTypeIconRules
-      .flatMap(({ keywords, icon }) =>
-        keywords.map((keyword) => ({ keyword, icon }))
-      )
-      .filter(({ keyword }) => matchesSiteTypeKeyword(normalized, keyword))
-      .sort(
-        (a, b) =>
-          normalizeSiteType(b.keyword).length -
-          normalizeSiteType(a.keyword).length
-      )[0]?.icon ??
-    mdiMapMarkerOutline
+    normalizedSiteTypeIcons.find(({ keyword }) =>
+      normalized.includes(` ${keyword} `)
+    )?.icon ?? mdiMapMarkerOutline
   )
 }
 
diff --git a/apps/data-management/src/components/Maps/OpenLayersMap.vue b/apps/data-management/src/components/Maps/OpenLayersMap.vue
index 94023d47..8b12d3b6 100644
--- a/apps/data-management/src/components/Maps/OpenLayersMap.vue
+++ b/apps/data-management/src/components/Maps/OpenLayersMap.vue
@@ -201,7 +201,6 @@ let rasterLayer: TileLayer
 let popupOverlay: Overlay | undefined
 let selectionLabelOverlay: Overlay | undefined
 let selectedThingTransitionId = 0
-let selectedThingPopupTimer: number | undefined
 let activeFlyId = 0
 const vectorSource = new VectorSource<Feature>()
 const markerLayer = ref<WebGLVectorLayer>()
@@ -220,10 +219,8 @@ const detailSubtitle = computed(() => {
   const thing = detailThing.value
   if (!thing) return ''
   const parts: string[] = []
-  if (isThingMarker(thing)) {
-    if (thing.siteType) parts.push(thing.siteType)
-  } else {
-    if (thing.siteType) parts.push(thing.siteType)
+  if (thing.siteType) parts.push(thing.siteType)
+  if (!isThingMarker(thing)) {
     const area = [thing.location.adminArea2, thing.location.adminArea1]
       .filter(Boolean)
       .join(', ')
@@ -508,11 +505,6 @@ const focusThingById = (thingId?: string | null) => {
   selectedThingTransitionId++
   const transitionId = selectedThingTransitionId
 
-  if (selectedThingPopupTimer !== undefined) {
-    window.clearTimeout(selectedThingPopupTimer)
-    selectedThingPopupTimer = undefined
-  }
-
   if (!map || !thingId) {
     activeFlyId++ // cancel any in-flight fly
     popupOverlay?.setPosition(undefined)
@@ -617,7 +609,7 @@ const initializeMap = () => {
       ],
       'icon-height': ['interpolate', ['linear'], ['zoom'], 1, 4, 8, 32, 16, 48],
       'icon-anchor': [0.5, 1],
-      'icon-color': ['get', 'markerColor'], // red-darken-2
+      'icon-color': ['get', 'markerColor'],
       'icon-opacity': 0.85,
     },
   })
@@ -721,6 +713,14 @@ onMounted(async () => {
 
 onBeforeUnmount(() => {
   window.removeEventListener('keydown', onKeydown)
+  // Cancel in-flight animations and release the OL map / WebGL context so
+  // repeated navigation to Browse doesn't leak GPU contexts or layers.
+  activeFlyId++
+  selectionAnimId++
+  if (map) {
+    map.setTarget(undefined)
+    map.dispose()
+  }
 })
 
 watch(() => [props.things] as const, updateFeatures, { deep: true })

From e67634f5112c09b311dd98441d7eff93a967f1a2 Mon Sep 17 00:00:00 2001
From: daniel-slaugh <daniel.slaugh@hotmail.com>
Date: Tue, 30 Jun 2026 09:43:41 -0600
Subject: [PATCH 12/19] Clean up dead code and optimize

---
 .../components/Datastream/DatastreamTable.vue | 64 +++++++------------
 1 file changed, 22 insertions(+), 42 deletions(-)

diff --git a/apps/data-management/src/components/Datastream/DatastreamTable.vue b/apps/data-management/src/components/Datastream/DatastreamTable.vue
index b0aca068..554ee707 100644
--- a/apps/data-management/src/components/Datastream/DatastreamTable.vue
+++ b/apps/data-management/src/components/Datastream/DatastreamTable.vue
@@ -48,7 +48,7 @@
 
     <div v-if="isMobile" class="datastream-mobile-list">
       <v-card
-        v-for="item in mobileDatastreams"
+        v-for="item in tableDatastreams"
         :key="item.id"
         class="datastream-card"
         :class="{
@@ -1106,9 +1106,6 @@ const thingIdRef = computed(() => thing.value!.id)
 const downloading = reactive<Record<string, boolean>>({})
 const search = ref()
 const datastreamSectionRef = ref<any>(null)
-const datastreamTableRef = ref<{
-  scrollToIndex?: (index: number) => void
-} | null>(null)
 const highlightedDatastreamId = ref('')
 const DATASTREAM_HIGHLIGHT_DURATION_MS = 2500
 let highlightTimeout: number | undefined
@@ -1199,6 +1196,13 @@ const latestStatusClass = (datastream: Datastream) => {
 }
 
 const visibleDatastreams = computed(() => {
+  const unitsById = new Map(units.value.map((u) => [u.id, u]))
+  const sensorsById = new Map(sensors.value.map((s) => [s.id, s]))
+  const opsById = new Map(observedProperties.value.map((o) => [o.id, o]))
+  const processingLevelsById = new Map(
+    processingLevels.value.map((p) => [p.id, p])
+  )
+
   return items.value
     .filter(
       (d) =>
@@ -1210,14 +1214,10 @@ const visibleDatastreams = computed(() => {
         )
     )
     .map((d) => {
-      const unit = units.value.find((u) => u.id === d.unitId)
-      const sensor = sensors.value.find((s) => s.id === d.sensorId)
-      const op = observedProperties.value.find(
-        (o) => o.id === d.observedPropertyId
-      )
-      const pl = processingLevels.value.find(
-        (p) => p.id === d.processingLevelId
-      )
+      const unit = unitsById.get(d.unitId)
+      const sensor = sensorsById.get(d.sensorId)
+      const op = opsById.get(d.observedPropertyId)
+      const pl = processingLevelsById.get(d.processingLevelId)
 
       const mapped = {
         ...d,
@@ -1335,11 +1335,6 @@ async function scrollToTargetDatastream() {
     behavior: 'smooth',
   })
 
-  if (!isMobile.value && targetDatastreamIndex.value >= 0) {
-    datastreamTableRef.value?.scrollToIndex?.(targetDatastreamIndex.value)
-    await nextTick()
-  }
-
   window.setTimeout(() => {
     findTargetDatastreamElement()?.scrollIntoView({
       block: 'center',
@@ -1356,10 +1351,6 @@ const isDatastreamStale = (datastream: Datastream) => {
   return endTime < seventyTwoHoursAgo
 }
 
-const mobileDatastreams = computed(() => {
-  return tableDatastreams.value
-})
-
 const linkedTasksForDatastream = (datastreamId: string) =>
   linkedTasksByDatastreamId.value[datastreamId] ?? []
 
@@ -1511,7 +1502,7 @@ const dataProductRouteName = (task: any) => {
   return 'OrchestrationAggregationDetails'
 }
 
-const routeForDataProductTask = (task: any) => {
+const siteScopedRoute = (task: any, name: string, view: string) => {
   const query: Record<string, string> = {
     workspace_id: props.workspace.id,
     task_id: String(task.id),
@@ -1519,27 +1510,14 @@ const routeForDataProductTask = (task: any) => {
   const siteId = task.thing?.id ?? task.thingId ?? thing.value?.id
   if (siteId) query.site_id = String(siteId)
 
-  return {
-    name: dataProductRouteName(task),
-    params: { view: 'aggregation' },
-    query,
-  }
+  return { name, params: { view }, query }
 }
 
-const routeForMonitoringTask = (task: any) => {
-  const query: Record<string, string> = {
-    workspace_id: props.workspace.id,
-    task_id: String(task.id),
-  }
-  const siteId = task.thing?.id ?? task.thingId ?? thing.value?.id
-  if (siteId) query.site_id = String(siteId)
+const routeForDataProductTask = (task: any) =>
+  siteScopedRoute(task, dataProductRouteName(task), 'aggregation')
 
-  return {
-    name: 'OrchestrationQualityDetails',
-    params: { view: 'quality' },
-    query,
-  }
-}
+const routeForMonitoringTask = (task: any) =>
+  siteScopedRoute(task, 'OrchestrationQualityDetails', 'quality')
 
 const outputDatastreamId = (transformation: any) =>
   transformation?.outputDatastream?.id ?? transformation?.outputDatastreamId
@@ -1560,10 +1538,12 @@ const monitoringViolationCount = (
   const latestRun = task?.latestRun
   if (!latestRun || latestRun.status !== 'SUCCESS') return null
 
-  const totalViolations = getMonitoringRulesViolated(latestRun)
+  const detailedViolations = getMonitoringRunViolations(latestRun)
+  const totalViolations = detailedViolations.length
+    ? countDistinctMonitoringViolationRules(detailedViolations)
+    : getMonitoringRulesViolated(latestRun)
   if (totalViolations === 0) return 0
 
-  const detailedViolations = getMonitoringRunViolations(latestRun)
   const datastreamViolations = detailedViolations.filter(
     (violation) => violation.datastreamId === datastreamId
   )

From 63a0737e0e65d71ea89c6ce50dec81feaaeb1327 Mon Sep 17 00:00:00 2001
From: daniel-slaugh <daniel.slaugh@hotmail.com>
Date: Thu, 2 Jul 2026 10:46:33 -0600
Subject: [PATCH 13/19] Move Site Type icons to Admin panel

---
 .../components/Browse/BrowseFilterTool.vue    | 543 +-----------------
 .../src/composables/useVocabulary.ts          |  10 +
 .../src/utils/__tests__/siteTypeIcons.spec.ts |  54 ++
 .../src/utils/siteTypeIcons.ts                |  93 +++
 django/contracts/openapi/data.openapi.json    |  48 ++
 django/core/web/admin.py                      |  71 +++
 .../core/web/migrations/0002_sitetypeicon.py  | 179 ++++++
 django/core/web/models.py                     | 113 ++++
 .../web/static/admin/web/site_type_icons.css  |  13 +
 django/interfaces/api/schemas/__init__.py     |   1 +
 django/interfaces/api/schemas/sta/thing.py    |   5 +
 django/interfaces/api/views/sta/thing.py      |  15 +
 django/tests/web/__init__.py                  |   1 +
 django/tests/web/test_site_type_icons.py      | 152 +++++
 .../src/api/services/thing.service.ts         |   3 +
 .../src/generated/data.types.d.ts             |  47 ++
 packages/hydroserver-ts/src/types/index.ts    |   5 +
 17 files changed, 823 insertions(+), 530 deletions(-)
 create mode 100644 apps/data-management/src/utils/__tests__/siteTypeIcons.spec.ts
 create mode 100644 apps/data-management/src/utils/siteTypeIcons.ts
 create mode 100644 django/core/web/migrations/0002_sitetypeicon.py
 create mode 100644 django/core/web/static/admin/web/site_type_icons.css
 create mode 100644 django/tests/web/__init__.py
 create mode 100644 django/tests/web/test_site_type_icons.py

diff --git a/apps/data-management/src/components/Browse/BrowseFilterTool.vue b/apps/data-management/src/components/Browse/BrowseFilterTool.vue
index b8177760..3cf82596 100644
--- a/apps/data-management/src/components/Browse/BrowseFilterTool.vue
+++ b/apps/data-management/src/components/Browse/BrowseFilterTool.vue
@@ -175,97 +175,30 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
+import { storeToRefs } from 'pinia'
 import { useRoute, useRouter } from 'vue-router'
+import { useVocabularyStore } from '@/composables/useVocabulary'
 import {
   buildBrowseFilterQuery,
   filterThingMarkers,
   parseBrowseFilterQuery,
 } from '@/utils/browseFilters'
+import {
+  buildSiteTypeIconRules,
+  getSiteTypeIcon as resolveSiteTypeIcon,
+} from '@/utils/siteTypeIcons'
 import hs, { Workspace } from '@hydroserver/client'
 import type { ThingMarker } from '@/types'
 import {
-  mdiAccessPoint,
-  mdiBacteria,
-  mdiBeach,
-  mdiBiohazard,
   mdiBriefcaseOutline,
-  mdiBridge,
   mdiChevronLeft,
-  mdiCity,
-  mdiCloudArrowDownOutline,
-  mdiCloudOutline,
-  mdiCounter,
-  mdiCrosshairsGps,
-  mdiCupWater,
-  mdiDatabaseMarkerOutline,
-  mdiEarth,
-  mdiFactory,
-  mdiFerry,
-  mdiFilterVariant,
   mdiFilterOffOutline,
-  mdiForest,
-  mdiFountain,
-  mdiGauge,
-  mdiGate,
-  mdiGreenhouse,
-  mdiGrass,
-  mdiHomeFlood,
-  mdiHydroPower,
-  mdiLayersTripleOutline,
-  mdiLifebuoy,
-  mdiMapMarkerOutline,
-  mdiMapMarkerRadiusOutline,
   mdiMagnify,
-  mdiMoleculeCo2,
-  mdiOfficeBuildingMarkerOutline,
-  mdiPipe,
-  mdiPipeDisconnected,
-  mdiRadar,
-  mdiRecycle,
-  mdiRoadVariant,
-  mdiSatelliteVariant,
-  mdiSignCaution,
-  mdiSlopeUphill,
-  mdiSmog,
-  mdiSnowflake,
-  mdiSnowflakeMelt,
-  mdiSolarPower,
-  mdiSpeedometer,
-  mdiSprout,
-  mdiSprinkler,
-  mdiStorageTank,
-  mdiTerrain,
-  mdiTestTube,
-  mdiThermometer,
-  mdiThermometerWater,
-  mdiTransmissionTower,
-  mdiTractor,
-  mdiValve,
-  mdiWarehouse,
-  mdiWaterAlertOutline,
-  mdiWaterCheckOutline,
-  mdiWaterCircle,
-  mdiWaterMinus,
-  mdiWaterOutline,
-  mdiWaterPercent,
-  mdiWaterPlus,
-  mdiWater,
-  mdiWaterPump,
-  mdiWaterWell,
-  mdiWeatherCloudy,
-  mdiWeatherFog,
-  mdiWeatherHazy,
-  mdiWeatherPouring,
-  mdiWeatherSunny,
-  mdiWeatherWindy,
-  mdiWaves,
-  mdiWavesArrowRight,
-  mdiWavesArrowUp,
-  mdiVectorPolyline,
 } from '@mdi/js'
 
 const route = useRoute()
 const router = useRouter()
+const { siteTypeIcons } = storeToRefs(useVocabularyStore())
 
 const selectedSiteTypes = ref<string[]>([])
 const selectedWorkspaces = ref<Workspace[]>([])
@@ -367,462 +300,12 @@ const hasActiveFilters = computed(
 const getWorkspaceName = (workspaceId: string) =>
   workspaceById.value.get(workspaceId)?.name || 'Workspace'
 
-const normalizeSiteType = (siteType: string) =>
-  siteType
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, ' ')
-    .trim()
-    .replace(/\s+/g, ' ')
-
-const siteTypeIconRules = [
-  {
-    keywords: ['iot', 'sensor network', 'access point'],
-    icon: mdiAccessPoint,
-  },
-  {
-    keywords: [
-      'air quality',
-      'air monitor',
-      'air monitoring',
-      'particulate',
-      'pm2 5',
-      'pm10',
-      'smoke',
-    ],
-    icon: mdiSmog,
-  },
-  {
-    keywords: [
-      'bacteria',
-      'pathogen',
-      'e coli',
-      'coliform',
-      'habs',
-      'hab',
-      'algae',
-      'cyanobacteria',
-      'bloom',
-      'algal bloom',
-      'harmful algal bloom',
-    ],
-    icon: mdiBacteria,
-  },
-  {
-    keywords: ['irrigation', 'irrigated'],
-    icon: mdiSprinkler,
-  },
-  {
-    keywords: ['coastal', 'beach', 'shore', 'shoreline', 'estuary', 'tidal'],
-    icon: mdiBeach,
-  },
-  {
-    keywords: [
-      'toxic',
-      'contamination',
-      'contaminant',
-      'hazard',
-      'pollution',
-      'spill',
-    ],
-    icon: mdiBiohazard,
-  },
-  {
-    keywords: ['bridge', 'crossing'],
-    icon: mdiBridge,
-  },
-  {
-    keywords: [
-      'reservoir profile',
-      'reservoir profiles',
-      'water column profile',
-      'depth profile',
-    ],
-    icon: mdiLayersTripleOutline,
-  },
-  {
-    keywords: ['urban', 'municipal', 'city'],
-    icon: mdiCity,
-  },
-  {
-    keywords: ['cloud', 'cloud cover'],
-    icon: mdiCloudOutline,
-  },
-  {
-    keywords: ['flow meter', 'flowmeter', 'meter', 'counter', 'totalizer'],
-    icon: mdiCounter,
-  },
-  {
-    keywords: ['reference', 'benchmark', 'survey', 'gps'],
-    icon: mdiCrosshairsGps,
-  },
-  {
-    keywords: ['drinking water', 'potable'],
-    icon: mdiCupWater,
-  },
-  {
-    keywords: ['model', 'grid', 'database'],
-    icon: mdiDatabaseMarkerOutline,
-  },
-  {
-    keywords: ['earth', 'environmental', 'ecosystem'],
-    icon: mdiEarth,
-  },
-  {
-    keywords: ['industrial', 'industry', 'factory'],
-    icon: mdiFactory,
-  },
-  {
-    keywords: ['boat', 'harbor', 'marine'],
-    icon: mdiFerry,
-  },
-  {
-    keywords: ['forest', 'riparian', 'watershed'],
-    icon: mdiForest,
-  },
-  {
-    keywords: ['spring', 'seep', 'fountain'],
-    icon: mdiFountain,
-  },
-  {
-    keywords: ['dry dam release', 'dry dam', 'dam', 'weir', 'sluice'],
-    icon: mdiGate,
-  },
-  {
-    keywords: [
-      'stream gage',
-      'stream gauge',
-      'gage',
-      'gauge',
-      'stage',
-      'level',
-      'discharge',
-      'flow station',
-      'flume',
-      'stilling well',
-    ],
-    icon: mdiGauge,
-  },
-  {
-    keywords: ['wetland', 'marsh', 'swamp', 'bog', 'fen'],
-    icon: mdiGrass,
-  },
-  {
-    keywords: ['greenhouse'],
-    icon: mdiGreenhouse,
-  },
-  {
-    keywords: ['flood', 'floodplain'],
-    icon: mdiHomeFlood,
-  },
-  {
-    keywords: ['hydropower', 'hydro power', 'power generation'],
-    icon: mdiHydroPower,
-  },
-  {
-    keywords: ['monitoring station', 'station', 'site'],
-    icon: mdiMapMarkerRadiusOutline,
-  },
-  {
-    keywords: ['co2', 'carbon dioxide', 'greenhouse gas'],
-    icon: mdiMoleculeCo2,
-  },
-  {
-    keywords: ['facility', 'building', 'public works'],
-    icon: mdiOfficeBuildingMarkerOutline,
-  },
-  {
-    keywords: ['pipe', 'pipeline', 'conduit'],
-    icon: mdiPipe,
-  },
-  {
-    keywords: ['buoy'],
-    icon: mdiLifebuoy,
-  },
-  {
-    keywords: ['radar', 'doppler'],
-    icon: mdiRadar,
-  },
-  {
-    keywords: [
-      'combined sewer',
-      'sanitary sewer',
-      'wastewater',
-      'waste water',
-      'effluent',
-      'sewer',
-      'reclaimed',
-      'reuse',
-    ],
-    icon: mdiRecycle,
-  },
-  {
-    keywords: ['culvert', 'road crossing', 'road'],
-    icon: mdiRoadVariant,
-  },
-  {
-    keywords: [
-      'channel',
-      'conveyance',
-      'delivery',
-      'route',
-      'transfer',
-      'distribution',
-      'ditch',
-      'lateral',
-      'canal',
-      'aqueduct',
-    ],
-    icon: mdiVectorPolyline,
-  },
-  {
-    keywords: ['remote sensing', 'satellite'],
-    icon: mdiSatelliteVariant,
-  },
-  {
-    keywords: ['warning', 'alert', 'watch'],
-    icon: mdiSignCaution,
-  },
-  {
-    keywords: ['slope', 'hillslope'],
-    icon: mdiSlopeUphill,
-  },
-  {
-    keywords: ['snow', 'snowpack', 'snotel', 'ice', 'glacier'],
-    icon: mdiSnowflake,
-  },
-  {
-    keywords: ['snowmelt', 'snow melt'],
-    icon: mdiSnowflakeMelt,
-  },
-  {
-    keywords: ['solar power', 'solar panel'],
-    icon: mdiSolarPower,
-  },
-  {
-    keywords: ['pressure', 'speed', 'velocity'],
-    icon: mdiSpeedometer,
-  },
-  {
-    keywords: ['soil moisture'],
-    icon: mdiSprout,
-  },
-  {
-    keywords: ['soil', 'terrain', 'land'],
-    icon: mdiTerrain,
-  },
-  {
-    keywords: ['tank', 'storage tank', 'cistern'],
-    icon: mdiStorageTank,
-  },
-  {
-    keywords: [
-      'water quality sample',
-      'water quality samples',
-      'quality sample',
-      'grab sample',
-      'field sample',
-      'chemistry',
-      'chemical',
-      'sample',
-      'sampling',
-      'lab',
-      'laboratory',
-    ],
-    icon: mdiTestTube,
-  },
-  {
-    keywords: ['temperature', 'thermal'],
-    icon: mdiThermometer,
-  },
-  {
-    keywords: ['water temperature'],
-    icon: mdiThermometerWater,
-  },
-  {
-    keywords: ['agricultural', 'agriculture', 'farm', 'crop'],
-    icon: mdiTractor,
-  },
-  {
-    keywords: ['telemetry', 'telemetered', 'radio', 'tower'],
-    icon: mdiTransmissionTower,
-  },
-  {
-    keywords: ['valve', 'turnout', 'gate valve', 'headgate'],
-    icon: mdiValve,
-  },
-  {
-    keywords: ['warehouse', 'storage'],
-    icon: mdiWarehouse,
-  },
-  {
-    keywords: ['creek', 'river', 'stream', 'brook', 'tributary'],
-    icon: mdiWater,
-  },
-  {
-    keywords: ['drought', 'dry'],
-    icon: mdiWaterAlertOutline,
-  },
-  // TODO: no dedicated treatment-plant icon in MDI 7.4.47; revisit
-  {
-    keywords: ['water treatment', 'treatment plant', 'treatment works'],
-    icon: mdiFilterVariant,
-  },
-  {
-    keywords: [
-      'water quality',
-      'water quality sensor',
-      'quality sensor',
-      'sonde',
-      'multiparameter',
-      'conductivity',
-      'dissolved oxygen',
-      'turbidity',
-      'ph',
-      'chlorophyll',
-      'nutrient',
-      'water check',
-      'water status',
-      'sediment',
-      'suspended sediment',
-      'tss',
-      'bedload',
-    ],
-    icon: mdiWaterCheckOutline,
-  },
-  {
-    keywords: ['water supply', 'supply', 'source water'],
-    icon: mdiWaterCircle,
-  },
-  {
-    keywords: [
-      'withdrawal',
-      'intake',
-      'diverted',
-      'diversion',
-      'point of diversion',
-    ],
-    icon: mdiWaterMinus,
-  },
-  {
-    keywords: ['surface water'],
-    icon: mdiWaterOutline,
-  },
-  {
-    keywords: ['humidity', 'moisture', 'dew point'],
-    icon: mdiWaterPercent,
-  },
-  {
-    keywords: [
-      'injection',
-      'recharge',
-      'addition',
-      'infiltration',
-      'managed aquifer recharge',
-    ],
-    icon: mdiWaterPlus,
-  },
-  {
-    keywords: ['pump station', 'pump', 'pumping', 'lift station'],
-    icon: mdiWaterPump,
-  },
-  {
-    keywords: [
-      'well',
-      'ground water',
-      'groundwater',
-      'groundwater well',
-      'wellfield',
-      'aquifer',
-      'piezometer',
-      'borehole',
-    ],
-    icon: mdiWaterWell,
-  },
-  {
-    keywords: [
-      'reservoir',
-      'reservoir lake',
-      'lake',
-      'pond',
-      'pool',
-      'impoundment',
-    ],
-    icon: mdiWaves,
-  },
-  {
-    keywords: ['reservoir release', 'release', 'outflow', 'spillway'],
-    icon: mdiWavesArrowRight,
-  },
-  {
-    keywords: [
-      'weather station',
-      'weather',
-      'meteorological',
-      'meteorology',
-      'met station',
-    ],
-    icon: mdiWeatherCloudy,
-  },
-  {
-    keywords: ['fog', 'visibility', 'mist'],
-    icon: mdiWeatherFog,
-  },
-  {
-    keywords: ['dust', 'smoke haze', 'haze', 'hazy'],
-    icon: mdiWeatherHazy,
-  },
-  // TODO: no drain/storm-sewer icon in MDI 7.4.47; pipe-disconnected is a stand-in
-  {
-    keywords: [
-      'storm sewer',
-      'storm drain',
-      'stormwater',
-      'storm water',
-      'drainage',
-      'drain',
-      'outfall',
-    ],
-    icon: mdiPipeDisconnected,
-  },
-  {
-    keywords: ['atmospheric deposition', 'atmospheric', 'deposition'],
-    icon: mdiCloudArrowDownOutline,
-  },
-  {
-    keywords: ['precipitation', 'precip', 'rain', 'rainfall', 'storm'],
-    icon: mdiWeatherPouring,
-  },
-  {
-    keywords: ['solar', 'radiation', 'sun'],
-    icon: mdiWeatherSunny,
-  },
-  {
-    keywords: ['evaporation', 'evapotranspiration'],
-    icon: mdiWavesArrowUp,
-  },
-  {
-    keywords: ['wind', 'anemometer'],
-    icon: mdiWeatherWindy,
-  },
-]
-
-// Flatten the rules once, pre-normalizing keywords and sorting longest-first so
-// multi-word site types resolve before generic substrings like "moisture" or
-// "sample". `find` then returns the most specific match.
-const normalizedSiteTypeIcons = siteTypeIconRules
-  .flatMap(({ keywords, icon }) =>
-    keywords.map((keyword) => ({ keyword: normalizeSiteType(keyword), icon }))
-  )
-  .sort((a, b) => b.keyword.length - a.keyword.length)
-
-const getSiteTypeIcon = (siteType: string) => {
-  const normalized = ` ${normalizeSiteType(siteType)} `
-  return (
-    normalizedSiteTypeIcons.find(({ keyword }) =>
-      normalized.includes(` ${keyword} `)
-    )?.icon ?? mdiMapMarkerOutline
-  )
-}
+const siteTypeIconRules = computed(() =>
+  buildSiteTypeIconRules(siteTypeIcons.value)
+)
+
+const getSiteTypeIcon = (siteType: string) =>
+  resolveSiteTypeIcon(siteType, siteTypeIconRules.value)
 
 const toggleSiteType = (siteType: string) => {
   selectedSiteTypes.value = selectedSiteTypes.value.includes(siteType)
diff --git a/apps/data-management/src/composables/useVocabulary.ts b/apps/data-management/src/composables/useVocabulary.ts
index 829fbc3f..dae03fe0 100644
--- a/apps/data-management/src/composables/useVocabulary.ts
+++ b/apps/data-management/src/composables/useVocabulary.ts
@@ -1,11 +1,13 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import hs from '@hydroserver/client'
+import type { SiteTypeIcon } from '@hydroserver/client'
 
 export const useVocabularyStore = defineStore('vocabulary', () => {
   const userTypes = ref<string[]>([])
   const organizationTypes = ref<string[]>([])
   const siteTypes = ref<string[]>([])
+  const siteTypeIcons = ref<SiteTypeIcon[]>([])
   const samplingFeatureTypes = ref<string[]>([])
   const sensorEncodingTypes = ref<string[]>([])
   const methodTypes = ref<string[]>([])
@@ -30,6 +32,11 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
     if (res.ok) siteTypes.value = res.data
   }
 
+  async function fetchSiteTypeIcons() {
+    const res = await hs.things.getSiteTypeIcons()
+    if (res.ok) siteTypeIcons.value = res.data
+  }
+
   async function fetchSamplingFeatureTypes() {
     const res = await hs.things.getSamplingFeatureTypes()
     if (res.ok) samplingFeatureTypes.value = res.data
@@ -76,6 +83,7 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
       fetchUserTypes(),
       fetchOrganizationTypes(),
       fetchSiteTypes(),
+      fetchSiteTypeIcons(),
       fetchSamplingFeatureTypes(),
       fetchSensorEncodingTypes(),
       fetchMethodTypes(),
@@ -91,6 +99,7 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
     userTypes,
     organizationTypes,
     siteTypes,
+    siteTypeIcons,
     samplingFeatureTypes,
     sensorEncodingTypes,
     methodTypes,
@@ -103,6 +112,7 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
     fetchUserTypes,
     fetchOrganizationTypes,
     fetchSiteTypes,
+    fetchSiteTypeIcons,
     fetchSamplingFeatureTypes,
     fetchSensorEncodingTypes,
     fetchMethodTypes,
diff --git a/apps/data-management/src/utils/__tests__/siteTypeIcons.spec.ts b/apps/data-management/src/utils/__tests__/siteTypeIcons.spec.ts
new file mode 100644
index 00000000..ed0635c7
--- /dev/null
+++ b/apps/data-management/src/utils/__tests__/siteTypeIcons.spec.ts
@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest'
+import {
+  mdiGate,
+  mdiGauge,
+  mdiHydroPower,
+  mdiMapMarkerOutline,
+  mdiMapMarkerRadiusOutline,
+  mdiWater,
+  mdiWavesArrowRight,
+} from '@mdi/js'
+import { buildSiteTypeIconRules, getSiteTypeIcon } from '@/utils/siteTypeIcons'
+
+describe('site type icons', () => {
+  const rules = buildSiteTypeIconRules([
+    { icon: 'water', siteTypes: ['stream'] },
+    { icon: 'gauge', siteTypes: ['stream gage'] },
+  ])
+
+  it('uses the longest matching site type keyword', () => {
+    expect(getSiteTypeIcon('Stream Gage', rules)).toBe(mdiGauge)
+    expect(getSiteTypeIcon('Mountain stream', rules)).toBe(mdiWater)
+  })
+
+  it('ignores case and punctuation when matching', () => {
+    expect(getSiteTypeIcon('STREAM-GAGE', rules)).toBe(mdiGauge)
+  })
+
+  it('supports site type names with non-ASCII characters', () => {
+    const localizedRules = buildSiteTypeIconRules([
+      { icon: 'water', siteTypes: ['Río'] },
+    ])
+
+    expect(getSiteTypeIcon('Estación Río', localizedRules)).toBe(mdiWater)
+  })
+
+  it.each([
+    ['Reservoir Release', 'waves-arrow-right', mdiWavesArrowRight],
+    ['Dry Dam Release', 'gate', mdiGate],
+    ['Site', 'map-marker-radius-outline', mdiMapMarkerRadiusOutline],
+    ['Hydropower', 'hydro-power', mdiHydroPower],
+  ])('maps the short-list site type %s', (siteType, icon, expected) => {
+    const shortListRules = buildSiteTypeIconRules([
+      { icon, siteTypes: [siteType] },
+    ])
+
+    expect(getSiteTypeIcon(siteType, shortListRules)).toBe(expected)
+  })
+
+  it('uses the default marker for an unmatched site type', () => {
+    expect(getSiteTypeIcon('Custom installation', rules)).toBe(
+      mdiMapMarkerOutline
+    )
+  })
+})
diff --git a/apps/data-management/src/utils/siteTypeIcons.ts b/apps/data-management/src/utils/siteTypeIcons.ts
new file mode 100644
index 00000000..0e74a07c
--- /dev/null
+++ b/apps/data-management/src/utils/siteTypeIcons.ts
@@ -0,0 +1,93 @@
+import type { SiteTypeIcon } from '@hydroserver/client'
+import {
+  mdiBeach,
+  mdiCalculator,
+  mdiFountain,
+  mdiGate,
+  mdiGauge,
+  mdiGrass,
+  mdiHome,
+  mdiHydroPower,
+  mdiMapMarkerOutline,
+  mdiMapMarkerRadiusOutline,
+  mdiPipeDisconnected,
+  mdiRoadVariant,
+  mdiSnowflake,
+  mdiSprinkler,
+  mdiTerrain,
+  mdiTestTube,
+  mdiThermometerWater,
+  mdiVectorPolyline,
+  mdiWater,
+  mdiWaterCheckOutline,
+  mdiWaterPump,
+  mdiWaterWell,
+  mdiWaves,
+  mdiWavesArrowRight,
+  mdiWeatherCloudy,
+} from '@mdi/js'
+
+const iconPaths: Record<string, string> = {
+  beach: mdiBeach,
+  calculator: mdiCalculator,
+  fountain: mdiFountain,
+  gate: mdiGate,
+  gauge: mdiGauge,
+  grass: mdiGrass,
+  home: mdiHome,
+  'hydro-power': mdiHydroPower,
+  'map-marker-radius-outline': mdiMapMarkerRadiusOutline,
+  'pipe-disconnected': mdiPipeDisconnected,
+  'road-variant': mdiRoadVariant,
+  snowflake: mdiSnowflake,
+  sprinkler: mdiSprinkler,
+  terrain: mdiTerrain,
+  'test-tube': mdiTestTube,
+  'thermometer-water': mdiThermometerWater,
+  'vector-polyline': mdiVectorPolyline,
+  water: mdiWater,
+  'water-check-outline': mdiWaterCheckOutline,
+  'water-pump': mdiWaterPump,
+  'water-well': mdiWaterWell,
+  waves: mdiWaves,
+  'waves-arrow-right': mdiWavesArrowRight,
+  'weather-cloudy': mdiWeatherCloudy,
+}
+
+export interface SiteTypeIconRule {
+  keyword: string
+  icon: string
+}
+
+const normalizeSiteType = (siteType: string) =>
+  siteType
+    .toLowerCase()
+    .replace(/[^\p{L}\p{N}]+/gu, ' ')
+    .trim()
+    .replace(/\s+/g, ' ')
+
+export const buildSiteTypeIconRules = (
+  mappings: SiteTypeIcon[]
+): SiteTypeIconRule[] =>
+  mappings
+    .flatMap(({ icon, siteTypes }) => {
+      const iconPath = iconPaths[icon]
+      if (!iconPath) return []
+
+      return siteTypes
+        .map(normalizeSiteType)
+        .filter(Boolean)
+        .map((keyword) => ({ keyword, icon: iconPath }))
+    })
+    .sort((a, b) => b.keyword.length - a.keyword.length)
+
+export const getSiteTypeIcon = (
+  siteType: string,
+  rules: SiteTypeIconRule[]
+): string => {
+  const normalized = ` ${normalizeSiteType(siteType)} `
+  return (
+    rules.find(({ keyword }) => normalized.includes(` ${keyword} `))?.icon ??
+    mdiMapMarkerOutline
+  )
+}
diff --git a/django/contracts/openapi/data.openapi.json b/django/contracts/openapi/data.openapi.json
index b58b1bb5..83507df0 100644
--- a/django/contracts/openapi/data.openapi.json
+++ b/django/contracts/openapi/data.openapi.json
@@ -9755,6 +9755,27 @@
         "title": "SensorSummaryResponse",
         "type": "object"
       },
+      "SiteTypeIconResponse": {
+        "properties": {
+          "icon": {
+            "title": "Icon",
+            "type": "string"
+          },
+          "siteTypes": {
+            "items": {
+              "type": "string"
+            },
+            "title": "Sitetypes",
+            "type": "array"
+          }
+        },
+        "required": [
+          "icon",
+          "siteTypes"
+        ],
+        "title": "SiteTypeIconResponse",
+        "type": "object"
+      },
       "TagDeleteBody": {
         "properties": {
           "key": {
@@ -27304,6 +27325,33 @@
         ]
       }
     },
+    "/api/data/things/site-type-icons": {
+      "get": {
+        "description": "Get the configured site type icon mappings.",
+        "operationId": "interfaces_api_views_sta_thing_get_site_type_icons",
+        "parameters": [],
+        "responses": {
+          "200": {
+            "content": {
+              "application/json": {
+                "schema": {
+                  "items": {
+                    "$ref": "#/components/schemas/SiteTypeIconResponse"
+                  },
+                  "title": "Response",
+                  "type": "array"
+                }
+              }
+            },
+            "description": "OK"
+          }
+        },
+        "summary": "Get Site Type Icons",
+        "tags": [
+          "Things"
+        ]
+      }
+    },
     "/api/data/things/site-types": {
       "get": {
         "description": "Get site types.",
diff --git a/django/core/web/admin.py b/django/core/web/admin.py
index 21026232..52bd1a20 100644
--- a/django/core/web/admin.py
+++ b/django/core/web/admin.py
@@ -1,12 +1,17 @@
+from django import forms
 from django.contrib import admin
+from django.utils.html import format_html
 from core.web.models import (
     InstanceConfiguration,
     MapConfiguration,
     AnalyticsConfiguration,
     MapLayer,
     ContactInformation,
+    SiteTypeIcon,
 )
 
+MDI_SVG_BASE_URL = "https://cdn.jsdelivr.net/npm/@mdi/svg@7.4.47/svg"
+
 
 class ContactInformationAdmin(admin.ModelAdmin):
     list_display = ("title", "link")
@@ -16,8 +21,74 @@ class MapLayerAdmin(admin.ModelAdmin):
     list_display = ("name", "type", "priority", "source", "attribution")
 
 
+class SiteTypeIconAdminForm(forms.ModelForm):
+    site_types = forms.CharField(
+        label="Site type names and keywords",
+        required=False,
+        widget=forms.Textarea(attrs={"rows": 8, "cols": 60}),
+        help_text=(
+            "Enter one site type name or keyword per line. Matching ignores case and "
+            "punctuation; longer matches take precedence. The default entries may be "
+            "changed or removed, and the list may be left empty."
+        ),
+    )
+
+    class Meta:
+        model = SiteTypeIcon
+        fields = ("site_types",)
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        if self.instance and self.instance.pk:
+            self.initial["site_types"] = "\n".join(self.instance.site_types)
+
+    def clean_site_types(self):
+        return [
+            site_type.strip()
+            for site_type in self.cleaned_data["site_types"].splitlines()
+            if site_type.strip()
+        ]
+
+
+class SiteTypeIconAdmin(admin.ModelAdmin):
+    form = SiteTypeIconAdminForm
+    fields = ("icon_preview", "icon", "site_types")
+    readonly_fields = ("icon_preview", "icon")
+    list_display = ("icon_preview", "icon_name", "mapped_site_types")
+    list_display_links = ("icon_preview", "icon_name", "mapped_site_types")
+
+    @admin.display(description="Preview")
+    def icon_preview(self, obj):
+        if not obj:
+            return ""
+        return format_html(
+            '<img class="site-type-icon-preview" src="{}/{}.svg" '
+            'width="28" height="28" alt="">',
+            MDI_SVG_BASE_URL,
+            obj.icon,
+        )
+
+    @admin.display(description="Icon", ordering="icon")
+    def icon_name(self, obj):
+        return obj.get_icon_display()
+
+    @admin.display(description="Site type names and keywords")
+    def mapped_site_types(self, obj):
+        return ", ".join(obj.site_types) or "—"
+
+    def has_add_permission(self, request):
+        return False
+
+    def has_delete_permission(self, request, obj=None):
+        return False
+
+    class Media:
+        css = {"all": ("admin/web/site_type_icons.css",)}
+
+
 admin.site.register(InstanceConfiguration)
 admin.site.register(MapConfiguration)
 admin.site.register(AnalyticsConfiguration)
 admin.site.register(MapLayer, MapLayerAdmin)
 admin.site.register(ContactInformation, ContactInformationAdmin)
+admin.site.register(SiteTypeIcon, SiteTypeIconAdmin)
diff --git a/django/core/web/migrations/0002_sitetypeicon.py b/django/core/web/migrations/0002_sitetypeicon.py
new file mode 100644
index 00000000..4ced86c7
--- /dev/null
+++ b/django/core/web/migrations/0002_sitetypeicon.py
@@ -0,0 +1,179 @@
+# Generated by Django 5.2.2 on 2026-07-01 18:39
+
+from django.db import migrations, models
+
+
+DEFAULT_SITE_TYPE_ICONS = (
+    (
+        "beach",
+        ["coastal", "beach", "shore", "shoreline", "estuary", "tidal stream", "tidal"],
+    ),
+    ("calculator", ["calculated", "model", "modeled"]),
+    ("fountain", ["spring", "seep"]),
+    ("gate", ["dry dam release", "dry dam", "dam", "weir", "sluice"]),
+    (
+        "gauge",
+        ["stream gage", "stream gauge", "flow station", "gage", "gauge", "flume"],
+    ),
+    ("grass", ["wetland", "marsh", "swamp", "bog", "fen"]),
+    ("home", ["house", "building"]),
+    ("hydro-power", ["hydropower", "hydro power", "power generation"]),
+    (
+        "map-marker-radius-outline",
+        ["monitoring site", "monitoring station", "site", "station"],
+    ),
+    (
+        "pipe-disconnected",
+        ["storm sewer", "storm drain", "stormwater", "storm water", "drainage"],
+    ),
+    ("road-variant", ["pavement", "road crossing", "road"]),
+    ("snowflake", ["snow", "snowpack", "snotel", "ice", "glacier"]),
+    ("sprinkler", ["irrigation pivot", "irrigation", "irrigated"]),
+    ("terrain", ["soil hole", "soil", "terrain", "land"]),
+    (
+        "test-tube",
+        [
+            "water quality sample",
+            "grab sample",
+            "laboratory",
+            "chemistry",
+            "sample",
+            "sampling",
+            "lab",
+        ],
+    ),
+    ("thermometer-water", ["water temperature", "temperature", "thermal"]),
+    (
+        "vector-polyline",
+        ["ditch", "canal", "channel", "aqueduct", "conveyance"],
+    ),
+    ("water", ["creek", "river", "stream", "brook", "tributary"]),
+    (
+        "water-check-outline",
+        [
+            "water quality station",
+            "water quality",
+            "quality sensor",
+            "sonde",
+            "turbidity",
+            "conductivity",
+        ],
+    ),
+    ("water-pump", ["pump station", "lift station", "pump", "pumping"]),
+    (
+        "water-well",
+        [
+            "groundwater well",
+            "observation well",
+            "ground water",
+            "groundwater",
+            "borehole",
+            "aquifer",
+            "piezometer",
+            "well",
+        ],
+    ),
+    (
+        "waves",
+        ["reservoir lake", "reservoir", "lake", "pond", "pool", "impoundment"],
+    ),
+    (
+        "waves-arrow-right",
+        ["reservoir release", "release", "outflow", "spillway"],
+    ),
+    (
+        "weather-cloudy",
+        ["weather station", "atmosphere", "weather", "meteorological", "meteorology"],
+    ),
+)
+
+
+def create_default_site_type_icons(apps, schema_editor):
+    site_type_icon = apps.get_model("web", "SiteTypeIcon")
+    site_type_icon.objects.bulk_create(
+        [
+            site_type_icon(icon=icon, site_types=site_types)
+            for icon, site_types in DEFAULT_SITE_TYPE_ICONS
+        ]
+    )
+
+
+def remove_default_site_type_icons(apps, schema_editor):
+    site_type_icon = apps.get_model("web", "SiteTypeIcon")
+    site_type_icon.objects.filter(
+        icon__in=[icon for icon, _ in DEFAULT_SITE_TYPE_ICONS]
+    ).delete()
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("web", "0001_initial"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="SiteTypeIcon",
+            fields=[
+                (
+                    "id",
+                    models.BigAutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                (
+                    "icon",
+                    models.CharField(
+                        choices=[
+                            ("beach", "Beach"),
+                            ("calculator", "Calculator"),
+                            ("fountain", "Fountain"),
+                            ("gate", "Gate"),
+                            ("gauge", "Gauge"),
+                            ("grass", "Grass"),
+                            ("home", "Home"),
+                            ("hydro-power", "Hydropower"),
+                            ("map-marker-radius-outline", "Site marker"),
+                            ("pipe-disconnected", "Disconnected pipe"),
+                            ("road-variant", "Road"),
+                            ("snowflake", "Snowflake"),
+                            ("sprinkler", "Sprinkler"),
+                            ("terrain", "Terrain"),
+                            ("test-tube", "Test tube"),
+                            ("thermometer-water", "Water thermometer"),
+                            ("vector-polyline", "Polyline"),
+                            ("water", "Water"),
+                            ("water-check-outline", "Water quality"),
+                            ("water-pump", "Water pump"),
+                            ("water-well", "Water well"),
+                            ("waves", "Waves"),
+                            ("waves-arrow-right", "Waves with right arrow"),
+                            ("weather-cloudy", "Cloudy weather"),
+                        ],
+                        editable=False,
+                        max_length=50,
+                        unique=True,
+                    ),
+                ),
+                (
+                    "site_types",
+                    models.JSONField(
+                        blank=True,
+                        default=list,
+                        help_text="Site type names or keywords that should use this icon.",
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "Site Type Icon",
+                "verbose_name_plural": "Site Type Icons",
+                "ordering": ("id",),
+            },
+        ),
+        migrations.RunPython(
+            create_default_site_type_icons,
+            remove_default_site_type_icons,
+        ),
+    ]
diff --git a/django/core/web/models.py b/django/core/web/models.py
index 78cc2a91..dfda985c 100644
--- a/django/core/web/models.py
+++ b/django/core/web/models.py
@@ -1,7 +1,42 @@
+import re
+
 from django.db import models
+from django.core.exceptions import ValidationError
 from solo.models import SingletonModel
 
 
+SITE_TYPE_ICON_CHOICES = (
+    ("beach", "Beach"),
+    ("calculator", "Calculator"),
+    ("fountain", "Fountain"),
+    ("gate", "Gate"),
+    ("gauge", "Gauge"),
+    ("grass", "Grass"),
+    ("home", "Home"),
+    ("hydro-power", "Hydropower"),
+    ("map-marker-radius-outline", "Site marker"),
+    ("pipe-disconnected", "Disconnected pipe"),
+    ("road-variant", "Road"),
+    ("snowflake", "Snowflake"),
+    ("sprinkler", "Sprinkler"),
+    ("terrain", "Terrain"),
+    ("test-tube", "Test tube"),
+    ("thermometer-water", "Water thermometer"),
+    ("vector-polyline", "Polyline"),
+    ("water", "Water"),
+    ("water-check-outline", "Water quality"),
+    ("water-pump", "Water pump"),
+    ("water-well", "Water well"),
+    ("waves", "Waves"),
+    ("waves-arrow-right", "Waves with right arrow"),
+    ("weather-cloudy", "Cloudy weather"),
+)
+
+
+def normalize_site_type_keyword(value):
+    return re.sub(r"[\W_]+", " ", value.casefold()).strip()
+
+
 MAP_LAYER_TYPE_CHOICES = (
     ("basemap", "Basemap"),
     ("overlay", "Overlay"),
@@ -137,3 +172,81 @@ def __str__(self):
 
     class Meta:
         verbose_name = "Map Layer"
+
+
+class SiteTypeIcon(models.Model):
+    icon = models.CharField(
+        max_length=50,
+        choices=SITE_TYPE_ICON_CHOICES,
+        unique=True,
+        editable=False,
+    )
+    site_types = models.JSONField(
+        default=list,
+        blank=True,
+        help_text="Site type names or keywords that should use this icon.",
+    )
+
+    def __str__(self):
+        return self.get_icon_display()
+
+    def clean(self):
+        super().clean()
+
+        if not isinstance(self.site_types, list) or any(
+            not isinstance(site_type, str) for site_type in self.site_types
+        ):
+            raise ValidationError(
+                {"site_types": "Site types must be a list of text values."}
+            )
+
+        self.site_types = [
+            site_type.strip() for site_type in self.site_types if site_type.strip()
+        ]
+        normalized_site_types = [
+            normalize_site_type_keyword(site_type) for site_type in self.site_types
+        ]
+
+        if any(not site_type for site_type in normalized_site_types):
+            raise ValidationError(
+                {
+                    "site_types": (
+                        "Site type names and keywords must contain at least one "
+                        "letter or number."
+                    )
+                }
+            )
+
+        if len(normalized_site_types) != len(set(normalized_site_types)):
+            raise ValidationError(
+                {"site_types": "Each site type may only appear once for an icon."}
+            )
+
+        other_mappings = type(self).objects.exclude(pk=self.pk).values_list(
+            "icon", "site_types"
+        )
+        duplicate_mappings = {
+            normalize_site_type_keyword(site_type): icon
+            for icon, site_types in other_mappings
+            for site_type in site_types
+            if isinstance(site_type, str)
+        }
+        duplicates = [
+            site_type
+            for site_type in self.site_types
+            if normalize_site_type_keyword(site_type) in duplicate_mappings
+        ]
+        if duplicates:
+            raise ValidationError(
+                {
+                    "site_types": (
+                        "A site type or keyword can only map to one icon. "
+                        f"Already mapped: {', '.join(duplicates)}."
+                    )
+                }
+            )
+
+    class Meta:
+        ordering = ("id",)
+        verbose_name = "Site Type Icon"
+        verbose_name_plural = "Site Type Icons"
diff --git a/django/core/web/static/admin/web/site_type_icons.css b/django/core/web/static/admin/web/site_type_icons.css
new file mode 100644
index 00000000..6f0faa0d
--- /dev/null
+++ b/django/core/web/static/admin/web/site_type_icons.css
@@ -0,0 +1,13 @@
+.site-type-icon-preview {
+    display: block;
+}
+
+html[data-theme="dark"] .site-type-icon-preview {
+    filter: invert(1);
+}
+
+@media (prefers-color-scheme: dark) {
+    html[data-theme="auto"] .site-type-icon-preview {
+        filter: invert(1);
+    }
+}
diff --git a/django/interfaces/api/schemas/__init__.py b/django/interfaces/api/schemas/__init__.py
index cb685ae4..b9195ee0 100644
--- a/django/interfaces/api/schemas/__init__.py
+++ b/django/interfaces/api/schemas/__init__.py
@@ -30,6 +30,7 @@
 from interfaces.api.schemas.sta.thing import (
     ThingMarkerResponse,
     ThingMarkerQueryParameters,
+    SiteTypeIconResponse,
     ThingSiteSummaryResponse,
     ThingSiteSummaryQueryParameters,
     ThingTaskSummaryResponse,
diff --git a/django/interfaces/api/schemas/sta/thing.py b/django/interfaces/api/schemas/sta/thing.py
index 0a20ca4b..87c2ac3c 100644
--- a/django/interfaces/api/schemas/sta/thing.py
+++ b/django/interfaces/api/schemas/sta/thing.py
@@ -157,6 +157,11 @@ class ThingMarkerResponse(BaseGetResponse):
     longitude: float
 
 
+class SiteTypeIconResponse(BaseGetResponse):
+    icon: str
+    site_types: list[str]
+
+
 class ThingSiteSummaryQueryParameters(BaseQueryParameters):
     workspace_id: list[uuid.UUID] = Query(
         [], description="Filter site summaries by workspace ID."
diff --git a/django/interfaces/api/views/sta/thing.py b/django/interfaces/api/views/sta/thing.py
index 0bbfadbf..80912881 100644
--- a/django/interfaces/api/views/sta/thing.py
+++ b/django/interfaces/api/views/sta/thing.py
@@ -10,6 +10,7 @@
 from interfaces.api.schemas import (
     ThingMarkerResponse,
     ThingMarkerQueryParameters,
+    SiteTypeIconResponse,
     ThingSiteSummaryResponse,
     ThingSiteSummaryQueryParameters,
     ThingTaskSummaryResponse,
@@ -28,6 +29,7 @@
     FileAttachmentDeleteBody,
 )
 from core.sta.services import ThingService
+from core.web.models import SiteTypeIcon
 
 thing_router = Router(tags=["Things"])
 thing_service = ThingService()
@@ -200,6 +202,19 @@ def get_site_types(
     )
 
 
+@thing_router.get(
+    "/site-type-icons",
+    response={200: list[SiteTypeIconResponse]},
+    by_alias=True,
+)
+def get_site_type_icons(request: HydroServerHttpRequest):
+    """
+    Get the configured site type icon mappings.
+    """
+
+    return 200, SiteTypeIcon.objects.values("icon", "site_types")
+
+
 @thing_router.get("/sampling-feature-types", response={200: list[str]}, by_alias=True)
 def get_sampling_feature_types(
     request: HydroServerHttpRequest,
diff --git a/django/tests/web/__init__.py b/django/tests/web/__init__.py
new file mode 100644
index 00000000..8b137891
--- /dev/null
+++ b/django/tests/web/__init__.py
@@ -0,0 +1 @@
+
diff --git a/django/tests/web/test_site_type_icons.py b/django/tests/web/test_site_type_icons.py
new file mode 100644
index 00000000..3504035f
--- /dev/null
+++ b/django/tests/web/test_site_type_icons.py
@@ -0,0 +1,152 @@
+import re
+
+import pytest
+from django.contrib import admin
+from django.conf import settings
+from django.core.exceptions import ValidationError
+from django.urls import reverse
+
+from core.web.admin import SiteTypeIconAdminForm
+from core.web.models import SITE_TYPE_ICON_CHOICES, SiteTypeIcon
+
+
+@pytest.mark.django_db
+def test_django_and_data_management_app_icon_lists_stay_in_sync():
+    django_icons = {icon for icon, _ in SITE_TYPE_ICON_CHOICES}
+    seeded_icons = set(SiteTypeIcon.objects.values_list("icon", flat=True))
+
+    data_app_source = (
+        settings.BASE_DIR.parent
+        / "apps"
+        / "data-management"
+        / "src"
+        / "utils"
+        / "siteTypeIcons.ts"
+    ).read_text()
+    icon_paths_block = data_app_source.split(
+        "const iconPaths: Record<string, string> = {", 1
+    )[1].split("\n}", 1)[0]
+    data_app_icons = {
+        quoted_icon or bare_icon
+        for quoted_icon, bare_icon in re.findall(
+            r"^\s*(?:'([^']+)'|([a-z][\w-]*)):\s*mdi\w+,\s*$",
+            icon_paths_block,
+            flags=re.MULTILINE,
+        )
+    }
+
+    assert data_app_icons == django_icons == seeded_icons
+
+
+@pytest.mark.django_db
+def test_default_site_type_icon_mappings_are_available(client):
+    response = client.get("/api/data/things/site-type-icons")
+
+    assert response.status_code == 200
+    mappings = response.json()
+    assert len(mappings) == 24
+    assert {
+        "icon": "water-well",
+        "siteTypes": [
+            "groundwater well",
+            "observation well",
+            "ground water",
+            "groundwater",
+            "borehole",
+            "aquifer",
+            "piezometer",
+            "well",
+        ],
+    } in mappings
+    assert {
+        "icon": "gate",
+        "siteTypes": ["dry dam release", "dry dam", "dam", "weir", "sluice"],
+    } in mappings
+    assert {
+        "icon": "hydro-power",
+        "siteTypes": ["hydropower", "hydro power", "power generation"],
+    } in mappings
+    assert {
+        "icon": "map-marker-radius-outline",
+        "siteTypes": ["monitoring site", "monitoring station", "site", "station"],
+    } in mappings
+    assert {
+        "icon": "waves-arrow-right",
+        "siteTypes": ["reservoir release", "release", "outflow", "spillway"],
+    } in mappings
+
+
+@pytest.mark.django_db
+def test_site_types_endpoint_remains_a_list_of_names(client):
+    response = client.get("/api/data/things/site-types")
+
+    assert response.status_code == 200
+    assert all(isinstance(site_type, str) for site_type in response.json())
+
+
+@pytest.mark.django_db
+def test_admin_form_accepts_one_site_type_per_line():
+    mapping = SiteTypeIcon.objects.get(icon="beach")
+    form = SiteTypeIconAdminForm(
+        data={"site_types": "Coastal station\nCustom estuary\n\n"},
+        instance=mapping,
+    )
+
+    assert form.is_valid(), form.errors
+    assert form.cleaned_data["site_types"] == [
+        "Coastal station",
+        "Custom estuary",
+    ]
+
+
+@pytest.mark.django_db
+def test_site_type_keyword_cannot_map_to_multiple_icons():
+    mapping = SiteTypeIcon.objects.get(icon="beach")
+    mapping.site_types.append("STREAM!")
+
+    with pytest.raises(ValidationError, match="Already mapped: STREAM!"):
+        mapping.full_clean()
+
+
+def test_site_type_icon_admin_list_is_fixed():
+    model_admin = admin.site._registry[SiteTypeIcon]
+
+    assert model_admin.has_add_permission(None) is False
+    assert model_admin.has_delete_permission(None) is False
+
+
+@pytest.mark.django_db
+def test_site_type_icon_admin_change_page(admin_client):
+    mapping = SiteTypeIcon.objects.get(icon="water")
+
+    response = admin_client.get(
+        reverse("admin:web_sitetypeicon_change", args=(mapping.pk,))
+    )
+
+    assert response.status_code == 200
+    assert b"Site type names and keywords" in response.content
+    assert b"admin/web/site_type_icons.css" in response.content
+    assert b"site-type-icon-preview" in response.content
+
+
+@pytest.mark.django_db
+def test_admin_can_replace_or_clear_default_site_type_keywords(admin_client):
+    mapping = SiteTypeIcon.objects.get(icon="beach")
+    change_url = reverse("admin:web_sitetypeicon_change", args=(mapping.pk,))
+
+    response = admin_client.post(
+        change_url,
+        {"site_types": "Custom coastline\nCustom estuary"},
+    )
+
+    assert response.status_code == 302
+    mapping.refresh_from_db()
+    assert mapping.site_types == ["Custom coastline", "Custom estuary"]
+    assert mapping.icon == "beach"
+
+    response = admin_client.post(change_url, {"site_types": ""})
+
+    assert response.status_code == 302
+    mapping.refresh_from_db()
+    assert mapping.site_types == []
+    assert mapping.icon == "beach"
diff --git a/packages/hydroserver-ts/src/api/services/thing.service.ts b/packages/hydroserver-ts/src/api/services/thing.service.ts
index 6ecefdaf..fcc3a682 100644
--- a/packages/hydroserver-ts/src/api/services/thing.service.ts
+++ b/packages/hydroserver-ts/src/api/services/thing.service.ts
@@ -7,6 +7,7 @@ import {
   PostHydroShareArchive,
   HydroShareArchive,
   ThingMarker,
+  SiteTypeIcon,
   ThingSiteSummary,
   ThingTaskSummary,
   Tag,
@@ -51,6 +52,8 @@ export class ThingService extends HydroServerBaseService<typeof C, Thing> {
     apiMethods.patch<Thing>(`${this._route}/${id}`, { isPrivate })
 
   getSiteTypes = () => apiMethods.fetch<string[]>(`${this._route}/site-types`)
+  getSiteTypeIcons = () =>
+    apiMethods.fetch<SiteTypeIcon[]>(`${this._route}/site-type-icons`)
   getSamplingFeatureTypes = () =>
     apiMethods.fetch<string[]>(`${this._route}/sampling-feature-types`)
 
diff --git a/packages/hydroserver-ts/src/generated/data.types.d.ts b/packages/hydroserver-ts/src/generated/data.types.d.ts
index 9c5b0a5d..bba48155 100644
--- a/packages/hydroserver-ts/src/generated/data.types.d.ts
+++ b/packages/hydroserver-ts/src/generated/data.types.d.ts
@@ -1632,6 +1632,26 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/api/data/things/site-type-icons": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get Site Type Icons
+         * @description Get the configured site type icon mappings.
+         */
+        get: operations["interfaces_api_views_sta_thing_get_site_type_icons"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/api/data/things/site-types": {
         parameters: {
             query?: never;
@@ -5274,6 +5294,13 @@ export interface components {
             /** Workspaceid */
             workspaceId: string | null;
         };
+        /** SiteTypeIconResponse */
+        SiteTypeIconResponse: {
+            /** Icon */
+            icon: string;
+            /** Sitetypes */
+            siteTypes: string[];
+        };
         /** TagDeleteBody */
         TagDeleteBody: {
             /** Key */
@@ -13005,6 +13032,26 @@ export interface operations {
             };
         };
     };
+    interfaces_api_views_sta_thing_get_site_type_icons: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["SiteTypeIconResponse"][];
+                };
+            };
+        };
+    };
     interfaces_api_views_sta_thing_get_site_types: {
         parameters: {
             query?: {
diff --git a/packages/hydroserver-ts/src/types/index.ts b/packages/hydroserver-ts/src/types/index.ts
index 4b88f0a7..2e2495f4 100644
--- a/packages/hydroserver-ts/src/types/index.ts
+++ b/packages/hydroserver-ts/src/types/index.ts
@@ -451,6 +451,11 @@ export interface ThingMarker {
   longitude: number
 }
 
+export interface SiteTypeIcon {
+  icon: string
+  siteTypes: string[]
+}
+
 export interface ThingSiteSummary extends ThingMarker {
   samplingFeatureCode: string
   tags: Tag[]

From 561313919ff3f99bf4dd52e9668a48250178a26b Mon Sep 17 00:00:00 2001
From: daniel-slaugh <daniel.slaugh@hotmail.com>
Date: Thu, 2 Jul 2026 15:43:45 -0600
Subject: [PATCH 14/19] Update SiteType controlled vocabulary

---
 .../src/utils/__tests__/siteTypeIcons.spec.ts |   9 +-
 .../src/utils/siteTypeIcons.ts                |  16 +-
 .../core/sta/fixtures/default_site_types.yaml |  48 +++---
 .../core/web/migrations/0002_sitetypeicon.py  | 128 ++++++++------
 django/core/web/models.py                     |   8 +-
 .../management/commands/load_default_data.py  |   4 +
 django/tests/web/test_site_type_icons.py      | 158 ++++++++++++++++--
 7 files changed, 271 insertions(+), 100 deletions(-)

diff --git a/apps/data-management/src/utils/__tests__/siteTypeIcons.spec.ts b/apps/data-management/src/utils/__tests__/siteTypeIcons.spec.ts
index ed0635c7..207ee548 100644
--- a/apps/data-management/src/utils/__tests__/siteTypeIcons.spec.ts
+++ b/apps/data-management/src/utils/__tests__/siteTypeIcons.spec.ts
@@ -3,8 +3,8 @@ import {
   mdiGate,
   mdiGauge,
   mdiHydroPower,
+  mdiMapMarker,
   mdiMapMarkerOutline,
-  mdiMapMarkerRadiusOutline,
   mdiWater,
   mdiWavesArrowRight,
 } from '@mdi/js'
@@ -12,8 +12,8 @@ import { buildSiteTypeIconRules, getSiteTypeIcon } from '@/utils/siteTypeIcons'
 
 describe('site type icons', () => {
   const rules = buildSiteTypeIconRules([
-    { icon: 'water', siteTypes: ['stream'] },
-    { icon: 'gauge', siteTypes: ['stream gage'] },
+    { icon: 'water', siteTypes: ['Stream'] },
+    { icon: 'gauge', siteTypes: ['Stream Gage'] },
   ])
 
   it('uses the longest matching site type keyword', () => {
@@ -23,6 +23,7 @@ describe('site type icons', () => {
 
   it('ignores case and punctuation when matching', () => {
     expect(getSiteTypeIcon('STREAM-GAGE', rules)).toBe(mdiGauge)
+    expect(getSiteTypeIcon('mountain stream', rules)).toBe(mdiWater)
   })
 
   it('supports site type names with non-ASCII characters', () => {
@@ -36,7 +37,7 @@ describe('site type icons', () => {
   it.each([
     ['Reservoir Release', 'waves-arrow-right', mdiWavesArrowRight],
     ['Dry Dam Release', 'gate', mdiGate],
-    ['Site', 'map-marker-radius-outline', mdiMapMarkerRadiusOutline],
+    ['Site', 'map-marker', mdiMapMarker],
     ['Hydropower', 'hydro-power', mdiHydroPower],
   ])('maps the short-list site type %s', (siteType, icon, expected) => {
     const shortListRules = buildSiteTypeIconRules([
diff --git a/apps/data-management/src/utils/siteTypeIcons.ts b/apps/data-management/src/utils/siteTypeIcons.ts
index 0e74a07c..95463c96 100644
--- a/apps/data-management/src/utils/siteTypeIcons.ts
+++ b/apps/data-management/src/utils/siteTypeIcons.ts
@@ -6,20 +6,20 @@ import {
   mdiGate,
   mdiGauge,
   mdiGrass,
-  mdiHome,
+  mdiHomeOutline,
   mdiHydroPower,
+  mdiImageFilterHdr,
+  mdiMapMarker,
   mdiMapMarkerOutline,
-  mdiMapMarkerRadiusOutline,
   mdiPipeDisconnected,
   mdiRoadVariant,
   mdiSnowflake,
   mdiSprinkler,
   mdiTerrain,
   mdiTestTube,
-  mdiThermometerWater,
   mdiVectorPolyline,
   mdiWater,
-  mdiWaterCheckOutline,
+  mdiWaterCheck,
   mdiWaterPump,
   mdiWaterWell,
   mdiWaves,
@@ -34,19 +34,19 @@ const iconPaths: Record<string, string> = {
   gate: mdiGate,
   gauge: mdiGauge,
   grass: mdiGrass,
-  home: mdiHome,
+  'home-outline': mdiHomeOutline,
   'hydro-power': mdiHydroPower,
-  'map-marker-radius-outline': mdiMapMarkerRadiusOutline,
+  'image-filter-hdr': mdiImageFilterHdr,
+  'map-marker': mdiMapMarker,
   'pipe-disconnected': mdiPipeDisconnected,
   'road-variant': mdiRoadVariant,
   snowflake: mdiSnowflake,
   sprinkler: mdiSprinkler,
   terrain: mdiTerrain,
   'test-tube': mdiTestTube,
-  'thermometer-water': mdiThermometerWater,
   'vector-polyline': mdiVectorPolyline,
   water: mdiWater,
-  'water-check-outline': mdiWaterCheckOutline,
+  'water-check': mdiWaterCheck,
   'water-pump': mdiWaterPump,
   'water-well': mdiWaterWell,
   waves: mdiWaves,
diff --git a/django/core/sta/fixtures/default_site_types.yaml b/django/core/sta/fixtures/default_site_types.yaml
index e61c943d..3e6eea71 100644
--- a/django/core/sta/fixtures/default_site_types.yaml
+++ b/django/core/sta/fixtures/default_site_types.yaml
@@ -2,23 +2,23 @@
 - model: sta.sitetype
   pk: 1
   fields:
-    name: Atmosphere
+    name: Conveyance
 - model: sta.sitetype
   pk: 2
   fields:
-    name: Borehole
+    name: Stream
 - model: sta.sitetype
   pk: 3
   fields:
-    name: Calculated
+    name: Reservoir / Lake
 - model: sta.sitetype
   pk: 4
   fields:
-    name: Ditch
+    name: Reservoir Release
 - model: sta.sitetype
   pk: 5
   fields:
-    name: Estuary
+    name: Dam / Control Structure
 - model: sta.sitetype
   pk: 6
   fields:
@@ -26,68 +26,72 @@
 - model: sta.sitetype
   pk: 7
   fields:
-    name: House
+    name: Irrigation
 - model: sta.sitetype
   pk: 8
   fields:
-    name: Irrigation Pivot
+    name: Hydropower
 - model: sta.sitetype
   pk: 9
   fields:
-    name: Lake, Reservoir, Impoundment
+    name: Pump Station
 - model: sta.sitetype
   pk: 10
   fields:
-    name: Land
+    name: Spring
 - model: sta.sitetype
   pk: 11
   fields:
-    name: Laboratory or sample-preparation area
+    name: Wetland
 - model: sta.sitetype
   pk: 12
   fields:
-    name: Observation well
+    name: Coastal
 - model: sta.sitetype
   pk: 13
   fields:
-    name: Other
+    name: Snow / Ice
 - model: sta.sitetype
   pk: 14
   fields:
-    name: Pavement
+    name: Weather / Atmosphere
 - model: sta.sitetype
   pk: 15
   fields:
-    name: Soil hole
+    name: Soil
 - model: sta.sitetype
   pk: 16
   fields:
-    name: Spring
+    name: Stormwater
 - model: sta.sitetype
   pk: 17
   fields:
-    name: Stream
+    name: Gaging Station
 - model: sta.sitetype
   pk: 18
   fields:
-    name: Stream gage
+    name: Water Quality Station
 - model: sta.sitetype
   pk: 19
   fields:
-    name: Storm sewer
+    name: Discrete Sample
 - model: sta.sitetype
   pk: 20
   fields:
-    name: Tidal stream
+    name: Modeled / Calculated
 - model: sta.sitetype
   pk: 21
   fields:
-    name: Water quality station
+    name: House
 - model: sta.sitetype
   pk: 22
   fields:
-    name: Weather station
+    name: Land
 - model: sta.sitetype
   pk: 23
   fields:
-    name: Wetland
\ No newline at end of file
+    name: Pavement
+- model: sta.sitetype
+  pk: 24
+  fields:
+    name: Site — default fallback
diff --git a/django/core/web/migrations/0002_sitetypeicon.py b/django/core/web/migrations/0002_sitetypeicon.py
index 4ced86c7..c796fb5a 100644
--- a/django/core/web/migrations/0002_sitetypeicon.py
+++ b/django/core/web/migrations/0002_sitetypeicon.py
@@ -6,84 +6,116 @@
 DEFAULT_SITE_TYPE_ICONS = (
     (
         "beach",
-        ["coastal", "beach", "shore", "shoreline", "estuary", "tidal stream", "tidal"],
+        ["Coastal", "Beach", "Shore", "Shoreline", "Estuary", "Tidal Stream", "Tidal"],
+    ),
+    ("calculator", ["Modeled / Calculated", "Calculated", "Model", "Modeled"]),
+    ("fountain", ["Spring", "Seep"]),
+    (
+        "gate",
+        [
+            "Dam / Control Structure",
+            "Dry Dam Release",
+            "Dry Dam",
+            "Dam",
+            "Weir",
+            "Sluice",
+        ],
     ),
-    ("calculator", ["calculated", "model", "modeled"]),
-    ("fountain", ["spring", "seep"]),
-    ("gate", ["dry dam release", "dry dam", "dam", "weir", "sluice"]),
     (
         "gauge",
-        ["stream gage", "stream gauge", "flow station", "gage", "gauge", "flume"],
+        [
+            "Gaging Station",
+            "Stream Gage",
+            "Stream Gauge",
+            "Flow Station",
+            "Gage",
+            "Gauge",
+            "Flume",
+        ],
     ),
-    ("grass", ["wetland", "marsh", "swamp", "bog", "fen"]),
-    ("home", ["house", "building"]),
-    ("hydro-power", ["hydropower", "hydro power", "power generation"]),
+    ("grass", ["Wetland", "Marsh", "Swamp", "Bog", "Fen"]),
+    ("home-outline", ["House", "Building"]),
+    ("hydro-power", ["Hydropower", "Hydro Power", "Power Generation"]),
+    ("image-filter-hdr", ["Land", "Land Surface", "Upland"]),
     (
-        "map-marker-radius-outline",
-        ["monitoring site", "monitoring station", "site", "station"],
+        "map-marker",
+        [
+            "Site — Default Fallback",
+            "Monitoring Site",
+            "Monitoring Station",
+            "Site",
+            "Station",
+        ],
     ),
     (
         "pipe-disconnected",
-        ["storm sewer", "storm drain", "stormwater", "storm water", "drainage"],
+        ["Stormwater", "Storm Sewer", "Storm Drain", "Storm Water", "Drainage"],
     ),
-    ("road-variant", ["pavement", "road crossing", "road"]),
-    ("snowflake", ["snow", "snowpack", "snotel", "ice", "glacier"]),
-    ("sprinkler", ["irrigation pivot", "irrigation", "irrigated"]),
-    ("terrain", ["soil hole", "soil", "terrain", "land"]),
+    ("road-variant", ["Pavement", "Road Crossing", "Road"]),
+    ("snowflake", ["Snow / Ice", "Snow", "Snowpack", "Snotel", "Ice", "Glacier"]),
+    ("sprinkler", ["Irrigation", "Irrigation Pivot", "Irrigated"]),
+    ("terrain", ["Soil", "Soil Hole", "Terrain"]),
     (
         "test-tube",
         [
-            "water quality sample",
-            "grab sample",
-            "laboratory",
-            "chemistry",
-            "sample",
-            "sampling",
-            "lab",
+            "Discrete Sample",
+            "Water Quality Sample",
+            "Grab Sample",
+            "Laboratory",
+            "Chemistry",
+            "Sample",
+            "Sampling",
+            "Lab",
         ],
     ),
-    ("thermometer-water", ["water temperature", "temperature", "thermal"]),
     (
         "vector-polyline",
-        ["ditch", "canal", "channel", "aqueduct", "conveyance"],
+        ["Conveyance", "Ditch", "Canal", "Channel", "Aqueduct"],
     ),
-    ("water", ["creek", "river", "stream", "brook", "tributary"]),
+    ("water", ["Stream", "Creek", "River", "Brook", "Tributary"]),
     (
-        "water-check-outline",
+        "water-check",
         [
-            "water quality station",
-            "water quality",
-            "quality sensor",
-            "sonde",
-            "turbidity",
-            "conductivity",
+            "Water Quality Station",
+            "Water Quality",
+            "Quality Sensor",
+            "Sonde",
+            "Turbidity",
+            "Conductivity",
         ],
     ),
-    ("water-pump", ["pump station", "lift station", "pump", "pumping"]),
+    ("water-pump", ["Pump Station", "Lift Station", "Pump", "Pumping"]),
     (
         "water-well",
         [
-            "groundwater well",
-            "observation well",
-            "ground water",
-            "groundwater",
-            "borehole",
-            "aquifer",
-            "piezometer",
-            "well",
+            "Groundwater Well",
+            "Observation Well",
+            "Ground Water",
+            "Groundwater",
+            "Borehole",
+            "Aquifer",
+            "Piezometer",
+            "Well",
         ],
     ),
     (
         "waves",
-        ["reservoir lake", "reservoir", "lake", "pond", "pool", "impoundment"],
+        ["Reservoir / Lake", "Reservoir", "Lake", "Pond", "Pool", "Impoundment"],
     ),
     (
         "waves-arrow-right",
-        ["reservoir release", "release", "outflow", "spillway"],
+        ["Reservoir Release", "Release", "Outflow", "Spillway"],
     ),
     (
         "weather-cloudy",
-        ["weather station", "atmosphere", "weather", "meteorological", "meteorology"],
+        [
+            "Weather / Atmosphere",
+            "Weather Station",
+            "Atmosphere",
+            "Weather",
+            "Meteorological",
+            "Meteorology",
+        ],
     ),
 )
 
@@ -133,19 +165,19 @@ class Migration(migrations.Migration):
                             ("gate", "Gate"),
                             ("gauge", "Gauge"),
                             ("grass", "Grass"),
-                            ("home", "Home"),
+                            ("home-outline", "Home"),
                             ("hydro-power", "Hydropower"),
-                            ("map-marker-radius-outline", "Site marker"),
+                            ("image-filter-hdr", "Land"),
+                            ("map-marker", "Site marker"),
                             ("pipe-disconnected", "Disconnected pipe"),
                             ("road-variant", "Road"),
                             ("snowflake", "Snowflake"),
                             ("sprinkler", "Sprinkler"),
                             ("terrain", "Terrain"),
                             ("test-tube", "Test tube"),
-                            ("thermometer-water", "Water thermometer"),
                             ("vector-polyline", "Polyline"),
                             ("water", "Water"),
-                            ("water-check-outline", "Water quality"),
+                            ("water-check", "Water quality"),
                             ("water-pump", "Water pump"),
                             ("water-well", "Water well"),
                             ("waves", "Waves"),
diff --git a/django/core/web/models.py b/django/core/web/models.py
index dfda985c..39b4049d 100644
--- a/django/core/web/models.py
+++ b/django/core/web/models.py
@@ -12,19 +12,19 @@
     ("gate", "Gate"),
     ("gauge", "Gauge"),
     ("grass", "Grass"),
-    ("home", "Home"),
+    ("home-outline", "Home"),
     ("hydro-power", "Hydropower"),
-    ("map-marker-radius-outline", "Site marker"),
+    ("image-filter-hdr", "Land"),
+    ("map-marker", "Site marker"),
     ("pipe-disconnected", "Disconnected pipe"),
     ("road-variant", "Road"),
     ("snowflake", "Snowflake"),
     ("sprinkler", "Sprinkler"),
     ("terrain", "Terrain"),
     ("test-tube", "Test tube"),
-    ("thermometer-water", "Water thermometer"),
     ("vector-polyline", "Polyline"),
     ("water", "Water"),
-    ("water-check-outline", "Water quality"),
+    ("water-check", "Water quality"),
     ("water-pump", "Water pump"),
     ("water-well", "Water well"),
     ("waves", "Waves"),
diff --git a/django/interfaces/actions/management/commands/load_default_data.py b/django/interfaces/actions/management/commands/load_default_data.py
index ce19df8c..2521c897 100644
--- a/django/interfaces/actions/management/commands/load_default_data.py
+++ b/django/interfaces/actions/management/commands/load_default_data.py
@@ -2,6 +2,7 @@
 from django.core.management import call_command
 from django.db import transaction
 from django.conf import settings
+from core.sta.models import SiteType
 from core.web.models import InstanceConfiguration
 
 
@@ -35,6 +36,9 @@ def handle(self, *args, **kwargs):
                     "core/sta/fixtures/default_units.yaml",
                     "core/sta/fixtures/default_variable_types.yaml",
                 ]
+                if not SiteType.objects.exists():
+                    fixtures.append("core/sta/fixtures/default_site_types.yaml")
+
                 for fixture in fixtures:
                     self.stdout.write(f"Loading {fixture}...")
                     call_command("loaddata", fixture, verbosity=1)
diff --git a/django/tests/web/test_site_type_icons.py b/django/tests/web/test_site_type_icons.py
index 3504035f..829731e3 100644
--- a/django/tests/web/test_site_type_icons.py
+++ b/django/tests/web/test_site_type_icons.py
@@ -1,13 +1,50 @@
+import importlib
 import re
 
 import pytest
+from django.apps import apps
 from django.contrib import admin
 from django.conf import settings
+from django.core.management import call_command
 from django.core.exceptions import ValidationError
+from django.test import override_settings
 from django.urls import reverse
 
+from core.sta.models import SiteType
 from core.web.admin import SiteTypeIconAdminForm
-from core.web.models import SITE_TYPE_ICON_CHOICES, SiteTypeIcon
+from core.web.models import (
+    SITE_TYPE_ICON_CHOICES,
+    InstanceConfiguration,
+    SiteTypeIcon,
+)
+
+
+SITE_TYPES = [
+    "Conveyance",
+    "Stream",
+    "Reservoir / Lake",
+    "Reservoir Release",
+    "Dam / Control Structure",
+    "Groundwater Well",
+    "Irrigation",
+    "Hydropower",
+    "Pump Station",
+    "Spring",
+    "Wetland",
+    "Coastal",
+    "Snow / Ice",
+    "Weather / Atmosphere",
+    "Soil",
+    "Stormwater",
+    "Gaging Station",
+    "Water Quality Station",
+    "Discrete Sample",
+    "Modeled / Calculated",
+    "House",
+    "Land",
+    "Pavement",
+    "Site — default fallback",
+]
 
 
 @pytest.mark.django_db
@@ -48,34 +85,127 @@ def test_default_site_type_icon_mappings_are_available(client):
     assert {
         "icon": "water-well",
         "siteTypes": [
-            "groundwater well",
-            "observation well",
-            "ground water",
-            "groundwater",
-            "borehole",
-            "aquifer",
-            "piezometer",
-            "well",
+            "Groundwater Well",
+            "Observation Well",
+            "Ground Water",
+            "Groundwater",
+            "Borehole",
+            "Aquifer",
+            "Piezometer",
+            "Well",
         ],
     } in mappings
     assert {
         "icon": "gate",
-        "siteTypes": ["dry dam release", "dry dam", "dam", "weir", "sluice"],
+        "siteTypes": [
+            "Dam / Control Structure",
+            "Dry Dam Release",
+            "Dry Dam",
+            "Dam",
+            "Weir",
+            "Sluice",
+        ],
     } in mappings
     assert {
         "icon": "hydro-power",
-        "siteTypes": ["hydropower", "hydro power", "power generation"],
+        "siteTypes": ["Hydropower", "Hydro Power", "Power Generation"],
     } in mappings
     assert {
-        "icon": "map-marker-radius-outline",
-        "siteTypes": ["monitoring site", "monitoring station", "site", "station"],
+        "icon": "map-marker",
+        "siteTypes": [
+            "Site — Default Fallback",
+            "Monitoring Site",
+            "Monitoring Station",
+            "Site",
+            "Station",
+        ],
     } in mappings
     assert {
         "icon": "waves-arrow-right",
-        "siteTypes": ["reservoir release", "release", "outflow", "spillway"],
+        "siteTypes": ["Reservoir Release", "Release", "Outflow", "Spillway"],
     } in mappings
 
 
+@pytest.mark.django_db
+def test_canonical_site_types_are_first_in_default_icon_mappings():
+    first_site_types = [
+        mapping.site_types[0] for mapping in SiteTypeIcon.objects.order_by("id")
+    ]
+
+    assert len(first_site_types) == len(set(first_site_types)) == 24
+    assert {site_type.casefold() for site_type in first_site_types} == {
+        site_type.casefold() for site_type in SITE_TYPES
+    }
+
+    for mapping in SiteTypeIcon.objects.all():
+        assert all(keyword == keyword.title() for keyword in mapping.site_types)
+        mapping.full_clean()
+
+
+@pytest.mark.django_db
+def test_default_site_type_fixture_contains_canonical_categories():
+    SiteType.objects.all().delete()
+
+    call_command("loaddata", "core/sta/fixtures/default_site_types.yaml", verbosity=0)
+
+    assert list(SiteType.objects.order_by("pk").values_list("name", flat=True)) == (
+        SITE_TYPES
+    )
+
+
+@pytest.mark.django_db
+@override_settings(LOAD_DEFAULT_DATA=True)
+def test_new_instance_default_data_loads_canonical_site_types():
+    SiteType.objects.all().delete()
+
+    call_command("load_default_data", verbosity=0)
+
+    assert list(SiteType.objects.order_by("pk").values_list("name", flat=True)) == (
+        SITE_TYPES
+    )
+
+
+@pytest.mark.django_db
+@override_settings(LOAD_DEFAULT_DATA=True)
+def test_default_data_does_not_replace_nonempty_site_types():
+    SiteType.objects.all().delete()
+    SiteType.objects.create(name="Instance-specific site type")
+
+    call_command("load_default_data", verbosity=0)
+
+    assert list(SiteType.objects.values_list("name", flat=True)) == [
+        "Instance-specific site type"
+    ]
+
+
+@pytest.mark.django_db
+@override_settings(LOAD_DEFAULT_DATA=True)
+def test_existing_instance_update_does_not_replace_site_types():
+    InstanceConfiguration.get_configuration()
+    SiteType.objects.all().delete()
+    SiteType.objects.create(name="Instance-specific site type")
+
+    call_command("load_default_data", verbosity=0)
+
+    assert list(SiteType.objects.values_list("name", flat=True)) == [
+        "Instance-specific site type"
+    ]
+
+
+@pytest.mark.django_db
+def test_site_type_icon_migration_does_not_replace_site_types():
+    SiteType.objects.all().delete()
+    SiteType.objects.create(name="Instance-specific site type")
+    SiteTypeIcon.objects.all().delete()
+    migration = importlib.import_module("core.web.migrations.0002_sitetypeicon")
+
+    migration.create_default_site_type_icons(apps, schema_editor=None)
+
+    assert list(SiteType.objects.values_list("name", flat=True)) == [
+        "Instance-specific site type"
+    ]
+
+
 @pytest.mark.django_db
 def test_site_types_endpoint_remains_a_list_of_names(client):
     response = client.get("/api/data/things/site-types")

From 367d845870e88f86214491f83bb3fe95f6a7ca7e Mon Sep 17 00:00:00 2001
From: daniel-slaugh <daniel.slaugh@hotmail.com>
Date: Thu, 2 Jul 2026 16:10:10 -0600
Subject: [PATCH 15/19] Clean up & add tests

---
 .../data-management/e2e/specs/general.spec.ts | 34 +++++++-----
 apps/data-management/e2e/specs/sites.spec.ts  | 55 ++++++++-----------
 .../components/Datastream/DatastreamTable.vue | 20 ++++---
 .../src/composables/useMetadata.ts            | 21 ++-----
 .../src/utils/__tests__/browseFilters.spec.ts | 10 ++++
 .../src/utils/browseFilters.ts                |  9 ++-
 .../core/web/migrations/0002_sitetypeicon.py  |  3 +-
 django/core/web/models.py                     | 54 +++++++++++++-----
 8 files changed, 120 insertions(+), 86 deletions(-)

diff --git a/apps/data-management/e2e/specs/general.spec.ts b/apps/data-management/e2e/specs/general.spec.ts
index 5da1ff27..cc5e250a 100644
--- a/apps/data-management/e2e/specs/general.spec.ts
+++ b/apps/data-management/e2e/specs/general.spec.ts
@@ -1,12 +1,17 @@
 import { expect, test } from '@playwright/test'
 
+import { authenticateSession } from '../support/auth'
+import { fixtures, users } from '../support/fixtures'
+
 test.describe('general navigation', () => {
   test('root redirects to browse and the logo returns to browse from about', async ({
     page,
   }) => {
     await page.goto('/')
     await expect(page).toHaveURL(/\/browse$/)
-    await expect(page.getByText('Browse data collection sites')).toBeVisible()
+    await expect(
+      page.getByRole('heading', { name: 'Monitoring sites', level: 1 })
+    ).toBeVisible()
 
     await page.goto('/about')
     await expect(page.getByText(/About (HydroServer|us)/).first()).toBeVisible()
@@ -18,19 +23,22 @@ test.describe('general navigation', () => {
   test('browse page site type filter filters the site list and can be cleared', async ({
     page,
   }) => {
-    await page.goto('/browse')
-    await expect(page.getByText('Browse data collection sites')).toBeVisible()
-
-    const siteTypeFilter = page
-      .getByRole('combobox', { name: /site type/i })
-      .first()
-    await expect(siteTypeFilter).toBeVisible()
+    await authenticateSession(page, users.owner.email, users.owner.password)
+    await page.goto('/browse?siteTypes=Private')
+    await expect(
+      page.getByRole('heading', { name: 'Monitoring sites', level: 1 })
+    ).toBeVisible()
 
-    await siteTypeFilter.click()
-    await siteTypeFilter.fill('Lake')
-    await siteTypeFilter.press('Enter')
+    await expect(
+      page.getByText(fixtures.things.private.name, { exact: true })
+    ).toBeVisible()
+    await expect(
+      page.getByText(fixtures.things.public.name, { exact: true })
+    ).toHaveCount(0)
 
-    await page.getByRole('button', { name: /clear/i }).first().click()
-    await expect(siteTypeFilter).toBeEmpty()
+    await page.getByRole('button', { name: 'Reset', exact: true }).click()
+    await expect(
+      page.getByText(fixtures.things.public.name, { exact: true })
+    ).toBeVisible()
   })
 })
diff --git a/apps/data-management/e2e/specs/sites.spec.ts b/apps/data-management/e2e/specs/sites.spec.ts
index 8dae0966..a5f8f084 100644
--- a/apps/data-management/e2e/specs/sites.spec.ts
+++ b/apps/data-management/e2e/specs/sites.spec.ts
@@ -1,4 +1,4 @@
-import { expect, test } from '@playwright/test'
+import { expect, test, type Page } from '@playwright/test'
 
 import { authenticateSession } from '../support/auth'
 import { fixtures, users } from '../support/fixtures'
@@ -8,6 +8,9 @@ import {
   selectWorkspace,
 } from '../support/ui'
 
+const datastreamEntriesByName = (page: Page, name: string) =>
+  page.locator('[data-datastream-id]').filter({ hasText: name })
+
 test.describe('sites and workspaces', () => {
   const apiBaseUrl = process.env.E2E_API_BASE_URL || 'http://127.0.0.1:18000'
   const sitePhotoPng = Buffer.from(
@@ -254,10 +257,7 @@ test.describe('sites and workspaces', () => {
       .fill('Temporary datastream created by the Playwright CRUD suite.')
     await page.getByRole('button', { name: 'Create datastream' }).click()
 
-    const datastreamRow = page
-      .locator('tr, .datastream-card')
-      .filter({ hasText: datastreamName })
-      .first()
+    const datastreamRow = datastreamEntriesByName(page, datastreamName).first()
     await expect(datastreamRow).toBeVisible()
 
     await datastreamRow.locator('[data-testid^="datastream-actions-"]').click()
@@ -265,10 +265,10 @@ test.describe('sites and workspaces', () => {
     await page.getByLabel('Datastream name *').fill(renamedDatastreamName)
     await page.getByRole('button', { name: 'Update datastream' }).click()
 
-    const renamedDatastreamRow = page
-      .locator('tr, .datastream-card')
-      .filter({ hasText: renamedDatastreamName })
-      .first()
+    const renamedDatastreamRow = datastreamEntriesByName(
+      page,
+      renamedDatastreamName
+    ).first()
     await expect(renamedDatastreamRow).toBeVisible()
 
     await renamedDatastreamRow
@@ -278,9 +278,7 @@ test.describe('sites and workspaces', () => {
     await page.locator('input').last().fill('Delete')
     await page.getByRole('button', { name: 'Confirm' }).click()
     await expect(
-      page.locator('tr, .datastream-card').filter({
-        hasText: renamedDatastreamName,
-      })
+      datastreamEntriesByName(page, renamedDatastreamName)
     ).toHaveCount(0)
 
     await page.getByTestId('delete-site-button').click()
@@ -363,9 +361,7 @@ test.describe('sites and workspaces', () => {
       .toBe(true)
     await anonymousPage.goto(`/sites/${fixtures.things.public.id}`)
     await expect(
-      anonymousPage.locator('tr, .datastream-card').filter({
-        hasText: fixtures.datastreams.public.name,
-      })
+      datastreamEntriesByName(anonymousPage, fixtures.datastreams.public.name)
     ).toHaveCount(0)
     await datastreamPrivacyToggle.click()
     await expect
@@ -398,11 +394,10 @@ test.describe('sites and workspaces', () => {
       })
       .toBe(false)
     await anonymousPage.goto(`/sites/${fixtures.things.public.id}`)
-    const anonymousPublicDatastreamRow = anonymousPage
-      .locator('tr, .datastream-card')
-      .filter({
-        hasText: fixtures.datastreams.public.name,
-      })
+    const anonymousPublicDatastreamRow = datastreamEntriesByName(
+      anonymousPage,
+      fixtures.datastreams.public.name
+    )
     await expect(anonymousPublicDatastreamRow).toHaveCount(1)
     await dataVisibilityToggle.click()
     await expect
@@ -417,9 +412,7 @@ test.describe('sites and workspaces', () => {
 
     await anonymousPage.goto(`/sites/${fixtures.things.public.id}`)
     await expect(
-      anonymousPage.locator('tr, .datastream-card').filter({
-        hasText: fixtures.datastreams.public.name,
-      })
+      datastreamEntriesByName(anonymousPage, fixtures.datastreams.public.name)
     ).toHaveCount(1)
 
     await anonymousContext.close()
@@ -431,10 +424,10 @@ test.describe('sites and workspaces', () => {
     await authenticateSession(page, users.owner.email, users.owner.password)
     await page.goto(`/sites/${fixtures.things.public.id}`)
 
-    const datastreamRow = page
-      .locator('tr, .datastream-card')
-      .filter({ hasText: fixtures.datastreams.public.name })
-      .first()
+    const datastreamRow = datastreamEntriesByName(
+      page,
+      fixtures.datastreams.public.name
+    ).first()
     await expect(datastreamRow).toBeVisible()
 
     await datastreamRow
@@ -485,10 +478,10 @@ test.describe('sites and workspaces', () => {
     await expect(page.getByText(fixtures.datastreams.public.name, { exact: true })).toBeVisible()
 
     await page.goto(`/sites/${fixtures.things.public.id}`)
-    const datastreamRow = page
-      .locator('tr, .datastream-card')
-      .filter({ hasText: fixtures.datastreams.public.name })
-      .first()
+    const datastreamRow = datastreamEntriesByName(
+      page,
+      fixtures.datastreams.public.name
+    ).first()
     await datastreamRow
       .locator('[data-testid^="datastream-actions-"]')
       .click()
diff --git a/apps/data-management/src/components/Datastream/DatastreamTable.vue b/apps/data-management/src/components/Datastream/DatastreamTable.vue
index 554ee707..acbef834 100644
--- a/apps/data-management/src/components/Datastream/DatastreamTable.vue
+++ b/apps/data-management/src/components/Datastream/DatastreamTable.vue
@@ -168,8 +168,8 @@
                 !linkedTasksForDatastream(item.id).length
                   ? mdiLinkOff
                   : linkedTasksForDatastream(item.id).length > 1
-                    ? mdiAlertOctagon
-                    : linkedTasksForDatastream(item.id)[0].icon
+                  ? mdiAlertOctagon
+                  : linkedTasksForDatastream(item.id)[0].icon
               "
               size="20"
             />
@@ -180,8 +180,8 @@
                     linkedTasksForDatastream(item.id).length > 1
                       ? 'Multiple task targets'
                       : linkedTasksForDatastream(item.id).length === 1
-                        ? linkedTasksForDatastream(item.id)[0].label
-                        : 'No task connected'
+                      ? linkedTasksForDatastream(item.id)[0].label
+                      : 'No task connected'
                   }}
                 </span>
                 <template v-if="linkedTasksForDatastream(item.id).length === 1">
@@ -815,8 +815,8 @@
               !linkedTasksForDatastream(item.id).length
                 ? mdiLinkOff
                 : linkedTasksForDatastream(item.id).length > 1
-                  ? mdiAlertOctagon
-                  : linkedTasksForDatastream(item.id)[0].icon
+                ? mdiAlertOctagon
+                : linkedTasksForDatastream(item.id)[0].icon
             "
             size="20"
           />
@@ -827,8 +827,8 @@
                   linkedTasksForDatastream(item.id).length > 1
                     ? 'Multiple task targets'
                     : linkedTasksForDatastream(item.id).length === 1
-                      ? linkedTasksForDatastream(item.id)[0].label
-                      : 'No task connected'
+                    ? linkedTasksForDatastream(item.id)[0].label
+                    : 'No task connected'
                 }}
               </span>
               <template v-if="linkedTasksForDatastream(item.id).length === 1">
@@ -1559,7 +1559,9 @@ const monitoringViolationCount = (
 }
 
 const taskPaused = (task: any) =>
-  task.schedule ? task.schedule.enabled === false : false
+  task.schedule
+    ? task.schedule.paused === true || task.schedule.enabled === false
+    : false
 
 const truncateTaskInfoPart = (value: unknown, maxLength = 250) => {
   const text = `${value ?? ''}`.trim()
diff --git a/apps/data-management/src/composables/useMetadata.ts b/apps/data-management/src/composables/useMetadata.ts
index 32da4e43..d1f7be03 100644
--- a/apps/data-management/src/composables/useMetadata.ts
+++ b/apps/data-management/src/composables/useMetadata.ts
@@ -71,24 +71,13 @@ export function useMetadata(localWorkspace?: Ref<Workspace | undefined>) {
       ])
 
       units.value = unitsResponse.filter(
-        (u) => (u.type !== 'Time' && !u.workspaceId) || u.workspaceId === id
+        (u) => u.workspaceId === id || u.type !== 'Time'
       )
 
-      sensors.value = sensorsResponse.filter(
-        (s) => s.workspaceId === null || s.workspaceId === id
-      )
-
-      observedProperties.value = observedPropertiesResponse.filter(
-        (op) => op.workspaceId === null || op.workspaceId === id
-      )
-
-      processingLevels.value = processingLevelsResponse.filter(
-        (p) => p.workspaceId === null || p.workspaceId === id
-      )
-
-      resultQualifiers.value = resultQualifiersResponse.filter(
-        (r) => r.workspaceId === null || r.workspaceId === id
-      )
+      sensors.value = sensorsResponse
+      observedProperties.value = observedPropertiesResponse
+      processingLevels.value = processingLevelsResponse
+      resultQualifiers.value = resultQualifiersResponse
     } catch (error) {
       console.error('Error fetching metadata', error)
     }
diff --git a/apps/data-management/src/utils/__tests__/browseFilters.spec.ts b/apps/data-management/src/utils/__tests__/browseFilters.spec.ts
index 4d4e0f13..c4032140 100644
--- a/apps/data-management/src/utils/__tests__/browseFilters.spec.ts
+++ b/apps/data-management/src/utils/__tests__/browseFilters.spec.ts
@@ -133,6 +133,16 @@ describe('parseBrowseFilterQuery', () => {
     expect(parseBrowseFilterQuery({ drawer: 'maybe' }).drawer).toBeNull()
     expect(parseBrowseFilterQuery({}).drawer).toBeNull()
   })
+
+  it('preserves commas in the search text instead of truncating', () => {
+    const searchText = 'Logan, UT'
+    const query = buildBrowseFilterQuery(
+      {},
+      { searchText, workspaceIds: [], siteTypes: [] }
+    )
+
+    expect(parseBrowseFilterQuery(query).searchText).toBe(searchText)
+  })
 })
 
 describe('buildBrowseFilterQuery', () => {
diff --git a/apps/data-management/src/utils/browseFilters.ts b/apps/data-management/src/utils/browseFilters.ts
index a6fe455f..cd7be7f5 100644
--- a/apps/data-management/src/utils/browseFilters.ts
+++ b/apps/data-management/src/utils/browseFilters.ts
@@ -35,6 +35,13 @@ const queryValues = (value: unknown): string[] => {
     .filter(Boolean)
 }
 
+// Free-text search is a single value that may legitimately contain commas, so
+// it must not be run through queryValues() (which splits on commas).
+const querySingleValue = (value: unknown): string => {
+  const raw = Array.isArray(value) ? value[0] : value
+  return typeof raw === 'string' ? raw.trim() : ''
+}
+
 const uniqueValues = (values: string[]) => [...new Set(values)]
 
 const readQueryValues = (query: LocationQuery, keys: string[]): string[] =>
@@ -62,7 +69,7 @@ export function parseBrowseFilterQuery(
 ): BrowseFilterRouteState {
   return {
     siteIds: readQueryValues(query, ['selectedSite']),
-    searchText: queryValues(query.search)[0] ?? '',
+    searchText: querySingleValue(query.search),
     workspaceIds: readQueryValues(query, ['workspaces']),
     siteTypes: readQueryValues(query, ['siteTypes']),
     drawer: parseBooleanQuery(query.drawer),
diff --git a/django/core/web/migrations/0002_sitetypeicon.py b/django/core/web/migrations/0002_sitetypeicon.py
index c796fb5a..9a9b4291 100644
--- a/django/core/web/migrations/0002_sitetypeicon.py
+++ b/django/core/web/migrations/0002_sitetypeicon.py
@@ -126,7 +126,8 @@ def create_default_site_type_icons(apps, schema_editor):
         [
             site_type_icon(icon=icon, site_types=site_types)
             for icon, site_types in DEFAULT_SITE_TYPE_ICONS
-        ]
+        ],
+        ignore_conflicts=True,
     )
 
 
diff --git a/django/core/web/models.py b/django/core/web/models.py
index 39b4049d..a6fa7479 100644
--- a/django/core/web/models.py
+++ b/django/core/web/models.py
@@ -1,6 +1,6 @@
 import re
 
-from django.db import models
+from django.db import models, transaction
 from django.core.exceptions import ValidationError
 from solo.models import SingletonModel
 
@@ -222,20 +222,7 @@ def clean(self):
                 {"site_types": "Each site type may only appear once for an icon."}
             )
 
-        other_mappings = type(self).objects.exclude(pk=self.pk).values_list(
-            "icon", "site_types"
-        )
-        duplicate_mappings = {
-            normalize_site_type_keyword(site_type): icon
-            for icon, site_types in other_mappings
-            for site_type in site_types
-            if isinstance(site_type, str)
-        }
-        duplicates = [
-            site_type
-            for site_type in self.site_types
-            if normalize_site_type_keyword(site_type) in duplicate_mappings
-        ]
+        duplicates = self._conflicting_keywords()
         if duplicates:
             raise ValidationError(
                 {
@@ -246,6 +233,43 @@ def clean(self):
                 }
             )
 
+    def _conflicting_keywords(self):
+        """Return this icon's keywords that are already mapped to another icon."""
+
+        other_mappings = type(self).objects.exclude(pk=self.pk).values_list(
+            "icon", "site_types"
+        )
+        mapped_keywords = {
+            normalize_site_type_keyword(site_type)
+            for _, site_types in other_mappings
+            for site_type in site_types
+            if isinstance(site_type, str)
+        }
+        return [
+            site_type
+            for site_type in self.site_types
+            if normalize_site_type_keyword(site_type) in mapped_keywords
+        ]
+
+    def save(self, *args, **kwargs):
+        # clean() validates keyword uniqueness, but two concurrent saves can each
+        # pass validation before either commits, mapping the same keyword to two
+        # icons. Lock the other rows and re-check inside the write transaction so
+        # concurrent saves are serialized.
+        with transaction.atomic():
+            list(type(self).objects.select_for_update().values_list("pk", flat=True))
+            duplicates = self._conflicting_keywords()
+            if duplicates:
+                raise ValidationError(
+                    {
+                        "site_types": (
+                            "A site type or keyword can only map to one icon. "
+                            f"Already mapped: {', '.join(duplicates)}."
+                        )
+                    }
+                )
+            super().save(*args, **kwargs)
+
     class Meta:
         ordering = ("id",)
         verbose_name = "Site Type Icon"

From ba2ccf032e7b15e3623d80200ac44380587d7215 Mon Sep 17 00:00:00 2001
From: daniel-slaugh <daniel.slaugh@hotmail.com>
Date: Mon, 6 Jul 2026 09:30:45 -0600
Subject: [PATCH 16/19] Fix e2e test for disabled plot

---
 apps/qc-app/e2e/navigation.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/qc-app/e2e/navigation.spec.ts b/apps/qc-app/e2e/navigation.spec.ts
index 98a39d86..887a30c1 100644
--- a/apps/qc-app/e2e/navigation.spec.ts
+++ b/apps/qc-app/e2e/navigation.spec.ts
@@ -56,9 +56,9 @@ test.describe('navigation', () => {
   }) => {
     await gotoHome(page)
     const editRail = page.getByTestId('nav-rail-item-edit')
-    await expect(editRail).toHaveClass(/v-list-item--disabled/)
+    await expect(editRail).toHaveAttribute('aria-disabled', 'true')
     await plotFirstDatastream(page)
-    await expect(editRail).not.toHaveClass(/v-list-item--disabled/)
+    await expect(editRail).toHaveAttribute('aria-disabled', 'false')
   })
 
   test('unsaved-edits dialog warns before navigating away from Edit', async ({

From 8c722b5ffa879b4211210a0e6e3dd81ab57a59e3 Mon Sep 17 00:00:00 2001
From: daniel-slaugh <daniel.slaugh@hotmail.com>
Date: Mon, 6 Jul 2026 09:54:44 -0600
Subject: [PATCH 17/19] Regenerate contract

---
 django/contracts/openapi/data.openapi.json    | 60 ++++++++++++++++++-
 .../src/generated/data.types.d.ts             | 14 ++++-
 2 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/django/contracts/openapi/data.openapi.json b/django/contracts/openapi/data.openapi.json
index 83507df0..6662d0ee 100644
--- a/django/contracts/openapi/data.openapi.json
+++ b/django/contracts/openapi/data.openapi.json
@@ -5806,6 +5806,56 @@
         "title": "NotificationResponse",
         "type": "object"
       },
+      "ObservationBulkColumnarPostBody": {
+        "properties": {
+          "phenomenonTime": {
+            "items": {
+              "anyOf": [
+                {
+                  "type": "string"
+                },
+                {
+                  "format": "date-time",
+                  "type": "string"
+                }
+              ]
+            },
+            "title": "Phenomenontime",
+            "type": "array"
+          },
+          "result": {
+            "items": {
+              "anyOf": [
+                {
+                  "type": "number"
+                },
+                {
+                  "type": "null"
+                }
+              ]
+            },
+            "title": "Result",
+            "type": "array"
+          },
+          "resultQualifierCodes": {
+            "default": [],
+            "items": {
+              "items": {
+                "type": "string"
+              },
+              "type": "array"
+            },
+            "title": "Resultqualifiercodes",
+            "type": "array"
+          }
+        },
+        "required": [
+          "phenomenonTime",
+          "result"
+        ],
+        "title": "ObservationBulkColumnarPostBody",
+        "type": "object"
+      },
       "ObservationBulkDeleteBody": {
         "properties": {
           "phenomenonTimeEnd": {
@@ -14047,7 +14097,15 @@
           "content": {
             "application/json": {
               "schema": {
-                "$ref": "#/components/schemas/ObservationBulkPostBody"
+                "anyOf": [
+                  {
+                    "$ref": "#/components/schemas/ObservationBulkPostBody"
+                  },
+                  {
+                    "$ref": "#/components/schemas/ObservationBulkColumnarPostBody"
+                  }
+                ],
+                "title": "Data"
               }
             }
           },
diff --git a/packages/hydroserver-ts/src/generated/data.types.d.ts b/packages/hydroserver-ts/src/generated/data.types.d.ts
index bba48155..1f3dcb9b 100644
--- a/packages/hydroserver-ts/src/generated/data.types.d.ts
+++ b/packages/hydroserver-ts/src/generated/data.types.d.ts
@@ -4036,6 +4036,18 @@ export interface components {
             recipientEmails: string[];
             schedule?: components["schemas"]["ScheduleResponse"] | null;
         };
+        /** ObservationBulkColumnarPostBody */
+        ObservationBulkColumnarPostBody: {
+            /** Phenomenontime */
+            phenomenonTime: (string)[];
+            /** Result */
+            result: (number | null)[];
+            /**
+             * Resultqualifiercodes
+             * @default []
+             */
+            resultQualifierCodes: string[][];
+        };
         /** ObservationBulkDeleteBody */
         ObservationBulkDeleteBody: {
             /** Phenomenontimeend */
@@ -6937,7 +6949,7 @@ export interface operations {
         };
         requestBody: {
             content: {
-                "application/json": components["schemas"]["ObservationBulkPostBody"];
+                "application/json": components["schemas"]["ObservationBulkPostBody"] | components["schemas"]["ObservationBulkColumnarPostBody"];
             };
         };
         responses: {

From 0f5ae744d3446831024829a2832d8d752053a6ff Mon Sep 17 00:00:00 2001
From: daniel-slaugh <daniel.slaugh@hotmail.com>
Date: Mon, 6 Jul 2026 15:22:07 -0600
Subject: [PATCH 18/19] Fix collision when loading default site types into
 existing list

---
 .../core/sta/fixtures/default_site_types.yaml | 27 -------------------
 django/core/sta/models/thing.py               |  9 +++++++
 2 files changed, 9 insertions(+), 27 deletions(-)

diff --git a/django/core/sta/fixtures/default_site_types.yaml b/django/core/sta/fixtures/default_site_types.yaml
index 3e6eea71..8aea1974 100644
--- a/django/core/sta/fixtures/default_site_types.yaml
+++ b/django/core/sta/fixtures/default_site_types.yaml
@@ -1,97 +1,70 @@
 ---
 - model: sta.sitetype
-  pk: 1
   fields:
     name: Conveyance
 - model: sta.sitetype
-  pk: 2
   fields:
     name: Stream
 - model: sta.sitetype
-  pk: 3
   fields:
     name: Reservoir / Lake
 - model: sta.sitetype
-  pk: 4
   fields:
     name: Reservoir Release
 - model: sta.sitetype
-  pk: 5
   fields:
     name: Dam / Control Structure
 - model: sta.sitetype
-  pk: 6
   fields:
     name: Groundwater Well
 - model: sta.sitetype
-  pk: 7
   fields:
     name: Irrigation
 - model: sta.sitetype
-  pk: 8
   fields:
     name: Hydropower
 - model: sta.sitetype
-  pk: 9
   fields:
     name: Pump Station
 - model: sta.sitetype
-  pk: 10
   fields:
     name: Spring
 - model: sta.sitetype
-  pk: 11
   fields:
     name: Wetland
 - model: sta.sitetype
-  pk: 12
   fields:
     name: Coastal
 - model: sta.sitetype
-  pk: 13
   fields:
     name: Snow / Ice
 - model: sta.sitetype
-  pk: 14
   fields:
     name: Weather / Atmosphere
 - model: sta.sitetype
-  pk: 15
   fields:
     name: Soil
 - model: sta.sitetype
-  pk: 16
   fields:
     name: Stormwater
 - model: sta.sitetype
-  pk: 17
   fields:
     name: Gaging Station
 - model: sta.sitetype
-  pk: 18
   fields:
     name: Water Quality Station
 - model: sta.sitetype
-  pk: 19
   fields:
     name: Discrete Sample
 - model: sta.sitetype
-  pk: 20
   fields:
     name: Modeled / Calculated
 - model: sta.sitetype
-  pk: 21
   fields:
     name: House
 - model: sta.sitetype
-  pk: 22
   fields:
     name: Land
 - model: sta.sitetype
-  pk: 23
   fields:
     name: Pavement
-- model: sta.sitetype
-  pk: 24
-  fields:
-    name: Site — default fallback
diff --git a/django/core/sta/models/thing.py b/django/core/sta/models/thing.py
index 106555b8..23030012 100644
--- a/django/core/sta/models/thing.py
+++ b/django/core/sta/models/thing.py
@@ -233,8 +233,17 @@ class SamplingFeatureType(models.Model):
     name = models.CharField(max_length=200, unique=True)
 
 
+class SiteTypeManager(models.Manager):
+    def get_by_natural_key(self, name):
+        return self.get(name=name)
+
+
 class SiteType(models.Model):
     name = models.CharField(max_length=200, unique=True)
+    objects = SiteTypeManager()
+
+    def natural_key(self):
+        return (self.name,)
 
 
 class FileAttachmentType(models.Model):

From 9a84a7c64b75de943cf552f61e12e35ff35d2e9a Mon Sep 17 00:00:00 2001
From: daniel-slaugh <daniel.slaugh@hotmail.com>
Date: Mon, 6 Jul 2026 15:56:30 -0600
Subject: [PATCH 19/19] Fix edge case custom site type error

---
 .../src/utils/__tests__/browseFilters.spec.ts | 41 +++++++++++++++++--
 .../src/utils/__tests__/siteTypeIcons.spec.ts | 26 ++++++++++--
 .../src/utils/browseFilters.ts                | 13 +++++-
 .../src/utils/siteTypeIcons.ts                | 15 +++++--
 .../core/web/migrations/0002_sitetypeicon.py  |  1 -
 django/tests/web/test_site_type_icons.py      | 12 ++++--
 6 files changed, 93 insertions(+), 15 deletions(-)

diff --git a/apps/data-management/src/utils/__tests__/browseFilters.spec.ts b/apps/data-management/src/utils/__tests__/browseFilters.spec.ts
index c4032140..9a6cd8cb 100644
--- a/apps/data-management/src/utils/__tests__/browseFilters.spec.ts
+++ b/apps/data-management/src/utils/__tests__/browseFilters.spec.ts
@@ -34,12 +34,21 @@ describe('filterThingMarkers', () => {
       latitude: 41.9,
       longitude: -111.6,
     },
+    {
+      id: 'thing-4',
+      workspaceId: 'workspace-1',
+      name: 'Reservoir Site',
+      siteType: 'Lake, Reservoir, Impoundment',
+      isPrivate: false,
+      latitude: 42.0,
+      longitude: -111.5,
+    },
   ]
 
   it('returns all things when no filters are selected', () => {
     expect(
       filterThingMarkers(things as any, [], []).map((thing) => thing.id)
-    ).toEqual(['thing-1', 'thing-2', 'thing-3'])
+    ).toEqual(['thing-1', 'thing-2', 'thing-3', 'thing-4'])
   })
 
   it('filters things by selected workspaces', () => {
@@ -49,7 +58,7 @@ describe('filterThingMarkers', () => {
       filterThingMarkers(things as any, selectedWorkspaces as any, []).map(
         (thing) => thing.id
       )
-    ).toEqual(['thing-1', 'thing-3'])
+    ).toEqual(['thing-1', 'thing-3', 'thing-4'])
   })
 
   it('filters things by selected site types', () => {
@@ -60,6 +69,14 @@ describe('filterThingMarkers', () => {
     ).toEqual(['thing-1', 'thing-2'])
   })
 
+  it('filters things by custom site types that contain commas', () => {
+    expect(
+      filterThingMarkers(things as any, [], [
+        'Lake, Reservoir, Impoundment',
+      ]).map((thing) => thing.id)
+    ).toEqual(['thing-4'])
+  })
+
   it('requires a thing to match both workspace and site type filters', () => {
     const selectedWorkspaces = [{ id: 'workspace-1', name: 'Workspace 1' }]
 
@@ -111,7 +128,7 @@ describe('parseBrowseFilterQuery', () => {
     })
   })
 
-  it('deduplicates canonical values and accepts comma-separated lists', () => {
+  it('deduplicates canonical values and accepts comma-separated non-site-type lists', () => {
     expect(
       parseBrowseFilterQuery({
         selectedSite: ['thing-1', 'thing-1'],
@@ -129,6 +146,14 @@ describe('parseBrowseFilterQuery', () => {
     })
   })
 
+  it('preserves commas in site types because custom site type names can contain commas', () => {
+    expect(
+      parseBrowseFilterQuery({
+        siteTypes: 'Lake, Reservoir, Impoundment',
+      }).siteTypes
+    ).toEqual(['Lake, Reservoir, Impoundment'])
+  })
+
   it('returns null for an absent or unrecognized drawer state', () => {
     expect(parseBrowseFilterQuery({ drawer: 'maybe' }).drawer).toBeNull()
     expect(parseBrowseFilterQuery({}).drawer).toBeNull()
@@ -143,6 +168,16 @@ describe('parseBrowseFilterQuery', () => {
 
     expect(parseBrowseFilterQuery(query).searchText).toBe(searchText)
   })
+
+  it('preserves comma-containing site types through query round trips', () => {
+    const siteType = 'Lake, Reservoir, Impoundment'
+    const query = buildBrowseFilterQuery(
+      {},
+      { searchText: '', workspaceIds: [], siteTypes: [siteType] }
+    )
+
+    expect(parseBrowseFilterQuery(query).siteTypes).toEqual([siteType])
+  })
 })
 
 describe('buildBrowseFilterQuery', () => {
diff --git a/apps/data-management/src/utils/__tests__/siteTypeIcons.spec.ts b/apps/data-management/src/utils/__tests__/siteTypeIcons.spec.ts
index 207ee548..0411ded3 100644
--- a/apps/data-management/src/utils/__tests__/siteTypeIcons.spec.ts
+++ b/apps/data-management/src/utils/__tests__/siteTypeIcons.spec.ts
@@ -2,10 +2,12 @@ import { describe, expect, it } from 'vitest'
 import {
   mdiGate,
   mdiGauge,
+  mdiHomeOutline,
   mdiHydroPower,
   mdiMapMarker,
   mdiMapMarkerOutline,
   mdiWater,
+  mdiWaves,
   mdiWavesArrowRight,
 } from '@mdi/js'
 import { buildSiteTypeIconRules, getSiteTypeIcon } from '@/utils/siteTypeIcons'
@@ -14,16 +16,28 @@ describe('site type icons', () => {
   const rules = buildSiteTypeIconRules([
     { icon: 'water', siteTypes: ['Stream'] },
     { icon: 'gauge', siteTypes: ['Stream Gage'] },
+    { icon: 'home-outline', siteTypes: ['House', 'Building'] },
+    {
+      icon: 'waves',
+      siteTypes: [
+        'Reservoir / Lake',
+        'Reservoir',
+        'Lake',
+        'Pond',
+        'Pool',
+        'Impoundment',
+      ],
+    },
   ])
 
-  it('uses the longest matching site type keyword', () => {
+  it('prefers a perfect site type keyword match', () => {
     expect(getSiteTypeIcon('Stream Gage', rules)).toBe(mdiGauge)
-    expect(getSiteTypeIcon('Mountain stream', rules)).toBe(mdiWater)
+    expect(getSiteTypeIcon('Stream', rules)).toBe(mdiWater)
   })
 
   it('ignores case and punctuation when matching', () => {
     expect(getSiteTypeIcon('STREAM-GAGE', rules)).toBe(mdiGauge)
-    expect(getSiteTypeIcon('mountain stream', rules)).toBe(mdiWater)
+    expect(getSiteTypeIcon('stream', rules)).toBe(mdiWater)
   })
 
   it('supports site type names with non-ASCII characters', () => {
@@ -34,11 +48,17 @@ describe('site type icons', () => {
     expect(getSiteTypeIcon('Estación Río', localizedRules)).toBe(mdiWater)
   })
 
+  it('uses single-word keyword matches when no perfect match is available', () => {
+    expect(getSiteTypeIcon('Lake, Reservoir, Impoundment', rules)).toBe(mdiWaves)
+    expect(getSiteTypeIcon('Mountain stream', rules)).toBe(mdiWater)
+  })
+
   it.each([
     ['Reservoir Release', 'waves-arrow-right', mdiWavesArrowRight],
     ['Dry Dam Release', 'gate', mdiGate],
     ['Site', 'map-marker', mdiMapMarker],
     ['Hydropower', 'hydro-power', mdiHydroPower],
+    ['House', 'home-outline', mdiHomeOutline],
   ])('maps the short-list site type %s', (siteType, icon, expected) => {
     const shortListRules = buildSiteTypeIconRules([
       { icon, siteTypes: [siteType] },
diff --git a/apps/data-management/src/utils/browseFilters.ts b/apps/data-management/src/utils/browseFilters.ts
index cd7be7f5..7511943d 100644
--- a/apps/data-management/src/utils/browseFilters.ts
+++ b/apps/data-management/src/utils/browseFilters.ts
@@ -42,11 +42,22 @@ const querySingleValue = (value: unknown): string => {
   return typeof raw === 'string' ? raw.trim() : ''
 }
 
+const queryExactValues = (value: unknown): string[] => {
+  const values = Array.isArray(value) ? value : [value]
+
+  return values
+    .map((item) => (typeof item === 'string' ? item.trim() : ''))
+    .filter(Boolean)
+}
+
 const uniqueValues = (values: string[]) => [...new Set(values)]
 
 const readQueryValues = (query: LocationQuery, keys: string[]): string[] =>
   uniqueValues(keys.flatMap((key) => queryValues(query[key])))
 
+const readExactQueryValues = (query: LocationQuery, keys: string[]): string[] =>
+  uniqueValues(keys.flatMap((key) => queryExactValues(query[key])))
+
 const parseBooleanQuery = (value: unknown): boolean | null => {
   const [raw] = queryValues(value)
   if (!raw) return null
@@ -71,7 +82,7 @@ export function parseBrowseFilterQuery(
     siteIds: readQueryValues(query, ['selectedSite']),
     searchText: querySingleValue(query.search),
     workspaceIds: readQueryValues(query, ['workspaces']),
-    siteTypes: readQueryValues(query, ['siteTypes']),
+    siteTypes: readExactQueryValues(query, ['siteTypes']),
     drawer: parseBooleanQuery(query.drawer),
   }
 }
diff --git a/apps/data-management/src/utils/siteTypeIcons.ts b/apps/data-management/src/utils/siteTypeIcons.ts
index 95463c96..f22f8a57 100644
--- a/apps/data-management/src/utils/siteTypeIcons.ts
+++ b/apps/data-management/src/utils/siteTypeIcons.ts
@@ -59,6 +59,8 @@ export interface SiteTypeIconRule {
   icon: string
 }
 
+export const fallbackSiteTypeIcon = mdiMapMarkerOutline
+
 const normalizeSiteType = (siteType: string) =>
   siteType
     .toLowerCase()
@@ -85,9 +87,16 @@ export const getSiteTypeIcon = (
   siteType: string,
   rules: SiteTypeIconRule[]
 ): string => {
-  const normalized = ` ${normalizeSiteType(siteType)} `
+  const normalizedSiteType = normalizeSiteType(siteType)
+  const exactMatch = rules.find(({ keyword }) => keyword === normalizedSiteType)
+  if (exactMatch) return exactMatch.icon
+
+  const normalizedSiteTypeWords = new Set(normalizedSiteType.split(' '))
   return (
-    rules.find(({ keyword }) => normalized.includes(` ${keyword} `))?.icon ??
-    mdiMapMarkerOutline
+    rules.find(
+      ({ keyword }) =>
+        !keyword.includes(' ') && normalizedSiteTypeWords.has(keyword)
+    )?.icon ??
+    fallbackSiteTypeIcon
   )
 }
diff --git a/django/core/web/migrations/0002_sitetypeicon.py b/django/core/web/migrations/0002_sitetypeicon.py
index 9a9b4291..e78df92b 100644
--- a/django/core/web/migrations/0002_sitetypeicon.py
+++ b/django/core/web/migrations/0002_sitetypeicon.py
@@ -40,7 +40,6 @@
     (
         "map-marker",
         [
-            "Site — Default Fallback",
             "Monitoring Site",
             "Monitoring Station",
             "Site",
diff --git a/django/tests/web/test_site_type_icons.py b/django/tests/web/test_site_type_icons.py
index 829731e3..97398485 100644
--- a/django/tests/web/test_site_type_icons.py
+++ b/django/tests/web/test_site_type_icons.py
@@ -43,7 +43,6 @@
     "House",
     "Land",
     "Pavement",
-    "Site — default fallback",
 ]
 
 
@@ -113,7 +112,6 @@ def test_default_site_type_icon_mappings_are_available(client):
     assert {
         "icon": "map-marker",
         "siteTypes": [
-            "Site — Default Fallback",
             "Monitoring Site",
             "Monitoring Station",
             "Site",
@@ -129,13 +127,19 @@ def test_default_site_type_icon_mappings_are_available(client):
 @pytest.mark.django_db
 def test_canonical_site_types_are_first_in_default_icon_mappings():
     first_site_types = [
-        mapping.site_types[0] for mapping in SiteTypeIcon.objects.order_by("id")
+        mapping.site_types[0]
+        for mapping in SiteTypeIcon.objects.exclude(icon="map-marker").order_by("id")
     ]
 
-    assert len(first_site_types) == len(set(first_site_types)) == 24
+    assert len(first_site_types) == len(set(first_site_types)) == 23
     assert {site_type.casefold() for site_type in first_site_types} == {
         site_type.casefold() for site_type in SITE_TYPES
     }
+    assert "Site — Default Fallback" not in {
+        site_type
+        for mapping in SiteTypeIcon.objects.all()
+        for site_type in mapping.site_types
+    }
 
     for mapping in SiteTypeIcon.objects.all():
         assert all(keyword == keyword.title() for keyword in mapping.site_types)