From 34af5d3a76203559c0055961bfef0ef1949edcb0 Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Mon, 8 Apr 2024 09:48:50 +0100
Subject: [PATCH 01/16] Use initialOptions prop to save view state

---
 src/views/Analysis.vue | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/views/Analysis.vue b/src/views/Analysis.vue
index b2c5fc1ad..ea17f2c2a 100644
--- a/src/views/Analysis.vue
+++ b/src/views/Analysis.vue
@@ -125,6 +125,10 @@ import {
 import gql from 'graphql-tag'
 import { getPageTitle } from '@/utils/index'
 import graphqlMixin from '@/mixins/graphql'
+import {
+  initialOptions,
+  useInitialOptions
+} from '@/utils/initialOptions'
 import AnalysisTable from '@/components/cylc/analysis/AnalysisTable.vue'
 import BoxPlot from '@/components/cylc/analysis/BoxPlot.vue'
 import {
@@ -227,18 +231,33 @@ export default {
     this.historicalQuery()
   },
 
+  props: { initialOptions },
+
+  setup (props, { emit }) {
+    /**
+     * The task name, timing option and platform filter state.
+     * @type {import('vue').Ref<object>}
+     */
+    const tasksFilter = useInitialOptions('tasksFilter', { props, emit }, { name: '', timingOption: 'totalTimes', platformOption: -1 })
+
+    /**
+     * If true the anaysis will be shown in table format
+     * @type {import('vue').Ref<boolean>}
+     */
+    const table = useInitialOptions('tasksFilter', { props, emit }, true)
+
+    return {
+      tasksFilter,
+      table
+    }
+  },
+
   data () {
     const tasks = []
     return {
       callback: new AnalysisCallback(tasks),
       /** Object containing all of the tasks added by the callback */
       tasks,
-      tasksFilter: {
-        name: '',
-        timingOption: 'totalTimes',
-        platformOption: -1,
-      },
-      table: true,
     }
   },
 

From 0e7e36850061acd81426c84c8afbde12470d80c8 Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Tue, 9 Apr 2024 10:53:35 +0100
Subject: [PATCH 02/16] added tests

---
 src/views/Analysis.vue         |  6 +--
 tests/e2e/specs/analysis.cy.js | 88 ++++++++++++++++++++++++++++++++++
 2 files changed, 91 insertions(+), 3 deletions(-)

diff --git a/src/views/Analysis.vue b/src/views/Analysis.vue
index ea17f2c2a..031230d7e 100644
--- a/src/views/Analysis.vue
+++ b/src/views/Analysis.vue
@@ -103,12 +103,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </v-defaults-provider>
       </div>
       <AnalysisTable
-        v-if="table"
+        v-if="table && filteredTasks.length"
         :tasks="filteredTasks"
         :timing-option="timingOption"
       />
       <BoxPlot
-        v-else
+        v-if="!table && filteredTasks.length"
         :tasks="filteredTasks"
         :timing-option="timingOption"
         sort-input-teleport-target="#analysis-toolbar"
@@ -244,7 +244,7 @@ export default {
      * If true the anaysis will be shown in table format
      * @type {import('vue').Ref<boolean>}
      */
-    const table = useInitialOptions('tasksFilter', { props, emit }, true)
+    const table = useInitialOptions('table', { props, emit }, true)
 
     return {
       tasksFilter,
diff --git a/tests/e2e/specs/analysis.cy.js b/tests/e2e/specs/analysis.cy.js
index 4b568be12..d3286a7a8 100644
--- a/tests/e2e/specs/analysis.cy.js
+++ b/tests/e2e/specs/analysis.cy.js
@@ -265,3 +265,91 @@ describe('Analysis view', () => {
     })
   })
 })
