From 23d20e12bd98529865aee7f998a46b5ce042c303 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Tue, 21 Nov 2023 10:33:51 +0100
Subject: [PATCH 1/4] Add nodata to columnitem

---
 src/components/general/ColumnItem.ts  | 1 +
 src/components/general/ColumnMenu.vue | 1 +
 src/views/SpatialDisplayView.vue      | 1 +
 3 files changed, 3 insertions(+)

diff --git a/src/components/general/ColumnItem.ts b/src/components/general/ColumnItem.ts
index a9838c42..90d76ab6 100644
--- a/src/components/general/ColumnItem.ts
+++ b/src/components/general/ColumnItem.ts
@@ -8,4 +8,5 @@ export interface ColumnItem {
   href?: string
   target?: string
   icon?: string
+  nodata?: boolean
 }
diff --git a/src/components/general/ColumnMenu.vue b/src/components/general/ColumnMenu.vue
index bac754e4..920e9ee8 100644
--- a/src/components/general/ColumnMenu.vue
+++ b/src/components/general/ColumnMenu.vue
@@ -36,6 +36,7 @@
             "
             :to="child.to"
             :class="getClass(child)"
+            :disabled="child.nodata"
           >
             <v-list-item-title>{{ child.name }}</v-list-item-title>
             <template v-slot:append>
