data-menu: API hints

CHANGES.rst

@@ -4,7 +4,7 @@
 New Features
 ------------
 
-* New design for viewer legend and data-menu. [#3220, #3254, #3263, #3264, #3271, #3272]
+* New design for viewer legend and data-menu. [#3220, #3254, #3263, #3264, #3271, #3272, #3274]
 
 Cubeviz
 ^^^^^^^

jdaviz/app.py

@@ -156,7 +156,8 @@ def to_unit(self, data, cid, values, original_units, target_units):
                      'glue-state-sync-wrapper': 'components/glue_state_sync_wrapper.vue',
                      'data-menu-add': 'components/data_menu_add.vue',
                      'data-menu-remove': 'components/data_menu_remove.vue',
-                     'data-menu-subset-edit': 'components/data_menu_subset_edit.vue'}
+                     'data-menu-subset-edit': 'components/data_menu_subset_edit.vue',
+                     'hover-api-hint': 'components/hover_api_hint.vue'}
 
 _verbosity_levels = ('debug', 'info', 'warning', 'error')
 
@@ -186,6 +187,8 @@ class ApplicationState(State):
         True, docstring="State of the plugins drawer.")
     show_toolbar_buttons = CallbackProperty(
         True, docstring="Whether to show app-level toolbar buttons (left of sidebar menu button).")
+    show_api_hints = CallbackProperty(
+        False, docstring="Whether to show API hints.")
     logger_overlay = CallbackProperty(
         False, docstring="State of the logger history overlay.")
 

jdaviz/app.vue

@@ -55,6 +55,11 @@
             <v-icon medium>mdi-help-box</v-icon>
           </v-btn>
         </j-tooltip>
+        <j-tooltip v-if="state.show_toolbar_buttons && checkNotebookContext()" tipid="app-api-hints">
+          <v-btn icon @click="state.show_api_hints = !state.show_api_hints" :class="{active : state.show_api_hints}">
+            <v-icon medium style="padding-top: 2px">mdi-code-tags</v-icon>
+          </v-btn>
+        </j-tooltip>
         <j-tooltip v-if="state.show_toolbar_buttons" tipid="app-snackbar-history">
           <v-btn icon @click="state.logger_overlay = !state.logger_overlay" :class="{active : state.logger_overlay}">
             <v-icon medium style="padding-top: 2px">mdi-message-reply-text</v-icon>

jdaviz/components/data_menu_add.vue

@@ -20,7 +20,7 @@
         </v-btn>
       </j-tooltip>
     </template>
-    <v-list dense style="width: 200px; max-height: 300px; overflow-y: auto;">
+    <v-list dense style="width: 300px; max-height: 300px; overflow-y: auto;">
       <v-subheader v-if="dataset_items.length > 0"><span>Load Data</span></v-subheader>
       <v-list-item
         v-for="data in dataset_items"
@@ -29,9 +29,14 @@
           <j-tooltip tooltipcontent="add data to viewer">
             <span
               style="cursor: pointer; width: 100%"
+              :class="api_hints_enabled ? 'api-hint' : ''"
               @click="() => {$emit('add-data', data.label)}"
             >
-              {{ data.label }}
+              {{ api_hints_enabled ?
+                'dm.add_data(\''+data.label+'\')'
+                :
+                data.label
+              }} 
             </span>
           </j-tooltip>
         </v-list-item-content>
@@ -44,24 +49,37 @@
           <j-tooltip
             v-for="tool in subset_tools"
             span_style="display: inline-block"
-            :tooltipcontent="'Create new '+tool.name+' subset'"
+            :tooltipcontent="api_hints_enabled ? '' : 'Create new '+tool.name+' subset'"
           >
             <v-btn 
               icon
+              @mouseover="() => {hover_api_hint = 'dm.create_subset(\''+tool.name+'\')'}"
+              @mouseleave="() => {if (!lock_hover_api_hint) {hover_api_hint = ''}}"
               @click="() => {$emit('create-subset', tool.name)}"
             >
               <img :src="tool.img" width="20" class="invert-if-dark"/>
             </v-btn>
           </j-tooltip>
         </v-list-item-content>
       </v-list-item>