+
+function addView (view) {
+  cy.get('[data-cy=add-view-btn]').click()
+  cy.get(`#toolbar-add-${view}-view`).click()
+    // wait for menu to close
+    .should('not.be.exist')
+}
+
+describe('Filters and Options save state', () => {
+  const numTasks = sortedTasks.length
+  describe('Options save state', () => {
+    it.only('remembers table and box & whiskers toggle option when switching between workflows', () => {
+      cy.visit('/#/workspace/one')
+      addView('Analysis')
+      cy.get('.c-analysis [data-cy=box-plot-toggle]')
+        .click()
+        .get('.vue-apexcharts')
+        .should('be.visible')
+      // Navigate away
+      cy.visit('/#/')
+      cy.get('.c-dashboard')
+      // Navigate back
+      cy.visit('/#/workspace/one')
+      cy.get('.vue-apexcharts')
+        .should('be.visible')
+    })
+  })
+  describe('Filters save state', () => {
+    it('remembers task name, platform and timings when switching between workflows', () => {
+      cy.visit('/#/workspace/one')
+      addView('Analysis')
+      // Check default options
+      cy
+        .get('.c-analysis table > tbody > tr')
+        .should('have.length', numTasks)
+        .should('be.visible')
+      cy
+        .get('td')
+        .contains('30')
+        .should('be.visible')
+      // Set platform filter options
+      cy
+        .get('#c-analysis-filter-task-platforms')
+        .click({ force: true })
+      cy
+        .get('.v-list-item')
+        .contains('platform_1')
+        .click({ force: true })
+      // Set queue task name filter options
+      cy
+        .get('#c-analysis-filter-task-name')
+        .type('wait')
+      // Set task times filter options
+      cy
+        .get('#c-analysis-filter-task-timings')
+        .click({ force: true })
+      cy
+        .get('.v-list-item')
+        .contains('Queue')
+        .click({ force: true })
+      // Navigate away
+      cy.visit('/#/')
+      cy.get('.c-dashboard')
+      // Navigate back
+      cy.visit('/#/workspace/one')
+      // Check name filter
+      cy
+        .get('td')
+        .contains('waiting')
+        .should('be.visible')
+      // Check timing filter
+      cy
+        .get('td')
+        .contains('00:00:12')
+        .should('be.visible')
+      // Check platform filter
+      cy
+        .get('td')
+        .contains('platform_1')
+        .should('be.visible')
+      // Other checks
+      cy
+        .get('.c-analysis table > tbody > tr')
+        .should('have.length', 1)
+        .should('be.visible')
+    })
+  })
+})

From a26db04dec44a4b2b23288ffba15480558d84998 Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Tue, 9 Apr 2024 11:19:40 +0100
Subject: [PATCH 03/16] fix linting issue

---
 tests/e2e/specs/analysis.cy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/e2e/specs/analysis.cy.js b/tests/e2e/specs/analysis.cy.js
