Fix teleport to wrong instance when multiple analysis views open (#2163)

Author: MetRonnie

changes.d/2163.fix.md

@@ -0,0 +1 @@
+Fixed sorting controls appearing in wrong tab when multiple analysis view tabs are open.

src/components/cylc/analysis/BoxPlot.vue

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <Teleport
     v-if="sortInputTeleportTarget"
-    :to="`#${sortInputTeleportTarget}`"
+    :to="sortInputTeleportTarget"
   >
     <div class="d-flex flex-grow-1 col-gap-1">
       <v-select
@@ -102,7 +102,7 @@ export default {
     },
     /** ID of element to teleport the sorting input (or don't render if null) */
     sortInputTeleportTarget: {
-      type: String,
+      type: HTMLElement,
       default: null,
     },
   },

src/components/cylc/analysis/TimeSeries.vue

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <Teleport
     v-if="sortInputTeleportTarget"
-    :to="`#${sortInputTeleportTarget}`"
+    :to="sortInputTeleportTarget"
   >
     <div class="d-flex flex-grow-1 col-gap-1">
       <v-autocomplete
@@ -200,7 +200,7 @@ export default {
     },
     /** Where to teleport the sorting input (or don't render if null) */
     sortInputTeleportTarget: {
-      type: String,
+      type: HTMLElement,
       default: null,
     },
   },

src/views/Analysis.vue

@@ -64,7 +64,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </v-row>
       <div
         ref="toolbar"
-        id="analysis-toolbar"
         class="d-flex align-center flex-wrap my-2 col-gap-2 row-gap-4"
       >
         <!-- Toolbar -->
@@ -109,8 +108,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <v-icon :icon="$options.icons.mdiRefresh" />
             <v-tooltip>Refresh data</v-tooltip>
           </v-btn>
-          <!-- Box plot sort input teleports here -->
         </v-defaults-provider>
+        <!-- Box plot sort input teleports here -->
       </div>
       <AnalysisTable
         v-if="chartType === 'table'"
@@ -122,23 +121,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         v-else-if="chartType === 'box'"
         :tasks="filteredTasks"
         :timing-option="timingOption"
-        :sort-input-teleport-target="toolbar?.id"
+        :sort-input-teleport-target="toolbarRef"
         v-model:initial-options="boxPlotOptions"
       />
       <TimeSeries
         v-else-if="chartType === 'timeSeries'"
         :workflowIDs="workflowIDs"
         :platform-option="tasksFilter.platformOption"
         :timing-option="timingOption"
-        :sort-input-teleport-target="toolbar?.id"
+        :sort-input-teleport-target="toolbarRef"
         v-model:initial-options="timeseriesPlotOptions"
       />
     </v-container>
   </div>
 </template>
 
 <script>
-import { ref } from 'vue'
+import { useTemplateRef } from 'vue'
 import {
   debounce,
   pick,
@@ -268,8 +267,7 @@ export default {
      */
     const chartType = useInitialOptions('chartType', { props, emit }, 'table')
 
-    /** @type {import('vue').Ref<HTMLElement>} template ref */
-    const toolbar = ref(null)
+    const toolbarRef = useTemplateRef('toolbar')
 
     /**
      * The Vuetify data table options (sortBy, page etc).
@@ -292,10 +290,10 @@ export default {
     return {
       tasksFilter,
       chartType,
-      toolbar,
+      toolbarRef,
       dataTableOptions,
       boxPlotOptions,
-      timeseriesPlotOptions
+      timeseriesPlotOptions,
     }
   },
 

tests/e2e/specs/analysis.cy.js

@@ -424,9 +424,12 @@ function addView (view) {
 describe('Filters and Options save state', () => {
   const numTasks = sortedTasks.length
   describe('Options save state', () => {
-    it('remembers table and box & whiskers toggle option when switching between workflows', () => {
+    beforeEach(() => {
       cy.visit('/#/workspace/one')
       addView('Analysis')
+    })
+
+    it('remembers table and box & whiskers toggle option when switching between workflows', () => {
       cy.get('.c-analysis [data-cy=box-plot-toggle]')
         .click()
         .get('.vue-apexcharts')
@@ -439,13 +442,6 @@ describe('Filters and Options save state', () => {
       cy.get('.vue-apexcharts')
         .should('be.visible')
     })
-  })
-
-  describe('State saving', () => {
-    beforeEach(() => {
-      cy.visit('/#/workspace/one')
-      addView('Analysis')
-    })
 
     it('remembers task name, platform and timings when switching between workflows', () => {
       // Check default options
@@ -541,5 +537,13 @@ describe('Filters and Options save state', () => {
         .contains('Count')
         .should('be.visible')
     })
+
+    it('shows sorting controls in correct tab', () => {
+      addView('Analysis') // second analysis view
+      cy.get('.c-analysis [data-cy=box-plot-toggle]:last')
+        .click()
+        .get('[data-cy="box-plot-sort-select"]')
+        .should('be.visible')
+    })
   })
 })