+      <hover-api-hint
+        v-if="api_hints_enabled"
+        :hover_api_hint.sync="hover_api_hint"
+        :lock_hover_api_hint.sync="lock_hover_api_hint"
+      />
     </v-list>
   </v-menu>
 
 </template>
 
 <script>
 module.exports = {
-  props: ['dataset_items', 'subset_tools', 'loaded_n_data'],
+  data: function () {
+      return {
+        hover_api_hint: '',
+        lock_hover_api_hint: false,
+      }
+    },
+  props: ['dataset_items', 'subset_tools', 'loaded_n_data', 'api_hints_enabled'],
 };
 </script>

jdaviz/components/data_menu_remove.vue

@@ -27,9 +27,14 @@
           >
             <span
               style="cursor: pointer; width: 100%"
+              :class="api_hints_enabled ? 'api-hint' : ''"
               @click="() => {$emit('remove-from-viewer')}"
             >
-              Remove from viewer
+              {{ api_hints_enabled ?
+                'dm.remove_from_viewer()'
+                :
+                'Remove from viewer'
+              }}
             </span>
           </j-tooltip>
         </v-list-item-content>
@@ -42,10 +47,15 @@
           >
             <span
               :style="'width: 100%; ' + (delete_app_enabled ? 'cursor: pointer;' : '')"
+              :class="api_hints_enabled ? 'api-hint' : ''"
               :disabled="!delete_app_enabled"
               @click="() => {if (delete_app_enabled) {$emit('remove-from-app')}}"
             >
-              Remove from app
+            {{ api_hints_enabled ?
+                'dm.remove_from_app()'
+                :
+                'Remove from app'
+              }}
             </span>
           </j-tooltip>
         </v-list-item-content>
@@ -56,6 +66,6 @@
 
 <script>
 module.exports = {
-  props: ['delete_enabled', 'delete_tooltip', 'delete_viewer_tooltip', 'delete_app_enabled', 'delete_app_tooltip'],
+  props: ['delete_enabled', 'delete_tooltip', 'delete_viewer_tooltip', 'delete_app_enabled', 'delete_app_tooltip', 'api_hints_enabled'],
 };
 </script>

jdaviz/components/data_menu_subset_edit.vue

@@ -58,20 +58,26 @@
           <j-tooltip
               v-for="tool in subset_tools.slice().reverse()"
               :span_style="'display: inline-block; float: right;'"
-              :tooltipcontent="'Interactively apply \'' + mode_item.glue_name + '\' logic to ' + subset_selected + ' using the ' + tool.name + ' tool'"
+              :tooltipcontent="api_hints_enabled ? '' : 'Interactively apply \'' + mode_item.glue_name + '\' logic to ' + subset_selected + ' using the ' + tool.name + ' tool'"
             >
               <v-btn
                 icon
                 max-height="24px"
                 max-width="24px"
+                @mouseover="() => {hover_api_hint = 'dm.modify_subset(\''+mode_item.glue_name+'\', \''+tool.name+'\')'}"
+                @mouseleave="() => {if (!lock_hover_api_hint) {hover_api_hint = ''}}"
                 @click="() => {$emit('modify-subset', mode_item.glue_name, tool.name)}"
               >
                 <img :src="tool.img" class="invert-if-dark" width="20"/>
               </v-btn>
             </j-tooltip>
         </v-list-item-action>
       </v-list-item>
-
+      <hover-api-hint
+        v-if="api_hints_enabled"
+        :hover_api_hint.sync="hover_api_hint"
+        :lock_hover_api_hint.sync="lock_hover_api_hint"
+      />
     </v-list>
   </v-menu>
 </template>
@@ -81,9 +87,11 @@ module.exports = {
   data: function () {
       return {
         hover_mode: '',
+        hover_api_hint: '',
+        lock_hover_api_hint: false,
       }
     },
-  props: ['subset_selected', 'subset_edit_enabled', 'subset_edit_tooltip', 'selected_n_subsets', 'subset_edit_modes', 'subset_tools'],
+  props: ['subset_selected', 'subset_edit_enabled', 'subset_edit_tooltip', 'selected_n_subsets', 'subset_edit_modes', 'subset_tools', 'api_hints_enabled'],
 };
 </script>
 

