plugins: scroll-to functionality (spacetelescope#2768)

* implement plugin.open_in_tray(scroll_to=True) and via toolbar tool
* improved options for scrollIntoView
* change default to scroll by default from API
* changelog entry

CHANGES.rst

@@ -17,6 +17,9 @@ New Features
 
 - "Export" plugin supports exporting plugin tables and non-composite spatial subsets.[#2755, #2760, #2772]
 
+- Opening a plugin in the tray (from the API or the toolbar buttons) now scrolls to that plugin.
+  [#2768]
+
 Cubeviz
 ^^^^^^^
 

docs/dev/ui_style_guide.rst

@@ -10,7 +10,7 @@ try to adhere to the following principles:
 
 * CSS intended to be applied app-wide should live in ``main_styles.vue`` so that they are available
   to all popout instances via ``PopoutStyleWrapper`` (exists on anything that inherits ``TemplateMixin``).
-* Any tray plugin should utilize ``<j-tray-plugin :disabled_msg='disabled_msg' :popout_button="popout_button">`` as the
+* Any tray plugin should utilize ``<j-tray-plugin :disabled_msg='disabled_msg' :popout_button="popout_button" :scroll_to.sync="scroll_to">`` as the
   outer-container (which provides consistent styling rules).  If the plugin makes use of active status
   (live-preview marks or viewer callbacks), then also pass `` :uses_active_status="uses_active_status" @plugin-ping="plugin_ping($event)"``.
   To enable the "Keep active" check, pass `` :uses_active_status="uses_active_status" @plugin-ping="plugin_ping($event)" :keep_active.sync="keep_active" ``.
@@ -79,7 +79,8 @@ try to adhere to the following principles:
         :uses_active_status="uses_active_status"
         @plugin-ping="plugin_ping($event)"
         :keep_active.sync="keep_active"
-        :popout_button="popout_button">
+        :popout_button="popout_button"
+        :scroll_to.sync="scroll_to">
 
         <v-row>
           ....

jdaviz/components/tray_plugin.vue

@@ -30,7 +30,7 @@
 <script>
 module.exports = {
   props: ['irrelevant_msg', 'disabled_msg', 'description', 'link', 'popout_button',
-          'uses_active_status', 'keep_active'],
+          'uses_active_status', 'keep_active', 'scroll_to'],
   methods: {
     isDisabled() {
       return this.getDisabledMsg().length > 0
@@ -45,6 +45,10 @@ module.exports = {
       if (!document.hidden) {
         this.$emit('plugin-ping', Date.now())
       }
+      if (this.scroll_to) {
+        this.$emit('update:scroll_to', false)
+        this.$el.scrollIntoView({behavior: "smooth", block: "nearest", inline: "start"});
+      }
       if (!recursive) {
         return
       }

jdaviz/configs/cubeviz/plugins/moment_maps/moment_maps.vue

@@ -5,7 +5,8 @@
     :uses_active_status="uses_active_status"
     @plugin-ping="plugin_ping($event)"
     :keep_active.sync="keep_active"
-    :popout_button="popout_button">
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to">
 
     <j-plugin-section-header>Cube</j-plugin-section-header>
     <v-row>

jdaviz/configs/cubeviz/plugins/slice/slice.vue

@@ -3,7 +3,8 @@
     :description="docs_description || 'Select slice of the cube to show in the image viewers.  The slice can also be changed interactively in the spectrum viewer by activating the slice tool.'"
     :irrelevant_msg="irrelevant_msg"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#slice'"
-    :popout_button="popout_button">
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to">
 
     <v-row>
       <v-expansion-panels popout>

jdaviz/configs/cubeviz/plugins/spectral_extraction/spectral_extraction.vue

@@ -6,6 +6,7 @@
     @plugin-ping="plugin_ping($event)"
     :keep_active.sync="keep_active"
     :popout_button="popout_button"
+    :scroll_to.sync="scroll_to"
     :disabled_msg="disabled_msg">
 
     <v-row>

jdaviz/configs/default/plugins/collapse/collapse.vue

@@ -2,7 +2,8 @@
   <j-tray-plugin
     :description="docs_description || 'Collapse a spectral cube along one axis.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#collapse'"
-    :popout_button="popout_button">
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to">
 
     <plugin-dataset-select
       :items="dataset_items"

jdaviz/configs/default/plugins/export/export.vue

@@ -2,7 +2,8 @@
   <j-tray-plugin
     description='Export data or plots from the app to a file.'
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#export'"
-    :popout_button="popout_button">
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to">
 
     <j-multiselect-toggle
       v-if="dev_multi_support"

jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue

@@ -2,7 +2,8 @@
   <j-tray-plugin
     :description="docs_description || 'Smooth data with a Gaussian kernel.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#gaussian-smooth'"
-    :popout_button="popout_button">
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to">
 
       <!-- for mosviz, the entries change on row change, so we want to always show the dropdown
            to make sure that is clear -->

jdaviz/configs/default/plugins/line_lists/line_lists.vue

@@ -3,7 +3,8 @@
     :description="docs_description || 'Plot lines from preset or custom line lists.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#line-lists'"
     :disabled_msg="disabled_msg"
-    :popout_button="popout_button">
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to">
 
     <j-plugin-section-header>Identified Line</j-plugin-section-header>
     <v-row>

jdaviz/configs/default/plugins/markers/markers.vue

@@ -5,7 +5,8 @@
     :uses_active_status="uses_active_status"
     @plugin-ping="plugin_ping($event)"
     :keep_active.sync="keep_active"
-    :popout_button="popout_button">
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to">
 
     <jupyter-widget :widget="table_widget"></jupyter-widget> 
 

jdaviz/configs/default/plugins/metadata_viewer/metadata_viewer.vue

@@ -2,7 +2,8 @@
   <j-tray-plugin
     :description="docs_description || 'View metadata.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#metadata-viewer'"
-    :popout_button="popout_button">
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to">
 
     <!-- for specviz, we'll allow this to hide for a single entry, but since filters are being
          applied on other configs, we'll always show -->

jdaviz/configs/default/plugins/model_fitting/model_fitting.vue

@@ -2,7 +2,8 @@
   <j-tray-plugin
     :description="docs_description || 'Fit an analytic model to data or a subset.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#model-fitting'"
-    :popout_button="popout_button">
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to">
 
     <!-- for mosviz, the entries change on row change, so we want to always show the dropdown
          to make sure that is clear -->

jdaviz/configs/default/plugins/plot_options/plot_options.vue

@@ -4,7 +4,8 @@
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#plot-options'"
     :uses_active_status="uses_active_status"
     @plugin-ping="plugin_ping($event)"
-    :popout_button="popout_button">
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to">
 
     <v-row>
       <v-expansion-panels popout>

jdaviz/configs/default/plugins/subset_plugin/subset_plugin.vue

@@ -2,7 +2,8 @@
   <j-tray-plugin
     :description="docs_description || 'Tools for selecting and interacting with subsets.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#subset-tools'"
-    :popout_button="popout_button">
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to">
 
     <v-row v-if="config === 'imviz'">
       <div style="width: calc(100% - 32px)">

jdaviz/configs/imviz/plugins/aper_phot_simple/aper_phot_simple.vue

@@ -5,7 +5,8 @@
     :uses_active_status="uses_active_status"
     @plugin-ping="plugin_ping($event)"
     :keep_active.sync="keep_active"
-    :popout_button="popout_button">
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to">
 
     <j-multiselect-toggle
       :multiselect.sync="multiselect"

jdaviz/configs/imviz/plugins/catalogs/catalogs.vue

@@ -2,7 +2,8 @@
   <j-tray-plugin
     :description="docs_description || 'Queries an area encompassed by the viewer using a specified catalog and marks all the objects found within the area.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#catalog-search'"
-    :popout_button="popout_button">
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to">
 
     <plugin-viewer-select
        :items="viewer_items"

jdaviz/configs/imviz/plugins/compass/compass.vue

@@ -4,7 +4,8 @@
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#compass'"
     :uses_active_status="uses_active_status"
     @plugin-ping="plugin_ping($event)"
-    :popout_button="popout_button">
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to">
 
     <plugin-viewer-select
       :items="viewer_items"

jdaviz/configs/imviz/plugins/footprints/footprints.vue

@@ -6,7 +6,8 @@
     @plugin-ping="plugin_ping($event)"
     :keep_active.sync="keep_active"
     :disabled_msg="disabled_msg"
-    :popout_button="popout_button">
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to">
 
     <plugin-editable-select
       :mode.sync="overlay_mode"

jdaviz/configs/imviz/plugins/line_profile_xy/line_profile_xy.vue

@@ -4,7 +4,8 @@
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#line-profiles'"
     :uses_active_status="uses_active_status"
     @plugin-ping="plugin_ping($event)"
-    :popout_button="popout_button">
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to">
 
     <plugin-viewer-select
       :items="viewer_items"

jdaviz/configs/imviz/plugins/orientation/orientation.vue

@@ -2,7 +2,8 @@
   <j-tray-plugin
     :description="docs_description || 'Rotate the viewer orientation or choose to align images by pixels.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#imviz-orientation'"
-    :popout_button="popout_button"
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to"
     :disabled_msg='disabled_msg'>
 
     <div style="display: grid"> <!-- overlay container -->

jdaviz/configs/imviz/plugins/rotate_canvas/rotate_canvas.vue

@@ -3,7 +3,8 @@
     :description="docs_description || 'Rotate viewer canvas to any orientation (note: this does not affect the underlying data).'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#canvas-rotation'"
     :disabled_msg="isChromium() ? '' : 'Image rotation is not supported by your browser. Please see our docs for more information.'"
-    :popout_button="popout_button">
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to">
 
     <v-alert type='warning'>
       This plugin is deprecated in favor of rotation via the Orientation plugin and will be removed

jdaviz/configs/mosviz/plugins/slit_overlay/slit_overlay.vue

@@ -2,7 +2,8 @@
   <j-tray-plugin
     :description="docs_description || 'Add a slit to the image viewer.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#slit-overlay'"
-    :popout_button="popout_button">
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to">
 
     <v-row>
       <v-switch

jdaviz/configs/specviz/plugins/line_analysis/line_analysis.vue

@@ -6,7 +6,8 @@
     @plugin-ping="plugin_ping($event)"
     :keep_active.sync="keep_active"
     :disabled_msg="disabled_msg"
-    :popout_button="popout_button">
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to">
 
     <j-plugin-section-header>Line</j-plugin-section-header>
     <v-row>

jdaviz/configs/specviz/plugins/unit_conversion/unit_conversion.vue

@@ -4,7 +4,8 @@
     :description="docs_description || 'Convert the spectral flux density and spectral axis units.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#unit-conversion'"
     :disabled_msg="disabled_msg"
-    :popout_button="popout_button">
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to">
 
     <v-row>
       <v-select

jdaviz/configs/specviz2d/plugins/spectral_extraction/spectral_extraction.vue

@@ -5,7 +5,8 @@
     :uses_active_status="uses_active_status"
     @plugin-ping="plugin_ping($event)"
     :keep_active.sync="keep_active"
-    :popout_button="popout_button">
+    :popout_button="popout_button"
+    :scroll_to.sync="scroll_to">
 
     <v-row>
       <v-expansion-panels popout>

jdaviz/core/template_mixin.py

@@ -356,6 +356,7 @@ class PluginTemplateMixin(TemplateMixin):
     uses_active_status = Bool(False).tag(sync=True)  # noqa whether the plugin has live-preview marks, set to True in plugins to expose keep_active switch
     keep_active = Bool(False).tag(sync=True)  # noqa whether the live-preview marks show regardless of active state, inapplicable unless uses_active_status is True
     is_active = Bool(False).tag(sync=True)  # noqa read-only: whether the previews should be shown according to plugin_opened and keep_active
+    scroll_to = Bool(False).tag(sync=True)  # noqa once set to True, vue will scroll to the element and reset to False
     spinner = Bool(False).tag(sync=True)  # noqa use along-side @with_spinner() and <plugin-add-results :action_spinner="spinner">
     previews_temp_disabled = Bool(False).tag(sync=True)  # noqa use along-side @with_temp_disable() and <plugin-previews-temp-disabled :previews_temp_disabled.sync="previews_temp_disabled" :previews_last_time="previews_last_time" :show_live_preview.sync="show_live_preview"/>
     previews_last_time = Float(0).tag(sync=True)
@@ -448,15 +449,24 @@ def plugin_viewer_callback(viewer, plugin_method):
             self._viewer_callbacks[key] = plugin_viewer_callback(viewer, plugin_method)
         return self._viewer_callbacks.get(key)
 
-    def open_in_tray(self):
+    def open_in_tray(self, scroll_to=True):
         """
         Open the plugin in the sidebar/tray (and open the sidebar if it is not already).
+
+        Parameters
+        ----------
+        scroll_to : bool, optional
+            Whether to immediately scroll to the plugin opened in the tray.
         """
         app_state = self.app.state
         app_state.drawer = True
         index = [ti['name'] for ti in app_state.tray_items].index(self._registry_name)
         if index not in app_state.tray_items_open:
             app_state.tray_items_open = app_state.tray_items_open + [index]
+        if scroll_to:
+            # sleep 0.5s to ensure plugin is intialized and user can see scrolling
+            time.sleep(0.5)
+            self.scroll_to = True
 
     def close_in_tray(self, close_sidebar=False):
         """

jdaviz/core/tools.py

@@ -464,7 +464,7 @@ class _BaseSidebarShortcut(Tool):
 
     def activate(self):
         plugin = self.viewer.jdaviz_app.get_tray_item_from_name(self.plugin_name)
-        plugin.open_in_tray()
+        plugin.open_in_tray(scroll_to=True)
         viewer_id = self.viewer.reference_id
         viewer_select = getattr(plugin, self.viewer_attr)
         if viewer_select.multiselect: