From 3b68dd97d36e1c9246399bdee835057f41585cd3 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Wed, 11 Dec 2024 12:41:02 +0100
Subject: [PATCH 01/32] Add support for dashboard.json

---
 src/components/general/DashboardDisplay.vue |  62 ++++------
 src/components/general/DashboardItems.vue   |  65 +++++++++++
 src/lib/component-settings/types.ts         |  73 ++++++++++++
 src/lib/dashboard/types.ts                  |  24 ++++
 src/lib/topology/dashboard.ts               | 118 +++++++++-----------
 src/lib/topology/nodes.ts                   |   2 +-
 src/stores/componentSettings.ts             |  29 +++++
 src/stores/dashboards.ts                    |  27 +++++
 src/views/DashboardView.vue                 |  16 +--
 9 files changed, 304 insertions(+), 112 deletions(-)
 create mode 100644 src/components/general/DashboardItems.vue
 create mode 100644 src/lib/component-settings/types.ts
 create mode 100644 src/lib/dashboard/types.ts
 create mode 100644 src/stores/componentSettings.ts
 create mode 100644 src/stores/dashboards.ts

diff --git a/src/components/general/DashboardDisplay.vue b/src/components/general/DashboardDisplay.vue
index fd8ab6710..449eb3ea2 100644
--- a/src/components/general/DashboardDisplay.vue
+++ b/src/components/general/DashboardDisplay.vue
@@ -1,39 +1,27 @@
 <template>
   <div class="dashboard-container ga-3 pa-3">
-    <template v-for="panel in panelItems">
-      <v-card
-        v-if="panel.component"
-        :style="{ gridArea: panel.id }"
-        class="d-flex flex-column"
-        density="compact"
-      >
-        <component
-          class="overflow-auto"
-          :is="panel.component"
-          v-bind="panel.props"
-          :topologyNode="panel.node"
-        />
-      </v-card>
-      <v-alert
-        v-else
-        :title="`${panel.id} not implemented`"
-        :style="{ gridArea: panel.id }"
-        class="ma-2"
-      />
+    <template v-for="group in groups">
+      <template v-for="element in group.elements">
+        <v-card
+          :style="{ gridArea: element.gridTemplateArea }"
+          class="d-flex flex-column"
+          density="compact"
+        >
+          <DashboardItems
+            :items="element.items"
+            :topologyMap="topologyMap"
+          />
+        </v-card>
+      </template>
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { getComponentWithPropsForNode } from '@/lib/topology/dashboard'
-import type { TopologyNode } from '@deltares/fews-pi-requests'
+import type { Dashboard } from '@/lib/dashboard/types'
+import { createTopologyMap, getTopologyNodes } from '@/lib/topology'
 import { computed, watch } from 'vue'