jdaviz/components/hover_api_hint.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-list-item
+  >
+    <v-list-item-content>
+        <span class="api-hint">
+        {{ hover_api_hint }}
+        </span>
+    </v-list-item-content>
+    <v-list-item-action>
+      <j-tooltip
+        tooltipcontent="toggle whether API hints persist after hovering to allow for copying text"
+      >
+        <v-badge
+          overlap
+          bottom
+          color="#007BA1"
+          :icon="lock_hover_api_hint ? 'mdi-lock-outline' : 'mdi-lock-open-outline'"
+        >
+          <v-btn
+            icon
+            small
+            @click="(e) => {e.stopPropagation(); $emit('update:lock_hover_api_hint', !lock_hover_api_hint); $emit('update:hover_api_hint', '')}"
+          >
+            <v-icon
+              :color="lock_hover_api_hint ? '#007BA1' : null"
+            >
+              mdi-code-tags
+            </v-icon>
+          </v-btn>
+        </v-badge>
+      </j-tooltip>
+    </v-list-item-action>
+  </v-list-item>
+</template>
+
+<script>
+  module.exports = {
+    props: ['hover_api_hint', 'lock_hover_api_hint'],
+  };
+</script>

jdaviz/components/plugin_switch.vue

@@ -1,6 +1,11 @@
 <template>
   <span v-if="use_eye_icon">
-    <v-btn icon @click.stop="$emit('update:value', !value); $emit('click', !value)">
+    <v-btn
+      icon 
+      @mouseover="$emit('mouseover')"
+      @mouseleave="$emit('mouseleave')"
+      @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">

jdaviz/components/tooltip.vue

@@ -24,6 +24,7 @@ const tooltips = {
   // app toolbar
   'app-help': 'Open docs in new tab',
   'app-snackbar-history': 'Toggle logger overlay',
+  'app-api-hints': 'Toggle API hints',
   'app-toolbar-plugins': 'Toggle plugin sidebar',
   'app-toolbar-popout': `Display in a new window<br /><br />
     <div style="width: 200px; border: 1px solid gray;" class="pa-2">

jdaviz/components/tray_plugin.vue

@@ -3,23 +3,10 @@
     class="tray-plugin"
     style="padding-left: 24px; padding-right: 24px; padding-top: 12px" >
     <v-row>
-      <div style="width: calc(100% - 64px)">
+      <div style="width: calc(100% - 32px)">
         <j-docs-link :link="link">{{ description }}</j-docs-link>
       </div>
-      <div style="width: 32px">
-        <j-tooltip tipid='plugin-api-hints'>
-          <v-btn
-            v-if="api_hints_enabled !== undefined && config && plugin_key && checkNotebookContext()" 
-            id="api-hints-button"
-            icon 
-            :class="api_hints_enabled ? 'api-hint' : null"
-            @click="() => {$emit('update:api_hints_enabled', !api_hints_enabled)}"
-          >
-            <v-icon>mdi-code-tags</v-icon>
-          </v-btn>
-        </j-tooltip>
 
-      </div>
       <div style="width: 32px">
         <j-plugin-popout :popout_button="popout_button"></j-plugin-popout>
       </div>

jdaviz/configs/default/plugins/data_menu/data_menu.py

@@ -42,6 +42,7 @@
     Only the following attributes and methods are available through the
     :ref:`public API <plugin-apis>`:
 
+    * :meth:`open_menu`
     * ``layer`` (:class:`~jdaviz.core.template_mixin.LayerSelect`):
         actively selected layer(s)
     * ``orientation`` (:class:`~jdaviz.core.template_mixin.LayerSelect`):
@@ -57,6 +58,8 @@
     """
     template_file = __file__, "data_menu.vue"
 
+    force_open_menu = Bool(False).tag(sync=True)
+
     viewer_id = Unicode().tag(sync=True)
     viewer_reference = Unicode().tag(sync=True)
 
@@ -146,13 +149,19 @@
 
     @property
     def user_api(self):
-        expose = ['layer', 'set_layer_visibility', 'toggle_layer_visibility',
+        expose = ['open_menu', 'layer', 'set_layer_visibility', 'toggle_layer_visibility',
                   'create_subset', 'modify_subset', 'add_data', 'view_info',
                   'remove_from_viewer', 'remove_from_app']
         if self.app.config == 'imviz':
             expose += ['orientation']
         return UserApiWrapper(self, expose=expose)
 
+    def open_menu(self):
+        """
+        Open all instances of the data menu.
+        """
+        self.force_open_menu = True
+
     @property
     def existing_subset_labels(self):
         return [sg.label for sg in self.app.data_collection.subset_groups]