Optimize Visualization Page load

Author: daniel-slaugh

src/api/visualizationBootstrap.ts

@@ -0,0 +1,90 @@
+import {
+  Datastream,
+  ObservedProperty,
+  ProcessingLevel,
+  Thing,
+} from '@hydroserver/client'
+
+const apiHost = import.meta.env.DEV ? 'http://127.0.0.1:8000' : ''
+
+interface VisualizationThingPayload {
+  id: string
+  workspaceId: string
+  name: string
+  samplingFeatureCode: string
+}
+
+interface VisualizationObservedPropertyPayload {
+  id: string
+  name: string
+  code: string
+}
+
+interface VisualizationProcessingLevelPayload {
+  id: string
+  definition?: string | null
+}
+
+interface VisualizationDatastreamPayload {
+  id: string
+  name: string
+  thingId: string
+  observedPropertyId: string
+  processingLevelId: string
+  unitId: string
+  noDataValue: number
+  valueCount?: number | null
+  phenomenonBeginTime?: string | null
+  phenomenonEndTime?: string | null
+  intendedTimeSpacing?: number
+  intendedTimeSpacingUnit?: 'seconds' | 'minutes' | 'hours' | 'days' | null
+}
+
+interface VisualizationBootstrapPayload {
+  things: VisualizationThingPayload[]
+  datastreams: VisualizationDatastreamPayload[]
+  observedProperties: VisualizationObservedPropertyPayload[]
+  processingLevels: VisualizationProcessingLevelPayload[]
+}
+
+export async function getVisualizationBootstrap() {
+  const response = await fetch(`${apiHost}/api/data/datastreams/visualization-bootstrap`, {
+    credentials: 'include',
+    headers: {
+      Accept: 'application/json',
+    },
+  })
+
+  if (!response.ok) {
+    throw new Error(`Failed to load visualization bootstrap: ${response.status}`)
+  }
+
+  const payload = (await response.json()) as VisualizationBootstrapPayload
+
+  const things = payload.things.map((thingPayload) =>
+    Object.assign(new Thing(), thingPayload)
+  )
+  const thingById = new Map(things.map((thing) => [thing.id, thing]))
+
+  const datastreams = payload.datastreams.map((datastreamPayload) =>
+    Object.assign(new Datastream(), {
+      ...datastreamPayload,
+      workspaceId: thingById.get(datastreamPayload.thingId)?.workspaceId ?? '',
+    })
+  )
+  const observedProperties = payload.observedProperties.map(
+    (observedPropertyPayload) =>
+      Object.assign(new ObservedProperty(), observedPropertyPayload)
+  )
+  const processingLevels = payload.processingLevels.map(
+    (processingLevelPayload) =>
+      Object.assign(new ProcessingLevel(), processingLevelPayload)
+  )
+
+  return {
+    things,
+    datastreams,
+    observedProperties,
+    processingLevels,
+  }
+}

src/components/VisualizeData/DataVisDatasetsTable.vue

@@ -240,14 +240,12 @@ import DatastreamInformationCard from './DatastreamInformationCard.vue'
 import { formatTime } from '@/utils/time'
 import { mdiDownload, mdiMagnify, mdiTableColumnWidth } from '@mdi/js'
 
+const dataVisStore = useDataVisStore()
 const {
-  things,
   filteredDatastreams,
   plottedDatastreams,
-  observedProperties,
-  processingLevels,
   tableHeaders: headers,
-} = storeToRefs(useDataVisStore())
+} = storeToRefs(dataVisStore)
 
 const showOnlySelected = ref(false)
 const openInfoCard = ref(false)
