From de00973629a0b38c33576aa51dd40d773e1e675c Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Thu, 31 Oct 2024 07:59:59 -0400
Subject: [PATCH] Framework for legend data menu (#3254)

* API access to set/toggle layer visibility
* basic list of togglable layers in data menu UI
* remove plot options setting for toggling legend
* hide data menu behind developer flag
* wireframe for upcoming follow-ups
* transition when opening menu
* show subset icon in menu
* temporary icon labeling of sublayers
* add to existing changelog entry
* add test coverage
---
 CHANGES.rst                                   |   2 +-
 jdaviz/app.py                                 |   2 +-
 .../components/layer_viewer_icon_stylized.vue |   7 +-
 jdaviz/components/plugin_switch.vue           |   4 +-
 jdaviz/components/subset_icon.vue             |  23 ++
 jdaviz/components/tooltip.vue                 |   2 +-
 .../default/plugins/data_menu/data_menu.py    | 106 ++++++-
 .../default/plugins/data_menu/data_menu.vue   | 300 +++++++++++++++---
 .../plugins/plot_options/plot_options.py      |  13 -
 .../plugins/plot_options/plot_options.vue     |  21 --
 .../configs/default/tests/test_data_menu.py   |  68 ++++
 jdaviz/container.vue                          |   2 +-
 12 files changed, 454 insertions(+), 96 deletions(-)
 create mode 100644 jdaviz/components/subset_icon.vue
 create mode 100644 jdaviz/configs/default/tests/test_data_menu.py

diff --git a/CHANGES.rst b/CHANGES.rst
index a07f2bd8f3..2f14f9666a 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -4,7 +4,7 @@
 New Features
 ------------
 
-* New design for viewer legend. [#3220]
+* New design for viewer legend. [#3220, #3254]
 
 Cubeviz
 ^^^^^^^
diff --git a/jdaviz/app.py b/jdaviz/app.py
index cc1bbe7b57..5576d84202 100644
--- a/jdaviz/app.py
+++ b/jdaviz/app.py
@@ -132,6 +132,7 @@ def to_unit(self, data, cid, values, original_units, target_units):
                      'j-number-uncertainty': 'components/number_uncertainty.vue',
                      'j-plugin-popout': 'components/plugin_popout.vue',
                      'j-multiselect-toggle': 'components/multiselect_toggle.vue',
+                     'j-subset-icon': 'components/subset_icon.vue',
                      'plugin-previews-temp-disabled': 'components/plugin_previews_temp_disabled.vue',  # noqa
                      'plugin-table': 'components/plugin_table.vue',
                      'plugin-dataset-select': 'components/plugin_dataset_select.vue',
@@ -206,7 +207,6 @@ class ApplicationState(State):
             'tray': True,
             'tab_headers': True,
         },
-        'viewer_labels': True,
         'dense_toolbar': True,
         'server_is_remote': False,  # sets some defaults, should be set before loading the config
         'context': {
diff --git a/jdaviz/components/layer_viewer_icon_stylized.vue b/jdaviz/components/layer_viewer_icon_stylized.vue
index fddef4e149..cfc4123ad1 100644
--- a/jdaviz/components/layer_viewer_icon_stylized.vue
+++ b/jdaviz/components/layer_viewer_icon_stylized.vue
@@ -1,5 +1,5 @@
 <template>
-  <j-tooltip :tooltipcontent="tooltipContent(tooltip, label, visible, colormode, colors, linewidth, is_subset)">
+  <j-tooltip :tooltipcontent="tooltipContent(tooltip, label, visible, colormode, colors, linewidth, is_subset)" :disabled="disabled">
     <v-btn
       :rounded="is_subset"
       @click="(e) => $emit('click', e)"
@@ -9,7 +9,10 @@
       height="30px"
       :disabled="disabled"
     >
-      <span :style="'color: white; text-shadow: 0px 0px 3px black; '+borderStyle(linewidth)">
+      <v-icon v-if="String(icon).startsWith('mdi-')" style="color: white">
+        {{  icon }}
+      </v-icon>"
+      <span v-else :style="'color: white; text-shadow: 0px 0px 3px black; '+borderStyle(linewidth)">
         {{ icon }}
       </span>
     </v-btn>
diff --git a/jdaviz/components/plugin_switch.vue b/jdaviz/components/plugin_switch.vue
index 4a2f7f5a37..bd2d180509 100644
--- a/jdaviz/components/plugin_switch.vue
+++ b/jdaviz/components/plugin_switch.vue
@@ -1,6 +1,6 @@
 <template>
   <span v-if="use_eye_icon">
-    <v-btn icon @click.stop="$emit('update:value', !value)">
+    <v-btn icon @click.stop="$emit('update:value', !value); $emit('click', !value)">
       <v-icon>mdi-eye{{ value ? '' : '-off' }}</v-icon>
     </v-btn>
     <span v-if="api_hints_enabled && api_hint" class="api-hint">
@@ -16,7 +16,7 @@
     :class="api_hints_enabled && api_hint ? 'api-hint' : null"
     :hint="hint"
     v-model="value"
-    @change="$emit('update:value', $event)"
+    @change="$emit('update:value', $event); $emit('click', $event)"
     persistent-hint>
   </v-switch>
 </template>
diff --git a/jdaviz/components/subset_icon.vue b/jdaviz/components/subset_icon.vue
new file mode 100644
index 0000000000..50ce94da86
--- /dev/null
+++ b/jdaviz/components/subset_icon.vue
@@ -0,0 +1,23 @@
+<template>
+  <j-tooltip v-if="subset_type == 'spatial'" span_style="display: inline-block" tooltipcontent="Spatial subset">
+    <v-icon dense>
+      mdi-chart-scatter-plot
+    </v-icon>
+  </j-tooltip>
+  <j-tooltip v-else-if="subset_type == 'spectral'" span_style="display: inline-block" tooltipcontent="Spectral subset">
+   <v-icon dense>
+      mdi-chart-bell-curve
+    </v-icon>
+  </j-tooltip>
+  <j-tooltip v-else-if="subset_type == 'temporal'" span_style="display: inline-block" tooltipcontent="Temporal subset">
+    <v-icon dense>
+      mdi-chart-line
+    </v-icon>
+  </j-tooltip>
+</template>
+
+<script>
+  module.exports = {
+    props: ['subset_type']
+  };
+</script>
\ No newline at end of file
diff --git a/jdaviz/components/tooltip.vue b/jdaviz/components/tooltip.vue
index a31a05a8ae..9eceec6056 100644
--- a/jdaviz/components/tooltip.vue
+++ b/jdaviz/components/tooltip.vue
@@ -128,7 +128,7 @@ module.exports = {
       return tooltips[this.$props.tipid];
     },
     getSpanStyle() {
-      return this.$props.span_style || "height: inherit; display: inherit";
+      return this.$props.span_style || "height: inherit; display: inherit; cursor: default";
     },
     getOpenDelay() {
       return this.$props.delay || "0";
diff --git a/jdaviz/configs/default/plugins/data_menu/data_menu.py b/jdaviz/configs/default/plugins/data_menu/data_menu.py
index 287eb60aed..1d3f0fe8a0 100644
--- a/jdaviz/configs/default/plugins/data_menu/data_menu.py
+++ b/jdaviz/configs/default/plugins/data_menu/data_menu.py
@@ -1,4 +1,5 @@
-from traitlets import Dict, Unicode
+from contextlib import contextmanager
+from traitlets import Bool, Dict, Unicode, List, observe
 
 from jdaviz.core.template_mixin import TemplateMixin, LayerSelectMixin
 from jdaviz.core.user_api import UserApiWrapper
@@ -15,6 +16,9 @@ class DataMenu(TemplateMixin, LayerSelectMixin):
     :ref:`public API <plugin-apis>`:
 
     * ``layer`` (:class:`~jdaviz.core.template_mixin.LayerSelect`):
+        actively selected layer(s)
+    * :meth:`set_layer_visibility`
+    * :meth:`toggle_layer_visibility`
     """
     template_file = __file__, "data_menu.vue"
 
@@ -28,27 +32,34 @@ class DataMenu(TemplateMixin, LayerSelectMixin):
 
     cmap_samples = Dict(cmap_samples).tag(sync=True)
 
+    dm_layer_selected = List().tag(sync=True)
+
+    dev_data_menu = Bool(False).tag(sync=True)
+
     def __init__(self, viewer, *args, **kwargs):
         super().__init__(*args, **kwargs)
         self._viewer = viewer
+        self._during_select_sync = False
 
         # TODO: refactor how this is applied by default to go through filters directly
         self.layer.remove_filter('filter_is_root')
         self.layer.add_filter(is_not_wcs_only)
+        self.layer.multiselect = True
+        self.layer._default_mode = 'empty'
 
         # first attach callback to catch any updates to viewer/layer icons and then
         # set their initial state
         self.hub.subscribe(self, IconsUpdatedMessage, self._on_app_icons_updated)
-        self.hub.subscribe(self, AddDataMessage, handler=lambda _: self.set_viewer_id())
+        self.hub.subscribe(self, AddDataMessage, handler=lambda _: self._set_viewer_id())
         self.viewer_icons = dict(self.app.state.viewer_icons)
         self.layer_icons = dict(self.app.state.layer_icons)
 
     @property
     def user_api(self):
-        expose = ['layer']
+        expose = ['layer', 'set_layer_visibility', 'toggle_layer_visibility']
         return UserApiWrapper(self, expose=expose)
 
-    def set_viewer_id(self):
+    def _set_viewer_id(self):
         # viewer_ids are not populated on the viewer at init, so we'll keep checking and set
         # these the first time that they are available
         if len(self.viewer_id) and len(self.viewer_reference):
@@ -65,4 +76,89 @@ def _on_app_icons_updated(self, msg):
             self.viewer_icons = msg.icons
         elif msg.icon_type == 'layer':
             self.layer_icons = msg.icons
-        self.set_viewer_id()
+        self._set_viewer_id()
+
+    @contextmanager
+    def during_select_sync(self):
+        self._during_select_sync = True
+        try:
+            yield
+        except Exception:  # pragma: no cover
+            self._during_select_sync = False
+            raise
+        self._during_select_sync = False
+
+    @observe('dm_layer_selected')
+    def _dm_layer_selected_changed(self, event={}):
+        if not hasattr(self, 'layer') or not self.layer.multiselect:  # pragma: no cover
+            return
+        if self._during_select_sync:
+            return
+        if len(event.get('new')) == len(event.get('old')):
+            # not possible from UI interaction, but instead caused by a selected
+            # layer being removed (deleting a selected subset, etc).  We want
+            # to update dm_layer_selected in order to preserve layer.selected
+            self._update_dm_layer_selected(event)
+            return
+        with self.during_select_sync():
+            # map index in dm_layer_selected (inverse order of layer_items)
+            # to set self.layer.selected
+            length = len(self.layer_items)
+            self.layer.selected = [self.layer_items[length-1-i]['label']
+                                   for i in self.dm_layer_selected]
+
+    @observe('layer_selected', 'layer_items')
+    def _update_dm_layer_selected(self, event={}):
+        if not hasattr(self, 'layer') or not self.layer.multiselect:  # pragma: no cover
+            return
+        if self._during_select_sync:
+            return
+        with self.during_select_sync():
+            # map list of strings in self.layer.selected to indices in dm_layer_selected
+            layer_labels = [layer['label'] for layer in self.layer_items][::-1]
+            self.dm_layer_selected = [layer_labels.index(label) for label in self.layer.selected
+                                      if label in layer_labels]
+
+    def set_layer_visibility(self, layer_label, visible=True):
+        """
+        Set the visibility of a layer in the viewer.
+
+        Parameters
+        ----------
+        layer_label : str
+            The label of the layer to set the visibility of.
+        visible : bool
+            Whether the layer should be visible or not.
+
+        Returns
+        -------
+        dict
+            A dictionary of the current visible layers.
+        """
+        for layer in self._viewer.layers:
+            if layer.layer.label == layer_label:
+                layer.visible = visible
+            elif hasattr(layer.layer, 'data') and layer.layer.data.label == layer_label:
+                layer.visible = layer.layer.label in self.visible_layers
+        return self.visible_layers
+
+    def toggle_layer_visibility(self, layer_label):
+        """
+        Toggle the visibility of a layer in the viewer.
+
+        Parameters
+        ----------
+        layer_label : str
+            The label of the layer to toggle the visibility of.
+
+        Returns
+        -------
+        bool
+            The new visibility state of the layer.
+        """
+        visible = layer_label not in self.visible_layers
+        self.set_layer_visibility(layer_label, visible=visible)
+        return visible
+
+    def vue_set_layer_visibility(self, info, *args):
+        return self.set_layer_visibility(info.get('layer'), info.get('value'))  # pragma: no cover
diff --git a/jdaviz/configs/default/plugins/data_menu/data_menu.vue b/jdaviz/configs/default/plugins/data_menu/data_menu.vue
index 3ccc0180da..be50687122 100644
--- a/jdaviz/configs/default/plugins/data_menu/data_menu.vue
+++ b/jdaviz/configs/default/plugins/data_menu/data_menu.vue
@@ -1,57 +1,227 @@
 <template>
   <div>
-    <div v-if="Object.keys(viewer_icons).length > 1" class="viewer-label">
-      <span style="float: right;">
-        <j-layer-viewer-icon-stylized
-          tooltip=""
-          :label="viewer_id"
-          :icon="viewer_icons[viewer_id]"
-          :visible="true"
-          :is_subset="false"
-          :colors="['#939393']"
-          :linewidth="0"
-          :cmap_samples="cmap_samples"
-          btn_style="margin-bottom: 0px"
-          disabled="true"
-        />
-      </span>
-      <span class="invert-if-dark" style="margin-left: 30px; margin-right: 36px; line-height: 28px">{{viewer_reference || viewer_id}}</span>
-    </div>
-
-    <div v-for="item in layer_items.slice().reverse()" class="viewer-label">
-      <div v-if="item.visible">
-        <span style="float: right;">
-          <j-layer-viewer-icon-stylized
-            tooltip=""
-            :label="item.label"
-            :icon="item.icon"
-            :visible="item.visible"
-            :is_subset="item.is_subset"
-            :colors="item.colors"
-            :linewidth="item.linewidth"
-            :cmap_samples="cmap_samples"
-            btn_style="margin-bottom: 0px"
-            disabled="true"
-          />
-        </span>
-        <span class="invert-if-dark" style="margin-left: 30px; margin-right: 36px; line-height: 28px">
-          <v-icon v-if="item.subset_type == 'spatial'" dense>
-            mdi-chart-scatter-plot
-          </v-icon>
-          <v-icon v-else-if="item.subset_type == 'spectral'" dense>
-            mdi-chart-bell-curve
-          </v-icon>
-          <v-icon v-else-if="item.subset_type == 'temporal'" dense>
-            mdi-chart-line
-          </v-icon>
-          {{item.label}}
-        </span>
-      </div>
-    </div>
+    <v-menu
+      offset-x
+      left
+      nudge-left="8"
+      transition="slide-x-reverse-transition"
+      :close-on-content-click="false"
+      v-model="data_menu_open">
+      <template v-slot:activator="{ on, attrs }">
+        <div :id="'layer-legend-'+ viewer_id">
+          <div v-if="Object.keys(viewer_icons).length > 1 || Object.keys(visible_layers).length == 0 || data_menu_open" class="viewer-label"> 
+            <span style="float: right;">
+              <j-layer-viewer-icon-stylized
+                :tooltip="data_menu_open ? 'close menu' : 'View data layers and subsets'"
+                :label="viewer_id"
+                :icon="data_menu_open ? 'mdi-close' : viewer_icons[viewer_id]"
+                :visible="true"
+                :is_subset="false"
+                :colors="['#939393']"
+                :linewidth="0"
+                :cmap_samples="cmap_samples"
+                btn_style="margin-bottom: 0px"
+                @click="() => {if (dev_data_menu) {data_menu_open = !data_menu_open}}"
+                :disabled="!dev_data_menu"
+              />
+            </span>
+            <span class="invert-if-dark" style="margin-left: 30px; margin-right: 36px; line-height: 28px">{{viewer_reference || viewer_id}}</span>
+          </div>
 
+          <div v-for="item in layer_items.slice().reverse()" class="viewer-label">
+            <div v-if="item.visible">
+              <span style="float: right;">
+                <j-layer-viewer-icon-stylized
+                  tooltip="View data layers and subsets"
+                  :label="item.label"
+                  :icon="item.icon"
+                  :visible="item.visible"
+                  :is_subset="item.is_subset"
+                  :colors="item.colors"
+                  :linewidth="item.linewidth"
+                  :cmap_samples="cmap_samples"
+                  btn_style="margin-bottom: 0px"
+                  @click="() => {if (dev_data_menu) {data_menu_open = !data_menu_open}}"
+                  :disabled="!dev_data_menu"
+                />
+              </span>
+              <span class="invert-if-dark" style="margin-left: 30px; margin-right: 36px; line-height: 28px">
+                <j-subset-icon :subset_type="item.subset_type" />
+                {{item.label}}
+              </span>
+            </div>
+          </div>
+        </div>
+      </template>
+      <v-list :id="'dm-content-' + viewer_id" style="width: 400px" class="overflow-y-auto">
+        <v-list-item class="dm-header">
+          <v-list-item-icon>
+            <j-tooltip
+              tooltipcontent="Reorder layers (COMING SOON)"
+            >
+              <v-btn
+                icon
+                disabled
+              >
+                <v-icon>mdi-format-vertical-align-center</v-icon>
+              </v-btn>
+            </j-tooltip>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <j-tooltip
+              tooltipcontent="Change orientation (COMING SOON)"
+            >
+              orientation
+            </j-tooltip>
+          </v-list-item-content>
+          <v-list-item-action>
+            <j-tooltip tooltipcontent="Add data or subset (COMING SOON)">
+              <v-btn
+                icon
+                disabled
+              >
+                <v-icon>mdi-plus</v-icon>
+              </v-btn>
+            </j-tooltip>
+          </v-list-item-action>
+        </v-list-item>
+        <v-list-item-group
+          v-model="dm_layer_selected"
+          active-class="active-list-item"
+          style="max-height: 265px; overflow-y: auto;"
+          multiple
+          dense
+        >
+          <div>
+          <v-list-item v-for="item in layer_items.slice().reverse()">
+            <v-list-item-icon>
+              <j-layer-viewer-icon-stylized
+                  :label="item.label"
+                  :icon="item.icon"
+                  :visible="item.visible"
+                  :is_subset="item.is_subset"
+                  :colors="item.colors"
+                  :linewidth="item.linewidth"
+                  :cmap_samples="cmap_samples"
+                  btn_style="margin-bottom: 0px"
+                  disabled="true"
+                />
+            </v-list-item-icon>
+            <v-list-item-content>
+              <span style="display: inline-block">
+                <j-subset-icon v-if="item.subset_type" :subset_type="item.subset_type" />
+                <j-tooltip
+                  v-if="item.icon.length == 2"
+                  :tooltipcontent="'sublayer of '+item.icon[0].toUpperCase()"
+                  span_style="display: inline-block" 
+                >
+                  <v-icon dense>mdi-layers-outline</v-icon>
+                </j-tooltip>
+                {{  item.label }}
+              </span>
+            </v-list-item-content>
+            <v-list-item-action>
+              <j-tooltip tooltipcontent="Toggle visibility">
+                <plugin-switch
+                  :value="item.visible"
+                  @click="(value) => {set_layer_visibility({layer: item.label, value: value})}"
+                  :api_hint='"dm.set_layer_visibility("+viewer_id+", "'
+                  :api_hints_enabled="false"
+                  :use_eye_icon="true"
+                />
+              </j-tooltip>
+            </v-list-item-action>
+          </v-list-item>
+          </div>
+        </v-list-item-group>
+        <v-list-item class="dm-footer">
+          <v-list-item-content style="display: inline-block">
+            <j-tooltip
+              span_style="display: inline-block; float: right"
+              tooltipcontent="Remove data/subset (COMING SOON)"
+            >
+              <v-btn
+                icon
+                disabled
+              >
+                <v-icon>mdi-delete</v-icon>
+              </v-btn>
+            </j-tooltip>
+            <j-tooltip
+              v-if="dm_layer_selected.length == 1 && layer_items[layer_items.length - 1 - dm_layer_selected[0]].icon.length == 1 && !layer_items[layer_items.length - 1 - dm_layer_selected[0]].is_subset && !layer_items[layer_items.length - 1 - dm_layer_selected[0]].from_plugin"
+              span_style="display: inline-block; float: right"
+              tooltipcontent="View Metadata"
+            >
+              <v-btn
+                icon
+                disabled
+                >
+                <v-icon>mdi-label</v-icon>
+              </v-btn>
+            </j-tooltip>
+            <j-tooltip
+              span_style="display: inline-block; float: right"
+              tooltipcontent="Edit Selected Subset (COMING SOON)"
+            >
+              <v-btn
+                text
+                disabled
+              >
+                Edit Subset
+              </v-btn>
+            </j-tooltip>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+    <div :id="'dm-target-' + viewer_id"></div>
   </div>
 </template>
 
+<script>
+  module.exports = {
+    data: function () {
+      return {
+        data_menu_open: false,
+      }
+    },
+    mounted() {
+      let element = document.getElementById(`dm-target-${this.viewer_id}`).parentElement
+      if (element === null) {
+        return
+      }
+      while (element["tagName"] !== "BODY") {
+        if (["auto", "scroll"].includes(window.getComputedStyle(element).overflowY)) {
+          element.addEventListener("scroll", this.onScroll);
+        }
+        element = element.parentElement;
+      }
+    },
+    beforeDestroy() {
+      let element = document.getElementById(`dm-target-${this.viewer_id}`).parentElement
+      if (element === null) {
+        return
+      }
+      while (element["tagName"] !== "BODY") {
+        if (["auto", "scroll"].includes(window.getComputedStyle(element).overflowY)) {
+          element.removeEventListener("scroll", this.onScroll);
+        }
+        element = element.parentElement;
+      }
+    },
+    methods: {
+      onScroll(e) {
+        const dataMenuHeight = document.getElementById(`layer-legend-${this.viewer_id}`).parentElement.getBoundingClientRect().height
+        const top = document.getElementById(`dm-target-${this.viewer_id}`).getBoundingClientRect().y + document.body.parentElement.scrollTop + dataMenuHeight;
+        if (this.data_menu_open && document.getElementById(`dm-target-${this.viewer_id}`)) {
+          const menuContent = document.getElementById(`dm-content-${this.viewer_id}`);
+          menuContent.parentElement.style.top = top + "px";
+        }
+      }
+    },
+  }
+</script>
+
 <style scoped>
   .viewer-label {
     display: block;
@@ -68,8 +238,40 @@
   .viewer-label:hover {
     background-color: #e5e5e5;
     width: auto;
-
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
   }
+  .v-list {
+    padding-top: 0px !important;
+    padding-bottom: 0px !important;
+  }
+  .v-list-item__icon, .v-list-item__content, .v-list-item__action {
+    /* even denser than dense */
+    padding-top: 4px !important;
+    padding-bottom: 4px !important;
+    margin-top: 2px !important;
+    margin-bottom: 2px !important;
+  }
+  .v-list-item__icon {
+    margin-top: 6px !important;
+  }
+  .v-list-item:nth-child(even) {
+    /* alternating row colors */
+    background-color: #f1f2f85a;
+  }
+  .active-list-item {
+    background-color: #d1f4ff75 !important;
+    font-weight: 500;
+  }
+  .dm-header, .dm-footer {
+    background-color: #003B4D;
+    font-weight: bold;
+  }
+  .dm-header > .v-list-item__icon, .dm-header > .v-list-item__content, .dm-header > .v-list-item__action,
+  .dm-footer > .v-list-item__icon, .dm-footer > .v-list-item__content, .dm-footer > .v-list-item__action {
+    filter: invert(1);
+  }
+  .dm-header.v-btn--disabled  .v-icon {
+    color: green !important;
+  }
 </style>
\ No newline at end of file
diff --git a/jdaviz/configs/default/plugins/plot_options/plot_options.py b/jdaviz/configs/default/plugins/plot_options/plot_options.py
index 4c1a5e6e4c..d2b31ae5bc 100644
--- a/jdaviz/configs/default/plugins/plot_options/plot_options.py
+++ b/jdaviz/configs/default/plugins/plot_options/plot_options.py
@@ -371,8 +371,6 @@ class PlotOptions(PluginTemplateMixin, ViewerSelectMixin):
     icon_radialtocheck = Unicode(read_icon(os.path.join(ICON_DIR, 'radialtocheck.svg'), 'svg+xml')).tag(sync=True)  # noqa
     icon_checktoradial = Unicode(read_icon(os.path.join(ICON_DIR, 'checktoradial.svg'), 'svg+xml')).tag(sync=True)  # noqa
 
-    show_viewer_labels = Bool(True).tag(sync=True)
-
     cmap_samples = Dict(cmap_samples).tag(sync=True)
     swatches_palette = List().tag(sync=True)
     apply_RGB_presets_spinner = Bool(False).tag(sync=True)
@@ -625,10 +623,6 @@ def state_attr_for_line_visible(state):
         self.axes_visible = PlotOptionsSyncState(self, self.viewer, self.layer, 'show_axes',
                                                  'axes_visible_value', 'axes_visible_sync',
                                                  state_filter=not_profile)
-
-        self.show_viewer_labels = self.app.state.settings['viewer_labels']
-        self.app.state.add_callback('settings', self._on_app_settings_changed)
-
         sv = self.spectrum_viewer
         if sv is not None:
             sv.state.add_callback('x_display_unit',
@@ -663,13 +657,6 @@ def user_api(self):
 
         return PluginUserApi(self, expose)
 
-    @observe('show_viewer_labels')
-    def _on_show_viewer_labels_changed(self, event):
-        self.app.state.settings['viewer_labels'] = event['new']
-
-    def _on_app_settings_changed(self, value):
-        self.show_viewer_labels = value['viewer_labels']
-
     @property
     def multiselect(self):
         logging.warning(f"DeprecationWarning: multiselect has been replaced by separate viewer_multiselect and layer_multiselect and will be removed in the future.  This currently evaluates viewer_multiselect or layer_multiselect")  # noqa
diff --git a/jdaviz/configs/default/plugins/plot_options/plot_options.vue b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
index 2078a28dae..d729d7c5b3 100644
--- a/jdaviz/configs/default/plugins/plot_options/plot_options.vue
+++ b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
@@ -10,27 +10,6 @@
     :popout_button="popout_button"
     :scroll_to.sync="scroll_to">
 
-    <v-row>
-      <v-expansion-panels popout>
-        <v-expansion-panel>
-          <v-expansion-panel-header v-slot="{ open }">
-            <span style="padding: 6px">Settings</span>
-          </v-expansion-panel-header>
-          <v-expansion-panel-content class="plugin-expansion-panel-content">
-            <v-row>
-              <plugin-switch
-                :value.sync="show_viewer_labels"
-                label="Show labels in viewers"
-                api_hint = 'plg.show_viewer_labels = '
-                :api_hints_enabled="api_hints_enabled"
-                hint="Whether to show viewer/layer labels on each viewer"
-              />
-            </v-row>
-          </v-expansion-panel-content>
-        </v-expansion-panel>
-      </v-expansion-panels>
-    </v-row>
-
     <!-- VIEWER OPTIONS -->
     <plugin-viewer-select
       :items="viewer_items"
diff --git a/jdaviz/configs/default/tests/test_data_menu.py b/jdaviz/configs/default/tests/test_data_menu.py
new file mode 100644
index 0000000000..143a7fbffb
--- /dev/null
+++ b/jdaviz/configs/default/tests/test_data_menu.py
@@ -0,0 +1,68 @@
+import numpy as np
+from specutils import SpectralRegion
+
+
+def test_data_menu_toggles(specviz_helper, spectrum1d):
+    # NOTE: this test is adopted from core.tests.test_data_menu.test_data_menu_toggles
+    # which should be removed once the old data menu is removed from jdaviz
+
+    # load 2 data entries
+    specviz_helper.load_data(spectrum1d, data_label="test")
+    new_spec = specviz_helper.get_spectra(apply_slider_redshift=True)["test"]*0.9
+    specviz_helper.load_data(new_spec, data_label="test2")
+
+    # check that both are enabled in the data menu
+    sv = specviz_helper.viewers['spectrum-viewer']
+    dm = sv._obj.data_menu
+    assert len(dm._obj.layer_items) == 2
+    assert len(dm._obj.visible_layers) == 2
+
+    # disable (hide layer) for second entry
+    dm.set_layer_visibility('test2', False)
+    assert len(dm._obj.layer_items) == 2
+    assert len(dm._obj.visible_layers) == 1
+
+    # add a subset and make sure it appears for the first data entry but not the second
+    specviz_helper.plugins['Subset Tools']._obj.import_region(
+        SpectralRegion(6000 * spectrum1d.spectral_axis.unit, 6500 * spectrum1d.spectral_axis.unit))
+
+    assert len(dm._obj.layer_items) == 3
+    assert len(dm._obj.visible_layers) == 2
+    assert len(sv._obj.layers) == 4
+    assert sv._obj.layers[2].visible is True   # subset corresponding to first (visible) data entry
+    assert sv._obj.layers[3].visible is False  # subset corresponding to second (hidden) data entry
+
+    # enable data layer from menu and subset should also become visible
+    dm.toggle_layer_visibility('test2')
+    assert np.all([layer.visible for layer in sv._obj.layers])
+
+
+def test_data_menu_selection(specviz_helper, spectrum1d):
+    # load 2 data entries
+    specviz_helper.load_data(spectrum1d, data_label="test")
+    new_spec = specviz_helper.get_spectra(apply_slider_redshift=True)["test"]*0.9
+    specviz_helper.load_data(new_spec, data_label="test2")
+
+    sv = specviz_helper.viewers['spectrum-viewer']
+    dm = sv._obj.data_menu
+
+    # no selection by default
+    assert len(dm._obj.dm_layer_selected) == 0
+    assert len(dm.layer.selected) == 0
+
+    # test layer -> UI sync
+    dm.layer.selected = dm.layer.choices[0]
+    assert len(dm._obj.dm_layer_selected) == len(dm.layer.selected)
+
+    # test UI -> layer sync
+    dm._obj.dm_layer_selected = [0, 1]
+    assert len(dm._obj.dm_layer_selected) == len(dm.layer.selected)
+
+    # test that sync remains during layer deletion
+    dm._obj.dm_layer_selected = [1]
+    assert dm.layer.selected == ['test']
+    specviz_helper.app.remove_data_from_viewer("spectrum-viewer", "test2")
+    specviz_helper.app.vue_data_item_remove({"item_name": "test2"})
+    assert len(dm._obj.layer_items) == 1
+    assert dm._obj.dm_layer_selected == [0]
+    assert dm.layer.selected == ['test']
diff --git a/jdaviz/container.vue b/jdaviz/container.vue
index 34428db591..16a1754377 100644
--- a/jdaviz/container.vue
+++ b/jdaviz/container.vue
@@ -62,7 +62,7 @@
 
         <v-card tile flat style="flex: 1; margin-top: -2px; overflow: hidden;">
           <div class="viewer-label-container">
-            <jupyter-widget :widget="viewer.data_menu" v-if="app_settings.viewer_labels"></jupyter-widget>
+            <jupyter-widget :widget="viewer.data_menu"></jupyter-widget>
           </div>
           <jupyter-widget
             :widget="viewer.widget"