Add lean site summaries for the Sites page

Author: daniel-slaugh

src/api/thingSiteSummaries.ts

@@ -0,0 +1,24 @@
+import type { ThingSiteSummary } from '@/types'
+
+const apiHost = import.meta.env.DEV ? 'http://127.0.0.1:8000' : ''
+
+export async function listThingSiteSummaries(
+  workspaceId: string
+): Promise<ThingSiteSummary[]> {
+  const query = new URLSearchParams({ workspace_id: workspaceId })
+  const response = await fetch(
+    `${apiHost}/api/data/things/site-summaries?${query.toString()}`,
+    {
+      credentials: 'include',
+      headers: {
+        Accept: 'application/json',
+      },
+    }
+  )
+
+  if (!response.ok) {
+    throw new Error(`Failed to load thing site summaries: ${response.status}`)
+  }
+
+  return (await response.json()) as ThingSiteSummary[]
+}

src/components/Maps/OpenLayersMap.vue

@@ -47,6 +47,7 @@ import { MapThing, MapThingWithColor } from '@/types'
 import {
   addColorToMarkers,
   generateMarkerContent,
+  hasThingTags,
   isThingMarker,
 } from '@/utils/maps/markers'
 import OlMap from 'ol/Map'
@@ -187,7 +188,9 @@ const getPopupThing = async (thing: MapThing): Promise<MapThing> => {
 async function updateFeatures() {
   // 1) Rebuild features
   coloredThings.value = props.colorKey
-    ? addColorToMarkers(props.things as Thing[], props.colorKey)
+    ? props.things.every(hasThingTags)
+      ? addColorToMarkers(props.things, props.colorKey)
+      : props.things
     : props.things
 
   const features = coloredThings.value

src/pages/Sites.vue

@@ -141,10 +141,10 @@ import WorkspaceToolbar from '@/components/Workspace/WorkspaceToolbar.vue'
 import hs, {
   PermissionResource,
   PermissionAction,
-  Thing,
 } from '@hydroserver/client'
+import { listThingSiteSummaries } from '@/api/thingSiteSummaries'
 import { addColorToMarkers } from '@/utils/maps/markers'
-import { ThingWithColor } from '@/types'
+import { ThingSiteSummary, ThingSiteSummaryWithColor } from '@/types'
 import { Snackbar } from '@/utils/notifications'
 import { storeToRefs } from 'pinia'
 import { useWorkspaceStore } from '@/store/workspaces'
@@ -162,14 +162,18 @@ const { selectedWorkspace, hasWorkspaces } = storeToRefs(useWorkspaceStore())
 const { setWorkspaces } = useWorkspaceStore()
 const { hasPermission } = useWorkspacePermissions()
 
-const workspaceThings = ref<Thing[]>([])
+const workspaceThings = ref<ThingSiteSummary[]>([])
 const useColors = ref(true)
 const isFiltered = ref(false)
 const isPageLoaded = ref(false)
 const filterCriteria = ref({ key: '', values: [] as string[] })
 const search = ref()
 
-const matchesFilterCriteria = (thing: Thing, key: string, values: string[]) => {
+const matchesFilterCriteria = (
+  thing: ThingSiteSummary,
+  key: string,
+  values: string[]
+) => {
   if (values.length > 0)
     return thing.tags.some(
       (tag) => tag.key === key && values.includes(tag.value)
@@ -178,7 +182,7 @@ const matchesFilterCriteria = (thing: Thing, key: string, values: string[]) => {
   return thing.tags.some((tag) => tag.key === key)
 }
 
-const matchesSearchCriteria = (thing: Thing) => {
+const matchesSearchCriteria = (thing: ThingSiteSummary) => {
   if (!search.value) return true
   const searchLower = search.value.toLowerCase()
   return (
@@ -215,7 +219,7 @@ const filteredThings = computed(() => {
   })
 })
 
-const coloredThings = computed<ThingWithColor[]>(() =>
+const coloredThings = computed<ThingSiteSummaryWithColor[]>(() =>
   addColorToMarkers(filteredThings.value, filterCriteria.value.key)
 )
 
@@ -250,9 +254,7 @@ const onRowClick = (event: Event, item: any) => {
 }
 
 const loadThings = async () => {
-  workspaceThings.value = await hs.things.listAllItems({
-    workspace_id: [selectedWorkspace.value!.id],
-  })
+  workspaceThings.value = await listThingSiteSummaries(selectedWorkspace.value!.id)
 }
 
 onMounted(async () => {
@@ -263,7 +265,7 @@ onMounted(async () => {
     setWorkspaces(workspaceRes)
   } else {
     const [things, workspaceRes] = await Promise.all([
-      hs.things.listAllItems({ workspace_id: [selectedWorkspace.value.id] }),
+      listThingSiteSummaries(selectedWorkspace.value.id),
       hs.workspaces.listAllItems({ is_associated: true, expand_related: true }),
     ])
     setWorkspaces(workspaceRes)

src/types/index.ts

@@ -1,5 +1,10 @@
 import { Thing } from '@hydroserver/client'
 
+export interface ThingTag {
+  key: string
+  value: string
+}
+
 export interface ThingMarker {
   id: string
   workspaceId: string
@@ -10,7 +15,12 @@ export interface ThingMarker {
   longitude: number
 }
 
-export type MapThing = Thing | ThingMarker
+export interface ThingSiteSummary extends ThingMarker {
+  samplingFeatureCode: string
+  tags: ThingTag[]
+}
+
+export type MapThing = Thing | ThingMarker | ThingSiteSummary
 
 export interface ThingWithColor extends Thing {
   color?: {
@@ -21,6 +31,15 @@ export interface ThingWithColor extends Thing {
   tagValue?: string
 }
 
+export interface ThingSiteSummaryWithColor extends ThingSiteSummary {
+  color?: {
+    borderColor: string
+    background: string
+    glyphColor: string
+  }
+  tagValue?: string
+}
+
 export interface ThingMarkerWithColor extends ThingMarker {
   color?: {
     borderColor: string
@@ -30,4 +49,7 @@ export interface ThingMarkerWithColor extends ThingMarker {
   tagValue?: string
 }
 
-export type MapThingWithColor = ThingWithColor | ThingMarkerWithColor
+export type MapThingWithColor =
+  | ThingWithColor
+  | ThingMarkerWithColor
+  | ThingSiteSummaryWithColor

src/utils/maps/markers.ts

@@ -1,8 +1,26 @@
 import { Thing } from '@hydroserver/client'
-import { MapThing, ThingMarker } from '@/types'
+import { MapThing, ThingMarker, ThingSiteSummary } from '@/types'
 import { mapMarkerColors } from '@/utils/materialColors'
 
-export const addColorToMarkers = (things: Thing[], key: string) => {
+type ColorableThing = Thing | ThingSiteSummary
+
+type ColorizedThing<T extends ColorableThing> = T & {
+  color?: {
+    borderColor: string
+    background: string
+    glyphColor: string
+  }
+  tagValue?: string
+}
+
+export function hasThingTags(thing: MapThing): thing is ColorableThing {
+  return 'tags' in thing && Array.isArray(thing.tags)
+}
+
+export const addColorToMarkers = <T extends ColorableThing>(
+  things: T[],
+  key: string
+): Array<ColorizedThing<T>> => {
   let colorIndex = 0
   const colorMap = new Map()