@@ -272,7 +270,7 @@ const onRowClick = (event: Event, item: any) => {
   let targetElement = event.target as HTMLElement
   if (targetElement.id && targetElement.id.startsWith('checkbox-')) return
 
-  const foundThing = things.value.find((t) => t.id === item.item.thingId)
+  const foundThing = dataVisStore.thingById.get(item.item.thingId)
   if (foundThing) selectedThing.value = foundThing
 
   const selectedDatastreamId = item.item.id
@@ -286,7 +284,7 @@ const onRowClick = (event: Event, item: any) => {
 }
 
 const openMetadata = (item: Datastream) => {
-  const foundThing = things.value.find((t) => t.id === item.thingId)
+  const foundThing = dataVisStore.thingById.get(item.thingId)
   if (foundThing) selectedThing.value = foundThing
 
   const foundDatastream = filteredDatastreams.value.find(
@@ -310,9 +308,9 @@ const displayDatastreams = computed(() => {
 
 const tableItems = computed(() => {
   return displayDatastreams.value.map((ds) => {
-    const thing = things.value.find((t) => t.id === ds.thingId)
-    const observedProperty = observedProperties.value.find(
-      (p) => p.id === ds.observedPropertyId
+    const thing = dataVisStore.thingById.get(ds.thingId)
+    const observedProperty = dataVisStore.observedPropertyById.get(
+      ds.observedPropertyId
     )
     const observedPropertyCode =
       typeof observedProperty?.code === 'string'
@@ -325,8 +323,8 @@ const tableItems = computed(() => {
     const observedPropertyDisplay = observedPropertyCode
       ? `${observedPropertyName} (${observedPropertyCode})`
       : observedPropertyName
-    const processingLevel = processingLevels.value.find(
-      (p) => p.id === ds.processingLevelId
+    const processingLevel = dataVisStore.processingLevelById.get(
+      ds.processingLevelId
     )
     return {
       ...ds,

src/components/VisualizeData/DataVisFiltersDrawer.vue

@@ -197,6 +197,7 @@ const {
   matchesSelectedThing,
   matchesSelectedWorkspace,
 } = useDataVisStore()
+const dataVisStore = useDataVisStore()
 const {
   things,
   datastreams,
@@ -215,15 +216,11 @@ const searchThing = ref('')
 const searchObservedProperty = ref('')
 const searchProcessingLevel = ref('')
 const totalWorkspacesCount = computed(() => {
-  const thingIds = new Set<string>()
-  datastreams.value.forEach((ds) => {
-    if (ds.thingId) thingIds.add(ds.thingId)
-  })
-
   const workspaceIds = new Set<string>()
-  things.value.forEach((thing) => {
-    if (thingIds.has(thing.id) && thing.workspaceId) {
-      workspaceIds.add(thing.workspaceId)
+  datastreams.value.forEach((ds) => {
+    const workspaceId = dataVisStore.thingById.get(ds.thingId)?.workspaceId
+    if (workspaceId) {
+      workspaceIds.add(workspaceId)
     }
   })
 
@@ -240,33 +237,24 @@ const totalThingsCount = computed(() => {
 })
 
 const totalObservedPropertyNamesCount = computed(() => {
-  const ids = new Set<string>()
-  datastreams.value.forEach((ds) => {
-    if (ds.observedPropertyId) ids.add(ds.observedPropertyId)
-  })
   const names = new Set<string>()
   observedProperties.value.forEach((op) => {
-    if (ids.has(op.id) && op.name) names.add(op.name)
+    if (op.name) names.add(op.name)
   })
   return names.size
 })
 
 const totalProcessingLevelNamesCount = computed(() => {
-  const ids = new Set<string>()
-  datastreams.value.forEach((ds) => {
-    if (ds.processingLevelId) ids.add(ds.processingLevelId)
-  })
   const names = new Set<string>()
   processingLevels.value.forEach((pl) => {
-    if (ids.has(pl.id) && pl.definition) names.add(pl.definition)
+    if (pl.definition) names.add(pl.definition)
   })
   return names.size
 })
 
 // Only show list items that are referenced by at least one datastream
 // Then mutually filter the lists by selected filters.
 const sortedWorkspaces = computed(() => {
-  const thingById = new Map(things.value.map((thing) => [thing.id, thing]))
   const workspaceIds = new Set<string>()
 
   datastreams.value.forEach((ds) => {
@@ -278,7 +266,7 @@ const sortedWorkspaces = computed(() => {
       return
     }
 
-    const workspaceId = thingById.get(ds.thingId)?.workspaceId
+    const workspaceId = dataVisStore.thingById.get(ds.thingId)?.workspaceId
     if (workspaceId) workspaceIds.add(workspaceId)
   })
 
@@ -288,47 +276,65 @@ const sortedWorkspaces = computed(() => {
 })
 
 const sortedProcessingLevelNames = computed(() => {
-  const filteredPLs = processingLevels.value.filter((pl) => {
-    const definition = pl.definition ?? ''
-    return datastreams.value.some(
-      (ds) =>
-        ds.processingLevelId === pl.id &&
-        matchesSelectedThing(ds) &&
-        matchesSelectedObservedProperty(ds) &&
-        matchesSelectedWorkspace(ds)
-    )
+  const names = new Set<string>()
+
+  datastreams.value.forEach((ds) => {
+    if (
+      !matchesSelectedThing(ds) ||
+      !matchesSelectedObservedProperty(ds) ||
+      !matchesSelectedWorkspace(ds)
+    ) {
+      return
+    }
+
+    const definition = dataVisStore.processingLevelById.get(ds.processingLevelId)?.definition
+    if (definition) {
+      names.add(definition)
+    }
   })
-  const names = filteredPLs.map((pl) => pl.definition)
-  return [...new Set(names)].sort()
+
+  return [...names].sort()
 })
 
 const sortedThings = computed(() => {
+  const thingIds = new Set<string>()
+
+  datastreams.value.forEach((ds) => {
+    if (
+      !matchesSelectedObservedProperty(ds) ||
+      !matchesSelectedProcessingLevel(ds) ||
+      !matchesSelectedWorkspace(ds)
+    ) {
+      return
+    }
+
+    thingIds.add(ds.thingId)
+  })
+
   return things.value
-    .filter((thing) =>
-      datastreams.value.some(
-        (ds) =>
-          ds.thingId === thing.id &&
-          matchesSelectedObservedProperty(ds) &&
-          matchesSelectedProcessingLevel(ds) &&
-          matchesSelectedWorkspace(ds)
-      )
-    )
+    .filter((thing) => thingIds.has(thing.id))
     .sort((a, b) => a.name.localeCompare(b.name))
 })
 
 const sortedObservedPropertyNames = computed(() => {
-  const filteredProperties = observedProperties.value.filter((op) =>
-    datastreams.value.some(
-      (ds) =>
-        ds.observedPropertyId === op.id &&
-        matchesSelectedThing(ds) &&
-        matchesSelectedProcessingLevel(ds) &&
-        matchesSelectedWorkspace(ds)
-    )
-  )
-
-  const names = filteredProperties.map((pl) => pl.name)
-  return [...new Set(names)].sort()
+  const names = new Set<string>()
+
+  datastreams.value.forEach((ds) => {
+    if (
+      !matchesSelectedThing(ds) ||
+      !matchesSelectedProcessingLevel(ds) ||
+      !matchesSelectedWorkspace(ds)
+    ) {
+      return
+    }
+
+    const name = dataVisStore.observedPropertyById.get(ds.observedPropertyId)?.name
+    if (name) {
+      names.add(name)
+    }
+  })
+
+  return [...names].sort()
 })
 
 const emit = defineEmits<{

src/pages/VisualizeData.vue

@@ -35,7 +35,7 @@ import DataVisNavRail from '@/components/VisualizeData/DataVisNavRail.vue'
 import DataVisDatasetsTable from '@/components/VisualizeData/DataVisDatasetsTable.vue'
 import DataVisualizationCard from '@/components/VisualizeData/DataVisualizationCard.vue'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
-import hs from '@hydroserver/client'
+import { getVisualizationBootstrap } from '@/api/visualizationBootstrap'
 import { useDataVisStore } from '@/store/dataVisualization'
 import { useSidebarStore } from '@/store/useSidebar'
 import { storeToRefs } from 'pinia'
@@ -366,22 +366,19 @@ const loading = ref(true)
 
 onMounted(async () => {
   try {
-    const [
-      thingsResponse,
-      datastreamsResponse,
-      processingLevelsResponse,
-      observedPropertiesResponse,
-    ] = await Promise.all([
-      hs.things.listAllItems(),
-      hs.datastreams.listAllItems(),
-      hs.processingLevels.listAllItems(),
-      hs.observedProperties.listAllItems(),
-    ])
-
-    things.value = thingsResponse
-    datastreams.value = datastreamsResponse
-    processingLevels.value = processingLevelsResponse
-    observedProperties.value = observedPropertiesResponse
+    const hasBootstrapData =
+      things.value.length > 0 ||
+      datastreams.value.length > 0 ||
+      processingLevels.value.length > 0 ||
+      observedProperties.value.length > 0
+
+    if (!hasBootstrapData) {
+      const bootstrap = await getVisualizationBootstrap()
+      things.value = bootstrap.things
+      datastreams.value = bootstrap.datastreams
+      processingLevels.value = bootstrap.processingLevels
+      observedProperties.value = bootstrap.observedProperties
+    }
   } catch (error) {
     Snackbar.error('Unable to fetch data from the API.')
     console.error('Unable to fetch data from the API:', error)