diff --git a/src/views/SpatialDisplayView.vue b/src/views/SpatialDisplayView.vue
index dcd0e6d4..65a3ee9c 100644
--- a/src/views/SpatialDisplayView.vue
+++ b/src/views/SpatialDisplayView.vue
@@ -128,6 +128,7 @@ function attachLayersToMenu(
     const item: ColumnItem = {
       id: layer.name,
       name: layer.title || layer.name,
+      nodata: layer.completelyMissing || false,
       to: {
         name: 'SpatialDisplay',
         params: {

From 4b44818b9a6698bf5b82047396fb54bb9c703d49 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Tue, 21 Nov 2023 11:38:21 +0100
Subject: [PATCH 2/4] Add notification to menu when no data is present

---
 src/components/general/ColumnMenu.vue | 28 +++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/components/general/ColumnMenu.vue b/src/components/general/ColumnMenu.vue
index 920e9ee8..bf37e2e9 100644
--- a/src/components/general/ColumnMenu.vue
+++ b/src/components/general/ColumnMenu.vue
@@ -40,8 +40,26 @@
           >
             <v-list-item-title>{{ child.name }}</v-list-item-title>
             <template v-slot:append>
-              <v-icon v-if="child.children?.length">mdi-chevron-right</v-icon>
-              <v-icon v-else-if="child.icon" small>{{ child.icon }}</v-icon>
+              <v-tooltip v-if="child.nodata">
+                <template v-slot:activator="{ props }">
+                  <v-icon v-bind="props" class="allow-disabled-hover"
+                    >mdi-alert-octagon-outline</v-icon
+                  >
+                </template>
+                <div v-if="child.children">
+                  <div>{{ child.name }}'s children are missing data:</div>
+                  <ul class="ml-4">
+                    <li v-for="grandChild in child.children">
+                      {{ grandChild.name }}
+                    </li>
+                  </ul>
+                </div>
+                <span v-else>{{ child.name }} has no data.</span>
+              </v-tooltip>
+              <div v-else>
+                <v-icon v-if="child.children">mdi-chevron-right</v-icon>
+                <v-icon v-else-if="child.icon" small>{{ child.icon }}</v-icon>
+              </div>
             </template>
           </v-list-item>
         </template>
@@ -151,3 +169,9 @@ function recursiveFind(stack: ColumnItem[], id: string): boolean {
   return false
 }
 </script>
+
+<style scoped>
+.allow-disabled-hover {
+  pointer-events: auto;
+}
+</style>

From 78c12714c205e2f8534fe0047c35320cdc85c15b Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Wed, 17 Jan 2024 10:47:03 +0100
Subject: [PATCH 3/4] Ad

---
 src/components/general/ColumnItem.ts  |  3 ++-
 src/components/general/ColumnMenu.vue |  8 ++++----
 src/views/SpatialDisplayView.vue      | 12 +++++++++---
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/general/ColumnItem.ts b/src/components/general/ColumnItem.ts
index 90d76ab6..cd14df71 100644
--- a/src/components/general/ColumnItem.ts
+++ b/src/components/general/ColumnItem.ts
@@ -8,5 +8,6 @@ export interface ColumnItem {
   href?: string
   target?: string
   icon?: string
-  nodata?: boolean
+  disabled?: boolean
+  tooltipText?: string
 }
diff --git a/src/components/general/ColumnMenu.vue b/src/components/general/ColumnMenu.vue
index bf37e2e9..a52284ac 100644
--- a/src/components/general/ColumnMenu.vue
+++ b/src/components/general/ColumnMenu.vue
@@ -36,14 +36,14 @@
             "
             :to="child.to"
             :class="getClass(child)"
-            :disabled="child.nodata"
+            :disabled="child.disabled"
           >
             <v-list-item-title>{{ child.name }}</v-list-item-title>
             <template v-slot:append>
-              <v-tooltip v-if="child.nodata">
+              <v-tooltip v-if="child.tooltipText">
                 <template v-slot:activator="{ props }">
-                  <v-icon v-bind="props" class="allow-disabled-hover"
-                    >mdi-alert-octagon-outline</v-icon
+                  <v-icon v-bind="props" class="allow-disabled-hover" size="x-small"
+                    >{{ child.icon }}</v-icon
                   >
                 </template>
                 <div v-if="child.children">
diff --git a/src/views/SpatialDisplayView.vue b/src/views/SpatialDisplayView.vue
index 65a3ee9c..ade2498d 100644
--- a/src/views/SpatialDisplayView.vue
+++ b/src/views/SpatialDisplayView.vue
@@ -125,16 +125,22 @@ function attachLayersToMenu(
 ) {
   for (const layer of layers) {
     const groupNode = groupNodes.get(layer.path.toString())
+    const noData = layer.completelyMissing || false
     const item: ColumnItem = {
       id: layer.name,
       name: layer.title || layer.name,
-      nodata: layer.completelyMissing || false,
-      to: {
+      disabled: noData,
+    }
+    if (!noData) {
+      item.to = {
         name: 'SpatialDisplay',
         params: {
           layerName: layer.name,
         },
-      },
+      }
+    } else {
+      item.tooltipText = 'No data available'
+      item.icon = 'mdi-alert-circle-outline'
     }
     groupNode?.children?.push(item)
   }

From 0269bfb528678b11d46289066097aef30aa343b0 Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Wed, 17 Jan 2024 11:00:55 +0100
Subject: [PATCH 4/4] Use tooltipText

---
 src/components/general/ColumnMenu.vue   | 21 +++++++------------
 src/components/general/TreeMenuItem.vue | 28 +++++++++++++++++++++++--
 2 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/components/general/ColumnMenu.vue b/src/components/general/ColumnMenu.vue
index a52284ac..ca37b0eb 100644
--- a/src/components/general/ColumnMenu.vue
+++ b/src/components/general/ColumnMenu.vue
@@ -40,21 +40,16 @@
           >
             <v-list-item-title>{{ child.name }}</v-list-item-title>
             <template v-slot:append>
-              <v-tooltip v-if="child.tooltipText">
+              <v-tooltip v-if="item.tooltipText">
                 <template v-slot:activator="{ props }">
-                  <v-icon v-bind="props" class="allow-disabled-hover" size="x-small"
-                    >{{ child.icon }}</v-icon
+                  <v-icon
+                    v-bind="props"
+                    class="allow-disabled-hover"
+                    size="x-small"
+                    >{{ item.icon }}</v-icon
                   >
                 </template>
-                <div v-if="child.children">
-                  <div>{{ child.name }}'s children are missing data:</div>
-                  <ul class="ml-4">
-                    <li v-for="grandChild in child.children">
-                      {{ grandChild.name }}
-                    </li>
-                  </ul>
-                </div>
-                <span v-else>{{ child.name }} has no data.</span>
+                {{ item.tooltipText }}
               </v-tooltip>
               <div v-else>
                 <v-icon v-if="child.children">mdi-chevron-right</v-icon>
@@ -170,7 +165,7 @@ function recursiveFind(stack: ColumnItem[], id: string): boolean {
 }
 </script>
 
-<style scoped>
+<style>
 .allow-disabled-hover {
   pointer-events: auto;
 }
diff --git a/src/components/general/TreeMenuItem.vue b/src/components/general/TreeMenuItem.vue
index dbed5b27..9247a878 100644
--- a/src/components/general/TreeMenuItem.vue
+++ b/src/components/general/TreeMenuItem.vue
@@ -13,11 +13,35 @@
     <v-list-item v-else-if="item.href" :href="item.href" target="_blank">
       <v-list-item-title>{{ item.name }}</v-list-item-title>
       <template v-slot:append>
-        <v-icon>mdi-share</v-icon>
+        <v-icon size="x-small">{{ item.icon }}</v-icon>
       </template>
     </v-list-item>
-    <v-list-item v-else :to="item.to" style="margin-right: 10px">
+    <v-list-item
+      v-else
+      :to="item.to"
+      style="margin-right: 10px"
+      :disabled="item.disabled"
+    >
       <v-list-item-title>{{ item.name }}</v-list-item-title>
+      <template v-slot:append>
+        <v-tooltip v-if="item.tooltipText">
+          <template v-slot:activator="{ props }">
+            <v-icon
+              v-bind="props"
+              class="allow-disabled-hover"
+              size="x-small"
+              >{{ item.icon }}</v-icon
+            >
+          </template>
+          {{ item.tooltipText }}
+        </v-tooltip>
+        <v-icon
+          v-else-if="item.icon"
+          size="x-small"
+          style="pointer-events: auto"
+          >{{ item.icon }}
+        </v-icon>
+      </template>
     </v-list-item>
   </template>
 </template>