index d3286a7a8..83cca85e2 100644
--- a/tests/e2e/specs/analysis.cy.js
+++ b/tests/e2e/specs/analysis.cy.js
@@ -276,7 +276,7 @@ function addView (view) {
 describe('Filters and Options save state', () => {
   const numTasks = sortedTasks.length
   describe('Options save state', () => {
-    it.only('remembers table and box & whiskers toggle option when switching between workflows', () => {
+    it('remembers table and box & whiskers toggle option when switching between workflows', () => {
       cy.visit('/#/workspace/one')
       addView('Analysis')
       cy.get('.c-analysis [data-cy=box-plot-toggle]')

From 96f5d1ae49a042ebc9b6211035034137285a12f4 Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Tue, 9 Apr 2024 11:27:25 +0100
Subject: [PATCH 04/16] updated change log

---
 changes.d/1717.feat.md | 1 +
 changes.d/1744.feat.md | 1 +
 2 files changed, 2 insertions(+)
 create mode 100644 changes.d/1717.feat.md
 create mode 100644 changes.d/1744.feat.md

diff --git a/changes.d/1717.feat.md b/changes.d/1717.feat.md
new file mode 100644
index 000000000..7938e3f9b
--- /dev/null
+++ b/changes.d/1717.feat.md
@@ -0,0 +1 @@
+More view options are now remembered & restored when navigating between workflows.
\ No newline at end of file
diff --git a/changes.d/1744.feat.md b/changes.d/1744.feat.md
new file mode 100644
index 000000000..7938e3f9b
--- /dev/null
+++ b/changes.d/1744.feat.md
@@ -0,0 +1 @@
+More view options are now remembered & restored when navigating between workflows.
\ No newline at end of file

From 9cfd4c09bc5d4c1daebbe3d87688f1e32c18816d Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Wed, 10 Apr 2024 12:59:50 +0100
Subject: [PATCH 05/16] review amends

---
 tests/e2e/specs/analysis.cy.js | 28 ++++++++--------------------
 1 file changed, 8 insertions(+), 20 deletions(-)

diff --git a/tests/e2e/specs/analysis.cy.js b/tests/e2e/specs/analysis.cy.js
index 83cca85e2..967a5f47d 100644
--- a/tests/e2e/specs/analysis.cy.js
+++ b/tests/e2e/specs/analysis.cy.js
@@ -292,19 +292,18 @@ describe('Filters and Options save state', () => {
         .should('be.visible')
     })
   })
+
   describe('Filters save state', () => {
     it('remembers task name, platform and timings when switching between workflows', () => {
       cy.visit('/#/workspace/one')
       addView('Analysis')
+
       // Check default options
       cy
         .get('.c-analysis table > tbody > tr')
         .should('have.length', numTasks)
         .should('be.visible')
-      cy
-        .get('td')
-        .contains('30')
-        .should('be.visible')
+
       // Set platform filter options
       cy
         .get('#c-analysis-filter-task-platforms')
@@ -313,10 +312,12 @@ describe('Filters and Options save state', () => {
         .get('.v-list-item')
         .contains('platform_1')
         .click({ force: true })
+
       // Set queue task name filter options
       cy
         .get('#c-analysis-filter-task-name')
         .type('wait')
+
       // Set task times filter options
       cy
         .get('#c-analysis-filter-task-timings')
@@ -325,27 +326,14 @@ describe('Filters and Options save state', () => {
         .get('.v-list-item')
         .contains('Queue')
         .click({ force: true })
+
       // Navigate away
       cy.visit('/#/')
       cy.get('.c-dashboard')
       // Navigate back
       cy.visit('/#/workspace/one')
-      // Check name filter
-      cy
-        .get('td')
-        .contains('waiting')
-        .should('be.visible')
-      // Check timing filter
-      cy
-        .get('td')
-        .contains('00:00:12')
-        .should('be.visible')
-      // Check platform filter
-      cy
-        .get('td')
-        .contains('platform_1')
-        .should('be.visible')
-      // Other checks
+
+      // Check number of tasks
       cy
         .get('.c-analysis table > tbody > tr')
         .should('have.length', 1)

From 8159920e7090de8d1bbacf36e2b2ec85f466b897 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Wed, 10 Apr 2024 16:39:43 +0100
Subject: [PATCH 06/16] Analysis view: fix teleport of box & whiskers sort
 input when mounted

Use a template ref to ensure we only teleport once analysis view has been mounted
---
 src/components/cylc/analysis/BoxPlot.vue |  4 ++--
 src/views/Analysis.vue                   | 14 ++++++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/cylc/analysis/BoxPlot.vue b/src/components/cylc/analysis/BoxPlot.vue
index 734b4115b..f92f1146e 100644
--- a/src/components/cylc/analysis/BoxPlot.vue
+++ b/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
@@ -91,7 +91,7 @@ export default {
       type: Boolean,
       default: true,
     },
-    /** Where to teleport the sorting input (or don't render if null) */
+    /** ID of element to teleport the sorting input (or don't render if null) */
     sortInputTeleportTarget: {
       type: String,
       default: null,
diff --git a/src/views/Analysis.vue b/src/views/Analysis.vue
index 031230d7e..c72fc7500 100644
--- a/src/views/Analysis.vue
+++ b/src/views/Analysis.vue
@@ -62,6 +62,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </v-col>
       </v-row>
       <div
+        ref="toolbar"
         id="analysis-toolbar"
         class="d-flex align-center flex-wrap my-2 col-gap-2 row-gap-4"
       >
@@ -103,21 +104,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </v-defaults-provider>
       </div>
       <AnalysisTable
-        v-if="table && filteredTasks.length"
+        v-if="table"
         :tasks="filteredTasks"
         :timing-option="timingOption"
       />
       <BoxPlot
-        v-if="!table && filteredTasks.length"
+        v-else
         :tasks="filteredTasks"
         :timing-option="timingOption"
-        sort-input-teleport-target="#analysis-toolbar"
+        :sort-input-teleport-target="toolbar?.id"
       />
     </v-container>
   </div>
 </template>
 
 <script>
+import { ref } from 'vue'
 import {
   debounce,
   pick,
@@ -246,9 +248,13 @@ export default {
      */
     const table = useInitialOptions('table', { props, emit }, true)
 
+    /** @type {import('vue').Ref<HTMLElement>} template ref */
+    const toolbar = ref(null)
+
     return {
       tasksFilter,
-      table
+      table,
+      toolbar,
     }
   },
 

From 8a81a3331429233be5fa44c9ead541d2691f9e5a Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Fri, 12 Apr 2024 16:10:53 +0100
Subject: [PATCH 07/16] Analysis view: remember sort & pagination state on
 navigation

---
 .../cylc/analysis/AnalysisTable.vue           | 41 ++++++++++++++++---
 src/views/Analysis.vue                        | 11 +++++
 tests/e2e/specs/analysis.cy.js                | 39 +++++++++++++++++-
 3 files changed, 85 insertions(+), 6 deletions(-)

diff --git a/src/components/cylc/analysis/AnalysisTable.vue b/src/components/cylc/analysis/AnalysisTable.vue
index 440cb8bfa..d122f3ccd 100644
--- a/src/components/cylc/analysis/AnalysisTable.vue
+++ b/src/components/cylc/analysis/AnalysisTable.vue
@@ -31,8 +31,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <v-data-table
           :headers="shownHeaders"
           :items="tasks"
-          :sort-by="sortBy"
+          v-model:sort-by="sortBy"
           density="compact"
+          v-model:page="page"
           v-model:items-per-page="itemsPerPage"
         >
           <!-- Use custom format for values in columns that have a specified formatter: -->
@@ -56,10 +57,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import { upperFirst } from 'lodash'
 import { formatDuration } from '@/utils/tasks'
+import {
+  initialOptions,
+  updateInitialOptionsEvent,
+  useInitialOptions
+} from '@/utils/initialOptions'
 
 export default {
   name: 'AnalysisTableComponent',
 
+  emits: [updateInitialOptionsEvent],
+
   props: {
     tasks: {
       type: Array,
@@ -68,15 +76,38 @@ export default {
     timingOption: {
       type: String,
       required: true
+    },
+    initialOptions,
+  },
+
+  setup (props, { emit }) {
+    /**
+     * The number of tasks displayed per page.
+     * @type {import('vue').Ref<number>}
+     */
+    const itemsPerPage = useInitialOptions('tasksFilter', { props, emit }, 50)
+
+    /**
+     * The 'sort by' state.
+     * @type {import('vue').Ref<array>}
+     */
+    const sortBy = useInitialOptions('sortBy', { props, emit }, [{ key: 'name', order: 'asc' }])
+
+    /**
+     * The page number state.
+     * @type {import('vue').Ref<number>}
+     */
+    const page = useInitialOptions('page', { props, emit }, 1)
+
+    return {
+      itemsPerPage,
+      sortBy,
+      page
     }
   },
 
   data () {
     return {
-      itemsPerPage: 50,
-      sortBy: [
-        { key: 'name', order: 'asc' }
-      ],
       headers: [
         {
           title: 'Task',
diff --git a/src/views/Analysis.vue b/src/views/Analysis.vue
index c72fc7500..b7bcd814e 100644
--- a/src/views/Analysis.vue
+++ b/src/views/Analysis.vue
@@ -107,6 +107,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         v-if="table"
         :tasks="filteredTasks"
         :timing-option="timingOption"
+        v-model:initial-options="dataTableOptions"
       />
       <BoxPlot
         v-else
@@ -129,6 +130,7 @@ import { getPageTitle } from '@/utils/index'
 import graphqlMixin from '@/mixins/graphql'
 import {
   initialOptions,
+  updateInitialOptionsEvent,
   useInitialOptions
 } from '@/utils/initialOptions'
 import AnalysisTable from '@/components/cylc/analysis/AnalysisTable.vue'
@@ -233,6 +235,8 @@ export default {
     this.historicalQuery()
   },
 
+  emits: [updateInitialOptionsEvent],
+
   props: { initialOptions },
 
   setup (props, { emit }) {
@@ -251,10 +255,17 @@ export default {
     /** @type {import('vue').Ref<HTMLElement>} template ref */
     const toolbar = ref(null)
 
+    /**
+     * The Vuetify data table options (sortBy, page etc).
+     * @type {import('vue').Ref<object>}
+     */
+    const dataTableOptions = useInitialOptions('dataTableOptions', { props, emit })
+
     return {
       tasksFilter,
       table,
       toolbar,
+      dataTableOptions
     }
   },
 
diff --git a/tests/e2e/specs/analysis.cy.js b/tests/e2e/specs/analysis.cy.js
index 967a5f47d..ff8541f55 100644
--- a/tests/e2e/specs/analysis.cy.js
+++ b/tests/e2e/specs/analysis.cy.js
@@ -293,7 +293,12 @@ describe('Filters and Options save state', () => {
     })
   })
 
-  describe('Filters save state', () => {
+  describe('State saving', () => {
+    beforeEach(() => {
+      cy.visit('/#/workspace/one')
+      addView('Table')
+    })
+
     it('remembers task name, platform and timings when switching between workflows', () => {
       cy.visit('/#/workspace/one')
       addView('Analysis')
@@ -339,5 +344,37 @@ describe('Filters and Options save state', () => {
         .should('have.length', 1)
         .should('be.visible')
     })
+
+    it('remembers sorting & page options when switching between workflows', () => {
+      const sortedClass = 'v-data-table__th--sorted'
+      cy.get('.c-table th')
+        .contains('Platform')
+        .closest('th').as('platformCol')
+        .should('not.have.class', sortedClass)
+        .click()
+        .should('have.class', sortedClass)
+      cy.get('.c-table .v-data-table-footer__items-per-page .v-select')
+        .as('itemsPerPage')
+        .find('input')
+        .should('not.have.value', -1)
+        .get('@itemsPerPage')
+        .click()
+        .get('[role="listbox"] .v-list-item')
+        .contains('All')
+        .click()
+        // Wait for menu to close
+        .should('not.exist')
+        .get('@itemsPerPage').find('input')
+        .should('have.value', -1)
+      // Navigate away
+      cy.visit('/#/')
+        .get('.c-dashboard')
+      // Navigate back
+      cy.visit('/#/workspace/one')
+      cy.get('@platformCol')
+        .should('have.class', sortedClass)
+      cy.get('@itemsPerPage').find('input')
+        .should('have.value', -1)
+    })
   })
 })

From fb4699d53923d85b9df8e8c7d1c4b634324703be Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Fri, 12 Apr 2024 17:07:36 +0100
Subject: [PATCH 08/16] fixed e2e test

---
 tests/e2e/specs/analysis.cy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/e2e/specs/analysis.cy.js b/tests/e2e/specs/analysis.cy.js
index ff8541f55..27f04193a 100644
--- a/tests/e2e/specs/analysis.cy.js
+++ b/tests/e2e/specs/analysis.cy.js
@@ -296,7 +296,7 @@ describe('Filters and Options save state', () => {
   describe('State saving', () => {
     beforeEach(() => {
       cy.visit('/#/workspace/one')
-      addView('Table')
+      addView('Analysis')
     })
 
     it('remembers task name, platform and timings when switching between workflows', () => {

From 8ce1dbceeeb1e4cf74248fcfc629bc496b92c140 Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Fri, 12 Apr 2024 17:10:24 +0100
Subject: [PATCH 09/16] review amends part3

---
 src/views/Analysis.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Analysis.vue b/src/views/Analysis.vue
index b7bcd814e..f978ab932 100644
--- a/src/views/Analysis.vue
+++ b/src/views/Analysis.vue
@@ -247,7 +247,7 @@ export default {
     const tasksFilter = useInitialOptions('tasksFilter', { props, emit }, { name: '', timingOption: 'totalTimes', platformOption: -1 })
 
     /**
-     * If true the anaysis will be shown in table format
+     * If true the analysis will be shown in table format
      * @type {import('vue').Ref<boolean>}
      */
     const table = useInitialOptions('table', { props, emit }, true)

From b086ef33eabb216a0f12dc089f5bcb3c6c88ee24 Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Tue, 16 Apr 2024 13:54:24 +0100
Subject: [PATCH 10/16] fixed broken e2e test

---
 tests/e2e/specs/analysis.cy.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tests/e2e/specs/analysis.cy.js b/tests/e2e/specs/analysis.cy.js
index 27f04193a..ab853627a 100644
--- a/tests/e2e/specs/analysis.cy.js
+++ b/tests/e2e/specs/analysis.cy.js
@@ -301,7 +301,6 @@ describe('Filters and Options save state', () => {
 
     it('remembers task name, platform and timings when switching between workflows', () => {
       cy.visit('/#/workspace/one')
-      addView('Analysis')
 
       // Check default options
       cy

From 0d0867b3d1609b4751c8d0dc1d960d3a9b55ec6b Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Fri, 26 Apr 2024 12:48:13 +0100
Subject: [PATCH 11/16] review amends

---
 tests/e2e/specs/analysis.cy.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/tests/e2e/specs/analysis.cy.js b/tests/e2e/specs/analysis.cy.js
index ab853627a..f8b2899d7 100644
--- a/tests/e2e/specs/analysis.cy.js
+++ b/tests/e2e/specs/analysis.cy.js
@@ -300,8 +300,6 @@ describe('Filters and Options save state', () => {
     })
 
     it('remembers task name, platform and timings when switching between workflows', () => {
-      cy.visit('/#/workspace/one')
-
       // Check default options
       cy
         .get('.c-analysis table > tbody > tr')

From e19e5655e1fb246c763dab018248a1bb56d46c61 Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Fri, 26 Apr 2024 13:37:12 +0100
Subject: [PATCH 12/16] Use initialOptions prop to save box and whisker state

---
 src/components/cylc/analysis/BoxPlot.vue | 39 ++++++++++++++++++------
 src/views/Analysis.vue                   | 10 +++++-
 2 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/src/components/cylc/analysis/BoxPlot.vue b/src/components/cylc/analysis/BoxPlot.vue
index f92f1146e..1d63d05ea 100644
--- a/src/components/cylc/analysis/BoxPlot.vue
+++ b/src/components/cylc/analysis/BoxPlot.vue
@@ -66,6 +66,11 @@ import {
 import { upperFirst } from 'lodash'
 import { formatDuration } from '@/utils/tasks'
 import { useReducedAnimation } from '@/composables/localStorage'
+import {
+  initialOptions,
+  updateInitialOptionsEvent,
+  useInitialOptions
+} from '@/utils/initialOptions'
 
 export default {
   name: 'BoxPlot',
@@ -74,6 +79,8 @@ export default {
     VueApexCharts,
   },
 
+  emits: [updateInitialOptionsEvent],
+
   props: {
     tasks: {
       type: Array,
@@ -83,6 +90,7 @@ export default {
       type: String,
       required: true,
     },
+    initialOptions,
     itemsPerPage: {
       type: Number,
       default: 20,
@@ -98,7 +106,25 @@ export default {
     },
   },
 
-  setup (props) {
+  setup (props, { emit }) {
+    /**
+     * The 'sort by' state.
+     * @type {import('vue').Ref<string>}
+     */
+    const sortBy = useInitialOptions('sortBy', { props, emit }, 'name')
+
+    /**
+     * The page number state.
+     * @type {import('vue').Ref<number>}
+     */
+    const page = useInitialOptions('page', { props, emit }, 1)
+
+    /**
+     * The sort descending/sscending state.
+     * @type {import('vue').Ref<boolean>}
+     */
+    const sortDesc = useInitialOptions('sortDesc', { props, emit }, false)
+
     const reducedAnimation = useReducedAnimation()
 
     const chartOptions = computed(() => ({
@@ -163,18 +189,13 @@ export default {
     }))
 
     return {
+      sortBy,
+      page,
+      sortDesc,
       chartOptions,
     }
   },
 
-  data () {
-    return {
-      page: 1,
-      sortBy: 'name',
-      sortDesc: false,
-    }
-  },
-
   errorCaptured (err, instance, info) {
     if (err.name === 'TypeError' && instance.type === 'boxPlot') {
       // Suppress bogus error https://github.com/apexcharts/vue3-apexcharts/issues/79
diff --git a/src/views/Analysis.vue b/src/views/Analysis.vue
index f978ab932..082fcfe24 100644
--- a/src/views/Analysis.vue
+++ b/src/views/Analysis.vue
@@ -114,6 +114,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :tasks="filteredTasks"
         :timing-option="timingOption"
         :sort-input-teleport-target="toolbar?.id"
+        v-model:initial-options="boxPlotOptions"
       />
     </v-container>
   </div>
@@ -261,11 +262,18 @@ export default {
      */
     const dataTableOptions = useInitialOptions('dataTableOptions', { props, emit })
 
+    /**
+     * The Vuetify box and whisker plot options (sortBy, page etc).
+     * @type {import('vue').Ref<object>}
+     */
+    const boxPlotOptions = useInitialOptions('boxPlotOptions', { props, emit })
+
     return {
       tasksFilter,
       table,
       toolbar,
-      dataTableOptions
+      dataTableOptions,
+      boxPlotOptions
     }
   },
 

From ed832ee2badd1e6d393d5ca9a108b1e10df353b0 Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Fri, 26 Apr 2024 15:36:58 +0100
Subject: [PATCH 13/16] added e2e test for remembering box and whisker options

---
 tests/e2e/specs/analysis.cy.js | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/tests/e2e/specs/analysis.cy.js b/tests/e2e/specs/analysis.cy.js
index f8b2899d7..d55e650b9 100644
--- a/tests/e2e/specs/analysis.cy.js
+++ b/tests/e2e/specs/analysis.cy.js
@@ -342,7 +342,7 @@ describe('Filters and Options save state', () => {
         .should('be.visible')
     })
 
-    it('remembers sorting & page options when switching between workflows', () => {
+    it('remembers table sorting & page options when switching between workflows', () => {
       const sortedClass = 'v-data-table__th--sorted'
       cy.get('.c-table th')
         .contains('Platform')
@@ -373,5 +373,24 @@ describe('Filters and Options save state', () => {
       cy.get('@itemsPerPage').find('input')
         .should('have.value', -1)
     })
+
+    it('remembers box and whisker sorting options when switching between workflows', () => {
+      cy.get('.c-analysis [data-cy=box-plot-toggle]')
+        .click()
+      cy.get('#analysis-toolbar > .d-flex > .v-input > .v-input__control > .v-field > .v-field__field > .v-field__input')
+        .click()
+      cy
+        .get('.v-list-item')
+        .contains('Count')
+        .click({ force: true })
+      // Navigate away
+      cy.visit('/#/')
+        .get('.c-dashboard')
+      // Navigate back
+      cy.visit('/#/workspace/one')
+      cy.get('#analysis-toolbar > .d-flex > .v-input > .v-input__control > .v-field > .v-field__field > .v-field__input')
+        .contains('Count')
+        .should('be.visible')
+    })
   })
 })

From 800cc41df5c7b54524846ab32fc364d3bb8b3517 Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Tue, 30 Apr 2024 14:47:34 +0100
Subject: [PATCH 14/16] review amends

---
 src/components/cylc/analysis/BoxPlot.vue | 1 +
 tests/e2e/specs/analysis.cy.js           | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/cylc/analysis/BoxPlot.vue b/src/components/cylc/analysis/BoxPlot.vue
index 1d63d05ea..9887ededc 100644
--- a/src/components/cylc/analysis/BoxPlot.vue
+++ b/src/components/cylc/analysis/BoxPlot.vue
@@ -22,6 +22,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <div class="d-flex flex-grow-1 col-gap-1">
       <v-select
+        data-cy="box-plot-sort-select"
         :items="sortChoices"
         v-model="sortBy"
         label="Sort by"
diff --git a/tests/e2e/specs/analysis.cy.js b/tests/e2e/specs/analysis.cy.js
index d55e650b9..8fc177f6f 100644
--- a/tests/e2e/specs/analysis.cy.js
+++ b/tests/e2e/specs/analysis.cy.js
@@ -337,8 +337,9 @@ describe('Filters and Options save state', () => {
 
       // Check number of tasks
       cy
-        .get('.c-analysis table > tbody > tr')
+        .get('.v-data-table__tr')
         .should('have.length', 1)
+        .contains('waiting')
         .should('be.visible')
     })
 
@@ -377,7 +378,7 @@ describe('Filters and Options save state', () => {
     it('remembers box and whisker sorting options when switching between workflows', () => {
       cy.get('.c-analysis [data-cy=box-plot-toggle]')
         .click()
-      cy.get('#analysis-toolbar > .d-flex > .v-input > .v-input__control > .v-field > .v-field__field > .v-field__input')
+      cy.get('[data-cy="box-plot-sort-select"]')
         .click()
       cy
         .get('.v-list-item')

From 528ec159dd653d9a5bfb8a925137a426397eb369 Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Wed, 1 May 2024 08:06:44 +0100
Subject: [PATCH 15/16] further review amends

---
 tests/e2e/specs/analysis.cy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/e2e/specs/analysis.cy.js b/tests/e2e/specs/analysis.cy.js
index 8fc177f6f..022374483 100644
--- a/tests/e2e/specs/analysis.cy.js
+++ b/tests/e2e/specs/analysis.cy.js
@@ -389,7 +389,7 @@ describe('Filters and Options save state', () => {
         .get('.c-dashboard')
       // Navigate back
       cy.visit('/#/workspace/one')
-      cy.get('#analysis-toolbar > .d-flex > .v-input > .v-input__control > .v-field > .v-field__field > .v-field__input')
+      cy.get('[data-cy=box-plot-sort-select]')
         .contains('Count')
         .should('be.visible')
     })

From 5ce94183b21652212b8c8295eba856ea90cbcd08 Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Wed, 1 May 2024 15:41:09 +0100
Subject: [PATCH 16/16] Use initialOptions prop to save time series state

---
 src/components/cylc/analysis/TimeSeries.vue | 37 ++++++++++++++++++---
 src/views/Analysis.vue                      | 21 ++++++++----
 2 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/src/components/cylc/analysis/TimeSeries.vue b/src/components/cylc/analysis/TimeSeries.vue
index 9a33c743b..6df5ee8ef 100644
--- a/src/components/cylc/analysis/TimeSeries.vue
+++ b/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
@@ -104,6 +104,11 @@ import {
 } from '@mdi/js'
 import { useReducedAnimation } from '@/composables/localStorage'
 import DeltasCallback from '@/services/callbacks'
+import {
+  initialOptions,
+  updateInitialOptionsEvent,
+  useInitialOptions
+} from '@/utils/initialOptions'
 
 /** List of fields to request for task for each task */
 const jobFields = [
@@ -173,6 +178,8 @@ export default {
     VueApexCharts,
   },
 
+  emits: [updateInitialOptionsEvent],
+
   props: {
     workflowIDs: {
       type: Array,
@@ -182,6 +189,7 @@ export default {
       type: String,
       required: true,
     },
+    initialOptions,
     platformOption: {
       type: [String, Number],
       required: true,
@@ -197,15 +205,36 @@ export default {
     },
   },
 
-  setup () {
+  setup (props, { emit }) {
     const reducedAnimation = useReducedAnimation()
-    return { reducedAnimation }
+
+    /**
+     * The state for storing displayed tasks
+     * @type {import('vue').Ref<array>}
+     */
+    const displayedTasks = useInitialOptions('displayedTasks', { props, emit }, [])
+
+    /**
+     * The show origin option toggle state
+     * @type {import('vue').Ref<boolean>}
+     */
+    const showOrigin = useInitialOptions('showOrigin', { props, emit }, false)
+
+    return {
+      reducedAnimation,
+      displayedTasks,
+      showOrigin
+    }
   },
 
   beforeMount () {
     this.taskNamesQuery()
   },
 
+  mounted () {
+    this.refreshData()
+  },
+
   data () {
     const jobs = []
     return {
@@ -213,8 +242,6 @@ export default {
       /** Object containing all of the jobs added by the callback */
       jobs,
       taskNames: [],
-      displayedTasks: [],
-      showOrigin: false,
       xRange: [undefined, undefined],
     }
   },
diff --git a/src/views/Analysis.vue b/src/views/Analysis.vue
index 0eda07cd7..243a87219 100644
--- a/src/views/Analysis.vue
+++ b/src/views/Analysis.vue
@@ -130,7 +130,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :workflowIDs="workflowIDs"
         :platform-option="tasksFilter.platformOption"
         :timing-option="timingOption"
-        sort-input-teleport-target="#analysis-toolbar"
+        :sort-input-teleport-target="toolbar?.id"
+        v-model:initial-options="timeseriesPlotOptions"
       />
     </v-container>
   </div>
@@ -269,10 +270,10 @@ export default {
     const tasksFilter = useInitialOptions('tasksFilter', { props, emit }, { name: '', timingOption: 'totalTimes', platformOption: -1 })
 
     /**
-     * If true the analysis will be shown in table format
-     * @type {import('vue').Ref<boolean>}
+     * Determines the Analysis type ('table' | 'box' | 'timeSeries')
+     * @type {import('vue').Ref<string>}
      */
-    const table = useInitialOptions('table', { props, emit }, true)
+    const chartType = useInitialOptions('chartType', { props, emit }, 'table')
 
     /** @type {import('vue').Ref<HTMLElement>} template ref */
     const toolbar = ref(null)
@@ -289,12 +290,19 @@ export default {
      */
     const boxPlotOptions = useInitialOptions('boxPlotOptions', { props, emit })
 
+    /**
+     * The Vuetify box and whisker plot options (displayedTasks, showOrigin).
+     * @type {import('vue').Ref<object>}
+     */
+    const timeseriesPlotOptions = useInitialOptions('timeseriesPlotOptions', { props, emit })
+
     return {
       tasksFilter,
-      table,
+      chartType,
       toolbar,
       dataTableOptions,
-      boxPlotOptions
+      boxPlotOptions,
+      timeseriesPlotOptions
     }
   },
 
@@ -304,7 +312,6 @@ export default {
       callback: new AnalysisTaskCallback(tasks),
       /** Object containing all of the tasks added by the callback */
       tasks,
-      chartType: 'table',
     }
   },