-
-interface Dashboard {
-  id: string
-  css: string
-  panels: TopologyNode[]
-}
+import DashboardItems from '@/components/general/DashboardItems.vue'
 
 interface Props {
   dashboard: Dashboard
@@ -41,18 +29,10 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const panelItems = computed(() => {
-  return props.dashboard.panels.map((panel) => {
-    const { component, props } = getComponentWithPropsForNode(panel)
-    return {
-      id: panel.id,
-      title: panel.name,
-      node: panel,
-      component,
-      props,
-    }
-  })
-})
+const groups = computed(() => props.dashboard.groups)
+
+const topologyNodes = await getTopologyNodes()
+const topologyMap = createTopologyMap(topologyNodes)
 
 function loadCss(url: string) {
   if (!document.querySelector(`link[href="${url}"]`)) {
@@ -71,7 +51,7 @@ function removeCss(url: string) {
 }
 
 watch(
-  () => props.dashboard.css,
+  () => props.dashboard.cssTemplate,
   (newCss, oldCss) => {
     if (oldCss) removeCss(oldCss)
     loadCss(newCss)
diff --git a/src/components/general/DashboardItems.vue b/src/components/general/DashboardItems.vue
new file mode 100644
index 000000000..838ecd49a
--- /dev/null
+++ b/src/components/general/DashboardItems.vue
@@ -0,0 +1,65 @@
+<template>
+  <v-tabs
+    v-model="tab"
+    v-if="items.length > 1"
+    color="primary"
+    align-tabs="center"
+    class="flex-0-0"
+  >
+    <v-tab v-for="item in items">
+      {{ item.component }}
+    </v-tab>
+  </v-tabs>
+
+  <template v-for="(item, i) in componentItems">
+    <component
+      v-if="tab === i"
+      class="overflow-auto flex-1-1"
+      :is="item.component"
+      v-bind="item.componentProps"
+      :topologyNode="item.topologyNode"
+    />
+  </template>
+</template>
+
+<script setup lang="ts">
+import type { DashboardItem } from '@/lib/dashboard/types'
+import {
+  getComponentForName,
+  getComponentPropsForNode,
+} from '@/lib/topology/dashboard'
+import type { TopologyNode } from '@deltares/fews-pi-requests'
+import { computed, ref, watch } from 'vue'
+
+interface Props {
+  items: DashboardItem[]
+  topologyMap: Map<string, TopologyNode>
+}
+
+const props = defineProps<Props>()
+
+const tab = ref(0)
+
+function getTopologyNodeById(id: string) {
+  return props.topologyMap.get(id)
+}
+
+const componentItems = computed(() => {
+  return props.items.map((item) => {
+    const componentName = item.component
+    const topologyNode = getTopologyNodeById(item.topologyNodeId)
+    const component = getComponentForName(componentName)
+    const componentProps = getComponentPropsForNode(componentName, topologyNode)
+    return {
+      component,
+      componentProps,
+      componentName,
+      topologyNode,
+    }
+  })
+})
+
+watch(componentItems, () => {
+  tab.value = 0
+})
+</script>
diff --git a/src/lib/component-settings/types.ts b/src/lib/component-settings/types.ts
new file mode 100644
index 000000000..6df6ada1f
--- /dev/null
+++ b/src/lib/component-settings/types.ts
@@ -0,0 +1,73 @@
+import type {
+  FillPaintProps,
+  LinePaintProps,
+} from 'maplibre-gl'
+
+type PaintMapping = {
+  fill: FillPaintProps
+  line: LinePaintProps
+}
+
+export interface WebocComponentSettingsResponse {
+  webocComponentSettings: WebocComponentSettings[]
+}
+
+export interface WebocComponentSettings {
+  id: string
+  declarations?: Declarations
+  map: MapSettings
+  chart: ChartSettings
+}
+
+export interface ChartSettings {
+  chartEnabled: boolean
+  tableEnabled: boolean
+  metaDataEnabled: boolean
+  downloadEnabled: boolean
+}
+
+export interface Declarations {
+  baseMaps: BaseMap[]
+  overlays: Overlays
+}
+
+export interface BaseMap {
+  id: string
+  name: string
+  // TODO: Add layer specification
+}
+
+export interface Overlays {
+  locations: OverlayLocation[]
+}
+
+export interface OverlayLocation {
+  id: string
+  name: string
+  locationSet: string
+  type: keyof PaintMapping
+  paint: PaintMapping[OverlayLocation['type']]
+}
+
+export interface MapSettings {
+  graphPanelEnabled?: boolean
+  locationSearchEnabled: boolean
+  chartEnabled?: boolean
+  tableEnabled?: boolean
+  metaDataEnabled?: boolean
+  downloadEnabled?: boolean
+  baseMaps: BaseMaps
+  overlays: DeclarationReference[]
+  chartPanelEnabled?: boolean
+}
+
+export interface BaseMaps {
+  defaultLightBaseMap: string
+  defaultDarkBaseMap: string
+  additionalMaps: DeclarationReference[]
+}
+
+export interface DeclarationReference {
+  id: string
+  visible: boolean
+}
diff --git a/src/lib/dashboard/types.ts b/src/lib/dashboard/types.ts
new file mode 100644
index 000000000..760b23fc4
--- /dev/null
+++ b/src/lib/dashboard/types.ts
@@ -0,0 +1,24 @@
+export interface DashboardsResponse {
+  dashboards: Dashboard[]
+}
+
+export interface Dashboard {
+  id: string
+  cssTemplate: string
+  groups: DashboardGroup[]
+}
+
+export interface DashboardGroup {
+  elements: DashboardElement[]
+}
+
+export interface DashboardElement {
+  gridTemplateArea: string
+  items: DashboardItem[]
+}
+
+export interface DashboardItem {
+  topologyNodeId: string
+  component: string
+  componentSettingsId: string
+}
diff --git a/src/lib/topology/dashboard.ts b/src/lib/topology/dashboard.ts
index 325521cb1..c41c6d16b 100644
--- a/src/lib/topology/dashboard.ts
+++ b/src/lib/topology/dashboard.ts
@@ -1,13 +1,5 @@
 import type { TopologyNode } from '@deltares/fews-pi-requests'
 import { defineAsyncComponent, type Component } from 'vue'
-import {
-  nodeHasCharts,
-  nodeHasDataDownload,
-  nodeHasMap,
-  nodeHasReports,
-  nodeHasSchematicStatusDisplay,
-  nodeHasSystemMonitor,
-} from './nodes'
 import { ComponentProps } from '@/lib/utils/types'
 
 const SpatialDisplay = defineAsyncComponent(
@@ -29,83 +21,83 @@ const SystemMonitorDisplayView = defineAsyncComponent(
   () => import('@/views/SystemMonitorDisplayView.vue'),
 )
 
-export interface ComponentWithProps<T extends Component> {
-  component: T
-  props: ComponentProps<T>
+const componentNameToComponentMap = {
+  map: SpatialDisplay,
+  chart: TimeSeriesDisplay,
+  'data-download': DataDownloadDisplayView,
+  reports: ReportsDisplayView,
+  'ssd': SchematicStatusDisplay,
+  'system-monitor': SystemMonitorDisplayView,
+} satisfies Record<string, Component>
+
+type ComponentName = keyof typeof componentNameToComponentMap
+
+type PropsForComponentName<T extends ComponentName> = ComponentProps<
+  (typeof componentNameToComponentMap)[T]
+>
+
+function componentNameIsSupported(
+  componentName: string,
+): componentName is ComponentName {
+  return componentName in componentNameToComponentMap
 }
 
-export function getComponentWithPropsForNode(node: TopologyNode | undefined) {
-  if (!node) {
-    return {
-      component: undefined,
-      props: undefined,
-    }
-  }
+export function getComponentForName(
+  componentName: string,
+): Component | undefined {
+  if (!componentNameIsSupported(componentName)) return
+  return componentNameToComponentMap[componentName]
+}
 
-  if (nodeHasMap(node)) {
-    const result: ComponentWithProps<typeof SpatialDisplay> = {
-      component: SpatialDisplay,
-      props: {
-        layerName: node.gridDisplaySelection?.plotId,
-        filterIds: node.filterIds,
-      },
-    }
-    return result
-  }
+export function getComponentPropsForNode(
+  componentName: string,
+  node?: TopologyNode,
+): PropsForComponentName<ComponentName> | undefined {
+  if (!node) return
+  if (!componentNameIsSupported(componentName)) return
 
-  if (nodeHasCharts(node)) {
-    const result: ComponentWithProps<typeof TimeSeriesDisplay> = {
-      component: TimeSeriesDisplay,
-      props: {
-        nodeId: node.id,
-      },
+  if (componentName === 'map') {
+    const result: PropsForComponentName<'map'> = {
+      layerName: node.gridDisplaySelection?.plotId,
+      filterIds: node.filterIds,
     }
     return result
   }
 
-  if (nodeHasDataDownload(node)) {
-    const result: ComponentWithProps<typeof DataDownloadDisplayView> = {
-      component: DataDownloadDisplayView,
-      props: {
-        nodeId: node.id,
-        topologyNode: node,
-      },
+  if (componentName === 'chart') {
+    const result: PropsForComponentName<'chart'> = {
+      nodeId: node.id,
     }
     return result
   }
 
-  if (nodeHasReports(node)) {
-    const result: ComponentWithProps<typeof ReportsDisplayView> = {
-      component: ReportsDisplayView,
-      props: {
-        topologyNode: node,
-      },
+  if (componentName === 'data-download') {
+    const result: PropsForComponentName<'data-download'> = {
+      nodeId: node.id,
+      topologyNode: node,
     }
     return result
   }
 
-  if (nodeHasSchematicStatusDisplay(node)) {
-    const result: ComponentWithProps<typeof SchematicStatusDisplay> = {
-      component: SchematicStatusDisplay,
-      props: {
-        panelId: node.scadaPanelId,
-        groupId: node.id,
-        objectId: '',
-        showDateTimeSlider: false,
-      },
+  if (componentName === 'reports') {
+    const result: PropsForComponentName<'reports'> = {
+      topologyNode: node,
     }
     return result
   }
-  if (nodeHasSystemMonitor(node)) {
-    const result: ComponentWithProps<typeof SystemMonitorDisplayView> = {
-      component: SystemMonitorDisplayView,
-      props: {},
+
+  if (componentName === 'ssd') {
+    const result: PropsForComponentName<'ssd'> = {
+      panelId: node.scadaPanelId,
+      groupId: node.id,
+      objectId: '',
+      showDateTimeSlider: false,
     }
     return result
   }
 
-  return {
-    component: undefined,
-    props: undefined,
+  if (componentName === 'system-monitor') {
+    const result: PropsForComponentName<'system-monitor'> = {}
+    return result
   }
 }
diff --git a/src/lib/topology/nodes.ts b/src/lib/topology/nodes.ts
index de6f92a42..93bcfd109 100644
--- a/src/lib/topology/nodes.ts
+++ b/src/lib/topology/nodes.ts
@@ -165,5 +165,5 @@ export function nodeHasWebDisplay(node: TopologyNode) {
 }
 
 export function nodeHasDashboard(node: TopologyNode) {
-  return node.id.startsWith('dashboard') && node.topologyNodes !== undefined
+  return node.id.includes('dashboard') && node.topologyNodes !== undefined
 }
diff --git a/src/stores/componentSettings.ts b/src/stores/componentSettings.ts
new file mode 100644
index 000000000..a8eee8495
--- /dev/null
+++ b/src/stores/componentSettings.ts
@@ -0,0 +1,29 @@
+import { getResourcesStaticUrl } from '@/lib/fews-config'
+import { defineStore } from 'pinia'
+import type {
+  WebocComponentSettings,
+  WebocComponentSettingsResponse,
+} from '@/lib/component-settings/types'
+
+interface State {
+  settings: WebocComponentSettings[]
+}
+
+export const useComponentSettingsStore = defineStore('componentSettings', {
+  state: (): State => ({
+    settings: [],
+  }),
+  actions: {
+    async fetchState() {
+      if (this.settings.length > 0) return
+
+      const url = getResourcesStaticUrl('webocComponentSettings.json')
+      const response = await fetch(url)
+      const data: WebocComponentSettingsResponse = await response.json()
+      this.settings = data.webocComponentSettings
+    },
+    getSettingsById(id: string) {
+      return this.settings.find((s) => s.id === id)
+    },
+  },
+})
diff --git a/src/stores/dashboards.ts b/src/stores/dashboards.ts
new file mode 100644
index 000000000..239941edd
--- /dev/null
+++ b/src/stores/dashboards.ts
@@ -0,0 +1,27 @@
+import { getResourcesStaticUrl } from '@/lib/fews-config'
+import { defineStore } from 'pinia'
+import type { Dashboard, DashboardsResponse } from '@/lib/dashboard/types'
+
+interface State {
+  dashboards: Dashboard[]
+}
+
+export const useDashboardsStore = defineStore('dashboards', {
+  state: (): State => ({
+    dashboards: [],
+  }),
+  actions: {
+    async fetchState() {
+      const url = getResourcesStaticUrl('dashboards.json')
+      const response = await fetch(url)
+      const data: DashboardsResponse = await response.json()
+      this.dashboards = data.dashboards
+      this.dashboards.forEach((dashboard) => {
+        dashboard.cssTemplate = getResourcesStaticUrl(dashboard.cssTemplate)
+      })
+    },
+    getDashboardById(id: string): Dashboard | undefined {
+      return this.dashboards.find((d) => d.id === id)
+    },
+  },
+})
diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue
index bcc7169a3..f5ded4db3 100644
--- a/src/views/DashboardView.vue
+++ b/src/views/DashboardView.vue
@@ -5,9 +5,10 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useComponentSettingsStore } from '@/stores/componentSettings'
 import DashboardDisplay from '@/components/general/DashboardDisplay.vue'
 import type { TopologyNode } from '@deltares/fews-pi-requests'
-import { getResourcesStaticUrl } from '@/lib/fews-config'
+import { useDashboardsStore } from '@/stores/dashboards'
 
 interface Props {
   topologyNode?: TopologyNode
@@ -15,13 +16,14 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const componentSettingsStore = useComponentSettingsStore()
+componentSettingsStore.fetchState()
+
+const dashboardsStore = useDashboardsStore()
+dashboardsStore.fetchState()
+
 const dashboard = computed(() => {
   if (!props.topologyNode) return
-  const css = getResourcesStaticUrl(`${props.topologyNode.id}.css`)
-  return {
-    id: props.topologyNode.id,
-    css,
-    panels: props.topologyNode.topologyNodes ?? [],
-  }
+  return dashboardsStore.getDashboardById(props.topologyNode.id)
 })
 </script>

From 2e875ff90411d9af70c9ca0169177b0a7d86d701 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Mon, 16 Dec 2024 10:46:46 +0100
Subject: [PATCH 02/32] Put topologyNodes in store

---
 src/components/general/DashboardDisplay.vue |  9 +---
 src/components/general/DashboardItems.vue   |  9 ++--
 src/lib/topology/index.ts                   | 46 ++++++++++++-------
 src/stores/topologyNodes.ts                 | 50 +++++++++++++++++++++
 src/views/TopologyDisplayView.vue           | 46 ++++++++-----------
 5 files changed, 103 insertions(+), 57 deletions(-)
 create mode 100644 src/stores/topologyNodes.ts

diff --git a/src/components/general/DashboardDisplay.vue b/src/components/general/DashboardDisplay.vue
index 449eb3ea2..570da93f6 100644
--- a/src/components/general/DashboardDisplay.vue
+++ b/src/components/general/DashboardDisplay.vue
@@ -7,10 +7,7 @@
           class="d-flex flex-column"
           density="compact"
         >
-          <DashboardItems
-            :items="element.items"
-            :topologyMap="topologyMap"
-          />
+          <DashboardItems :items="element.items" />
         </v-card>
       </template>
     </template>
@@ -19,7 +16,6 @@
 
 <script setup lang="ts">
 import type { Dashboard } from '@/lib/dashboard/types'
-import { createTopologyMap, getTopologyNodes } from '@/lib/topology'
 import { computed, watch } from 'vue'
 import DashboardItems from '@/components/general/DashboardItems.vue'
 
@@ -31,9 +27,6 @@ const props = defineProps<Props>()
 
 const groups = computed(() => props.dashboard.groups)
 
-const topologyNodes = await getTopologyNodes()
-const topologyMap = createTopologyMap(topologyNodes)
-
 function loadCss(url: string) {
   if (!document.querySelector(`link[href="${url}"]`)) {
     const link = document.createElement('link')
diff --git a/src/components/general/DashboardItems.vue b/src/components/general/DashboardItems.vue
index 838ecd49a..ddcf6d830 100644
--- a/src/components/general/DashboardItems.vue
+++ b/src/components/general/DashboardItems.vue
@@ -28,26 +28,23 @@ import {
   getComponentForName,
   getComponentPropsForNode,
 } from '@/lib/topology/dashboard'
-import type { TopologyNode } from '@deltares/fews-pi-requests'
+import { useTopologyNodesStore } from '@/stores/topologyNodes';
 import { computed, ref, watch } from 'vue'
 
 interface Props {
   items: DashboardItem[]
-  topologyMap: Map<string, TopologyNode>
 }
 
 const props = defineProps<Props>()
 
 const tab = ref(0)
 
-function getTopologyNodeById(id: string) {
-  return props.topologyMap.get(id)
-}
+const topologyNodesStore = useTopologyNodesStore()
 
 const componentItems = computed(() => {
   return props.items.map((item) => {
     const componentName = item.component
-    const topologyNode = getTopologyNodeById(item.topologyNodeId)
+    const topologyNode = topologyNodesStore.getNodeById(item.topologyNodeId)
     const component = getComponentForName(componentName)
     const componentProps = getComponentPropsForNode(componentName, topologyNode)
     return {
diff --git a/src/lib/topology/index.ts b/src/lib/topology/index.ts
index cfb39e52d..332278491 100644
--- a/src/lib/topology/index.ts
+++ b/src/lib/topology/index.ts
@@ -1,5 +1,5 @@
 export * from './locations'
-import { configManager } from '../../services/application-config/index.ts'
+import { configManager } from '@/services/application-config/index.ts'
 import {
   PiWebserviceProvider,
   type TopologyNode,
@@ -7,27 +7,43 @@ import {
 import { createTransformRequestFn } from '@/lib/requests/transformRequest'
 
 /**
- * Recursively updates a topology map where each node is stored by its id.
+ * Creates hash maps for topology nodes.
+ *
+ * This function generates two hash maps:
+ * 1. idToNodeMap: Maps node IDs to their corresponding TopologyNode objects.
+ * 2. childIdToParentNodeMap: Maps child node IDs to their parent node.
  *
  * @param {TopologyNode[] | undefined} nodes - An array of TopologyNode objects or undefined.
- * @param {Map<string, TopologyNode>} topologyMap - A Map used to store the topology nodes.
+ * @returns {{ idToNodeMap: Map<string, TopologyNode>, childIdToParentNodeMap: Map<string, string> }} - An object containing the two hash maps.
  */
-export function createTopologyMap(nodes: TopologyNode[] | undefined) {
-  const topologyMap = new Map<string, TopologyNode>()
-
-  function recursiveCreateTopologyMap(
-    nodes: TopologyNode[] | undefined,
-    topologyMap: Map<string, TopologyNode>,
-  ) {
-    if (nodes === undefined) return undefined
+export function createTopologyHashMaps(nodes: TopologyNode[] | undefined): {
+  idToNodeMap: Map<string, TopologyNode>
+  childIdToParentNodeMap: Map<string, TopologyNode>
+} {
+  const idToNodeMap = new Map<string, TopologyNode>()
+  const childIdToParentNodeMap = new Map<string, TopologyNode>()
+
+  function recursivelyFillMaps(nodes: TopologyNode[]) {
     for (const node of nodes) {
-      topologyMap.set(node.id, node)
-      recursiveCreateTopologyMap(node.topologyNodes, topologyMap)
+      idToNodeMap.set(node.id, node)
+
+      if (node.topologyNodes) {
+        node.topologyNodes.forEach((childNode) => {
+          childIdToParentNodeMap.set(childNode.id, node)
+        })
+        recursivelyFillMaps(node.topologyNodes)
+      }
     }
   }
 
-  recursiveCreateTopologyMap(nodes, topologyMap)
-  return topologyMap
+  if (nodes) {
+    recursivelyFillMaps(nodes)
+  }
+
+  return {
+    idToNodeMap,
+    childIdToParentNodeMap,
+  }
 }
 
 /**
diff --git a/src/stores/topologyNodes.ts b/src/stores/topologyNodes.ts
new file mode 100644
index 000000000..522ed0c2f
--- /dev/null
+++ b/src/stores/topologyNodes.ts
@@ -0,0 +1,50 @@
+import { createTopologyHashMaps, getTopologyNodes } from '@/lib/topology'
+import { TopologyNode } from '@deltares/fews-pi-requests'
+import { defineStore } from 'pinia'
+import { ref, watchEffect } from 'vue'
+
+export const useTopologyNodesStore = defineStore('topologyNodes', () => {
+  const nodes = ref<TopologyNode[]>([])
+  const _idToNodeMap = ref<Map<string, TopologyNode>>(new Map())
+  const _childIdToParentNodeMap = ref<Map<string, TopologyNode>>(new Map())
+  const subNodes = ref<TopologyNode[]>([])
+
+  watchEffect(() => {
+    const { idToNodeMap, childIdToParentNodeMap } = createTopologyHashMaps(
+      nodes.value,
+    )
+    _idToNodeMap.value = idToNodeMap
+    _childIdToParentNodeMap.value = childIdToParentNodeMap
+  })
+
+  function getSubNodesForIds(nodeIds?: string[]) {
+    if (!nodeIds) return []
+
+    return nodeIds.flatMap((nodeId) => {
+      const node = _idToNodeMap.value.get(nodeId)
+      return node ? [node] : []
+    })
+  }
+
+  function getNodeById(nodeId: string) {
+    return _idToNodeMap.value.get(nodeId)
+  }
+
+  function getParentNodeById(childNodeId: string) {
+    return _childIdToParentNodeMap.value.get(childNodeId)
+  }
+
+  watchEffect(async () => {
+    nodes.value = await getTopologyNodes()
+  })
+
+  return {
+    nodes,
+    subNodes,
+    _idToNodeMap,
+    _childIdToParentNodeMap,
+    getSubNodesForIds,
+    getNodeById,
+    getParentNodeById,
+  }
+})
diff --git a/src/views/TopologyDisplayView.vue b/src/views/TopologyDisplayView.vue
index 240add29a..3bc27b618 100644
--- a/src/views/TopologyDisplayView.vue
+++ b/src/views/TopologyDisplayView.vue
@@ -90,7 +90,6 @@ import WorkflowsControl from '@/components/workflows/WorkflowsControl.vue'
 import LeafNodeButtons from '@/components/general/LeafNodeButtons.vue'
 
 import type { ColumnItem } from '@/components/general/ColumnItem'
-import { createTopologyMap, getTopologyNodes } from '@/lib/topology'
 import { useConfigStore } from '@/stores/config'
 import { useUserSettingsStore } from '@/stores/userSettings'
 import { useWorkflowsStore } from '@/stores/workflows'
@@ -115,6 +114,7 @@ import {
   displayTabsForNode,
   type DisplayTab,
 } from '@/lib/topology/displayTabs.js'
+import { useTopologyNodesStore } from '@/stores/topologyNodes'
 
 interface Props {
   topologyId?: string
@@ -149,7 +149,7 @@ watch(active, () => {
 const activeNode = computed(() => {
   if (!active.value) return
 
-  const node = topologyMap.value.get(active.value)
+  const node = topologyNodesStore.getNodeById(active.value)
   if (node?.topologyNodes) {
     const leafNode = node.topologyNodes.find(
       (n) => n.id === nodesStore.activeNodeId,
@@ -240,23 +240,13 @@ const showActiveThresholdCrossingsForFilters = computed(() => {
   )
 })
 
-const nodes = ref<TopologyNode[]>()
-const topologyMap = ref(new Map<string, TopologyNode>())
-const subNodes = computed<TopologyNode[] | undefined>(
-  () =>
-    topologyDisplayNodes.value?.flatMap((nodeId) => {
-      const node = topologyMap.value.get(nodeId)
-      return node ? [node] : []
-    }) ?? nodes.value,
+const topologyNodesStore = useTopologyNodesStore()
+const subNodes = computed(() =>
+  topologyNodesStore.getSubNodesForIds(topologyDisplayNodes.value),
 )
-
-getTopologyNodes().then((response) => {
-  nodes.value = response
-  topologyMap.value = createTopologyMap(nodes.value)
+watch(topologyNodesStore.nodes, () => {
   const to = reroute(route)
-  if (to) {
-    router.push(to)
-  }
+  if (to) router.push(to)
 })
 
 function updateItems(): void {
@@ -289,7 +279,7 @@ watchEffect(() => {
     : undefined
 
   // Check if the active node is a leaf.
-  const node = topologyMap.value.get(activeNodeId)
+  const node = topologyNodesStore.getNodeById(activeNodeId)
   if (node === undefined) {
     filterIds.value = []
     return
@@ -299,7 +289,8 @@ watchEffect(() => {
 
   if (showLeafsAsButton.value && Array.isArray(props.nodeId)) {
     const menuNodeId = props.nodeId[0]
-    const menuNode = topologyMap.value.get(menuNodeId) as any
+    const menuNode = topologyNodesStore.getNodeById(menuNodeId)
+    if (!menuNode) return
     nodesStore.setNodeButtons(
       nodeButtonItems(
         menuNode,
@@ -320,10 +311,9 @@ onBeforeRouteUpdate(reroute)
 
 function reroute(to: RouteLocationNormalized) {
   if (!to.params.nodeId) {
-    if (topologyMap.value.size === 0) return
-    const topologyEntry = topologyMap.value.entries().next()
-    if (topologyEntry.value) {
-      to.params.nodeId = topologyEntry.value[0]
+    const firstSubNodeId = subNodes.value[0].id
+    if (firstSubNodeId) {
+      to.params.nodeId = firstSubNodeId
       return to
     }
     return
@@ -336,13 +326,11 @@ function reroute(to: RouteLocationNormalized) {
     const parentNodeId = Array.isArray(to.params.nodeId)
       ? to.params.nodeId[0]
       : to.params.nodeId
-    const menuNode = topologyMap.value.get(parentNodeId) as TopologyNode
+    const menuNode = topologyNodesStore.getNodeById(parentNodeId)
     if (menuNode === undefined) return
     if (menuNode.topologyNodes === undefined) {
       const leafNodeId = parentNodeId
-      const parentNode = [...topologyMap.value?.values()].find((p) => {
-        return p.topologyNodes?.map((c) => c.id).includes(leafNodeId)
-      })
+      const parentNode = topologyNodesStore.getParentNodeById(leafNodeId)
       if (parentNode?.id === undefined) return
       const to = {
         name: 'TopologyDisplay',
@@ -372,7 +360,9 @@ function reroute(to: RouteLocationNormalized) {
         Array.isArray(to.params.nodeId) && to.params.nodeId.length > 1
           ? to.params.nodeId[0]
           : undefined
-      const menuNode = topologyMap.value.get(leafNodeId) as TopologyNode
+      const menuNode = topologyNodesStore.getNodeById(leafNodeId)
+      if (!menuNode) return
+
       const topologyId = to.params.topologyId as string
       const tabs = displayTabsForNode(menuNode, parentNodeId, topologyId)
       const tab = tabs.find((t) => t.type === activeTab.value) ?? tabs[0]

From 11b8bf97f98cbd31129e3f5a820db42401881451 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Wed, 11 Dec 2024 15:56:21 +0100
Subject: [PATCH 03/32] Add icons to dashboard tabs and make more compact

---
 src/components/general/DashboardItems.vue | 14 +++++++++-----
 src/lib/topology/dashboard.ts             | 16 ++++++++++++++++
 src/stores/topologyNodes.ts               |  2 +-
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/general/DashboardItems.vue b/src/components/general/DashboardItems.vue
index ddcf6d830..61c7189cf 100644
--- a/src/components/general/DashboardItems.vue
+++ b/src/components/general/DashboardItems.vue
@@ -2,12 +2,13 @@
   <v-tabs
     v-model="tab"
     v-if="items.length > 1"
-    color="primary"
+    bg-color="primary"
     align-tabs="center"
-    class="flex-0-0"
+    class="flex-0-0 w-100"
+    density="compact"
   >
-    <v-tab v-for="item in items">
-      {{ item.component }}
+    <v-tab v-for="item in componentItems" :prepend-icon="item.icon">
+      {{ item.componentName }}
     </v-tab>
   </v-tabs>
 
@@ -27,8 +28,9 @@ import type { DashboardItem } from '@/lib/dashboard/types'
 import {
   getComponentForName,
   getComponentPropsForNode,
+  getIconForComponentName,
 } from '@/lib/topology/dashboard'
-import { useTopologyNodesStore } from '@/stores/topologyNodes';
+import { useTopologyNodesStore } from '@/stores/topologyNodes'
 import { computed, ref, watch } from 'vue'
 
 interface Props {
@@ -47,11 +49,13 @@ const componentItems = computed(() => {
     const topologyNode = topologyNodesStore.getNodeById(item.topologyNodeId)
     const component = getComponentForName(componentName)
     const componentProps = getComponentPropsForNode(componentName, topologyNode)
+    const icon = getIconForComponentName(componentName)
     return {
       component,
       componentProps,
       componentName,
       topologyNode,
+      icon,
     }
   })
 })
diff --git a/src/lib/topology/dashboard.ts b/src/lib/topology/dashboard.ts
index c41c6d16b..4021e9180 100644
--- a/src/lib/topology/dashboard.ts
+++ b/src/lib/topology/dashboard.ts
@@ -30,6 +30,15 @@ const componentNameToComponentMap = {
   'system-monitor': SystemMonitorDisplayView,
 } satisfies Record<string, Component>
 
+const componentNameToIconMap = {
+  map: 'mdi-map',
+  chart: 'mdi-chart-multiple',
+  'data-download': 'mdi-download',
+  reports: 'mdi-file-document',
+  'ssd': 'mdi-view-dashboard',
+  'system-monitor': 'mdi-monitor',
+} satisfies Record<string, string>
+
 type ComponentName = keyof typeof componentNameToComponentMap
 
 type PropsForComponentName<T extends ComponentName> = ComponentProps<
@@ -49,6 +58,13 @@ export function getComponentForName(
   return componentNameToComponentMap[componentName]
 }
 
+export function getIconForComponentName(
+  componentName: string,
+): string | undefined {
+  if (!componentNameIsSupported(componentName)) return
+  return componentNameToIconMap[componentName]
+}
+
 export function getComponentPropsForNode(
   componentName: string,
   node?: TopologyNode,
diff --git a/src/stores/topologyNodes.ts b/src/stores/topologyNodes.ts
index 522ed0c2f..7f1cbcb14 100644
--- a/src/stores/topologyNodes.ts
+++ b/src/stores/topologyNodes.ts
@@ -26,7 +26,7 @@ export const useTopologyNodesStore = defineStore('topologyNodes', () => {
     })
   }
 
-  function getNodeById(nodeId: string) {
+  function getNodeById(nodeId: string): TopologyNode | undefined {
     return _idToNodeMap.value.get(nodeId)
   }
 

From f9fe142eeb2e91f0032561c49b4faff8c710eb5e Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Thu, 12 Dec 2024 09:39:14 +0100
Subject: [PATCH 04/32] Make most component settings types optional

---
 src/lib/component-settings/types.ts | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/lib/component-settings/types.ts b/src/lib/component-settings/types.ts
index 6df6ada1f..c5743fa61 100644
--- a/src/lib/component-settings/types.ts
+++ b/src/lib/component-settings/types.ts
@@ -15,20 +15,20 @@ export interface WebocComponentSettingsResponse {
 export interface WebocComponentSettings {
   id: string
   declarations?: Declarations
-  map: MapSettings
-  chart: ChartSettings
+  map?: MapSettings
+  chart?: ChartSettings
 }
 
 export interface ChartSettings {
-  chartEnabled: boolean
-  tableEnabled: boolean
-  metaDataEnabled: boolean
-  downloadEnabled: boolean
+  chartEnableda?: boolean
+  tableEnabled?: boolean
+  metaDataEnabled?: boolean
+  downloadEnabled?: boolean
 }
 
 export interface Declarations {
-  baseMaps: BaseMap[]
-  overlays: Overlays
+  baseMaps?: BaseMap[]
+  overlays?: Overlays
 }
 
 export interface BaseMap {
@@ -51,20 +51,20 @@ export interface OverlayLocation {
 
 export interface MapSettings {
   graphPanelEnabled?: boolean
-  locationSearchEnabled: boolean
+  locationSearchEnabled?: boolean
   chartEnabled?: boolean
   tableEnabled?: boolean
   metaDataEnabled?: boolean
   downloadEnabled?: boolean
-  baseMaps: BaseMaps
-  overlays: DeclarationReference[]
+  baseMaps?: BaseMaps
+  overlays?: DeclarationReference[]
   chartPanelEnabled?: boolean
 }
 
 export interface BaseMaps {
   defaultLightBaseMap: string
   defaultDarkBaseMap: string
-  additionalMaps: DeclarationReference[]
+  additionalMaps?: DeclarationReference[]
 }
 
 export interface DeclarationReference {

From a4ce883e0c077bc76d4f4d8d8e72c20fd49386d4 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Thu, 12 Dec 2024 09:39:35 +0100
Subject: [PATCH 05/32] Use component name for second record dashbaord

---
 src/lib/topology/dashboard.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/lib/topology/dashboard.ts b/src/lib/topology/dashboard.ts
index 4021e9180..d399be9d8 100644
--- a/src/lib/topology/dashboard.ts
+++ b/src/lib/topology/dashboard.ts
@@ -26,24 +26,24 @@ const componentNameToComponentMap = {
   chart: TimeSeriesDisplay,
   'data-download': DataDownloadDisplayView,
   reports: ReportsDisplayView,
-  'ssd': SchematicStatusDisplay,
+  ssd: SchematicStatusDisplay,
   'system-monitor': SystemMonitorDisplayView,
 } satisfies Record<string, Component>
 
+export type ComponentName = keyof typeof componentNameToComponentMap
+
+type PropsForComponentName<T extends ComponentName> = ComponentProps<
+  (typeof componentNameToComponentMap)[T]
+>
+
 const componentNameToIconMap = {
   map: 'mdi-map',
   chart: 'mdi-chart-multiple',
   'data-download': 'mdi-download',
   reports: 'mdi-file-document',
-  'ssd': 'mdi-view-dashboard',
+  ssd: 'mdi-view-dashboard',
   'system-monitor': 'mdi-monitor',
-} satisfies Record<string, string>
-
-type ComponentName = keyof typeof componentNameToComponentMap
-
-type PropsForComponentName<T extends ComponentName> = ComponentProps<
-  (typeof componentNameToComponentMap)[T]
->
+} satisfies Record<ComponentName, string>
 
 function componentNameIsSupported(
   componentName: string,

From 4b97e56cf11159411f51169bdffe78a3e071317e Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Thu, 12 Dec 2024 09:40:03 +0100
Subject: [PATCH 06/32] Pass settings to dashboard components

---
 src/components/general/DashboardItems.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/general/DashboardItems.vue b/src/components/general/DashboardItems.vue
index 61c7189cf..2edd823a6 100644
--- a/src/components/general/DashboardItems.vue
+++ b/src/components/general/DashboardItems.vue
@@ -19,6 +19,7 @@
       :is="item.component"
       v-bind="item.componentProps"
       :topologyNode="item.topologyNode"
+      :settings="item.settings"
     />
   </template>
 </template>
@@ -30,6 +31,7 @@ import {
   getComponentPropsForNode,
   getIconForComponentName,
 } from '@/lib/topology/dashboard'
+import { useComponentSettingsStore } from '@/stores/componentSettings';
 import { useTopologyNodesStore } from '@/stores/topologyNodes'
 import { computed, ref, watch } from 'vue'
 
@@ -42,6 +44,7 @@ const props = defineProps<Props>()
 const tab = ref(0)
 
 const topologyNodesStore = useTopologyNodesStore()
+const componentSettingsStore = useComponentSettingsStore()
 
 const componentItems = computed(() => {
   return props.items.map((item) => {
@@ -50,12 +53,14 @@ const componentItems = computed(() => {
     const component = getComponentForName(componentName)
     const componentProps = getComponentPropsForNode(componentName, topologyNode)
     const icon = getIconForComponentName(componentName)
+    const settings = componentSettingsStore.getSettingsById(item.componentSettingsId)
     return {
       component,
       componentProps,
       componentName,
       topologyNode,
       icon,
+      settings
     }
   })
 })

From a975bd74e530ba51544c78c5838e867a721cc090 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Thu, 12 Dec 2024 11:42:56 +0100
Subject: [PATCH 07/32] Add component type and use it for displaytabs

---
 src/lib/topology/component.ts   |  61 +++++++++++++++++++
 src/lib/topology/displayTabs.ts | 100 ++++++--------------------------
 2 files changed, 78 insertions(+), 83 deletions(-)
 create mode 100644 src/lib/topology/component.ts

diff --git a/src/lib/topology/component.ts b/src/lib/topology/component.ts
new file mode 100644
index 000000000..e9164bd82
--- /dev/null
+++ b/src/lib/topology/component.ts
@@ -0,0 +1,61 @@
+export const ComponentType = {
+  map: 'map',
+  charts: 'charts',
+  'data-download': 'data-download',
+  reports: 'reports',
+  'schematic-status-display': 'schematic-status-display',
+  'system-monitor': 'system-monitor',
+  'web-display': 'web-display',
+  dashboard: 'dashboard',
+  tasks: 'tasks',
+} as const
+
+export type ComponentType = (typeof ComponentType)[keyof typeof ComponentType]
+
+export const componentTypeToIconMap = {
+  map: 'mdi-map',
+  charts: 'mdi-chart-multiple',
+  'data-download': 'mdi-download',
+  reports: 'mdi-file-document',
+  'schematic-status-display': 'mdi-view-dashboard',
+  'system-monitor': 'mdi-monitor',
+  'web-display': 'mdi-web',
+  dashboard: 'mdi-view-dashboard',
+  tasks: 'mdi-cog',
+} satisfies Record<ComponentType, string>
+
+export const componentTypeToTitleMap = {
+  map: 'Map',
+  charts: 'Charts',
+  'data-download': 'Download',
+  reports: 'Reports',
+  'schematic-status-display': 'Schematic',
+  'system-monitor': 'System Monitor',
+  'web-display': 'Web Display',
+  dashboard: 'Dashboard',
+  tasks: 'Tasks',
+} satisfies Record<ComponentType, string>
+
+export const componentTypeToRouteNameMap = {
+  map: 'TopologySpatialDisplay',
+  charts: 'TopologyTimeSeries',
+  'data-download': 'TopologyDataDownload',
+  reports: 'TopologyReports',
+  'schematic-status-display': 'TopologySchematicStatusDisplay',
+  'system-monitor': 'TopologySystemMonitor',
+  'web-display': 'TopologyWebDisplay',
+  dashboard: 'TopologyDashboard',
+  tasks: 'TopologyTasks',
+} satisfies Record<ComponentType, string>
+
+export const componentTypeToIdMap = {
+  map: 'spatial',
+  charts: 'timeseries',
+  'data-download': 'download',
+  reports: 'reports',
+  'schematic-status-display': 'ssd',
+  'system-monitor': 'systemmonitor',
+  'web-display': 'webdisplay',
+  dashboard: 'dashboard',
+  tasks: crypto.randomUUID(),
+} satisfies Record<ComponentType, string>
diff --git a/src/lib/topology/displayTabs.ts b/src/lib/topology/displayTabs.ts
index aa6f3abf4..938e778da 100644
--- a/src/lib/topology/displayTabs.ts
+++ b/src/lib/topology/displayTabs.ts
@@ -10,18 +10,16 @@ import {
   nodeHasSystemMonitor,
   nodeHasWebDisplay,
 } from './nodes'
+import {
+  ComponentType,
+  componentTypeToIconMap,
+  componentTypeToIdMap,
+  componentTypeToRouteNameMap,
+  componentTypeToTitleMap,
+} from './component'
 
 export interface DisplayTab {
-  type:
-    | 'charts'
-    | 'map'
-    | 'reports'
-    | 'data-download'
-    | 'schematic-status-display'
-    | 'system-monitor'
-    | 'web-display'
-    | 'dashboard'
-    | 'tasks'
+  type: ComponentType
   id: string
   title: string
   href?: string
@@ -31,80 +29,16 @@ export interface DisplayTab {
   active: boolean
 }
 
-const displayTabs: DisplayTab[] = [
-  {
-    type: 'map',
-    id: 'spatial',
-    title: 'Map',
-    to: { name: 'TopologySpatialDisplay' },
-    icon: 'mdi-map',
-    active: false,
-  },
-  {
-    type: 'charts',
-    id: 'timeseries',
-    title: 'Charts',
-    to: { name: 'TopologyTimeSeries' },
-    icon: 'mdi-chart-multiple',
-    active: false,
-  },
-  {
-    type: 'data-download',
-    id: 'download',
-    title: 'Download',
-    to: { name: 'TopologyDataDownload' },
-    icon: 'mdi-download',
-    active: false,
-  },
-  {
-    type: 'web-display',
-    id: 'web-display',
-    title: 'Web Display',
-    to: { name: 'TopologyWebDisplay' },
-    icon: 'mdi-web',
-    active: false,
-  },
-  {
-    type: 'reports',
-    id: 'reports',
-    title: 'Reports',
-    to: { name: 'TopologyReports' },
-    icon: 'mdi-file-document',
+const displayTabs: DisplayTab[] = Object.values(ComponentType).map((type) => {
+  return {
+    type,
+    id: componentTypeToIdMap[type],
+    title: componentTypeToTitleMap[type],
+    to: { name: componentTypeToRouteNameMap[type] },
+    icon: componentTypeToIconMap[type],
     active: false,
-  },
-  {
-    type: 'schematic-status-display',
-    id: 'ssd',
-    title: 'Schematic',
-    to: { name: 'TopologySchematicStatusDisplay' },
-    icon: 'mdi-view-dashboard',
-    active: false,
-  },
-  {
-    type: 'system-monitor',
-    id: 'ssd',
-    title: 'System Monitor',
-    to: { name: 'TopologySystemMonitor' },
-    icon: 'mdi-view-dashboard',
-    active: false,
-  },
-  {
-    type: 'dashboard',
-    id: 'dashboard',
-    title: 'Dashboard',
-    to: { name: 'TopologyDashboard' },
-    icon: 'mdi-view-dashboard',
-    active: false,
-  },
-  {
-    type: 'tasks',
-    id: crypto.randomUUID(),
-    title: 'Tasks',
-    to: { name: 'TopologyTasksDisplay' },
-    icon: 'mdi-cog',
-    active: false,
-  },
-]
+  }
+})
 
 export function displayTabsForNode(
   node: TopologyNode,

From 7893b488ef616e5abcc23ab36ddb446d495c96ba Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Thu, 12 Dec 2024 11:55:51 +0100
Subject: [PATCH 08/32] Move component settings

---
 .../types.ts => topology/componentSettings.ts}           | 9 ++-------
 src/stores/componentSettings.ts                          | 2 +-
 2 files changed, 3 insertions(+), 8 deletions(-)
 rename src/lib/{component-settings/types.ts => topology/componentSettings.ts} (88%)

diff --git a/src/lib/component-settings/types.ts b/src/lib/topology/componentSettings.ts
similarity index 88%
rename from src/lib/component-settings/types.ts
rename to src/lib/topology/componentSettings.ts
index c5743fa61..d699a0f3b 100644
--- a/src/lib/component-settings/types.ts
+++ b/src/lib/topology/componentSettings.ts
@@ -20,7 +20,7 @@ export interface WebocComponentSettings {
 }
 
 export interface ChartSettings {
-  chartEnableda?: boolean
+  chartEnabled?: boolean
   tableEnabled?: boolean
   metaDataEnabled?: boolean
   downloadEnabled?: boolean
@@ -49,16 +49,11 @@ export interface OverlayLocation {
   paint: PaintMapping[OverlayLocation['type']]
 }
 
-export interface MapSettings {
+export interface MapSettings extends ChartSettings {
   graphPanelEnabled?: boolean
   locationSearchEnabled?: boolean
-  chartEnabled?: boolean
-  tableEnabled?: boolean
-  metaDataEnabled?: boolean
-  downloadEnabled?: boolean
   baseMaps?: BaseMaps
   overlays?: DeclarationReference[]
-  chartPanelEnabled?: boolean
 }
 
 export interface BaseMaps {
diff --git a/src/stores/componentSettings.ts b/src/stores/componentSettings.ts
index a8eee8495..6a112c2ac 100644
--- a/src/stores/componentSettings.ts
+++ b/src/stores/componentSettings.ts
@@ -3,7 +3,7 @@ import { defineStore } from 'pinia'
 import type {
   WebocComponentSettings,
   WebocComponentSettingsResponse,
-} from '@/lib/component-settings/types'
+} from '@/lib/topology/componentSettings'
 
 interface State {
   settings: WebocComponentSettings[]

From 3e2a4aebb3b9ea4a847a7454fd262a43e27e014f Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Thu, 12 Dec 2024 11:56:33 +0100
Subject: [PATCH 09/32] Use component type in dashboard

---
 src/components/general/DashboardItems.vue | 22 ++++---
 src/lib/dashboard/types.ts                |  4 +-
 src/lib/topology/dashboard.ts             | 78 ++++++++---------------
 3 files changed, 42 insertions(+), 62 deletions(-)

diff --git a/src/components/general/DashboardItems.vue b/src/components/general/DashboardItems.vue
index 2edd823a6..327af7db5 100644
--- a/src/components/general/DashboardItems.vue
+++ b/src/components/general/DashboardItems.vue
@@ -8,7 +8,7 @@
     density="compact"
   >
     <v-tab v-for="item in componentItems" :prepend-icon="item.icon">
-      {{ item.componentName }}
+      {{ item.title }}
     </v-tab>
   </v-tabs>
 
@@ -26,12 +26,12 @@
 
 <script setup lang="ts">
 import type { DashboardItem } from '@/lib/dashboard/types'
+import { componentTypeToIconMap, componentTypeToTitleMap } from '@/lib/topology/component'
 import {
-  getComponentForName,
+  componentTypeToComponentMap,
   getComponentPropsForNode,
-  getIconForComponentName,
 } from '@/lib/topology/dashboard'
-import { useComponentSettingsStore } from '@/stores/componentSettings';
+import { useComponentSettingsStore } from '@/stores/componentSettings'
 import { useTopologyNodesStore } from '@/stores/topologyNodes'
 import { computed, ref, watch } from 'vue'
 
@@ -50,17 +50,21 @@ const componentItems = computed(() => {
   return props.items.map((item) => {
     const componentName = item.component
     const topologyNode = topologyNodesStore.getNodeById(item.topologyNodeId)
-    const component = getComponentForName(componentName)
+    const component = componentTypeToComponentMap[componentName]
     const componentProps = getComponentPropsForNode(componentName, topologyNode)
-    const icon = getIconForComponentName(componentName)
-    const settings = componentSettingsStore.getSettingsById(item.componentSettingsId)
+    const title = componentTypeToTitleMap[componentName]
+    const icon = componentTypeToIconMap[componentName]
+    const settings = componentSettingsStore.getSettingsById(
+      item.componentSettingsId,
+    )
     return {
+      title,
+      icon,
       component,
       componentProps,
       componentName,
       topologyNode,
-      icon,
-      settings
+      settings,
     }
   })
 })
diff --git a/src/lib/dashboard/types.ts b/src/lib/dashboard/types.ts
index 760b23fc4..869bc4e1a 100644
--- a/src/lib/dashboard/types.ts
+++ b/src/lib/dashboard/types.ts
@@ -1,3 +1,5 @@
+import { ComponentType } from "@/lib/topology/component"
+
 export interface DashboardsResponse {
   dashboards: Dashboard[]
 }
@@ -19,6 +21,6 @@ export interface DashboardElement {
 
 export interface DashboardItem {
   topologyNodeId: string
-  component: string
+  component: ComponentType
   componentSettingsId: string
 }
diff --git a/src/lib/topology/dashboard.ts b/src/lib/topology/dashboard.ts
index d399be9d8..8ea23ed0d 100644
--- a/src/lib/topology/dashboard.ts
+++ b/src/lib/topology/dashboard.ts
@@ -1,6 +1,7 @@
 import type { TopologyNode } from '@deltares/fews-pi-requests'
 import { defineAsyncComponent, type Component } from 'vue'
 import { ComponentProps } from '@/lib/utils/types'
+import { ComponentType } from '@/lib/topology/component'
 
 const SpatialDisplay = defineAsyncComponent(
   () => import('@/components/spatialdisplay/SpatialDisplay.vue'),
@@ -21,89 +22,62 @@ const SystemMonitorDisplayView = defineAsyncComponent(
   () => import('@/views/SystemMonitorDisplayView.vue'),
 )
 
-const componentNameToComponentMap = {
+const Empty = defineAsyncComponent(() => import('@/views/Empty.vue'))
+
+export const componentTypeToComponentMap = {
   map: SpatialDisplay,
-  chart: TimeSeriesDisplay,
+  charts: TimeSeriesDisplay,
   'data-download': DataDownloadDisplayView,
   reports: ReportsDisplayView,
-  ssd: SchematicStatusDisplay,
+  'schematic-status-display': SchematicStatusDisplay,
   'system-monitor': SystemMonitorDisplayView,
-} satisfies Record<string, Component>
-
-export type ComponentName = keyof typeof componentNameToComponentMap
+  tasks: Empty,
+  'web-display': Empty,
+  dashboard: Empty,
+} satisfies Record<ComponentType, Component>
 
-type PropsForComponentName<T extends ComponentName> = ComponentProps<
-  (typeof componentNameToComponentMap)[T]
+export type PropsForComponentType<T extends ComponentType> = ComponentProps<
+  (typeof componentTypeToComponentMap)[T]
 >
 
-const componentNameToIconMap = {
-  map: 'mdi-map',
-  chart: 'mdi-chart-multiple',
-  'data-download': 'mdi-download',
-  reports: 'mdi-file-document',
-  ssd: 'mdi-view-dashboard',
-  'system-monitor': 'mdi-monitor',
-} satisfies Record<ComponentName, string>
-
-function componentNameIsSupported(
-  componentName: string,
-): componentName is ComponentName {
-  return componentName in componentNameToComponentMap
-}
-
-export function getComponentForName(
-  componentName: string,
-): Component | undefined {
-  if (!componentNameIsSupported(componentName)) return
-  return componentNameToComponentMap[componentName]
-}
-
-export function getIconForComponentName(
-  componentName: string,
-): string | undefined {
-  if (!componentNameIsSupported(componentName)) return
-  return componentNameToIconMap[componentName]
-}
-
 export function getComponentPropsForNode(
-  componentName: string,
+  componentType: ComponentType,
   node?: TopologyNode,
-): PropsForComponentName<ComponentName> | undefined {
+): PropsForComponentType<ComponentType> | undefined {
   if (!node) return
-  if (!componentNameIsSupported(componentName)) return
 
-  if (componentName === 'map') {
-    const result: PropsForComponentName<'map'> = {
+  if (componentType === 'map') {
+    const result: PropsForComponentType<'map'> = {
       layerName: node.gridDisplaySelection?.plotId,
       filterIds: node.filterIds,
     }
     return result
   }
 
-  if (componentName === 'chart') {
-    const result: PropsForComponentName<'chart'> = {
+  if (componentType === 'charts') {
+    const result: PropsForComponentType<'charts'> = {
       nodeId: node.id,
     }
     return result
   }
 
-  if (componentName === 'data-download') {
-    const result: PropsForComponentName<'data-download'> = {
+  if (componentType === 'data-download') {
+    const result: PropsForComponentType<'data-download'> = {
       nodeId: node.id,
       topologyNode: node,
     }
     return result
   }
 
-  if (componentName === 'reports') {
-    const result: PropsForComponentName<'reports'> = {
+  if (componentType === 'reports') {
+    const result: PropsForComponentType<'reports'> = {
       topologyNode: node,
     }
     return result
   }
 
-  if (componentName === 'ssd') {
-    const result: PropsForComponentName<'ssd'> = {
+  if (componentType === 'schematic-status-display') {
+    const result: PropsForComponentType<'schematic-status-display'> = {
       panelId: node.scadaPanelId,
       groupId: node.id,
       objectId: '',
@@ -112,8 +86,8 @@ export function getComponentPropsForNode(
     return result
   }
 
-  if (componentName === 'system-monitor') {
-    const result: PropsForComponentName<'system-monitor'> = {}
+  if (componentType === 'system-monitor') {
+    const result: PropsForComponentType<'system-monitor'> = {}
     return result
   }
 }

From 3813ed8466b9bcc3648c5f9d58fe467ecbc8ac19 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Thu, 12 Dec 2024 12:23:27 +0100
Subject: [PATCH 10/32] Add component type map to componentSettings

---
 src/lib/topology/componentSettings.ts | 55 ++++++++++++++++-----------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/lib/topology/componentSettings.ts b/src/lib/topology/componentSettings.ts
index d699a0f3b..62b833088 100644
--- a/src/lib/topology/componentSettings.ts
+++ b/src/lib/topology/componentSettings.ts
@@ -1,7 +1,5 @@
-import type {
-  FillPaintProps,
-  LinePaintProps,
-} from 'maplibre-gl'
+import type { FillPaintProps, LinePaintProps } from 'maplibre-gl'
+import type { ComponentType } from './component'
 
 type PaintMapping = {
   fill: FillPaintProps
@@ -12,20 +10,46 @@ export interface WebocComponentSettingsResponse {
   webocComponentSettings: WebocComponentSettings[]
 }
 
-export interface WebocComponentSettings {
-  id: string
+interface ComponentSettingsMapping {
+  map: MapSettings
+  charts: ChartSettings
+  'data-download': undefined
+  reports: undefined
+  'schematic-status-display': undefined
+  'system-monitor': undefined
+  'web-display': undefined
+  dashboard: undefined
+  tasks: undefined
+}
+
+export type WebocComponentSettings = {
+  [key in ComponentType]?: ComponentSettingsMapping[key]
+}
+
+interface BaseSettings {
   declarations?: Declarations
-  map?: MapSettings
-  chart?: ChartSettings
 }
 
-export interface ChartSettings {
+export interface ChartSettings extends BaseSettings {
   chartEnabled?: boolean
   tableEnabled?: boolean
   metaDataEnabled?: boolean
   downloadEnabled?: boolean
 }
 
+export interface MapSettings extends ChartSettings {
+  graphPanelEnabled?: boolean
+  locationSearchEnabled?: boolean
+  baseMaps?: BaseMaps
+  overlays?: DeclarationReference[]
+}
+
+export interface BaseMaps {
+  defaultLightBaseMap: string
+  defaultDarkBaseMap: string
+  additionalMaps?: DeclarationReference[]
+}
+
 export interface Declarations {
   baseMaps?: BaseMap[]
   overlays?: Overlays
@@ -49,19 +73,6 @@ export interface OverlayLocation {
   paint: PaintMapping[OverlayLocation['type']]
 }
 
-export interface MapSettings extends ChartSettings {
-  graphPanelEnabled?: boolean
-  locationSearchEnabled?: boolean
-  baseMaps?: BaseMaps
-  overlays?: DeclarationReference[]
-}
-
-export interface BaseMaps {
-  defaultLightBaseMap: string
-  defaultDarkBaseMap: string
-  additionalMaps?: DeclarationReference[]
-}
-
 export interface DeclarationReference {
   id: string
   visible: boolean

From a7d675927ecbb0d953745674553039e08b0ab2c9 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Mon, 16 Dec 2024 10:47:07 +0100
Subject: [PATCH 11/32] Add component settings to spatialdisplay and
 spatialtimeseriesdisplay

---
 src/components/general/DashboardItems.vue     | 20 ++++++--
 .../spatialdisplay/SpatialDisplay.vue         | 20 +++++---
 .../SpatialTimeSeriesDisplay.vue              | 47 +++++++++++--------
 src/lib/topology/componentSettings.ts         | 10 +++-
 4 files changed, 66 insertions(+), 31 deletions(-)

diff --git a/src/components/general/DashboardItems.vue b/src/components/general/DashboardItems.vue
index 327af7db5..6cd283547 100644
--- a/src/components/general/DashboardItems.vue
+++ b/src/components/general/DashboardItems.vue
@@ -26,7 +26,10 @@
 
 <script setup lang="ts">
 import type { DashboardItem } from '@/lib/dashboard/types'
-import { componentTypeToIconMap, componentTypeToTitleMap } from '@/lib/topology/component'
+import {
+  componentTypeToIconMap,
+  componentTypeToTitleMap,
+} from '@/lib/topology/component'
 import {
   componentTypeToComponentMap,
   getComponentPropsForNode,
@@ -46,6 +49,17 @@ const tab = ref(0)
 const topologyNodesStore = useTopologyNodesStore()
 const componentSettingsStore = useComponentSettingsStore()
 
+function getComponentSettingsForItem(item: DashboardItem) {
+  const settings = componentSettingsStore.getSettingsById(
+    item.componentSettingsId,
+  )
+  const componentSettings = settings?.[item.component]
+  if (!componentSettings) return
+
+  componentSettings.declarations = settings?.declarations
+  return componentSettings
+}
+
 const componentItems = computed(() => {
   return props.items.map((item) => {
     const componentName = item.component
@@ -54,9 +68,7 @@ const componentItems = computed(() => {
     const componentProps = getComponentPropsForNode(componentName, topologyNode)
     const title = componentTypeToTitleMap[componentName]
     const icon = componentTypeToIconMap[componentName]
-    const settings = componentSettingsStore.getSettingsById(
-      item.componentSettingsId,
-    )
+    const settings = getComponentSettingsForItem(item)
     return {
       title,
       icon,
diff --git a/src/components/spatialdisplay/SpatialDisplay.vue b/src/components/spatialdisplay/SpatialDisplay.vue
index 12279daae..7e9f29708 100644
--- a/src/components/spatialdisplay/SpatialDisplay.vue
+++ b/src/components/spatialdisplay/SpatialDisplay.vue
@@ -10,18 +10,20 @@
         @changeLocationId="onLocationChange"
         :layer-capabilities="layerCapabilities"
         :times="times"
+        :settings="props.settings"
         :max-values-time-series="maxValuesTimeSeries"
         v-model:elevation="elevation"
         v-model:current-time="currentTime"
         @coordinate-click="onCoordinateClick"
       ></SpatialDisplayComponent>
     </div>
-    <div v-if="filter" class="child-container">
+    <div v-if="showChartPanel" class="child-container">
       <router-view
         @close="closeTimeSeriesDisplay"
         :filter="filter"
         :elevation-chart-filter="elevationChartFilter"
         :current-time="currentTime"
+        :settings="props.settings"
       ></router-view>
     </div>
   </div>
@@ -47,7 +49,8 @@ import { toMercator } from '@turf/projection'
 import circle from '@turf/circle'
 import bbox from '@turf/bbox'
 import { useUserSettingsStore } from '@/stores/userSettings'
-import { UseDisplayConfigOptions } from '@/services/useDisplayConfig'
+import type { UseDisplayConfigOptions } from '@/services/useDisplayConfig'
+import type { MapSettings } from '@/lib/topology/componentSettings'
 
 interface Props {
   layerName?: string
@@ -55,6 +58,7 @@ interface Props {
   filterIds?: string[]
   latitude?: string
   longitude?: string
+  settings?: MapSettings
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -66,7 +70,7 @@ const route = useRoute()
 const router = useRouter()
 const { mobile } = useDisplay()
 
-const settings = useUserSettingsStore()
+const userSettings = useUserSettingsStore()
 const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
 const { layerCapabilities, times } = useWmsLayerCapabilities(
   baseUrl,
@@ -100,8 +104,8 @@ function getFilterActionsFilter(): filterActionsFilter &
   return {
     locationIds: props.locationId,
     filterId: props.filterIds ? props.filterIds[0] : undefined,
-    useDisplayUnits: settings.useDisplayUnits,
-    convertDatum: settings.convertDatum,
+    useDisplayUnits: userSettings.useDisplayUnits,
+    convertDatum: userSettings.convertDatum,
   }
 }
 
@@ -133,7 +137,7 @@ function getTimeSeriesGridActionsFilter():
     bbox: mercatorBbox,
     documentFormat: 'PI_JSON',
     elevation: elevation.value ?? layerCapabilities.value.elevation?.upperValue,
-    useDisplayUnits: settings.useDisplayUnits,
+    useDisplayUnits: userSettings.useDisplayUnits,
     // Should be available according to the docs, but errors
     // convertDatum: settings.convertDatum,
   }
@@ -148,6 +152,10 @@ const filter = computed(() => {
   }
 })
 
+const showChartPanel = computed(() => {
+  return filter.value !== undefined && !(props.settings?.chartPanelEnabled === false)
+})
+
 const elevationChartFilter = computed(() => {
   if (!layerCapabilities.value?.elevation) return
   const actionsFilter = getTimeSeriesGridActionsFilter()
diff --git a/src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue b/src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue
index c6d800d38..add739341 100644
--- a/src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue
+++ b/src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue
@@ -55,6 +55,7 @@
         >
         </TimeSeriesComponent>
         <TimeSeriesFileDownloadComponent
+          v-if="showDataDownload"
           :config="displayConfig"
           :options="options"
           :filter="filter"
@@ -86,20 +87,22 @@ import { useSystemTimeStore } from '@/stores/systemTime'
 import { useLocationTooltip } from '@/services/useLocationTooltip'
 import { isFilterActionsFilter } from '@/lib/filters'
 import { useDownloadDialogStore } from '@/stores/downloadDialog'
+import type { ChartSettings } from '@/lib/topology/componentSettings'
 
 interface Props {
   filter: filterActionsFilter | timeSeriesGridActionsFilter
   elevationChartFilter?: timeSeriesGridActionsFilter
   currentTime?: Date
+  settings?: ChartSettings
 }
 
-const settings = useUserSettingsStore()
+const userSettings = useUserSettingsStore()
 const systemTimeStore = useSystemTimeStore()
 
 const options = computed<UseDisplayConfigOptions>(() => {
   return {
-    useDisplayUnits: settings.useDisplayUnits,
-    convertDatum: settings.convertDatum,
+    useDisplayUnits: userSettings.useDisplayUnits,
+    convertDatum: userSettings.convertDatum,
   }
 })
 
@@ -153,46 +156,52 @@ interface DisplayTypeItem {
   disabled?: boolean
 }
 
+const showDataDownload = computed(() => {
+  return !(props.settings?.downloadEnabled === false)
+})
+
 const displayType = ref(DisplayType.TimeSeriesChart)
 const displayTypeItems = computed<DisplayTypeItem[]>(() => {
-  const displayItems: DisplayTypeItem[] = [
+  const noElevationCharts = !(
+    (elevationChartDisplayconfig.value?.subplots?.length ?? 0) > 0
+  )
+  const noTooltip = !tooltip.value
+
+  const chartDisabled = props.settings?.chartEnabled === false
+  const elevationChartDisabled = props.settings?.elevationChartEnabled === false
+  const tableDisabled = props.settings?.tableEnabled === false
+  const metaDataDisabled = props.settings?.metaDataEnabled === false
+  return [
     {
       icon: 'mdi-chart-line',
       label: 'Chart',
       value: DisplayType.TimeSeriesChart,
+      disabled: chartDisabled,
     },
     {
       icon: 'mdi-elevation-rise',
       label: 'Vertical profile',
       value: DisplayType.ElevationChart,
       iconStyle: 'transform: rotate(-90deg);',
+      disabled: elevationChartDisabled || noElevationCharts,
     },
     {
       icon: 'mdi-table',
       label: 'Table',
       value: DisplayType.TimeSeriesTable,
+      disabled: tableDisabled,
     },
     {
       icon: 'mdi-information-outline',
       label: 'Information',
       value: DisplayType.Information,
+      disabled: metaDataDisabled || noTooltip,
     },
+    // Mdi icon for metatdata at the current location
+    //    {
+    //     icon: 'mdi-information',
+    //    label: 'Metadata',
   ]
-  // Mdi icon for metatdata at the current location
-  //    {
-  //     icon: 'mdi-information',
-  //    label: 'Metadata',
-  //
-
-  if (!((elevationChartDisplayconfig.value?.subplots?.length ?? 0) > 0)) {
-    displayItems[1].disabled = true
-  }
-
-  if (!tooltip.value) {
-    displayItems[3].disabled = true
-  }
-
-  return displayItems
 })
 
 watch(displayTypeItems, () => {
diff --git a/src/lib/topology/componentSettings.ts b/src/lib/topology/componentSettings.ts
index 62b833088..ce1dd41b1 100644
--- a/src/lib/topology/componentSettings.ts
+++ b/src/lib/topology/componentSettings.ts
@@ -22,23 +22,29 @@ interface ComponentSettingsMapping {
   tasks: undefined
 }
 
-export type WebocComponentSettings = {
+type SettingsPerComponent = {
   [key in ComponentType]?: ComponentSettingsMapping[key]
 }
 
+export interface WebocComponentSettings extends SettingsPerComponent {
+  id: string
+  declarations?: Declarations
+}
+
 interface BaseSettings {
   declarations?: Declarations
 }
 
 export interface ChartSettings extends BaseSettings {
   chartEnabled?: boolean
+  elevationChartEnabled?: boolean
   tableEnabled?: boolean
   metaDataEnabled?: boolean
   downloadEnabled?: boolean
 }
 
 export interface MapSettings extends ChartSettings {
-  graphPanelEnabled?: boolean
+  chartPanelEnabled?: boolean
   locationSearchEnabled?: boolean
   baseMaps?: BaseMaps
   overlays?: DeclarationReference[]

From cb1e63c3e6aca528f0f7c85383701aed439e1270 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Tue, 17 Dec 2024 15:29:48 +0100
Subject: [PATCH 12/32] Add overlay control

---
 .../SpatialDisplayComponent.vue               |  26 ++++-
 src/components/wms/OverlayControl.vue         | 109 ++++++++++++++++++
 2 files changed, 129 insertions(+), 6 deletions(-)
 create mode 100644 src/components/wms/OverlayControl.vue

diff --git a/src/components/spatialdisplay/SpatialDisplayComponent.vue b/src/components/spatialdisplay/SpatialDisplayComponent.vue
index 56540a131..dd4b4bb14 100644
--- a/src/components/spatialdisplay/SpatialDisplayComponent.vue
+++ b/src/components/spatialdisplay/SpatialDisplayComponent.vue
@@ -77,6 +77,7 @@
           v-model:show-layer="showLayer"
         />
         <LocationsSearchControl
+          v-if="showLocationSearchControl"
           v-model:showLocations="showLocationsLayer"
           width="50vw"
           max-width="250"
@@ -84,6 +85,10 @@
           :selectedLocationId="props.locationId"
           @changeLocationId="onLocationChange"
         />
+        <OverlayControl
+          :settings="settings"
+          v-model:selectedOverlays="selectedOverlays"
+        />
       </template>
     </v-chip-group>
   </div>
@@ -135,7 +140,8 @@ import AnimatedRasterLayer, {
 import LocationsSearchControl from '@/components/wms/LocationsSearchControl.vue'
 import LocationsLayer from '@/components/wms/LocationsLayer.vue'
 import SelectedCoordinateLayer from '@/components/wms/SelectedCoordinateLayer.vue'
-import InformationPanel from '../wms/InformationPanel.vue'
+import InformationPanel from '@/components/wms/InformationPanel.vue'
+import OverlayControl from '@/components/wms/OverlayControl.vue'
 import ElevationSlider from '@/components/wms/ElevationSlider.vue'
 import DateTimeSlider from '@/components/general/DateTimeSlider.vue'
 import BoundingBoxControl from '@/components/map/BoundingBoxControl.vue'
@@ -165,6 +171,7 @@ import { useWorkflowsStore } from '@/stores/workflows'
 import { TimeSeriesData } from '@/lib/timeseries/types/SeriesData'
 import CoordinateSelectorLayer from '@/components/wms/CoordinateSelectorLayer.vue'
 import CoordinateSelectorControl from '@/components/map/CoordinateSelectorControl.vue'
+import type { MapSettings, OverlayLocation } from '@/lib/topology/componentSettings'
 
 interface ElevationWithUnitSymbol {
   units?: string
@@ -184,6 +191,7 @@ interface Props {
   longitude?: string
   currentTime?: Date
   maxValuesTimeSeries?: TimeSeriesData[]
+  settings?: MapSettings
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -223,7 +231,7 @@ let debouncedSetLayerOptions!: () => void
 
 const legendLayerName = ref(props.layerName)
 const legendLayerStyles = ref<Style[]>()
-const settings = useUserSettingsStore()
+const userSettings = useUserSettingsStore()
 
 const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
 
@@ -267,7 +275,7 @@ watch(
         const initialLegendGraphic = await fetchWmsLegend(
           baseUrl,
           legendLayerName.value,
-          settings.useDisplayUnits,
+          userSettings.useDisplayUnits,
           undefined,
           style,
         )
@@ -296,7 +304,7 @@ watch(
         const newLegendGraphic = useWmsLegend(
           baseUrl,
           legendLayerName,
-          () => settings.useDisplayUnits,
+          () => userSettings.useDisplayUnits,
           range,
           style,
           () =>
@@ -358,6 +366,12 @@ const layerHasElevation = computed(() => {
   return props.layerCapabilities?.elevation !== undefined
 })
 
+const showLocationSearchControl = computed(() => {
+  return !(props.settings?.locationSearchEnabled === false)
+})
+
+const selectedOverlays = ref<OverlayLocation[]>([])
+
 watch(
   () => props.layerCapabilities,
   (layer) => {
@@ -395,7 +409,7 @@ watch(currentElevation, () => {
 })
 
 watch(
-  [() => colourScalesStore.currentScale?.range, () => settings.useDisplayUnits],
+  [() => colourScalesStore.currentScale?.range, () => userSettings.useDisplayUnits],
   () => {
     setLayerOptions()
   },
@@ -447,7 +461,7 @@ function setLayerOptions(): void {
         ? rangeToString(colourScalesStore.currentScale?.range)
         : undefined,
       style: colourScalesStore.currentScale?.style.name,
-      useDisplayUnits: settings.useDisplayUnits,
+      useDisplayUnits: userSettings.useDisplayUnits,
     }
   } else {
     layerOptions.value = undefined
diff --git a/src/components/wms/OverlayControl.vue b/src/components/wms/OverlayControl.vue
new file mode 100644
index 000000000..11fcaea91
--- /dev/null
+++ b/src/components/wms/OverlayControl.vue
@@ -0,0 +1,109 @@
+<template>
+  <ControlChip v-if="overlays.length">
+    <v-icon size="large">mdi-layers-outline</v-icon>
+    <v-menu
+      transition="slide-y-transition"
+      :close-on-content-click="false"
+      activator="parent"
+    >
+      <v-list
+        v-model:selected="selectedIds"
+        select-strategy="leaf"
+        class="pb-0"
+      >
+        <v-list-item title="Select All" @click="toggleAll">
+          <template #prepend>
+            <v-list-item-action start>
+              <v-checkbox-btn
+                :indeterminate="someSelected && !allSelected"
+                :model-value="allSelected"
+              />
+            </v-list-item-action>
+          </template>
+        </v-list-item>
+
+        <v-divider class="mt-2" />
+
+        <v-list-item
+          v-for="overlay in overlays"
+          :key="overlay.id"
+          :title="overlay.name"
+          :value="overlay.id"
+        >
+          <template #prepend="{ isSelected }">
+            <v-list-item-action start>
+              <v-checkbox-btn :model-value="isSelected" />
+            </v-list-item-action>
+          </template>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </ControlChip>
+</template>
+
+<script setup lang="ts">
+import ControlChip from '@/components/wms/ControlChip.vue'
+import {
+  DeclarationReference,
+  OverlayLocation,
+  type MapSettings,
+} from '@/lib/topology/componentSettings'
+import { computed, ref, watchEffect } from 'vue'
+
+interface Props {
+  settings?: MapSettings
+}
+
+const props = defineProps<Props>()
+
+const selectedIds = ref<string[]>([])
+watchEffect(() => {
+  selectedIds.value = getVisibleOverlayIds(props.settings?.overlays ?? [])
+})
+
+const selectedOverlays = defineModel<OverlayLocation[]>()
+watchEffect(() => {
+  selectedOverlays.value = getOverlocationsByIds(selectedIds.value)
+})
+
+const overlays = computed(() => {
+  const overlayIds = props.settings?.overlays?.map((overlay) => overlay.id)
+  return getOverlocationsByIds(overlayIds ?? [])
+})
+
+const allSelected = computed(
+  () => selectedIds.value.length === overlays.value.length,
+)
+
+const someSelected = computed(
+  () =>
+    selectedIds.value.length > 0 &&
+    selectedIds.value.length < overlays.value.length,
+)
+
+function toggleAll() {
+  if (allSelected.value) {
+    selectedIds.value = []
+  } else {
+    selectedIds.value = overlays.value.map((overlay) => overlay.id)
+  }
+}
+
+function getOverlayById(id: string) {
+  return props.settings?.declarations?.overlays?.locations?.find(
+    (overlay) => overlay.id === id,
+  )
+}
+
+function getOverlocationsByIds(ids: string[]) {
+  return ids.map((id) => getOverlayById(id)).filter((overlay) => !!overlay)
+}
+
+function getVisibleOverlayIds(references: DeclarationReference[]) {
+  return (
+    references
+      ?.filter((overlay) => overlay.visible)
+      .map((overlay) => overlay.id) ?? []
+  )
+}
+</script>

From e0789c8f058f67eb9630bbc02abf19440da75edc Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Fri, 13 Dec 2024 11:57:44 +0100
Subject: [PATCH 13/32] Add support for overlayer layers based on locationSets

---
 .../SpatialDisplayComponent.vue               |  6 +++
 src/components/wms/OverlayControl.vue         |  2 +-
 src/components/wms/OverlayLayer.vue           | 41 +++++++++++++++++++
 src/lib/topology/locations.ts                 | 37 ++++++++++++++---
 4 files changed, 80 insertions(+), 6 deletions(-)
 create mode 100644 src/components/wms/OverlayLayer.vue

diff --git a/src/components/spatialdisplay/SpatialDisplayComponent.vue b/src/components/spatialdisplay/SpatialDisplayComponent.vue
index dd4b4bb14..447ce2e22 100644
--- a/src/components/spatialdisplay/SpatialDisplayComponent.vue
+++ b/src/components/spatialdisplay/SpatialDisplayComponent.vue
@@ -41,6 +41,11 @@
       v-if="workflowsStore.isSelectingCoordinate"
       v-model:coordinate="workflowsStore.coordinate"
     />
+    <OverlayLayer
+      v-for="overlay in selectedOverlays"
+      :key="overlay.id"
+      :overlay="overlay"
+    />
   </MapComponent>
   <div class="mapcomponent__controls-container">
     <v-chip-group class="control-group" selected-class="no-class">
@@ -172,6 +177,7 @@ import { TimeSeriesData } from '@/lib/timeseries/types/SeriesData'
 import CoordinateSelectorLayer from '@/components/wms/CoordinateSelectorLayer.vue'
 import CoordinateSelectorControl from '@/components/map/CoordinateSelectorControl.vue'
 import type { MapSettings, OverlayLocation } from '@/lib/topology/componentSettings'
+import OverlayLayer from '@/components/wms/OverlayLayer.vue'
 
 interface ElevationWithUnitSymbol {
   units?: string
diff --git a/src/components/wms/OverlayControl.vue b/src/components/wms/OverlayControl.vue
index 11fcaea91..d5cbddf7f 100644
--- a/src/components/wms/OverlayControl.vue
+++ b/src/components/wms/OverlayControl.vue
@@ -61,7 +61,7 @@ watchEffect(() => {
   selectedIds.value = getVisibleOverlayIds(props.settings?.overlays ?? [])
 })
 
-const selectedOverlays = defineModel<OverlayLocation[]>()
+const selectedOverlays = defineModel<OverlayLocation[]>('selectedOverlays')
 watchEffect(() => {
   selectedOverlays.value = getOverlocationsByIds(selectedIds.value)
 })
diff --git a/src/components/wms/OverlayLayer.vue b/src/components/wms/OverlayLayer.vue
new file mode 100644
index 000000000..40a35d96e
--- /dev/null
+++ b/src/components/wms/OverlayLayer.vue
@@ -0,0 +1,41 @@
+<template>
+  <mgl-geo-json-source v-if="geojson" :sourceId :data="geojson">
+    <mgl-fill-layer
+      v-if="overlay.type === 'fill'"
+      :paint="overlay.paint"
+      :layerId
+    />
+    <mgl-line-layer
+      v-if="overlay.type === 'line'"
+      :paint="overlay.paint"
+      :layerId
+    />
+  </mgl-geo-json-source>
+</template>
+
+<script setup lang="ts">
+import {
+  MglGeoJsonSource,
+  MglFillLayer,
+  MglLineLayer,
+} from '@indoorequal/vue-maplibre-gl'
+import type { OverlayLocation } from '@/lib/topology/componentSettings'
+import { fetchLocationSetAsGeoJson } from '@/lib/topology'
+import { configManager } from '@/services/application-config'
+import { asyncComputed } from '@vueuse/core'
+
+interface Props {
+  overlay: OverlayLocation
+}
+
+const props = defineProps<Props>()
+
+const sourceId = `overlay-source-${props.overlay.id}`
+const layerId = `overlay-layer-${props.overlay.id}`
+
+const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
+const geojson = asyncComputed(
+  async () =>
+    await fetchLocationSetAsGeoJson(baseUrl, props.overlay.locationSet),
+)
+</script>
diff --git a/src/lib/topology/locations.ts b/src/lib/topology/locations.ts
index f3e75a39d..58110e084 100644
--- a/src/lib/topology/locations.ts
+++ b/src/lib/topology/locations.ts
@@ -71,9 +71,36 @@ async function fetchLocationsAsGeoJsonForSingleFilterId(
     includeIconNames: true,
     showThresholds: true,
   }
-  // TODO: Remove cast to any when fews-pi-requests supports GeoJSON response in LocationResponse
-  //       type.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const response = (await provider.getLocations(filter)) as any
-  return response as FeatureCollection<Geometry, Location>
+  const response = await provider.getLocations(filter)
+  if (!isFeatureCollection(response)) {
+    throw new Error('Expected GeoJSON FeatureCollection')
+  }
+  return response
+}
+
+function isFeatureCollection(
+  geojson: FeatureCollection<Geometry, Location> | unknown,
+): geojson is FeatureCollection<Geometry, Location> {
+  return (
+    (geojson as FeatureCollection<Geometry, Location>).type ===
+    'FeatureCollection'
+  )
+}
+
+export async function fetchLocationSetAsGeoJson(
+  baseUrl: string,
+  locationSetId: string,
+): Promise<FeatureCollection<Geometry, Location>> {
+  const provider = new PiWebserviceProvider(baseUrl, {
+    transformRequestFn: createTransformRequestFn(),
+  })
+  const filter = {
+    documentFormat: DocumentFormat.GEO_JSON,
+    locationSetId: locationSetId,
+  }
+  const response = await provider.getLocations(filter)
+  if (!isFeatureCollection(response)) {
+    throw new Error('Expected GeoJSON FeatureCollection')
+  }
+  return response
 }

From 321de9ceff118af9b5d213d414eaf60f994dbf6e Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Mon, 16 Dec 2024 14:43:58 +0100
Subject: [PATCH 14/32] Make overlay selection menu more compact

---
 src/components/wms/OverlayControl.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/wms/OverlayControl.vue b/src/components/wms/OverlayControl.vue
index d5cbddf7f..41f7859da 100644
--- a/src/components/wms/OverlayControl.vue
+++ b/src/components/wms/OverlayControl.vue
@@ -10,6 +10,7 @@
         v-model:selected="selectedIds"
         select-strategy="leaf"
         class="pb-0"
+        density="compact"
       >
         <v-list-item title="Select All" @click="toggleAll">
           <template #prepend>
@@ -17,6 +18,7 @@
               <v-checkbox-btn
                 :indeterminate="someSelected && !allSelected"
                 :model-value="allSelected"
+                density="compact"
               />
             </v-list-item-action>
           </template>
@@ -32,7 +34,7 @@
         >
           <template #prepend="{ isSelected }">
             <v-list-item-action start>
-              <v-checkbox-btn :model-value="isSelected" />
+              <v-checkbox-btn :model-value="isSelected" density="compact" />
             </v-list-item-action>
           </template>
         </v-list-item>

From 5b52d30a882380b023dc3ab878c85d061108ef2d Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Mon, 16 Dec 2024 14:51:04 +0100
Subject: [PATCH 15/32] Use getLayer and getSource id to remain active on
 basemap change

---
 src/components/wms/OverlayLayer.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/wms/OverlayLayer.vue b/src/components/wms/OverlayLayer.vue
index 40a35d96e..6a11397f4 100644
--- a/src/components/wms/OverlayLayer.vue
+++ b/src/components/wms/OverlayLayer.vue
@@ -23,6 +23,7 @@ import type { OverlayLocation } from '@/lib/topology/componentSettings'
 import { fetchLocationSetAsGeoJson } from '@/lib/topology'
 import { configManager } from '@/services/application-config'
 import { asyncComputed } from '@vueuse/core'
+import { getLayerId, getSourceId } from '@/lib/map'
 
 interface Props {
   overlay: OverlayLocation
@@ -30,8 +31,8 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const sourceId = `overlay-source-${props.overlay.id}`
-const layerId = `overlay-layer-${props.overlay.id}`
+const sourceId = getSourceId(`overlay-${props.overlay.id}`)
+const layerId = getLayerId(`overlay-${props.overlay.id}`)
 
 const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
 const geojson = asyncComputed(

From 61a4ee50d3aabb89cafde7212f0806a2f8469fdc Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Tue, 17 Dec 2024 09:04:41 +0100
Subject: [PATCH 16/32] Use topologyNode name as dashboard tab title

---
 src/components/general/DashboardItems.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/general/DashboardItems.vue b/src/components/general/DashboardItems.vue
index 6cd283547..3f8bbd756 100644
--- a/src/components/general/DashboardItems.vue
+++ b/src/components/general/DashboardItems.vue
@@ -7,7 +7,11 @@
     class="flex-0-0 w-100"
     density="compact"
   >
-    <v-tab v-for="item in componentItems" :prepend-icon="item.icon">
+    <v-tab
+      v-for="item in componentItems"
+      :prepend-icon="item.icon"
+      class="text-none"
+    >
       {{ item.title }}
     </v-tab>
   </v-tabs>
@@ -66,7 +70,7 @@ const componentItems = computed(() => {
     const topologyNode = topologyNodesStore.getNodeById(item.topologyNodeId)
     const component = componentTypeToComponentMap[componentName]
     const componentProps = getComponentPropsForNode(componentName, topologyNode)
-    const title = componentTypeToTitleMap[componentName]
+    const title = topologyNode?.name ?? componentTypeToTitleMap[componentName]
     const icon = componentTypeToIconMap[componentName]
     const settings = getComponentSettingsForItem(item)
     return {

From eab95ec2da5533e4c8af55cdddea70594b9a9a60 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Tue, 17 Dec 2024 10:33:40 +0100
Subject: [PATCH 17/32] Use topologyNode iconId if available for dasbboard tab

---
 src/components/general/DashboardItems.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/general/DashboardItems.vue b/src/components/general/DashboardItems.vue
index 3f8bbd756..8cbaf182f 100644
--- a/src/components/general/DashboardItems.vue
+++ b/src/components/general/DashboardItems.vue
@@ -71,7 +71,7 @@ const componentItems = computed(() => {
     const component = componentTypeToComponentMap[componentName]
     const componentProps = getComponentPropsForNode(componentName, topologyNode)
     const title = topologyNode?.name ?? componentTypeToTitleMap[componentName]
-    const icon = componentTypeToIconMap[componentName]
+    const icon = topologyNode?.iconId ?? componentTypeToIconMap[componentName]
     const settings = getComponentSettingsForItem(item)
     return {
       title,

From 0702c0a9f0e341e81c45a159cb3a72c53dd81f28 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Tue, 17 Dec 2024 15:30:20 +0100
Subject: [PATCH 18/32] Add overlays to component settings store

---
 .../SpatialDisplayComponent.vue               |  9 +--
 src/components/wms/OverlayControl.vue         | 67 +++++--------------
 src/lib/topology/componentSettings.ts         | 29 ++------
 src/stores/componentSettings.ts               | 33 +++++++--
 4 files changed, 54 insertions(+), 84 deletions(-)

diff --git a/src/components/spatialdisplay/SpatialDisplayComponent.vue b/src/components/spatialdisplay/SpatialDisplayComponent.vue
index 447ce2e22..0b08c1b54 100644
--- a/src/components/spatialdisplay/SpatialDisplayComponent.vue
+++ b/src/components/spatialdisplay/SpatialDisplayComponent.vue
@@ -42,7 +42,7 @@
       v-model:coordinate="workflowsStore.coordinate"
     />
     <OverlayLayer
-      v-for="overlay in selectedOverlays"
+      v-for="overlay in componentSettingsStore.selectedOverlays"
       :key="overlay.id"
       :overlay="overlay"
     />
@@ -90,7 +90,7 @@
           :selectedLocationId="props.locationId"
           @changeLocationId="onLocationChange"
         />
-        <OverlayControl
+        <OverlayControl />
           :settings="settings"
           v-model:selectedOverlays="selectedOverlays"
         />
@@ -176,8 +176,9 @@ import { useWorkflowsStore } from '@/stores/workflows'
 import { TimeSeriesData } from '@/lib/timeseries/types/SeriesData'
 import CoordinateSelectorLayer from '@/components/wms/CoordinateSelectorLayer.vue'
 import CoordinateSelectorControl from '@/components/map/CoordinateSelectorControl.vue'
-import type { MapSettings, OverlayLocation } from '@/lib/topology/componentSettings'
+import type { MapSettings } from '@/lib/topology/componentSettings'
 import OverlayLayer from '@/components/wms/OverlayLayer.vue'
+import { useComponentSettingsStore } from '@/stores/componentSettings'
 
 interface ElevationWithUnitSymbol {
   units?: string
@@ -245,6 +246,7 @@ const showLayer = ref<boolean>(true)
 const layerKind = ref(LayerKind.Static)
 
 const colourScalesStore = useColourScalesStore()
+const componentSettingsStore = useComponentSettingsStore()
 const workflowsStore = useWorkflowsStore()
 
 const showLocationsLayer = ref<boolean>(true)
@@ -376,7 +378,6 @@ const showLocationSearchControl = computed(() => {
   return !(props.settings?.locationSearchEnabled === false)
 })
 
-const selectedOverlays = ref<OverlayLocation[]>([])
 
 watch(
   () => props.layerCapabilities,
diff --git a/src/components/wms/OverlayControl.vue b/src/components/wms/OverlayControl.vue
index 41f7859da..fa7c838f4 100644
--- a/src/components/wms/OverlayControl.vue
+++ b/src/components/wms/OverlayControl.vue
@@ -1,5 +1,5 @@
 <template>
-  <ControlChip v-if="overlays.length">
+  <ControlChip v-if="componentSettingsStore.overlays.length">
     <v-icon size="large">mdi-layers-outline</v-icon>
     <v-menu
       transition="slide-y-transition"
@@ -7,7 +7,7 @@
       activator="parent"
     >
       <v-list
-        v-model:selected="selectedIds"
+        v-model:selected="componentSettingsStore.selectedOverlayIds"
         select-strategy="leaf"
         class="pb-0"
         density="compact"
@@ -27,7 +27,7 @@
         <v-divider class="mt-2" />
 
         <v-list-item
-          v-for="overlay in overlays"
+          v-for="overlay in componentSettingsStore.overlays"
           :key="overlay.id"
           :title="overlay.name"
           :value="overlay.id"
@@ -45,67 +45,30 @@
 
 <script setup lang="ts">
 import ControlChip from '@/components/wms/ControlChip.vue'
-import {
-  DeclarationReference,
-  OverlayLocation,
-  type MapSettings,
-} from '@/lib/topology/componentSettings'
-import { computed, ref, watchEffect } from 'vue'
+import { useComponentSettingsStore } from '@/stores/componentSettings'
+import { computed } from 'vue'
 
-interface Props {
-  settings?: MapSettings
-}
-
-const props = defineProps<Props>()
-
-const selectedIds = ref<string[]>([])
-watchEffect(() => {
-  selectedIds.value = getVisibleOverlayIds(props.settings?.overlays ?? [])
-})
-
-const selectedOverlays = defineModel<OverlayLocation[]>('selectedOverlays')
-watchEffect(() => {
-  selectedOverlays.value = getOverlocationsByIds(selectedIds.value)
-})
-
-const overlays = computed(() => {
-  const overlayIds = props.settings?.overlays?.map((overlay) => overlay.id)
-  return getOverlocationsByIds(overlayIds ?? [])
-})
+const componentSettingsStore = useComponentSettingsStore()
 
 const allSelected = computed(
-  () => selectedIds.value.length === overlays.value.length,
+  () =>
+    componentSettingsStore.overlays.length ===
+    componentSettingsStore.selectedOverlayIds.length,
 )
 
 const someSelected = computed(
   () =>
-    selectedIds.value.length > 0 &&
-    selectedIds.value.length < overlays.value.length,
+    componentSettingsStore.selectedOverlayIds.length > 0 &&
+    componentSettingsStore.selectedOverlayIds.length <
+      componentSettingsStore.overlays.length,
 )
 
 function toggleAll() {
   if (allSelected.value) {
-    selectedIds.value = []
+    componentSettingsStore.selectedOverlayIds = []
   } else {
-    selectedIds.value = overlays.value.map((overlay) => overlay.id)
+    componentSettingsStore.selectedOverlayIds =
+      componentSettingsStore.overlays.map((overlay) => overlay.id)
   }
 }
-
-function getOverlayById(id: string) {
-  return props.settings?.declarations?.overlays?.locations?.find(
-    (overlay) => overlay.id === id,
-  )
-}
-
-function getOverlocationsByIds(ids: string[]) {
-  return ids.map((id) => getOverlayById(id)).filter((overlay) => !!overlay)
-}
-
-function getVisibleOverlayIds(references: DeclarationReference[]) {
-  return (
-    references
-      ?.filter((overlay) => overlay.visible)
-      .map((overlay) => overlay.id) ?? []
-  )
-}
 </script>
diff --git a/src/lib/topology/componentSettings.ts b/src/lib/topology/componentSettings.ts
index ce1dd41b1..a80adc9a2 100644
--- a/src/lib/topology/componentSettings.ts
+++ b/src/lib/topology/componentSettings.ts
@@ -6,8 +6,9 @@ type PaintMapping = {
   line: LinePaintProps
 }
 
-export interface WebocComponentSettingsResponse {
-  webocComponentSettings: WebocComponentSettings[]
+export interface ComponentSettingsResponse {
+  componentSettings: ComponentSettings[]
+  declarations?: Declarations
 }
 
 interface ComponentSettingsMapping {
@@ -26,16 +27,11 @@ type SettingsPerComponent = {
   [key in ComponentType]?: ComponentSettingsMapping[key]
 }
 
-export interface WebocComponentSettings extends SettingsPerComponent {
+export interface ComponentSettings extends SettingsPerComponent {
   id: string
-  declarations?: Declarations
-}
-
-interface BaseSettings {
-  declarations?: Declarations
 }
 
-export interface ChartSettings extends BaseSettings {
+export interface ChartSettings {
   chartEnabled?: boolean
   elevationChartEnabled?: boolean
   tableEnabled?: boolean
@@ -46,14 +42,6 @@ export interface ChartSettings extends BaseSettings {
 export interface MapSettings extends ChartSettings {
   chartPanelEnabled?: boolean
   locationSearchEnabled?: boolean
-  baseMaps?: BaseMaps
-  overlays?: DeclarationReference[]
-}
-
-export interface BaseMaps {
-  defaultLightBaseMap: string
-  defaultDarkBaseMap: string
-  additionalMaps?: DeclarationReference[]
 }
 
 export interface Declarations {
@@ -64,7 +52,7 @@ export interface Declarations {
 export interface BaseMap {
   id: string
   name: string
-  // TODO: Add layer specification
+  style: string
 }
 
 export interface Overlays {
@@ -78,8 +66,3 @@ export interface OverlayLocation {
   type: keyof PaintMapping
   paint: PaintMapping[OverlayLocation['type']]
 }
-
-export interface DeclarationReference {
-  id: string
-  visible: boolean
-}
diff --git a/src/stores/componentSettings.ts b/src/stores/componentSettings.ts
index 6a112c2ac..3c9ba5100 100644
--- a/src/stores/componentSettings.ts
+++ b/src/stores/componentSettings.ts
@@ -1,29 +1,52 @@
 import { getResourcesStaticUrl } from '@/lib/fews-config'
 import { defineStore } from 'pinia'
 import type {
-  WebocComponentSettings,
-  WebocComponentSettingsResponse,
+  ComponentSettings,
+  ComponentSettingsResponse,
+  Declarations,
+  OverlayLocation,
 } from '@/lib/topology/componentSettings'
 
 interface State {
-  settings: WebocComponentSettings[]
+  settings: ComponentSettings[]
+  declarations?: Declarations
+  selectedOverlayIds: string[]
+  selectedBaseMapId?: string
 }
 
 export const useComponentSettingsStore = defineStore('componentSettings', {
   state: (): State => ({
     settings: [],
+    selectedOverlayIds: [],
   }),
+  getters: {
+    overlays: (state) => state.declarations?.overlays?.locations ?? [],
+    selectedOverlays(): OverlayLocation[] {
+      return this.selectedOverlayIds
+        .map((id) => this.overlays.find((o) => o.id === id))
+        .filter((o) => o !== undefined)
+    },
+    basemaps: (state) => {
+      return state.declarations?.baseMaps
+    },
+  },
   actions: {
     async fetchState() {
       if (this.settings.length > 0) return
 
       const url = getResourcesStaticUrl('webocComponentSettings.json')
       const response = await fetch(url)
-      const data: WebocComponentSettingsResponse = await response.json()
-      this.settings = data.webocComponentSettings
+      const data: ComponentSettingsResponse = await response.json()
+      this.settings = data.componentSettings
+      this.declarations = data.declarations
     },
     getSettingsById(id: string) {
       return this.settings.find((s) => s.id === id)
     },
   },
+  persist: {
+    key: 'weboc-component-settings-v1.0.0',
+    storage: window.localStorage,
+    omit: ['settings', 'declarations'],
+  },
 })

From 0162300baab04138badd35c2187ea71dad6c527e Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Tue, 17 Dec 2024 12:15:29 +0100
Subject: [PATCH 19/32] Only fetch dashboards.json once

---
 src/stores/dashboards.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/stores/dashboards.ts b/src/stores/dashboards.ts
index 239941edd..e7a58e413 100644
--- a/src/stores/dashboards.ts
+++ b/src/stores/dashboards.ts
@@ -13,6 +13,8 @@ export const useDashboardsStore = defineStore('dashboards', {
   actions: {
     async fetchState() {
       const url = getResourcesStaticUrl('dashboards.json')
+      if (this.dashboards.length > 0) return
+
       const response = await fetch(url)
       const data: DashboardsResponse = await response.json()
       this.dashboards = data.dashboards

From 60b9af3bf5415cbf845efa02a94d15260b508592 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Tue, 17 Dec 2024 12:16:04 +0100
Subject: [PATCH 20/32] Make node dashboard check lowercase

---
 src/lib/topology/nodes.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/lib/topology/nodes.ts b/src/lib/topology/nodes.ts
index 93bcfd109..1de0ddd0b 100644
--- a/src/lib/topology/nodes.ts
+++ b/src/lib/topology/nodes.ts
@@ -165,5 +165,8 @@ export function nodeHasWebDisplay(node: TopologyNode) {
 }
 
 export function nodeHasDashboard(node: TopologyNode) {
-  return node.id.includes('dashboard') && node.topologyNodes !== undefined
+  return (
+    node.id.toLowerCase().includes('dashboard') &&
+    node.topologyNodes !== undefined
+  )
 }

From c6c39e0b85f3a484e310ce5a90d8c291b855deb6 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Tue, 17 Dec 2024 12:17:15 +0100
Subject: [PATCH 21/32] Add basemap control

---
 src/assets/DefaultBaseMaps.json               | 17 ++++++
 src/assets/DefaultUserSettings.json           | 21 -------
 src/assets/base-layers.json                   | 57 -------------------
 src/components/map/MapComponent.vue           | 37 ++++++------
 .../SpatialDisplayComponent.vue               |  6 +-
 src/components/wms/BaseMapControl.vue         | 28 +++++++++
 src/services/useBaseLayers/index.ts           | 49 ----------------
 src/stores/componentSettings.ts               | 38 ++++++++++++-
 8 files changed, 98 insertions(+), 155 deletions(-)
 create mode 100644 src/assets/DefaultBaseMaps.json
 delete mode 100644 src/assets/base-layers.json
 create mode 100644 src/components/wms/BaseMapControl.vue
 delete mode 100644 src/services/useBaseLayers/index.ts

diff --git a/src/assets/DefaultBaseMaps.json b/src/assets/DefaultBaseMaps.json
new file mode 100644
index 000000000..0f09bff28
--- /dev/null
+++ b/src/assets/DefaultBaseMaps.json
@@ -0,0 +1,17 @@
+{
+  "automatic": {
+    "id": "automatic",
+    "name": "Automatic",
+    "style": "automatic"
+  },
+  "light": {
+    "id": "carto-db-light",
+    "name": "CartoDB (light)",
+    "style": "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+  },
+  "dark": {
+    "id": "carto-dark-matter",
+    "name": "CartoDB (dark)",
+    "style": "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
+  }
+}
diff --git a/src/assets/DefaultUserSettings.json b/src/assets/DefaultUserSettings.json
index 2bbc2e643..746cf89f7 100644
--- a/src/assets/DefaultUserSettings.json
+++ b/src/assets/DefaultUserSettings.json
@@ -82,27 +82,6 @@
     ],
     "group": "UI"
   },
-  {
-    "id": "ui.map.theme",
-    "type": "oneOfMultiple",
-    "label": "Basemap",
-    "value": "carto-db-automatic",
-    "items": [
-      {
-        "value": "carto-db-automatic",
-        "icon": "mdi-theme-light-dark"
-      },
-      {
-        "value": "carto-db-light",
-        "icon": "mdi-weather-sunny"
-      },
-      {
-        "value": "carto-dark-matter",
-        "icon": "mdi-weather-night"
-      }
-    ],
-    "group": "Map"
-  },
   {
     "id": "ui.map.showLocationNames",
     "type": "boolean",
diff --git a/src/assets/base-layers.json b/src/assets/base-layers.json
deleted file mode 100644
index a4581f1b2..000000000
--- a/src/assets/base-layers.json
+++ /dev/null
@@ -1,57 +0,0 @@
-{
-  "default": "carto-dark-matter",
-  "maxZoom": 18,
-  "baseLayers": [
-    {
-      "id": "carto-db-automatic",
-      "name": "CartoDB (automatic)",
-      "img": "cartodb-light-dark.png",
-      "automatic": {
-        "dark": "carto-dark-matter",
-        "light": "carto-db-light"
-      }
-    },
-    {
-      "id": "carto-db-light",
-      "name": "CartoDB (licht)",
-      "img": "cartodb-light.png",
-      "type": "vector",
-      "style": "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
-      "attribution": "&copy; <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> &copy; <a href='http://cartodb.com/attributions'>CartoDB</a>"
-    },
-    {
-      "id": "carto-dark-matter",
-      "name": "CartoDB (dark)",
-      "img": "cartodb-dark.png",
-      "type": "vector",
-      "style": "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
-      "attribution": "&copy; <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> &copy; <a href='http://cartodb.com/attributions'>CartoDB</a>"
-    },
-    {
-      "id": "brt-water",
-      "name": "BRT Water",
-      "type": "raster",
-      "img": "brt-waterkaart-thumbnail.png",
-      "layers": [
-        {
-          "urlTemplate": "https://service.pdok.nl/brt/achtergrondkaart/wmts/v2_0/water/EPSG:3857/{z}/{x}/{y}.png",
-          "attribution": ""
-        }
-      ],
-      "minZoom": 6,
-      "maxZoom": 19
-    },
-    {
-      "id": "esri-imagery",
-      "type": "raster",
-      "name": "ESRI WorldImagery",
-      "img": "esri-worldimagery-thumbnail.jpeg",
-      "layers": [
-        {
-          "urlTemplate": "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
-          "attribution": "Tiles &copy; Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AEX, Getmapping, Aerogrid, IGN, IGP, swisstopo, and the GIS User Community"
-        }
-      ]
-    }
-  ]
-}
diff --git a/src/components/map/MapComponent.vue b/src/components/map/MapComponent.vue
index 8bb67398b..88a0d991a 100644
--- a/src/components/map/MapComponent.vue
+++ b/src/components/map/MapComponent.vue
@@ -26,42 +26,37 @@ import { configManager } from '@/services/application-config'
 import { authenticationManager } from '@/services/authentication/AuthenticationManager'
 import {
   MglAttributionControl,
-  MglDefaults,
   MglMap,
   MglScaleControl,
-  useMap,
 } from '@indoorequal/vue-maplibre-gl'
-import type { ResourceType, RequestParameters, LngLatBounds } from 'maplibre-gl'
-import { useBaseLayers } from '@/services/useBaseLayers'
-import { useUserSettingsStore } from '@/stores/userSettings'
-import { useTemplateRef, watch } from 'vue'
+import type {
+  ResourceType,
+  RequestParameters,
+  LngLatBounds,
+  Map,
+} from 'maplibre-gl'
+import { computed, useTemplateRef, watch } from 'vue'
 import { transformStyle } from '@/lib/map'
+import { useComponentSettingsStore } from '@/stores/componentSettings'
 
 interface Props {
   bounds?: LngLatBounds
+  baseMapId?: string
 }
 
 defineProps<Props>()
 
-const settings = useUserSettingsStore()
-
-MglDefaults.style =
-  'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'
-
-const { baseLayerStyle } = useBaseLayers(
-  () => settings.get('ui.map.theme')?.value as string | undefined,
-)
-
-const initialStyle = baseLayerStyle.value
-
 const mapRef = useTemplateRef('map')
 
-watch(baseLayerStyle, (newBaseStyle) => {
+const componentSettingsStore = useComponentSettingsStore()
+const selectedStyle = computed(() => componentSettingsStore.selectedStyle)
+const initialStyle = selectedStyle.value
+
+watch(selectedStyle, (newBaseStyle) => {
   if (!newBaseStyle) return
 
-  // NOTE: We have to get mapkey because useMap uses inject and we are not a child of MglMap
-  const mapKey = mapRef.value?.mapKey
-  const map = useMap(mapKey).map
+  // @ts-expect-error map is not exposed in the types
+  const map: Map | undefined = mapRef.value?.map
   map?.setStyle(newBaseStyle, { transformStyle })
 })
 
diff --git a/src/components/spatialdisplay/SpatialDisplayComponent.vue b/src/components/spatialdisplay/SpatialDisplayComponent.vue
index 0b08c1b54..be491ec18 100644
--- a/src/components/spatialdisplay/SpatialDisplayComponent.vue
+++ b/src/components/spatialdisplay/SpatialDisplayComponent.vue
@@ -91,9 +91,7 @@
           @changeLocationId="onLocationChange"
         />
         <OverlayControl />
-          :settings="settings"
-          v-model:selectedOverlays="selectedOverlays"
-        />
+        <BaseMapControl />
       </template>
     </v-chip-group>
   </div>
@@ -147,6 +145,7 @@ import LocationsLayer from '@/components/wms/LocationsLayer.vue'
 import SelectedCoordinateLayer from '@/components/wms/SelectedCoordinateLayer.vue'
 import InformationPanel from '@/components/wms/InformationPanel.vue'
 import OverlayControl from '@/components/wms/OverlayControl.vue'
+import BaseMapControl from '@/components/wms/BaseMapControl.vue'
 import ElevationSlider from '@/components/wms/ElevationSlider.vue'
 import DateTimeSlider from '@/components/general/DateTimeSlider.vue'
 import BoundingBoxControl from '@/components/map/BoundingBoxControl.vue'
@@ -378,7 +377,6 @@ const showLocationSearchControl = computed(() => {
   return !(props.settings?.locationSearchEnabled === false)
 })
 
-
 watch(
   () => props.layerCapabilities,
   (layer) => {
diff --git a/src/components/wms/BaseMapControl.vue b/src/components/wms/BaseMapControl.vue
new file mode 100644
index 000000000..f98e8647a
--- /dev/null
+++ b/src/components/wms/BaseMapControl.vue
@@ -0,0 +1,28 @@
+<template>
+  <ControlChip v-if="componentSettingsStore.baseMaps.length">
+    <v-icon size="large">mdi-map</v-icon>
+    <v-menu
+      transition="slide-y-transition"
+      :close-on-content-click="false"
+      activator="parent"
+    >
+      <v-list class="pb-0" density="compact">
+        <v-list-item
+          v-for="basemap in componentSettingsStore.baseMaps"
+          :key="basemap.id"
+          :title="basemap.name"
+          :value="basemap.id"
+          :active="basemap.id === componentSettingsStore.selectedBaseMapId"
+          @click="componentSettingsStore.selectedBaseMapId = basemap.id"
+        />
+      </v-list>
+    </v-menu>
+  </ControlChip>
+</template>
+
+<script setup lang="ts">
+import ControlChip from '@/components/wms/ControlChip.vue'
+import { useComponentSettingsStore } from '@/stores/componentSettings'
+
+const componentSettingsStore = useComponentSettingsStore()
+</script>
diff --git a/src/services/useBaseLayers/index.ts b/src/services/useBaseLayers/index.ts
deleted file mode 100644
index 424c6e4e5..000000000
--- a/src/services/useBaseLayers/index.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { MaybeRefOrGetter, ShallowRef } from 'vue'
-import { shallowRef, toValue, watchEffect } from 'vue'
-import Basemaps from '@/assets/base-layers.json'
-import { MglDefaults } from '@indoorequal/vue-maplibre-gl'
-import { useDark } from '@vueuse/core'
-import { StyleSpecification } from 'maplibre-gl'
-
-export interface UseBaseLayersReturn {
-  baseLayerStyle: ShallowRef<string | StyleSpecification>
-  baseLayers: ShallowRef<(string | object)[]>
-}
-
-export function useBaseLayers(
-  layerId: MaybeRefOrGetter<string | undefined>,
-): UseBaseLayersReturn {
-  const baseLayerStyle = shallowRef<string | StyleSpecification>(
-    MglDefaults.style ?? '',
-  )
-  const baseLayers = shallowRef<(string | object)[]>(Basemaps.baseLayers)
-
-  const isDark = useDark()
-
-  watchEffect(() => {
-    const _layerId = toValue(layerId)
-    const layerDefinition = Basemaps.baseLayers.find(
-      (layer: any) => layer.id === _layerId,
-    )
-    if (layerDefinition?.automatic) {
-      if (isDark.value === true) {
-        const themedLayer = Basemaps.baseLayers.find(
-          (layer: any) => layer.id === layerDefinition.automatic.dark,
-        )
-        if (themedLayer?.style) baseLayerStyle.value = themedLayer?.style
-      } else {
-        const themedLayer = Basemaps.baseLayers.find(
-          (layer: any) => layer.id === layerDefinition.automatic.light,
-        )
-        if (themedLayer?.style) baseLayerStyle.value = themedLayer?.style
-      }
-    } else if (layerDefinition?.style) {
-      baseLayerStyle.value = layerDefinition?.style
-    }
-  })
-
-  return {
-    baseLayerStyle,
-    baseLayers,
-  }
-}
diff --git a/src/stores/componentSettings.ts b/src/stores/componentSettings.ts
index 3c9ba5100..ba9c3c2ac 100644
--- a/src/stores/componentSettings.ts
+++ b/src/stores/componentSettings.ts
@@ -1,23 +1,31 @@
 import { getResourcesStaticUrl } from '@/lib/fews-config'
 import { defineStore } from 'pinia'
+import DefaultBaseMaps from '@/assets/DefaultBaseMaps.json'
 import type {
+  BaseMap,
   ComponentSettings,
   ComponentSettingsResponse,
   Declarations,
   OverlayLocation,
 } from '@/lib/topology/componentSettings'
+import { useDark } from '@vueuse/core'
 
 interface State {
   settings: ComponentSettings[]
   declarations?: Declarations
   selectedOverlayIds: string[]
-  selectedBaseMapId?: string
+  selectedBaseMapId: string
+}
+
+function isKeyOfDefaultStyle(key: string): key is keyof typeof DefaultBaseMaps {
+  return key in DefaultBaseMaps
 }
 
 export const useComponentSettingsStore = defineStore('componentSettings', {
   state: (): State => ({
     settings: [],
     selectedOverlayIds: [],
+    selectedBaseMapId: 'automatic',
   }),
   getters: {
     overlays: (state) => state.declarations?.overlays?.locations ?? [],
@@ -26,9 +34,33 @@ export const useComponentSettingsStore = defineStore('componentSettings', {
         .map((id) => this.overlays.find((o) => o.id === id))
         .filter((o) => o !== undefined)
     },
-    basemaps: (state) => {
-      return state.declarations?.baseMaps
+    baseMaps: (state) => {
+      const defaultBaseMaps: BaseMap[] = Object.values(DefaultBaseMaps)
+      const baseMaps = state.declarations?.baseMaps ?? []
+      return [
+        ...defaultBaseMaps,
+        ...baseMaps,
+      ]
+    },
+    selectedBaseMap(): BaseMap {
+      if (this.selectedBaseMapId === 'automatic') {
+        const isDark = useDark()
+        return DefaultBaseMaps[isDark.value ? 'dark' : 'light']
+      }
+      if (isKeyOfDefaultStyle(this.selectedBaseMapId)) {
+        return DefaultBaseMaps[this.selectedBaseMapId]
+      }
+      // FIXME: What to do if the selected base map is not found?
+      //        Could happen when persisting the selected base map
+      return this.baseMaps.find((b) => b.id === this.selectedBaseMapId) ?? this.baseMaps[0]
     },
+    selectedStyle(): string {
+      const style = this.selectedBaseMap.style
+      if (style.startsWith('/')) {
+        return getResourcesStaticUrl(style.slice(1))
+      }
+      return style
+    }
   },
   actions: {
     async fetchState() {

From 6fcf0adfba50d0a27ec09d39c448d83675a53c87 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Tue, 17 Dec 2024 13:32:52 +0100
Subject: [PATCH 22/32] Get dashboard after empty check

---
 src/stores/dashboards.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/dashboards.ts b/src/stores/dashboards.ts
index e7a58e413..e07492d18 100644
--- a/src/stores/dashboards.ts
+++ b/src/stores/dashboards.ts
@@ -12,9 +12,9 @@ export const useDashboardsStore = defineStore('dashboards', {
   }),
   actions: {
     async fetchState() {
-      const url = getResourcesStaticUrl('dashboards.json')
       if (this.dashboards.length > 0) return
 
+      const url = getResourcesStaticUrl('dashboards.json')
       const response = await fetch(url)
       const data: DashboardsResponse = await response.json()
       this.dashboards = data.dashboards

From 9501cab4dd157259c132be1804027f46c9b2ce28 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Tue, 17 Dec 2024 13:33:47 +0100
Subject: [PATCH 23/32] Disable tasks as it breaks the topology tree

---
 src/lib/topology/displayTabs.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/topology/displayTabs.ts b/src/lib/topology/displayTabs.ts
index 938e778da..5d5d59091 100644
--- a/src/lib/topology/displayTabs.ts
+++ b/src/lib/topology/displayTabs.ts
@@ -88,7 +88,7 @@ export function displayTabsForNode(
         break
       case 'tasks':
         // HACK
-        tab.active = true
+        tab.active = false
         tab.to.params = { ...params }
         break
     }

From cc589ff9cd2a78c8d5c3e78fe96a954190799ca4 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Tue, 17 Dec 2024 13:34:32 +0100
Subject: [PATCH 24/32] Linting

---
 src/components/spatialdisplay/SpatialDisplay.vue |  4 +++-
 src/lib/dashboard/types.ts                       |  2 +-
 src/stores/componentSettings.ts                  | 12 ++++++------
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/spatialdisplay/SpatialDisplay.vue b/src/components/spatialdisplay/SpatialDisplay.vue
index 7e9f29708..9f8b290d6 100644
--- a/src/components/spatialdisplay/SpatialDisplay.vue
+++ b/src/components/spatialdisplay/SpatialDisplay.vue
@@ -153,7 +153,9 @@ const filter = computed(() => {
 })
 
 const showChartPanel = computed(() => {
-  return filter.value !== undefined && !(props.settings?.chartPanelEnabled === false)
+  return (
+    filter.value !== undefined && !(props.settings?.chartPanelEnabled === false)
+  )
 })
 
 const elevationChartFilter = computed(() => {
diff --git a/src/lib/dashboard/types.ts b/src/lib/dashboard/types.ts
index 869bc4e1a..d6dcd8583 100644
--- a/src/lib/dashboard/types.ts
+++ b/src/lib/dashboard/types.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@/lib/topology/component"
+import { ComponentType } from '@/lib/topology/component'
 
 export interface DashboardsResponse {
   dashboards: Dashboard[]
diff --git a/src/stores/componentSettings.ts b/src/stores/componentSettings.ts
index ba9c3c2ac..ed126ab2a 100644
--- a/src/stores/componentSettings.ts
+++ b/src/stores/componentSettings.ts
@@ -37,10 +37,7 @@ export const useComponentSettingsStore = defineStore('componentSettings', {
     baseMaps: (state) => {
       const defaultBaseMaps: BaseMap[] = Object.values(DefaultBaseMaps)
       const baseMaps = state.declarations?.baseMaps ?? []
-      return [
-        ...defaultBaseMaps,
-        ...baseMaps,
-      ]
+      return [...defaultBaseMaps, ...baseMaps]
     },
     selectedBaseMap(): BaseMap {
       if (this.selectedBaseMapId === 'automatic') {
@@ -52,7 +49,10 @@ export const useComponentSettingsStore = defineStore('componentSettings', {
       }
       // FIXME: What to do if the selected base map is not found?
       //        Could happen when persisting the selected base map
-      return this.baseMaps.find((b) => b.id === this.selectedBaseMapId) ?? this.baseMaps[0]
+      return (
+        this.baseMaps.find((b) => b.id === this.selectedBaseMapId) ??
+        this.baseMaps[0]
+      )
     },
     selectedStyle(): string {
       const style = this.selectedBaseMap.style
@@ -60,7 +60,7 @@ export const useComponentSettingsStore = defineStore('componentSettings', {
         return getResourcesStaticUrl(style.slice(1))
       }
       return style
-    }
+    },
   },
   actions: {
     async fetchState() {

From a39c840785e02e0ffaf44b9bd32b3e21f42aa0e1 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Wed, 11 Dec 2024 13:55:13 +0100
Subject: [PATCH 25/32] Scope current colour scales to spatialdisplay instance

---
 .../SpatialDisplayComponent.vue               | 125 +++++-------------
 src/components/wms/InformationPanel.vue       |  84 +++++++-----
 src/services/useColourScales/index.ts         |  56 ++++++++
 src/services/useWms/index.ts                  |  10 +-
 src/stores/colourScales.ts                    | 115 ++++++++++------
 5 files changed, 225 insertions(+), 165 deletions(-)
 create mode 100644 src/services/useColourScales/index.ts

diff --git a/src/components/spatialdisplay/SpatialDisplayComponent.vue b/src/components/spatialdisplay/SpatialDisplayComponent.vue
index be491ec18..379120e92 100644
--- a/src/components/spatialdisplay/SpatialDisplayComponent.vue
+++ b/src/components/spatialdisplay/SpatialDisplayComponent.vue
@@ -13,18 +13,18 @@
       :streamlineOptions="layerCapabilities?.animatedVectors"
       @doubleclick="onCoordinateClick"
     />
-    <div class="colourbar-container" v-if="colourScalesStore.currentScale">
+    <div class="colourbar-container" v-if="currentColourScale">
       <ColourLegend
-        v-if="!colourScalesStore.currentScale.useGradients"
-        :colourMap="colourScalesStore.currentScale.colourMap"
-        :title="colourScalesStore.currentScale.title"
+        v-if="!currentColourScale.useGradients"
+        :colourMap="currentColourScale.colourMap"
+        :title="currentColourScale.title"
       />
       <ColourBar
         v-else
-        :colourMap="colourScalesStore.currentScale.colourMap"
-        :title="colourScalesStore.currentScale.title"
-        :useGradients="colourScalesStore.currentScale.useGradients"
-        v-model:range="colourScalesStore.currentScale.range"
+        :colourMap="currentColourScale.colourMap"
+        :title="currentColourScale.title"
+        :useGradients="currentColourScale.useGradients"
+        v-model:range="currentColourScale.range"
       />
     </div>
     <SelectedCoordinateLayer
@@ -80,6 +80,8 @@
           :canUseStreamlines="canUseStreamlines"
           v-model:layer-kind="layerKind"
           v-model:show-layer="showLayer"
+          :currentColourScaleIds="currentColourScaleIds"
+          @update:current-colour-scale="currentColourScale = $event"
         />
         <LocationsSearchControl
           v-if="showLocationSearchControl"
@@ -116,7 +118,7 @@
     <template #below-track>
       <DateTimeSliderValues
         :values="maxValuesTimeSeries ?? []"
-        :colour-scale="colourScalesStore.currentScale ?? null"
+        :colour-scale="currentColourScale ?? null"
         height="6px"
         class="mb-1"
         style="margin-top: -7px"
@@ -130,12 +132,8 @@ import DateTimeSliderValues from '@/components/general/DateTimeSliderValues.vue'
 import MapComponent from '@/components/map/MapComponent.vue'
 import AnimatedStreamlineRasterLayer from '@/components/wms/AnimatedStreamlineRasterLayer.vue'
 
-import { ref, computed, onBeforeMount, reactive, watch, watchEffect } from 'vue'
-import {
-  convertBoundingBoxToLngLatBounds,
-  fetchWmsLegend,
-  useWmsLegend,
-} from '@/services/useWms'
+import { ref, computed, onBeforeMount, watch, watchEffect } from 'vue'
+import { convertBoundingBoxToLngLatBounds } from '@/services/useWms'
 import ColourBar from '@/components/wms/ColourBar.vue'
 import AnimatedRasterLayer, {
   AnimatedRasterLayerOptions,
@@ -161,16 +159,11 @@ import {
 import { configManager } from '@/services/application-config'
 import type { Layer, Style } from '@deltares/fews-wms-requests'
 import { LayerKind } from '@/lib/streamlines'
-import { useColourScalesStore } from '@/stores/colourScales'
+import { ColourScale, useColourScalesStore } from '@/stores/colourScales'
 import { useDisplay } from 'vuetify'
 import { useFilterLocations } from '@/services/useFilterLocations'
 import ColourLegend from '@/components/wms/ColourLegend.vue'
-import {
-  getLegendTitle,
-  legendToRange,
-  rangeToString,
-  styleToId,
-} from '@/lib/legend'
+import { rangeToString, styleToId } from '@/lib/legend'
 import { useWorkflowsStore } from '@/stores/workflows'
 import { TimeSeriesData } from '@/lib/timeseries/types/SeriesData'
 import CoordinateSelectorLayer from '@/components/wms/CoordinateSelectorLayer.vue'
@@ -235,7 +228,6 @@ const forecastTime = ref<Date>()
 const isLoading = ref(false)
 let debouncedSetLayerOptions!: () => void
 
-const legendLayerName = ref(props.layerName)
 const legendLayerStyles = ref<Style[]>()
 const userSettings = useUserSettingsStore()
 
@@ -246,6 +238,9 @@ const layerKind = ref(LayerKind.Static)
 
 const colourScalesStore = useColourScalesStore()
 const componentSettingsStore = useComponentSettingsStore()
+const currentColourScale = ref<ColourScale>()
+const currentColourScaleIds = ref<string[]>([])
+
 const workflowsStore = useWorkflowsStore()
 
 const showLocationsLayer = ref<boolean>(true)
@@ -263,73 +258,22 @@ watchEffect(() => {
 
 watch(
   legendLayerStyles,
-  () => {
-    const styles = legendLayerStyles.value
+  (styles) => {
     if (styles === undefined) {
-      colourScalesStore.currentIds = []
-      colourScalesStore.currentIndex = 0
+      currentColourScaleIds.value = []
       return
     }
 
-    legendLayerName.value = props.layerName
-    colourScalesStore.currentIds = styles.map(styleToId)
-    colourScalesStore.currentIndex = 0
-
-    styles.forEach(async (style) => {
-      const styleId = styleToId(style)
-
-      if (!(styleId in colourScalesStore.scales)) {
-        const initialLegendGraphic = await fetchWmsLegend(
-          baseUrl,
-          legendLayerName.value,
-          userSettings.useDisplayUnits,
-          undefined,
-          style,
-        )
-
-        const legend = initialLegendGraphic.legend
-        const newColourScale = reactive({
-          title: getLegendTitle(
-            props.layerCapabilities?.title ?? '',
-            initialLegendGraphic,
-          ),
-          style: style,
-          colourMap: legend,
-          range: legendToRange(legend),
-          initialRange: legendToRange(legend),
-          useGradients: !legend.some((entry) => entry.colorSmoothing === false),
-        })
-        colourScalesStore.scales[styleId] = newColourScale
-
-        const range = computed(() => {
-          const newRange = rangeToString(newColourScale.range)
-          const initialRange = rangeToString(newColourScale.initialRange)
-
-          return newRange !== initialRange ? newRange : undefined
-        })
-
-        const newLegendGraphic = useWmsLegend(
-          baseUrl,
-          legendLayerName,
-          () => userSettings.useDisplayUnits,
-          range,
-          style,
-          () =>
-            props.layerCapabilities
-              ? (props.layerCapabilities.styles ?? [style])
-              : undefined,
-        )
-
-        watch(newLegendGraphic, () => {
-          if (newLegendGraphic.value?.legend === undefined) return
-          colourScalesStore.scales[styleId].title = getLegendTitle(
-            props.layerCapabilities?.title ?? '',
-            newLegendGraphic.value,
-          )
-          colourScalesStore.scales[styleId].colourMap =
-            newLegendGraphic.value.legend
-        })
-      }
+    currentColourScaleIds.value = styles.map(styleToId)
+
+    styles.forEach((style) => {
+      colourScalesStore.addScale(
+        style,
+        props.layerName,
+        () => props.layerCapabilities?.title,
+        () => userSettings.useDisplayUnits,
+        () => props.layerCapabilities?.styles ?? [],
+      )
     })
   },
   { immediate: true },
@@ -383,7 +327,6 @@ watch(
     const _forecastTime = layer?.keywordList?.[0].forecastTime
     forecastTime.value = _forecastTime ? new Date(_forecastTime) : undefined
 
-    legendLayerName.value = props.layerName
     legendLayerStyles.value = props.layerCapabilities?.styles
     if (legendLayerStyles.value === undefined && props.layerName) {
       legendLayerStyles.value = [
@@ -414,7 +357,7 @@ watch(currentElevation, () => {
 })
 
 watch(
-  [() => colourScalesStore.currentScale?.range, () => userSettings.useDisplayUnits],
+  [() => currentColourScale.value?.range, () => userSettings.useDisplayUnits],
   () => {
     setLayerOptions()
   },
@@ -462,10 +405,10 @@ function setLayerOptions(): void {
         ? convertBoundingBoxToLngLatBounds(props.layerCapabilities.boundingBox)
         : undefined,
       elevation: currentElevation.value,
-      colorScaleRange: colourScalesStore.currentScale?.range
-        ? rangeToString(colourScalesStore.currentScale?.range)
+      colorScaleRange: currentColourScale.value?.range
+        ? rangeToString(currentColourScale.value?.range)
         : undefined,
-      style: colourScalesStore.currentScale?.style.name,
+      style: currentColourScale.value?.style.name,
       useDisplayUnits: userSettings.useDisplayUnits,
     }
   } else {
diff --git a/src/components/wms/InformationPanel.vue b/src/components/wms/InformationPanel.vue
index 32d2c26c4..07edfe160 100644
--- a/src/components/wms/InformationPanel.vue
+++ b/src/components/wms/InformationPanel.vue
@@ -36,14 +36,11 @@
           prepend-icon="mdi-clock-time-four-outline"
         >
         </v-list-item>
-        <v-list-item
-          prepend-icon="mdi-palette"
-          v-if="colourScalesStore.currentScales"
-        >
+        <v-list-item prepend-icon="mdi-palette" v-if="currentScales">
           <v-list-item
-            v-for="(item, index) of colourScalesStore.currentScales"
+            v-for="(item, index) of currentScales"
             :key="index"
-            @click="colourScalesStore.currentIndex = index"
+            @click="currentColourScaleIndex = index"
             class="px-0"
           >
             <v-list-item-title>
@@ -62,14 +59,12 @@
                 <ColourLegendTable :colourMap="item.colourMap" />
               </template>
             </div>
-            <template #append v-if="index === colourScalesStore.currentIndex">
+            <template #append v-if="index === currentColourScaleIndex">
               <v-icon>mdi-check</v-icon>
             </template>
           </v-list-item>
         </v-list-item>
-        <v-list-item
-          v-if="colourScalesStore.currentScale?.useGradients !== false"
-        >
+        <v-list-item v-if="currentScale?.useGradients !== false">
           <template v-slot:prepend>
             <div class="mx-7"></div>
           </template>
@@ -81,8 +76,8 @@
                 variant="plain"
                 hide-details
                 density="comfortable"
-                @keydown.enter.stop="changecolorScaleRange"
-                @blur="changecolorScaleRange"
+                @keydown.enter.stop="changeCurrentColourScaleRange"
+                @blur="changeCurrentColourScaleRange"
                 :rules="[rules.required, rules.smallerThanMax]"
               ></v-text-field>
             </v-col>
@@ -93,18 +88,18 @@
                 variant="plain"
                 hide-details
                 density="comfortable"
-                @keydown.enter.stop="changecolorScaleRange"
-                @blur="changecolorScaleRange"
+                @keydown.enter.stop="changeCurrentColourScaleRange"
+                @blur="changeCurrentColourScaleRange"
                 :rules="[rules.required, rules.biggerThanMin]"
               ></v-text-field>
             </v-col>
             <v-col cols="2" class="d-flex align-center justify-center">
               <v-btn
-                v-if="!colourScalesStore.currentScaleIsInitialRange"
+                v-if="!currentScaleIsInitialRange"
                 icon="mdi-restore"
                 variant="flat"
                 density="compact"
-                @click="colourScalesStore.resetCurrentScaleRange"
+                @click="resetCurrentScaleRange"
               />
             </v-col>
           </v-row>
@@ -142,9 +137,10 @@ import { ref } from 'vue'
 import { LayerKind } from '@/lib/streamlines'
 import ColourStrip from '@/components/wms/ColourStrip.vue'
 import { watch } from 'vue'
-import { useColourScalesStore } from '@/stores/colourScales'
+import { useColourScalesStore, type Range } from '@/stores/colourScales'
 import ColourLegendTable from './ColourLegendTable.vue'
 import ControlChip from '@/components/wms/ControlChip.vue'
+import { useColourScales } from '@/services/useColourScales'
 
 interface Props {
   layerTitle?: string
@@ -155,36 +151,64 @@ interface Props {
   firstValueTime?: Date
   lastValueTime?: Date
   canUseStreamlines?: boolean
+  currentColourScaleIds: string[]
 }
 
-const colourScalesStore = useColourScalesStore()
-
 const props = withDefaults(defineProps<Props>(), {
   layerTitle: '',
   completelyMissing: false,
 })
 
-const emit = defineEmits(['style-click', 'update:layerKind'])
+const emit = defineEmits([
+  'style-click',
+  'update:layerKind',
+  'update:current-colour-scale',
+])
+
+const currentColourScaleIndex = ref(0)
+watch(
+  () => props.currentColourScaleIds,
+  () => {
+    currentColourScaleIndex.value = 0
+  },
+)
+
+const colourScalesStore = useColourScalesStore()
+const {
+  currentScale,
+  currentScales,
+  currentScaleIsInitialRange,
+  resetCurrentScaleRange,
+} = useColourScales(
+  currentColourScaleIndex,
+  () => props.currentColourScaleIds,
+  () => colourScalesStore.scales,
+)
 
-const mutableColorScaleRange = ref(
-  colourScalesStore.currentScale?.range
-    ? { ...colourScalesStore.currentScale?.range }
-    : undefined,
+watch(
+  currentScale,
+  () => {
+    emit('update:current-colour-scale', currentScale.value)
+  },
+  { immediate: true },
 )
 
+const mutableColorScaleRange = ref<Range>()
 watch(
-  () => colourScalesStore.currentScale?.range,
+  () => currentScale.value?.range,
   () => {
-    mutableColorScaleRange.value = colourScalesStore.currentScale?.range
-      ? { ...colourScalesStore.currentScale?.range }
+    mutableColorScaleRange.value = currentScale.value?.range
+      ? { ...currentScale.value?.range }
       : undefined
   },
-  { deep: true },
+  { immediate: true, deep: true },
 )
 
-const changecolorScaleRange = () => {
+const changeCurrentColourScaleRange = () => {
   if (mutableColorScaleRange.value === undefined) return
-  colourScalesStore.setCurrentScaleRange(mutableColorScaleRange.value)
+  if (currentScale.value === undefined) return
+
+  currentScale.value.range = mutableColorScaleRange.value
 }
 
 const showLayer = defineModel<boolean>('showLayer')
diff --git a/src/services/useColourScales/index.ts b/src/services/useColourScales/index.ts
new file mode 100644
index 000000000..f8c2e65dd
--- /dev/null
+++ b/src/services/useColourScales/index.ts
@@ -0,0 +1,56 @@
+import type { ColourScale } from '@/stores/colourScales'
+import type { MaybeRefOrGetter, ShallowRef } from 'vue'
+import { computed, toValue } from 'vue'
+
+export interface UseColourScalesReturn {
+  currentScaleId: ShallowRef<string | undefined>
+  currentScale: ShallowRef<ColourScale | undefined>
+  currentScales: ShallowRef<ColourScale[]>
+  currentScaleIsInitialRange: ShallowRef<boolean>
+  resetCurrentScaleRange: () => void
+}
+
+export function useColourScales(
+  currentIndex: MaybeRefOrGetter<number>,
+  currentIds: MaybeRefOrGetter<string[]>,
+  scales: MaybeRefOrGetter<Record<string, ColourScale>>,
+): UseColourScalesReturn {
+  const currentScaleId = computed<string | undefined>(() => {
+    const _currentIndex = toValue(currentIndex)
+    const _currentIds = toValue(currentIds)
+    return _currentIds[_currentIndex]
+  })
+
+  const currentScale = computed(() => {
+    const _scales = toValue(scales)
+    if (!currentScaleId.value) return
+    return _scales[currentScaleId.value]
+  })
+
+  const currentScales = computed(() => {
+    const _scales = toValue(scales)
+    const _currentIds = toValue(currentIds)
+    return _currentIds.map((id) => _scales[id])
+  })
+
+  const currentScaleIsInitialRange = computed(() => {
+    if (!currentScale.value) return false
+    return (
+      currentScale.value.range.min === currentScale.value.initialRange.min &&
+      currentScale.value.range.max === currentScale.value.initialRange.max
+    )
+  })
+
+  function resetCurrentScaleRange() {
+    if (!currentScale.value) return
+    currentScale.value.range = currentScale.value.initialRange
+  }
+
+  return {
+    currentScaleId,
+    currentScale,
+    currentScales,
+    currentScaleIsInitialRange,
+    resetCurrentScaleRange,
+  }
+}
diff --git a/src/services/useWms/index.ts b/src/services/useWms/index.ts
index 989c4f6ef..336f1b707 100644
--- a/src/services/useWms/index.ts
+++ b/src/services/useWms/index.ts
@@ -95,8 +95,8 @@ export function useWmsLegend(
   layerName: MaybeRefOrGetter<string>,
   useDisplayUnits: MaybeRefOrGetter<boolean>,
   colorScaleRange: MaybeRefOrGetter<string | undefined>,
-  style: MaybeRefOrGetter<Style | undefined>,
-  activeStyles: MaybeRefOrGetter<Style[] | undefined>,
+  style: MaybeRefOrGetter<Style>,
+  activeStyles: MaybeRefOrGetter<Style[]>,
 ): Ref<GetLegendGraphicResponse | undefined> {
   const legendGraphic = ref<GetLegendGraphicResponse>()
 
@@ -112,11 +112,7 @@ export function useWmsLegend(
       return
     }
 
-    if (
-      _activeStyles &&
-      _style &&
-      !_activeStyles.some((s) => styleToId(s) === styleToId(_style))
-    ) {
+    if (!_activeStyles.some((s) => styleToId(s) === styleToId(_style))) {
       return
     }
 
diff --git a/src/stores/colourScales.ts b/src/stores/colourScales.ts
index c421788db..a7ac632c1 100644
--- a/src/stores/colourScales.ts
+++ b/src/stores/colourScales.ts
@@ -1,5 +1,14 @@
 import { defineStore } from 'pinia'
 import type { ColourMap, Style } from '@deltares/fews-wms-requests'
+import { computed, MaybeRefOrGetter, reactive, ref, toValue, watch } from 'vue'
+import { configManager } from '@/services/application-config'
+import { fetchWmsLegend, useWmsLegend } from '@/services/useWms'
+import {
+  getLegendTitle,
+  legendToRange,
+  rangeToString,
+  styleToId,
+} from '@/lib/legend'
 
 export interface Range {
   min: number
@@ -15,45 +24,77 @@ export interface ColourScale {
   useGradients: boolean
 }
 
-interface ColourScalesState {
-  scales: Record<string, ColourScale>
-  currentIds: string[]
-  currentIndex: number
-}
+const useColourScalesStore = defineStore('colourScales', () => {
+  const scales = ref<Record<string, ColourScale>>({})
+  const processingScaleIds = ref<string[]>([])
+
+  async function addScale(
+    style: Style,
+    layerName: MaybeRefOrGetter<string>,
+    title: MaybeRefOrGetter<string | undefined>,
+    useDisplayUnits: MaybeRefOrGetter<boolean>,
+    activeStyles: MaybeRefOrGetter<Style[]>,
+  ) {
+    const styleId = styleToId(style)
+    if (styleId in scales.value || processingScaleIds.value.includes(styleId)) {
+      return
+    }
+
+    processingScaleIds.value.push(styleId)
+
+    const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
+
+    const initialLegendGraphic = await fetchWmsLegend(
+      baseUrl,
+      toValue(layerName),
+      toValue(useDisplayUnits),
+      undefined,
+      style,
+    )
+
+    const legend = initialLegendGraphic.legend
+    const newColourScale = reactive({
+      title: getLegendTitle(toValue(title) ?? '', initialLegendGraphic),
+      style: style,
+      colourMap: legend,
+      range: legendToRange(legend),
+      initialRange: legendToRange(legend),
+      useGradients: !legend.some((entry) => entry.colorSmoothing === false),
+    })
+    processingScaleIds.value = processingScaleIds.value.filter(
+      (id) => id !== styleId,
+    )
+    scales.value[styleId] = newColourScale
+
+    const range = computed(() => {
+      const newRange = rangeToString(newColourScale.range)
+      const initialRange = rangeToString(newColourScale.initialRange)
+
+      return newRange !== initialRange ? newRange : undefined
+    })
+
+    const newLegendGraphic = useWmsLegend(
+      baseUrl,
+      layerName,
+      useDisplayUnits,
+      range,
+      style,
+      activeStyles,
+    )
 
-const useColourScalesStore = defineStore('colourScales', {
-  state: (): ColourScalesState => ({
-    scales: {},
-    currentIds: [],
-    currentIndex: 0,
-  }),
-  getters: {
-    currentScaleId: (state) => state.currentIds[state.currentIndex],
-    currentScale(): ColourScale | undefined {
-      if (!this.currentScaleId) return
-      return this.scales[this.currentScaleId]
-    },
-    currentScales(): ColourScale[] {
-      return this.currentIds.map((id) => this.scales[id])
-    },
-    currentScaleIsInitialRange(): boolean {
-      if (!this.currentScale) return false
-      return (
-        this.currentScale.range.min === this.currentScale.initialRange.min &&
-        this.currentScale.range.max === this.currentScale.initialRange.max
+    watch(newLegendGraphic, () => {
+      if (newLegendGraphic.value?.legend === undefined) return
+      scales.value[styleId].title = getLegendTitle(
+        toValue(title) ?? '',
+        newLegendGraphic.value,
       )
-    },
-  },
-  actions: {
-    setCurrentScaleRange(newRange: Range) {
-      if (!this.currentScale) return
-      this.currentScale.range = newRange
-    },
-    resetCurrentScaleRange() {
-      if (!this.currentScale) return
-      this.currentScale.range = this.currentScale.initialRange
-    },
-  },
+      scales.value[styleId].colourMap = newLegendGraphic.value.legend
+    })
+  }
+  return {
+    scales,
+    addScale,
+  }
 })
 
 export { useColourScalesStore }

From 83bf91307c25995131003090c215a0e01b941392 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Tue, 17 Dec 2024 15:50:24 +0100
Subject: [PATCH 26/32] Remove setting of declarations on each child component
 setting object

---
 src/components/general/DashboardItems.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/general/DashboardItems.vue b/src/components/general/DashboardItems.vue
index 8cbaf182f..d0fe895a4 100644
--- a/src/components/general/DashboardItems.vue
+++ b/src/components/general/DashboardItems.vue
@@ -57,11 +57,7 @@ function getComponentSettingsForItem(item: DashboardItem) {
   const settings = componentSettingsStore.getSettingsById(
     item.componentSettingsId,
   )
-  const componentSettings = settings?.[item.component]
-  if (!componentSettings) return
-
-  componentSettings.declarations = settings?.declarations
-  return componentSettings
+  return settings?.[item.component]
 }
 
 const componentItems = computed(() => {

From ae3f4d702052f5685d7fd9f677ee8cdbf20fec3a Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Wed, 18 Dec 2024 09:53:11 +0100
Subject: [PATCH 27/32] Disable download button instead of dialog for component
 setting

---
 src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue b/src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue
index add739341..9ed2b98f5 100644
--- a/src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue
+++ b/src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue
@@ -36,7 +36,7 @@
                 <v-list-item
                   prepend-icon="mdi-download"
                   @click="downloadDialogStore.showDialog = true"
-                  :disabled="downloadDialogStore.disabled"
+                  :disabled="!showDataDownload"
                   >Download time series ...</v-list-item
                 >
               </v-list>
@@ -55,7 +55,6 @@
         >
         </TimeSeriesComponent>
         <TimeSeriesFileDownloadComponent
-          v-if="showDataDownload"
           :config="displayConfig"
           :options="options"
           :filter="filter"
@@ -157,7 +156,7 @@ interface DisplayTypeItem {
 }
 
 const showDataDownload = computed(() => {
-  return !(props.settings?.downloadEnabled === false)
+  return !(props.settings?.downloadEnabled === false) && !downloadDialogStore.disabled
 })
 
 const displayType = ref(DisplayType.TimeSeriesChart)

From b66f9b4a7c3c56e63243088b469e3ae21853c9c2 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Wed, 18 Dec 2024 09:53:39 +0100
Subject: [PATCH 28/32] Allow chart panel to be opened in dashboard

---
 .../spatialdisplay/SpatialDisplay.vue         | 45 +++++++++++--------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/spatialdisplay/SpatialDisplay.vue b/src/components/spatialdisplay/SpatialDisplay.vue
index 9f8b290d6..38b21fa63 100644
--- a/src/components/spatialdisplay/SpatialDisplay.vue
+++ b/src/components/spatialdisplay/SpatialDisplay.vue
@@ -3,9 +3,9 @@
     <div class="child-container" :class="{ 'd-none': hideMap }">
       <SpatialDisplayComponent
         :layer-name="props.layerName"
-        :location-id="props.locationId"
-        :latitude="props.latitude"
-        :longitude="props.longitude"
+        :location-id="currentLocationId"
+        :latitude="currentLatitude"
+        :longitude="currentLongitude"
         :filter-ids="props.filterIds"
         @changeLocationId="onLocationChange"
         :layer-capabilities="layerCapabilities"
@@ -18,19 +18,22 @@
       ></SpatialDisplayComponent>
     </div>
     <div v-if="showChartPanel" class="child-container">
-      <router-view
-        @close="closeTimeSeriesDisplay"
-        :filter="filter"
-        :elevation-chart-filter="elevationChartFilter"
-        :current-time="currentTime"
-        :settings="props.settings"
-      ></router-view>
+      <router-view v-slot="{ Component }">
+        <component
+          :is="Component ?? SpatialTimeSeriesDisplay"
+          @close="closeTimeSeriesDisplay"
+          :filter="filter"
+          :elevation-chart-filter="elevationChartFilter"
+          :current-time="currentTime"
+          :settings="props.settings"
+        />
+      </router-view>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, defineAsyncComponent, ref, watch } from 'vue'
 import SpatialDisplayComponent from '@/components/spatialdisplay/SpatialDisplayComponent.vue'
 import { useDisplay } from 'vuetify'
 import { configManager } from '@/services/application-config'
@@ -51,6 +54,9 @@ import bbox from '@turf/bbox'
 import { useUserSettingsStore } from '@/stores/userSettings'
 import type { UseDisplayConfigOptions } from '@/services/useDisplayConfig'
 import type { MapSettings } from '@/lib/topology/componentSettings'
+const SpatialTimeSeriesDisplay = defineAsyncComponent(
+  () => import('@/components/spatialdisplay/SpatialTimeSeriesDisplay.vue'),
+)
 
 interface Props {
   layerName?: string
@@ -102,7 +108,7 @@ const onlyCoverageLayersAvailable = computed(
 function getFilterActionsFilter(): filterActionsFilter &
   UseDisplayConfigOptions {
   return {
-    locationIds: props.locationId,
+    locationIds: currentLocationId.value,
     filterId: props.filterIds ? props.filterIds[0] : undefined,
     useDisplayUnits: userSettings.useDisplayUnits,
     convertDatum: userSettings.convertDatum,
@@ -112,12 +118,12 @@ function getFilterActionsFilter(): filterActionsFilter &
 function getTimeSeriesGridActionsFilter():
   | (timeSeriesGridActionsFilter & UseDisplayConfigOptions)
   | undefined {
-  if (!props.longitude || !props.latitude) return
+  if (!currentLongitude.value || !currentLatitude.value) return
   if (!layerCapabilities.value?.boundingBox) return
   if (!layerCapabilities.value?.firstValueTime) return
   if (!layerCapabilities.value?.lastValueTime) return
 
-  const coordinates = [+props.longitude, +props.latitude]
+  const coordinates = [+currentLongitude.value, +currentLatitude.value]
   const [x, y] = toMercator(coordinates)
   const clickRadius = circle(coordinates, 10, { steps: 4, units: 'kilometers' })
   const bboxArray = bbox(clickRadius)
@@ -144,10 +150,10 @@ function getTimeSeriesGridActionsFilter():
 }
 
 const filter = computed(() => {
-  if (props.locationId) {
+  if (currentLocationId.value) {
     return getFilterActionsFilter()
   }
-  if (props.longitude && props.latitude) {
+  if (currentLatitude.value && currentLongitude.value) {
     return getTimeSeriesGridActionsFilter()
   }
 })
@@ -242,11 +248,12 @@ function openCoordinatesTimeSeriesDisplay(latitude: number, longitude: number) {
 }
 
 function closeTimeSeriesDisplay(): void {
+  currentLocationId.value = undefined
+  currentLatitude.value = undefined
+  currentLongitude.value = undefined
+
   const parentRoute = findParentRoute(route)
   if (parentRoute !== null) {
-    currentLocationId.value = undefined
-    currentLatitude.value = undefined
-    currentLongitude.value = undefined
     router.push({
       name: parentRoute.name,
       params: {

From 3ac091c876aabfb3ee72ff0685756803879ceaa7 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Wed, 18 Dec 2024 09:55:50 +0100
Subject: [PATCH 29/32] Linting

---
 src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue b/src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue
index 9ed2b98f5..d1c564989 100644
--- a/src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue
+++ b/src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue
@@ -156,7 +156,10 @@ interface DisplayTypeItem {
 }
 
 const showDataDownload = computed(() => {
-  return !(props.settings?.downloadEnabled === false) && !downloadDialogStore.disabled
+  return (
+    !(props.settings?.downloadEnabled === false) &&
+    !downloadDialogStore.disabled
+  )
 })
 
 const displayType = ref(DisplayType.TimeSeriesChart)

From 7dd704076012451369fc320bcdc6dc455b9a725b Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Wed, 18 Dec 2024 10:34:21 +0100
Subject: [PATCH 30/32] Make chartpanel fullscreen based on spatial display
 container size

---
 .../spatialdisplay/SpatialDisplay.vue         | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/spatialdisplay/SpatialDisplay.vue b/src/components/spatialdisplay/SpatialDisplay.vue
index 38b21fa63..ce4458bdb 100644
--- a/src/components/spatialdisplay/SpatialDisplay.vue
+++ b/src/components/spatialdisplay/SpatialDisplay.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container" ref="container">
     <div class="child-container" :class="{ 'd-none': hideMap }">
       <SpatialDisplayComponent
         :layer-name="props.layerName"
@@ -33,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent, ref, watch } from 'vue'
+import { computed, defineAsyncComponent, ref, useTemplateRef, watch } from 'vue'
 import SpatialDisplayComponent from '@/components/spatialdisplay/SpatialDisplayComponent.vue'
 import { useDisplay } from 'vuetify'
 import { configManager } from '@/services/application-config'
@@ -54,6 +54,7 @@ import bbox from '@turf/bbox'
 import { useUserSettingsStore } from '@/stores/userSettings'
 import type { UseDisplayConfigOptions } from '@/services/useDisplayConfig'
 import type { MapSettings } from '@/lib/topology/componentSettings'
+import { useElementSize } from '@vueuse/core'
 const SpatialTimeSeriesDisplay = defineAsyncComponent(
   () => import('@/components/spatialdisplay/SpatialTimeSeriesDisplay.vue'),
 )
@@ -74,7 +75,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const route = useRoute()
 const router = useRouter()
-const { mobile } = useDisplay()
+const { thresholds } = useDisplay()
+const containerRef = useTemplateRef('container')
 
 const userSettings = useUserSettingsStore()
 const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
@@ -188,8 +190,17 @@ onMounted(() => {
   currentLongitude.value = props.longitude
 })
 
+const { width: containerWidth } = useElementSize(containerRef)
+
+const containerIsMobileSize = computed(() => {
+  return containerWidth.value < thresholds.value.lg
+})
+
 const hideMap = computed(() => {
-  return mobile.value && (props.locationId || props.latitude || props.longitude)
+  return (
+    containerIsMobileSize.value &&
+    (currentLocationId.value || currentLongitude.value || currentLatitude.value)
+  )
 })
 
 function onLocationChange(locationId: string | null): void {

From 1174aae8041da7627266763e4cb8c0f3cd112fce Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Wed, 18 Dec 2024 10:57:02 +0100
Subject: [PATCH 31/32] Hide instead of disable items based on component
 settings

---
 .../SpatialTimeSeriesDisplay.vue              | 52 ++++++++++++-------
 1 file changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue b/src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue
index d1c564989..3a37b473c 100644
--- a/src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue
+++ b/src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue
@@ -29,16 +29,18 @@
           <v-spacer />
         </template>
         <template v-slot:toolbar-append>
-          <v-btn size="small" icon>
+          <v-btn size="small" icon v-if="displayActionItems.length">
             <v-icon>mdi-dots-horizontal</v-icon>
             <v-menu activator="parent" density="compact">
               <v-list>
                 <v-list-item
-                  prepend-icon="mdi-download"
-                  @click="downloadDialogStore.showDialog = true"
-                  :disabled="!showDataDownload"
-                  >Download time series ...</v-list-item
+                  v-for="item in displayActionItems"
+                  :key="item.label"
+                  @click="item.action"
+                  :prepend-icon="item.icon"
                 >
+                  {{ item.label }}
+                </v-list-item>
               </v-list>
             </v-menu>
           </v-btn>
@@ -155,11 +157,19 @@ interface DisplayTypeItem {
   disabled?: boolean
 }
 
-const showDataDownload = computed(() => {
-  return (
-    !(props.settings?.downloadEnabled === false) &&
-    !downloadDialogStore.disabled
-  )
+const displayActionItems = computed(() => {
+  const dataDownloadEnabled = !(props.settings?.downloadEnabled === false)
+  return [
+    {
+      icon: 'mdi-download',
+      label: 'Download time series ...',
+      action: () => {
+        downloadDialogStore.showDialog = true
+      },
+      disabled: downloadDialogStore.disabled,
+      hidden: !dataDownloadEnabled,
+    },
+  ].filter((item) => !item.hidden)
 })
 
 const displayType = ref(DisplayType.TimeSeriesChart)
@@ -169,41 +179,45 @@ const displayTypeItems = computed<DisplayTypeItem[]>(() => {
   )
   const noTooltip = !tooltip.value
 
-  const chartDisabled = props.settings?.chartEnabled === false
-  const elevationChartDisabled = props.settings?.elevationChartEnabled === false
-  const tableDisabled = props.settings?.tableEnabled === false
-  const metaDataDisabled = props.settings?.metaDataEnabled === false
+  const chartEnabled = !(props.settings?.chartEnabled === false)
+  const elevationChartEnabled = !(
+    props.settings?.elevationChartEnabled === false
+  )
+  const tableEnabled = !(props.settings?.tableEnabled === false)
+  const metaDataEnabled = !(props.settings?.metaDataEnabled === false)
   return [
     {
       icon: 'mdi-chart-line',
       label: 'Chart',
       value: DisplayType.TimeSeriesChart,
-      disabled: chartDisabled,
+      hidden: !chartEnabled,
     },
     {
       icon: 'mdi-elevation-rise',
       label: 'Vertical profile',
       value: DisplayType.ElevationChart,
       iconStyle: 'transform: rotate(-90deg);',
-      disabled: elevationChartDisabled || noElevationCharts,
+      disabled: noElevationCharts,
+      hidden: !elevationChartEnabled,
     },
     {
       icon: 'mdi-table',
       label: 'Table',
       value: DisplayType.TimeSeriesTable,
-      disabled: tableDisabled,
+      hidden: !tableEnabled,
     },
     {
       icon: 'mdi-information-outline',
       label: 'Information',
       value: DisplayType.Information,
-      disabled: metaDataDisabled || noTooltip,
+      disabled: noTooltip,
+      hidden: !metaDataEnabled,
     },
     // Mdi icon for metatdata at the current location
     //    {
     //     icon: 'mdi-information',
     //    label: 'Metadata',
-  ]
+  ].filter((item) => !item.hidden)
 })
 
 watch(displayTypeItems, () => {

From d3c7352cbd9fa9860f3036bddd23845d29d763de Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Wed, 18 Dec 2024 13:24:41 +0100
Subject: [PATCH 32/32] Move overlay and basemap controls to informationpanel

---
 .../SpatialDisplayComponent.vue               | 113 ++++----
 src/components/wms/BaseMapControl.vue         |  28 --
 src/components/wms/InformationPanel.vue       | 269 ------------------
 src/components/wms/OverlayControl.vue         |  74 -----
 src/components/wms/panel/BaseMapPanel.vue     |  26 ++
 src/components/wms/panel/ColourPanel.vue      | 141 +++++++++
 src/components/wms/panel/InformationPanel.vue | 140 +++++++++
 src/components/wms/panel/OverlayPanel.vue     |  67 +++++
 8 files changed, 435 insertions(+), 423 deletions(-)
 delete mode 100644 src/components/wms/BaseMapControl.vue
 delete mode 100644 src/components/wms/InformationPanel.vue
 delete mode 100644 src/components/wms/OverlayControl.vue
 create mode 100644 src/components/wms/panel/BaseMapPanel.vue
 create mode 100644 src/components/wms/panel/ColourPanel.vue
 create mode 100644 src/components/wms/panel/InformationPanel.vue
 create mode 100644 src/components/wms/panel/OverlayPanel.vue

diff --git a/src/components/spatialdisplay/SpatialDisplayComponent.vue b/src/components/spatialdisplay/SpatialDisplayComponent.vue
index 379120e92..97d7189d1 100644
--- a/src/components/spatialdisplay/SpatialDisplayComponent.vue
+++ b/src/components/spatialdisplay/SpatialDisplayComponent.vue
@@ -47,55 +47,55 @@
       :overlay="overlay"
     />
   </MapComponent>
-  <div class="mapcomponent__controls-container">
-    <v-chip-group class="control-group" selected-class="no-class">
-      <BoundingBoxControl
-        v-model:active="workflowsStore.isDrawingBoundingBox"
-        v-model:boundingBox="workflowsStore.boundingBox"
-        @finish="workflowsStore.showDialog = true"
-        v-if="workflowsStore.isDrawingBoundingBox"
-      />
-      <CoordinateSelectorControl
-        v-if="workflowsStore.isSelectingCoordinate"
-        v-model:active="workflowsStore.isSelectingCoordinate"
-        @finish="workflowsStore.showDialog = true"
-        :coordinate="workflowsStore.coordinate"
-      />
-      <template v-else>
-        <InformationPanel
-          v-if="layerOptions"
-          :layerTitle="props.layerCapabilities?.title"
-          :isLoading="isLoading"
-          :currentTime="currentTime"
-          :forecastTime="forecastTime"
-          :completelyMissing="
-            props.layerCapabilities?.completelyMissing ?? false
-          "
-          :firstValueTime="
-            new Date(props.layerCapabilities?.firstValueTime ?? '')
-          "
-          :lastValueTime="
-            new Date(props.layerCapabilities?.lastValueTime ?? '')
-          "
-          :canUseStreamlines="canUseStreamlines"
-          v-model:layer-kind="layerKind"
-          v-model:show-layer="showLayer"
+  <div class="mapcomponent__controls-container pa-2 ga-2">
+    <BoundingBoxControl
+      v-model:active="workflowsStore.isDrawingBoundingBox"
+      v-model:boundingBox="workflowsStore.boundingBox"
+      @finish="workflowsStore.showDialog = true"
+      v-if="workflowsStore.isDrawingBoundingBox"
+    />
+    <CoordinateSelectorControl
+      v-if="workflowsStore.isSelectingCoordinate"
+      v-model:active="workflowsStore.isSelectingCoordinate"
+      @finish="workflowsStore.showDialog = true"
+      :coordinate="workflowsStore.coordinate"
+    />
+    <template v-else>
+      <InformationPanel
+        v-if="layerOptions"
+        :layerTitle="props.layerCapabilities?.title"
+        :isLoading="isLoading"
+        :currentTime="currentTime"
+        :forecastTime="forecastTime"
+        :completelyMissing="props.layerCapabilities?.completelyMissing ?? false"
+        :firstValueTime="
+          new Date(props.layerCapabilities?.firstValueTime ?? '')
+        "
+        :lastValueTime="new Date(props.layerCapabilities?.lastValueTime ?? '')"
+        :canUseStreamlines="canUseStreamlines"
+        v-model:layer-kind="layerKind"
+        v-model:show-layer="showLayer"
+      >
+        <v-divider />
+        <ColourPanel
           :currentColourScaleIds="currentColourScaleIds"
-          @update:current-colour-scale="currentColourScale = $event"
+          v-model:currentColourScaleIndex="currentColourScaleIndex"
         />
-        <LocationsSearchControl
-          v-if="showLocationSearchControl"
-          v-model:showLocations="showLocationsLayer"
-          width="50vw"
-          max-width="250"
-          :locations="locations"
-          :selectedLocationId="props.locationId"
-          @changeLocationId="onLocationChange"
-        />
-        <OverlayControl />
-        <BaseMapControl />
-      </template>
-    </v-chip-group>
+        <v-divider />
+        <BaseMapPanel />
+        <v-divider />
+        <OverlayPanel />
+      </InformationPanel>
+      <LocationsSearchControl
+        v-if="showLocationSearchControl"
+        v-model:showLocations="showLocationsLayer"
+        width="50vw"
+        max-width="250"
+        :locations="locations"
+        :selectedLocationId="props.locationId"
+        @changeLocationId="onLocationChange"
+      />
+    </template>
   </div>
   <ElevationSlider
     v-if="layerHasElevation"
@@ -141,9 +141,10 @@ import AnimatedRasterLayer, {
 import LocationsSearchControl from '@/components/wms/LocationsSearchControl.vue'
 import LocationsLayer from '@/components/wms/LocationsLayer.vue'
 import SelectedCoordinateLayer from '@/components/wms/SelectedCoordinateLayer.vue'
-import InformationPanel from '@/components/wms/InformationPanel.vue'
-import OverlayControl from '@/components/wms/OverlayControl.vue'
-import BaseMapControl from '@/components/wms/BaseMapControl.vue'
+import InformationPanel from '@/components/wms/panel/InformationPanel.vue'
+import ColourPanel from '@/components/wms/panel/ColourPanel.vue'
+import OverlayPanel from '@/components/wms/panel/OverlayPanel.vue'
+import BaseMapPanel from '@/components/wms/panel/BaseMapPanel.vue'
 import ElevationSlider from '@/components/wms/ElevationSlider.vue'
 import DateTimeSlider from '@/components/general/DateTimeSlider.vue'
 import BoundingBoxControl from '@/components/map/BoundingBoxControl.vue'
@@ -159,7 +160,7 @@ import {
 import { configManager } from '@/services/application-config'
 import type { Layer, Style } from '@deltares/fews-wms-requests'
 import { LayerKind } from '@/lib/streamlines'
-import { ColourScale, useColourScalesStore } from '@/stores/colourScales'
+import { useColourScalesStore } from '@/stores/colourScales'
 import { useDisplay } from 'vuetify'
 import { useFilterLocations } from '@/services/useFilterLocations'
 import ColourLegend from '@/components/wms/ColourLegend.vue'
@@ -171,6 +172,7 @@ import CoordinateSelectorControl from '@/components/map/CoordinateSelectorContro
 import type { MapSettings } from '@/lib/topology/componentSettings'
 import OverlayLayer from '@/components/wms/OverlayLayer.vue'
 import { useComponentSettingsStore } from '@/stores/componentSettings'
+import { useColourScales } from '@/services/useColourScales'
 
 interface ElevationWithUnitSymbol {
   units?: string
@@ -238,8 +240,13 @@ const layerKind = ref(LayerKind.Static)
 
 const colourScalesStore = useColourScalesStore()
 const componentSettingsStore = useComponentSettingsStore()
-const currentColourScale = ref<ColourScale>()
 const currentColourScaleIds = ref<string[]>([])
+const currentColourScaleIndex = ref(0)
+const { currentScale: currentColourScale } = useColourScales(
+  currentColourScaleIndex,
+  currentColourScaleIds,
+  colourScalesStore.scales,
+)
 
 const workflowsStore = useWorkflowsStore()
 
@@ -475,6 +482,8 @@ function onCoordinateMoved(lat: number, lng: number): void {
 }
 
 .mapcomponent__controls-container {
+  display: flex;
+  flex-wrap: wrap;
   position: absolute;
   max-width: 100%;
   z-index: 3;
diff --git a/src/components/wms/BaseMapControl.vue b/src/components/wms/BaseMapControl.vue
deleted file mode 100644
index f98e8647a..000000000
--- a/src/components/wms/BaseMapControl.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <ControlChip v-if="componentSettingsStore.baseMaps.length">
-    <v-icon size="large">mdi-map</v-icon>
-    <v-menu
-      transition="slide-y-transition"
-      :close-on-content-click="false"
-      activator="parent"
-    >
-      <v-list class="pb-0" density="compact">
-        <v-list-item
-          v-for="basemap in componentSettingsStore.baseMaps"
-          :key="basemap.id"
-          :title="basemap.name"
-          :value="basemap.id"
-          :active="basemap.id === componentSettingsStore.selectedBaseMapId"
-          @click="componentSettingsStore.selectedBaseMapId = basemap.id"
-        />
-      </v-list>
-    </v-menu>
-  </ControlChip>
-</template>
-
-<script setup lang="ts">
-import ControlChip from '@/components/wms/ControlChip.vue'
-import { useComponentSettingsStore } from '@/stores/componentSettings'
-
-const componentSettingsStore = useComponentSettingsStore()
-</script>
diff --git a/src/components/wms/InformationPanel.vue b/src/components/wms/InformationPanel.vue
deleted file mode 100644
index 07edfe160..000000000
--- a/src/components/wms/InformationPanel.vue
+++ /dev/null
@@ -1,269 +0,0 @@
-<template>
-  <ControlChip>
-    <v-btn
-      @click="showLayer = !showLayer"
-      density="compact"
-      variant="plain"
-      icon
-    >
-      <v-icon>{{ showLayer ? 'mdi-layers' : 'mdi-layers-off' }}</v-icon>
-    </v-btn>
-    <v-menu
-      transition="slide-y-transition"
-      :close-on-content-click="false"
-      v-if="showLayer"
-    >
-      <template v-slot:activator="{ props }">
-        <v-btn variant="plain" v-bind="props" class="pe-0 text-none">
-          <span
-            class="me-2"
-            :class="{ 'text-decoration-line-through': props.completelyMissing }"
-            >{{ layerTitle }}</span
-          >
-        </v-btn>
-      </template>
-      <v-list>
-        <v-list-item
-          :title="props.layerTitle"
-          :subtitle="analysisTime"
-          prepend-icon="mdi-layers"
-        >
-        </v-list-item>
-        <v-divider></v-divider>
-        <v-list-item
-          :title="'Time range'"
-          :subtitle="formattedTimeRange"
-          prepend-icon="mdi-clock-time-four-outline"
-        >
-        </v-list-item>
-        <v-list-item prepend-icon="mdi-palette" v-if="currentScales">
-          <v-list-item
-            v-for="(item, index) of currentScales"
-            :key="index"
-            @click="currentColourScaleIndex = index"
-            class="px-0"
-          >
-            <v-list-item-title>
-              {{ item.style.title }}
-            </v-list-item-title>
-            <div class="d-flex align-center ga-1">
-              <template v-if="item.useGradients !== false">
-                <span class="mb-1">{{ item.range?.min ?? '' }}</span>
-                <ColourStrip
-                  :colourMap="item.colourMap"
-                  :useGradients="item.useGradients"
-                />
-                <span class="mb-1">{{ item.range?.max ?? '' }}</span>
-              </template>
-              <template v-else>
-                <ColourLegendTable :colourMap="item.colourMap" />
-              </template>
-            </div>
-            <template #append v-if="index === currentColourScaleIndex">
-              <v-icon>mdi-check</v-icon>
-            </template>
-          </v-list-item>
-        </v-list-item>
-        <v-list-item v-if="currentScale?.useGradients !== false">
-          <template v-slot:prepend>
-            <div class="mx-7"></div>
-          </template>
-          <v-row v-if="mutableColorScaleRange">
-            <v-col cols="5">
-              <v-text-field
-                v-model.number="mutableColorScaleRange.min"
-                label="Min"
-                variant="plain"
-                hide-details
-                density="comfortable"
-                @keydown.enter.stop="changeCurrentColourScaleRange"
-                @blur="changeCurrentColourScaleRange"
-                :rules="[rules.required, rules.smallerThanMax]"
-              ></v-text-field>
-            </v-col>
-            <v-col cols="5">
-              <v-text-field
-                v-model.number="mutableColorScaleRange.max"
-                label="Max"
-                variant="plain"
-                hide-details
-                density="comfortable"
-                @keydown.enter.stop="changeCurrentColourScaleRange"
-                @blur="changeCurrentColourScaleRange"
-                :rules="[rules.required, rules.biggerThanMin]"
-              ></v-text-field>
-            </v-col>
-            <v-col cols="2" class="d-flex align-center justify-center">
-              <v-btn
-                v-if="!currentScaleIsInitialRange"
-                icon="mdi-restore"
-                variant="flat"
-                density="compact"
-                @click="resetCurrentScaleRange"
-              />
-            </v-col>
-          </v-row>
-        </v-list-item>
-        <v-list-item v-if="canUseStreamlines" prepend-icon="mdi-animation-play">
-          <v-list-item-title>Animate</v-list-item-title>
-          <template v-slot:append>
-            <v-switch
-              density="compact"
-              v-model="animate"
-              hide-details
-            ></v-switch>
-          </template>
-        </v-list-item>
-      </v-list>
-    </v-menu>
-    <v-btn
-      v-if="showLayer && canUseStreamlines"
-      @click="switchLayerType"
-      icon
-      density="compact"
-      variant="plain"
-      :color="animate ? 'primary' : undefined"
-    >
-      <v-progress-circular v-if="isLoading" size="20" indeterminate />
-      <v-icon v-else>mdi-animation-play</v-icon>
-    </v-btn>
-  </ControlChip>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { DateTime } from 'luxon'
-import { ref } from 'vue'
-import { LayerKind } from '@/lib/streamlines'
-import ColourStrip from '@/components/wms/ColourStrip.vue'
-import { watch } from 'vue'
-import { useColourScalesStore, type Range } from '@/stores/colourScales'
-import ColourLegendTable from './ColourLegendTable.vue'
-import ControlChip from '@/components/wms/ControlChip.vue'
-import { useColourScales } from '@/services/useColourScales'
-
-interface Props {
-  layerTitle?: string
-  isLoading: boolean
-  currentTime?: Date
-  forecastTime?: Date
-  completelyMissing?: boolean
-  firstValueTime?: Date
-  lastValueTime?: Date
-  canUseStreamlines?: boolean
-  currentColourScaleIds: string[]
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  layerTitle: '',
-  completelyMissing: false,
-})
-
-const emit = defineEmits([
-  'style-click',
-  'update:layerKind',
-  'update:current-colour-scale',
-])
-
-const currentColourScaleIndex = ref(0)
-watch(
-  () => props.currentColourScaleIds,
-  () => {
-    currentColourScaleIndex.value = 0
-  },
-)
-
-const colourScalesStore = useColourScalesStore()
-const {
-  currentScale,
-  currentScales,
-  currentScaleIsInitialRange,
-  resetCurrentScaleRange,
-} = useColourScales(
-  currentColourScaleIndex,
-  () => props.currentColourScaleIds,
-  () => colourScalesStore.scales,
-)
-
-watch(
-  currentScale,
-  () => {
-    emit('update:current-colour-scale', currentScale.value)
-  },
-  { immediate: true },
-)
-
-const mutableColorScaleRange = ref<Range>()
-watch(
-  () => currentScale.value?.range,
-  () => {
-    mutableColorScaleRange.value = currentScale.value?.range
-      ? { ...currentScale.value?.range }
-      : undefined
-  },
-  { immediate: true, deep: true },
-)
-
-const changeCurrentColourScaleRange = () => {
-  if (mutableColorScaleRange.value === undefined) return
-  if (currentScale.value === undefined) return
-
-  currentScale.value.range = mutableColorScaleRange.value
-}
-
-const showLayer = defineModel<boolean>('showLayer')
-const animate = defineModel<boolean>('animate', { default: false })
-
-const rules = {
-  required: (v: number) =>
-    (v !== null && v !== undefined && String(v) !== '') || 'Field is required',
-  biggerThanZero: (v: number) =>
-    v >= 0 || 'Value must be bigger or equal than 0',
-  smallerThanMax: (v: number) =>
-    (mutableColorScaleRange.value && v < mutableColorScaleRange.value.max) ||
-    'Value must be smaller than max',
-  biggerThanMin: (v: number) =>
-    (mutableColorScaleRange.value && v > mutableColorScaleRange.value.min) ||
-    'Value must be bigger than min',
-}
-
-const analysisTime = computed(() => {
-  if (!props.forecastTime) return undefined
-
-  if (isNaN(props.forecastTime.getTime())) {
-    return 'Analysis time not available'
-  }
-
-  return (
-    'Analysis time: ' +
-    DateTime.fromJSDate(props.forecastTime).toFormat('dd/MM/yyyy, HH:mm:ss')
-  )
-})
-
-const formattedTimeRange = computed(() => {
-  if (!props.firstValueTime || !props.lastValueTime) return ''
-  const format = 'dd/MM/yyyy, HH:mm:ss'
-  return `${DateTime.fromJSDate(props.firstValueTime).toFormat(
-    format,
-  )} → ${DateTime.fromJSDate(props.lastValueTime).toFormat(format)}`
-})
-
-const switchLayerType = () => {
-  animate.value = !animate.value
-}
-
-watch(
-  () => animate.value,
-  () => {
-    const value = animate.value ? LayerKind.Streamline : LayerKind.Static
-    emit('update:layerKind', value)
-  },
-)
-</script>
-
-<style scoped>
-#toggle {
-  display: flex;
-  justify-content: center;
-}
-</style>
diff --git a/src/components/wms/OverlayControl.vue b/src/components/wms/OverlayControl.vue
deleted file mode 100644
index fa7c838f4..000000000
--- a/src/components/wms/OverlayControl.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-  <ControlChip v-if="componentSettingsStore.overlays.length">
-    <v-icon size="large">mdi-layers-outline</v-icon>
-    <v-menu
-      transition="slide-y-transition"
-      :close-on-content-click="false"
-      activator="parent"
-    >
-      <v-list
-        v-model:selected="componentSettingsStore.selectedOverlayIds"
-        select-strategy="leaf"
-        class="pb-0"
-        density="compact"
-      >
-        <v-list-item title="Select All" @click="toggleAll">
-          <template #prepend>
-            <v-list-item-action start>
-              <v-checkbox-btn
-                :indeterminate="someSelected && !allSelected"
-                :model-value="allSelected"
-                density="compact"
-              />
-            </v-list-item-action>
-          </template>
-        </v-list-item>
-
-        <v-divider class="mt-2" />
-
-        <v-list-item
-          v-for="overlay in componentSettingsStore.overlays"
-          :key="overlay.id"
-          :title="overlay.name"
-          :value="overlay.id"
-        >
-          <template #prepend="{ isSelected }">
-            <v-list-item-action start>
-              <v-checkbox-btn :model-value="isSelected" density="compact" />
-            </v-list-item-action>
-          </template>
-        </v-list-item>
-      </v-list>
-    </v-menu>
-  </ControlChip>
-</template>
-
-<script setup lang="ts">
-import ControlChip from '@/components/wms/ControlChip.vue'
-import { useComponentSettingsStore } from '@/stores/componentSettings'
-import { computed } from 'vue'
-
-const componentSettingsStore = useComponentSettingsStore()
-
-const allSelected = computed(
-  () =>
-    componentSettingsStore.overlays.length ===
-    componentSettingsStore.selectedOverlayIds.length,
-)
-
-const someSelected = computed(
-  () =>
-    componentSettingsStore.selectedOverlayIds.length > 0 &&
-    componentSettingsStore.selectedOverlayIds.length <
-      componentSettingsStore.overlays.length,
-)
-
-function toggleAll() {
-  if (allSelected.value) {
-    componentSettingsStore.selectedOverlayIds = []
-  } else {
-    componentSettingsStore.selectedOverlayIds =
-      componentSettingsStore.overlays.map((overlay) => overlay.id)
-  }
-}
-</script>
diff --git a/src/components/wms/panel/BaseMapPanel.vue b/src/components/wms/panel/BaseMapPanel.vue
new file mode 100644
index 000000000..f6661c6fc
--- /dev/null
+++ b/src/components/wms/panel/BaseMapPanel.vue
@@ -0,0 +1,26 @@
+<template>
+  <v-list-item prepend-icon="mdi-map" class="pe-1">
+    <v-list class="pa-0" density="compact" max-height="160">
+      <v-list-item
+        v-for="basemap in componentSettingsStore.baseMaps"
+        :key="basemap.id"
+        :title="basemap.name"
+        @click="componentSettingsStore.selectedBaseMapId = basemap.id"
+        class="ps-0"
+      >
+        <template
+          #append
+          v-if="basemap.id === componentSettingsStore.selectedBaseMapId"
+        >
+          <v-icon>mdi-check</v-icon>
+        </template>
+      </v-list-item>
+    </v-list>
+  </v-list-item>
+</template>
+
+<script setup lang="ts">
+import { useComponentSettingsStore } from '@/stores/componentSettings'
+
+const componentSettingsStore = useComponentSettingsStore()
+</script>
diff --git a/src/components/wms/panel/ColourPanel.vue b/src/components/wms/panel/ColourPanel.vue
new file mode 100644
index 000000000..17425396d
--- /dev/null
+++ b/src/components/wms/panel/ColourPanel.vue
@@ -0,0 +1,141 @@
+<template>
+  <v-list-item prepend-icon="mdi-palette" v-if="currentScales" class="pe-1">
+    <v-list max-height="130">
+      <v-list-item
+        v-for="(item, index) of currentScales"
+        :key="index"
+        @click="currentColourScaleIndex = index"
+        class="ps-0"
+        :title="item.style.title"
+      >
+        <div class="d-flex align-center ga-1">
+          <template v-if="item.useGradients !== false">
+            <span class="mb-1">{{ item.range?.min ?? '' }}</span>
+            <ColourStrip
+              :colourMap="item.colourMap"
+              :useGradients="item.useGradients"
+            />
+            <span class="mb-1">{{ item.range?.max ?? '' }}</span>
+          </template>
+          <template v-else>
+            <ColourLegendTable :colourMap="item.colourMap" />
+          </template>
+        </div>
+        <template #append v-if="index === currentColourScaleIndex">
+          <v-icon>mdi-check</v-icon>
+        </template>
+      </v-list-item>
+    </v-list>
+    <template v-if="currentScale?.useGradients !== false">
+      <v-row v-if="mutableColorScaleRange">
+        <v-col cols="5">
+          <v-text-field
+            v-model.number="mutableColorScaleRange.min"
+            label="Min"
+            variant="plain"
+            hide-details
+            density="comfortable"
+            @keydown.enter.stop="changeCurrentColourScaleRange"
+            @blur="changeCurrentColourScaleRange"
+            :rules="[rules.required, rules.smallerThanMax]"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="5">
+          <v-text-field
+            v-model.number="mutableColorScaleRange.max"
+            label="Max"
+            variant="plain"
+            hide-details
+            density="comfortable"
+            @keydown.enter.stop="changeCurrentColourScaleRange"
+            @blur="changeCurrentColourScaleRange"
+            :rules="[rules.required, rules.biggerThanMin]"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="2" class="d-flex align-center justify-center">
+          <v-btn
+            v-if="!currentScaleIsInitialRange"
+            icon="mdi-restore"
+            variant="flat"
+            density="compact"
+            @click="resetCurrentScaleRange"
+          />
+        </v-col>
+      </v-row>
+    </template>
+  </v-list-item>
+</template>
+
+<script setup lang="ts">
+import ColourStrip from '@/components/wms/ColourStrip.vue'
+import ColourLegendTable from '@/components/wms/ColourLegendTable.vue'
+import { useColourScalesStore, type Range } from '@/stores/colourScales'
+import { useColourScales } from '@/services/useColourScales'
+import { ref, watch } from 'vue'
+
+interface Props {
+  currentColourScaleIds: string[]
+}
+
+const props = defineProps<Props>()
+
+const currentColourScaleIndex = defineModel<number>('currentColourScaleIndex', {
+  required: true,
+})
+watch(
+  () => props.currentColourScaleIds,
+  () => {
+    currentColourScaleIndex.value = 0
+  },
+)
+
+const rules = {
+  required: (v: number) =>
+    (v !== null && v !== undefined && String(v) !== '') || 'Field is required',
+  biggerThanZero: (v: number) =>
+    v >= 0 || 'Value must be bigger or equal than 0',
+  smallerThanMax: (v: number) =>
+    (mutableColorScaleRange.value && v < mutableColorScaleRange.value.max) ||
+    'Value must be smaller than max',
+  biggerThanMin: (v: number) =>
+    (mutableColorScaleRange.value && v > mutableColorScaleRange.value.min) ||
+    'Value must be bigger than min',
+}
+
+const colourScalesStore = useColourScalesStore()
+const {
+  currentScale,
+  currentScales,
+  currentScaleIsInitialRange,
+  resetCurrentScaleRange,
+} = useColourScales(
+  currentColourScaleIndex,
+  () => props.currentColourScaleIds,
+  colourScalesStore.scales,
+)
+
+const mutableColorScaleRange = ref<Range>()
+watch(
+  () => currentScale.value?.range,
+  () => {
+    mutableColorScaleRange.value = currentScale.value?.range
+      ? { ...currentScale.value?.range }
+      : undefined
+  },
+  { immediate: true, deep: true },
+)
+
+const changeCurrentColourScaleRange = () => {
+  if (mutableColorScaleRange.value === undefined) return
+  if (currentScale.value === undefined) return
+
+  currentScale.value.range = mutableColorScaleRange.value
+}
+</script>
+
+<style scoped>
+.scales-container {
+  max-height: 300px;
+  overflow-y: auto;
+}
+</style>
diff --git a/src/components/wms/panel/InformationPanel.vue b/src/components/wms/panel/InformationPanel.vue
new file mode 100644
index 000000000..b65f045ad
--- /dev/null
+++ b/src/components/wms/panel/InformationPanel.vue
@@ -0,0 +1,140 @@
+<template>
+  <ControlChip>
+    <v-btn
+      @click="showLayer = !showLayer"
+      density="compact"
+      variant="plain"
+      icon
+    >
+      <v-icon>{{ showLayer ? 'mdi-layers' : 'mdi-layers-off' }}</v-icon>
+    </v-btn>
+    <v-menu
+      transition="slide-y-transition"
+      :close-on-content-click="false"
+      v-if="showLayer"
+    >
+      <template v-slot:activator="{ props }">
+        <v-btn variant="plain" v-bind="props" class="pe-0 text-none">
+          <span
+            class="me-2"
+            :class="{ 'text-decoration-line-through': props.completelyMissing }"
+            >{{ layerTitle }}</span
+          >
+        </v-btn>
+      </template>
+      <v-list class="information-panel-list">
+        <v-list-item
+          :title="props.layerTitle"
+          :subtitle="analysisTime"
+          prepend-icon="mdi-layers"
+        >
+        </v-list-item>
+        <v-divider></v-divider>
+        <v-list-item
+          :title="'Time range'"
+          :subtitle="formattedTimeRange"
+          prepend-icon="mdi-clock-time-four-outline"
+        >
+        </v-list-item>
+
+        <slot></slot>
+
+        <v-list-item v-if="canUseStreamlines" prepend-icon="mdi-animation-play">
+          <v-list-item-title>Animate</v-list-item-title>
+          <template v-slot:append>
+            <v-switch
+              density="compact"
+              v-model="animate"
+              hide-details
+            ></v-switch>
+          </template>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+    <v-btn
+      v-if="showLayer && canUseStreamlines"
+      @click="switchLayerType"
+      icon
+      density="compact"
+      variant="plain"
+      :color="animate ? 'primary' : undefined"
+    >
+      <v-progress-circular v-if="isLoading" size="20" indeterminate />
+      <v-icon v-else>mdi-animation-play</v-icon>
+    </v-btn>
+  </ControlChip>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { DateTime } from 'luxon'
+import { LayerKind } from '@/lib/streamlines'
+import { watch } from 'vue'
+import ControlChip from '@/components/wms/ControlChip.vue'
+
+interface Props {
+  layerTitle?: string
+  isLoading: boolean
+  currentTime?: Date
+  forecastTime?: Date
+  completelyMissing?: boolean
+  firstValueTime?: Date
+  lastValueTime?: Date
+  canUseStreamlines?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  layerTitle: '',
+  completelyMissing: false,
+})
+
+const emit = defineEmits(['style-click', 'update:layerKind'])
+
+const showLayer = defineModel<boolean>('showLayer')
+const animate = defineModel<boolean>('animate', { default: false })
+
+const analysisTime = computed(() => {
+  if (!props.forecastTime) return undefined
+
+  if (isNaN(props.forecastTime.getTime())) {
+    return 'Analysis time not available'
+  }
+
+  return (
+    'Analysis time: ' +
+    DateTime.fromJSDate(props.forecastTime).toFormat('dd/MM/yyyy, HH:mm:ss')
+  )
+})
+
+const formattedTimeRange = computed(() => {
+  if (!props.firstValueTime || !props.lastValueTime) return ''
+  const format = 'dd/MM/yyyy, HH:mm:ss'
+  return `${DateTime.fromJSDate(props.firstValueTime).toFormat(
+    format,
+  )} → ${DateTime.fromJSDate(props.lastValueTime).toFormat(format)}`
+})
+
+const switchLayerType = () => {
+  animate.value = !animate.value
+}
+
+watch(
+  () => animate.value,
+  () => {
+    const value = animate.value ? LayerKind.Streamline : LayerKind.Static
+    emit('update:layerKind', value)
+  },
+)
+</script>
+
+<style scoped>
+#toggle {
+  display: flex;
+  justify-content: center;
+}
+
+:deep(.information-panel-list > .v-list-item > .v-list-item__prepend) {
+  align-self: start;
+  transform: translateY(8px);
+}
+</style>
diff --git a/src/components/wms/panel/OverlayPanel.vue b/src/components/wms/panel/OverlayPanel.vue
new file mode 100644
index 000000000..608bf3ce9
--- /dev/null
+++ b/src/components/wms/panel/OverlayPanel.vue
@@ -0,0 +1,67 @@
+<template>
+  <v-list-item prepend-icon="mdi-layers-outline">
+    <v-list-item title="Select All" @click="toggleAll" class="ps-1">
+      <template #prepend>
+        <v-list-item-action start>
+          <v-checkbox-btn
+            :indeterminate="someSelected && !allSelected"
+            :model-value="allSelected"
+            density="compact"
+          />
+        </v-list-item-action>
+      </template>
+    </v-list-item>
+    <v-divider />
+    <v-list
+      v-model:selected="componentSettingsStore.selectedOverlayIds"
+      select-strategy="leaf"
+      class="pa-0"
+      density="compact"
+      max-height="160"
+    >
+      <v-list-item
+        v-for="overlay in componentSettingsStore.overlays"
+        :key="overlay.id"
+        :title="overlay.name"
+        :value="overlay.id"
+        :active="false"
+        class="ps-1"
+      >
+        <template #prepend="{ isSelected }">
+          <v-list-item-action start>
+            <v-checkbox-btn :model-value="isSelected" density="compact" />
+          </v-list-item-action>
+        </template>
+      </v-list-item>
+    </v-list>
+  </v-list-item>
+</template>
+
+<script setup lang="ts">
+import { useComponentSettingsStore } from '@/stores/componentSettings'
+import { computed } from 'vue'
+
+const componentSettingsStore = useComponentSettingsStore()
+
+const allSelected = computed(
+  () =>
+    componentSettingsStore.overlays.length ===
+    componentSettingsStore.selectedOverlayIds.length,
+)
+
+const someSelected = computed(
+  () =>
+    componentSettingsStore.selectedOverlayIds.length > 0 &&
+    componentSettingsStore.selectedOverlayIds.length <
+      componentSettingsStore.overlays.length,
+)
+
+function toggleAll() {
+  if (allSelected.value) {
+    componentSettingsStore.selectedOverlayIds = []
+  } else {
+    componentSettingsStore.selectedOverlayIds =
+      componentSettingsStore.overlays.map((overlay) => overlay.id)
+  }
+}
+</script>