From d9f5862f5ee93f9869b83c6b0cd072191ca9f3b4 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 13 Nov 2024 13:43:53 -0500
Subject: [PATCH] Support editing local layer names and visibility

---
 vue/src/actions/localMapLayers.ts  | 39 ++++++++++++++++++++++++++++--
 vue/src/components/LocalLayers.vue | 33 ++++++++++++++++---------
 2 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/vue/src/actions/localMapLayers.ts b/vue/src/actions/localMapLayers.ts
index 2c7657a0..29a9b77c 100644
--- a/vue/src/actions/localMapLayers.ts
+++ b/vue/src/actions/localMapLayers.ts
@@ -1,9 +1,15 @@
 import { state } from "../store";
+import { getGeoJSONBounds } from '../utils';
+import { FitBoundsEvent } from '../actions/map';
 
-let id = 1;
+let _id = 1;
 
 function nextId() {
-  return id++;
+  return _id++;
+}
+
+function defaultLayerName(layerId: number) {
+  return `Layer ${layerId}`;
 }
 
 export function addLocalMapLayer(feature: GeoJSON.GeoJSON): number {
@@ -11,6 +17,8 @@ export function addLocalMapLayer(feature: GeoJSON.GeoJSON): number {
   state.localMapFeatureById[id] = {
     id,
     geojson: feature,
+    visible: true,
+    name: defaultLayerName(id),
   };
   state.localMapFeatureIds.push(id);
 
@@ -25,3 +33,30 @@ export function removeLocalMapLayer(id: number) {
   delete state.localMapFeatureById[id];
 }
 
+export function focusLayer(layerId: number) {
+  const layer = state.localMapFeatureById[layerId];
+  if (!layer) return;
+
+  const bounds = getGeoJSONBounds(layer.geojson);
+  FitBoundsEvent.trigger(bounds);
+}
+
+export function setLayerVisibility(layerId: number, visible: boolean) {
+  const layer = state.localMapFeatureById[layerId];
+  if (!layer) return;
+
+  state.localMapFeatureById[layerId] = {
+    ...layer,
+    visible,
+  };
+}
+
+export function setLayerName(layerId: number, name: string) {
+  const layer = state.localMapFeatureById[layerId];
+  if (!layer) return;
+
+  state.localMapFeatureById[layerId] = {
+    ...layer,
+    name: name.trim().length ? name : defaultLayerName(layerId),
+  };
+}
diff --git a/vue/src/components/LocalLayers.vue b/vue/src/components/LocalLayers.vue
index c13d0cac..f1fe08a2 100644
--- a/vue/src/components/LocalLayers.vue
+++ b/vue/src/components/LocalLayers.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { addLocalMapLayer, removeLocalMapLayer } from '../actions/localMapLayers';
+import { addLocalMapLayer, focusLayer, removeLocalMapLayer, setLayerName, setLayerVisibility } from '../actions/localMapLayers';
 import { state } from '../store';
-import { getGeoJSONBounds } from '../utils';
-import { FitBoundsEvent } from '../actions/map';
 
 const isLoading = ref(false);
 
@@ -51,14 +49,6 @@ function deleteLayer(layerId: number) {
   removeLocalMapLayer(layerId);
 }
 
-function focusLayer(layerId: number) {
-  const layer = state.localMapFeatureById[layerId];
-  if (!layer) return;
-
-  const bounds = getGeoJSONBounds(layer.geojson);
-  FitBoundsEvent.trigger(bounds);
-}
-
 const localLayers = computed(() => {
   return state.localMapFeatureIds.map(
     (id) => state.localMapFeatureById[id],
@@ -93,8 +83,13 @@ const localLayers = computed(() => {
       <v-list-item
         v-for="layer in localLayers"
         :key="layer.id"
-        :title="`Layer ${layer.id}`"
       >
+        <v-text-field
+          variant="underlined"
+          :placeholder="`Layer ${layer.id}`"
+          :model-value="layer.name"
+          @model-value:update="setLayerName(layer.id, $event)"
+        />
         <template #append>
           <v-btn
             color="grey-darken-1"
@@ -110,6 +105,20 @@ const localLayers = computed(() => {
               Focus
             </v-tooltip>
           </v-btn>
+          <v-btn
+            color="grey-darken-1"
+            icon
+            variant="text"
+            @click="setLayerVisibility(layer.id, !layer.visible)"
+          >
+            <v-icon>{{ layer.visible ? 'mdi-eye' : 'mdi-eye-off' }}</v-icon>
+            <v-tooltip
+              activator="parent"
+              location="bottom"
+            >
+              Toggle Visibility
+            </v-tooltip>
+          </v-btn>
           <v-btn
             color="grey-darken-1"
             icon