Plot options rewrite (#1343)

* ViewerSelect: support toggling multi-select
* LayerSelect with supported multiselect
* only shows most-used plot options and sorted into categories
* mixed state logic when multi-select enabled
* re-factor uncertainties logic to work with new infrastructure (hidden in cubeviz for now) 

example in cubeviz of using API with multiselect:
```
po = viz.app.get_tray_item_from_name('g-plot-options')
po.viewer.multiselect = True
po.viewer.selected = ['flux-viewer', 'uncert-viewer']
po.show_axes.value = False
```

CHANGES.rst

@@ -6,6 +6,9 @@ New Features
 
 - Snackbar queue priority and history access. [#1352]
 
+- Plot options are simplified and include an advanced mode to act on multiple viewers/layers
+  simultaneously. [#1343]
+
 Cubeviz
 ^^^^^^^
 
@@ -73,6 +76,7 @@ New Features
 
 - Added offscreen indication for spectral lines and slice indicator. [#1312]
 
+
 Cubeviz
 ^^^^^^^
 

jdaviz/app.py

@@ -68,8 +68,10 @@
                      'plugin-dataset-select': 'components/plugin_dataset_select.vue',
                      'plugin-subset-select': 'components/plugin_subset_select.vue',
                      'plugin-viewer-select': 'components/plugin_viewer_select.vue',
+                     'plugin-layer-select': 'components/plugin_layer_select.vue',
                      'plugin-add-results': 'components/plugin_add_results.vue',
-                     'plugin-auto-label': 'components/plugin_auto_label.vue'}
+                     'plugin-auto-label': 'components/plugin_auto_label.vue',
+                     'glue-state-sync-wrapper': 'components/glue_state_sync_wrapper.vue'}
 
 _verbosity_levels = ('debug', 'info', 'warning', 'error')
 

jdaviz/components/glue_state_sync_wrapper.vue

@@ -0,0 +1,40 @@
+<template>
+  <div v-if="sync.in_subscribed_states" style="display: grid; padding-top: 4px; padding-bottom: 4px"> <!-- overlay container -->
+    <div style="grid-area: 1/1">
+      <v-row class="row-no-outside-padding">
+        <v-col :cols="multiselect ? '8' : '12'" style="padding: 0">
+          <div style="grid-area: 1/1">
+            <slot></slot>
+          </div>
+        </v-col>
+        <v-col v-if="multiselect" cols="4" style="text-align: center; padding: 0">
+          <v-icon v-for="icon in sync.icons">{{icon}}</v-icon>
+        </v-col>
+      </v-row>
+    </div>
+    <j-tooltip v-if="sync.mixed" tipid='plugin-plot-options-mixed-state' span_style="display: grid; grid-area: 1/1">
+      <div
+        @click="() => {$emit('unmix-state')}"
+        class="text-center"
+        style="z-index:2;
+               margin-left: -24px;
+               margin-right: -24px;
+               cursor: pointer;
+               border: 2px solid #00617E;
+               background-color: rgb(245 245 245 / 70%);">
+        <v-icon
+          large 
+          dark
+          color="#00617E"
+          style="height: 100%"
+          >mdi-link-off</v-icon>
+      </div> 
+    </j-tooltip>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  props: ['sync', 'multiselect']
+};
+</script>

jdaviz/components/plugin_layer_select.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+  <v-row v-if="items.length > 1 || show_if_single_entry">
+    <v-select
+      :items="items"
+      v-model="selected"
+      @change="$emit('update:selected', $event)"
+      :label="label ? label : 'Layer'"
+      :hint="hint ? hint : 'Select layer.'"
+      :rules="rules ? rules : []"
+      :multiple="multiselect"
+      :chips="multiselect"
+      item-text="label"
+      item-value="label"
+      persistent-hint
+    >
+    <template slot="selection" slot-scope="data">
+      <div class="single-line" style="width: 100%">
+        <v-chip v-if="multiselect" style="width: calc(100% - 20px)">
+          <span>
+            <v-icon style='margin-left: -10px; margin-right: 2px'>{{ data.item.icon }}</v-icon>
+            {{ data.item.label }}
+          </span>
+        </v-chip>
+        <span v-else>
+          {{ data.item.label }}
+        </span>
+      </div>
+    </template>
+    <template v-slot:prepend-item v-if="multiselect">
+      <v-list-item
+        ripple
+        @mousedown.prevent
+        @click="() => {if (selected.length < items.length) { $emit('update:selected', items.map((item) => item.label))} else {$emit('update:selected', [])}}"
+      >
+        <v-list-item-action>
+          <v-icon>
+            {{ selected.length == items.length ? 'mdi-close-box' : selected.length ? 'mdi-minus-box' : 'mdi-checkbox-blank-outline' }}
+          </v-icon>
+        </v-list-item-action>
+        <v-list-item-content>
+          <v-list-item-title>
+            {{ selected.length < items.length ? "Select All" : "Clear All" }}
+          </v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+      <v-divider class="mt-2"></v-divider>
+    </template>
+    <template slot="item" slot-scope="data">
+      <div class="single-line">
+        <span>
+          {{ data.item.label }}
+        </span>
+      </div>
+    </template>
+   </v-select>
+  </v-row>
+ </div>
+</template>
+
+<script>
+module.exports = {
+  props: ['items', 'selected', 'label', 'hint', 'rules', 'show_if_single_entry', 'multiselect']
+};
+</script>
+
+<style>
+  .single-line {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+  }
+</style>

jdaviz/components/plugin_viewer_select.vue

@@ -8,17 +8,44 @@
       :label="label ? label : 'Viewer'"
       :hint="hint ? hint : 'Select viewer.'"
       :rules="rules ? rules : []"
+      :multiple="multiselect"
+      :chips="multiselect"
       item-text="label"
       item-value="label"
       persistent-hint
     >
     <template slot="selection" slot-scope="data">
-      <div class="single-line">
-        <span>
+      <div class="single-line" style="width: 100%">
+        <v-chip v-if="multiselect" style="width: calc(100% - 20px)">
+          <span>
+            <v-icon style='margin-left: -10px; margin-right: 2px'>{{ data.item.icon }}</v-icon>
+            {{ data.item.label.split("-viewer")[0] }}
+          </span>
+        </v-chip>
+        <span v-else>
           {{ data.item.label }}
         </span>
       </div>
     </template>
+    <template v-slot:prepend-item v-if="multiselect">
+      <v-list-item
+        ripple
+        @mousedown.prevent
+        @click="() => {if (selected.length < items.length) { $emit('update:selected', items.map((item) => item.label))} else {$emit('update:selected', [])}}"
+      >
+        <v-list-item-action>
+          <v-icon>
+            {{ selected.length == items.length ? 'mdi-close-box' : selected.length ? 'mdi-minus-box' : 'mdi-checkbox-blank-outline' }}
+          </v-icon>
+        </v-list-item-action>
+        <v-list-item-content>
+          <v-list-item-title>
+            {{ selected.length < items.length ? "Select All" : "Clear All" }}
+          </v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+      <v-divider class="mt-2"></v-divider>
+    </template>
     <template slot="item" slot-scope="data">
       <div class="single-line">
         <span>
@@ -33,7 +60,7 @@
 
 <script>
 module.exports = {
-  props: ['items', 'selected', 'label', 'hint', 'rules', 'show_if_single_entry']
+  props: ['items', 'selected', 'label', 'hint', 'rules', 'show_if_single_entry', 'multiselect']
 };
 </script>
 

jdaviz/components/tooltip.vue

@@ -2,13 +2,13 @@
   <v-tooltip v-if="getTooltipHtml()" bottom :open-delay="getOpenDelay()"
       :nudge-bottom="getNudgeBottom()">
     <template v-slot:activator="{ on, attrs }">
-      <span v-bind="attrs" v-on="on" style="height: inherit; display: inherit">
+      <span v-bind="attrs" v-on="on" :style="getSpanStyle()">
         <slot></slot>
       </span>
     </template>
     <span v-html="getTooltipHtml()"></span>
   </v-tooltip>
-  <span v-else style="height: inherit; display: inherit">
+  <span v-else :style="getSpanStyle()">
     <!-- in the case where there is no tooltip, just pass through the wrapped element -->
     <slot></slot>
   </span>
@@ -57,6 +57,8 @@ const tooltips = {
   'table-next': 'Select next row in table',
   'table-play-pause-toggle': 'Toggle cycling through rows of table',
   'table-play-pause-delay': 'Set delay before cycling to next entry',
+  'plugin-plot-options-multiselect-toggle': 'Toggle between simple (single-select) and advanced (multiselect)',
+  'plugin-plot-options-mixed-state': 'Current values are mixed, click to sync at shown value',
   'plugin-model-fitting-add-model': 'Create model component',
   'plugin-model-fitting-param-fixed': 'Check the box to freeze parameter value',
   'plugin-unit-conversion-apply': 'Apply unit conversion',
@@ -82,7 +84,7 @@ const tooltips = {
 
 
 module.exports = {
-  props: ['tooltipcontent', 'tipid', 'delay', 'nudgebottom'],
+  props: ['tooltipcontent', 'tipid', 'delay', 'nudgebottom', 'span_style'],
   methods: {
     getTooltipHtml() {
       // use tooltipcontent if provided, default to tooltips dictionary
@@ -98,6 +100,9 @@ module.exports = {
       //return tooltips[this.$props.tipid] || "tipid: "+this.$props.tipid;
       return tooltips[this.$props.tipid];
     },
+    getSpanStyle() {
+      return this.$props.span_style || "height: inherit; display: inherit";
+    },
     getOpenDelay() {
       return this.$props.delay || "0";
     },