From 3395972b8ed4780dff78961911098b3e2152736f Mon Sep 17 00:00:00 2001
From: Kieron Taylor <kt19@sanger.ac.uk>
Date: Thu, 8 Aug 2024 17:48:36 +0100
Subject: [PATCH 1/3] Extend WellTable to render clickable icons that will emit
 an event with the run name for that row

---
 frontend/src/components/WellTable.vue               | 10 ++++++----
 frontend/src/components/__tests__/WellTable.spec.js | 11 +++++++++++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/WellTable.vue b/frontend/src/components/WellTable.vue
index 29c0699..526f08b 100644
--- a/frontend/src/components/WellTable.vue
+++ b/frontend/src/components/WellTable.vue
@@ -3,16 +3,18 @@
 * Renders a table for a list of wells and generates buttons for selecting wells
 */
 import { combineLabelWithPlate, listStudiesForTooltip } from "../utils/text.js"
-import { ElTooltip, ElButton } from "element-plus";
+import { ElTooltip, ElButton } from "element-plus"
+import { Top } from "@element-plus/icons-vue"
 
 const tooltipDelay = 500
 const studyNameHighlight = 'BIOSCAN UK for flying insects'
 
 defineProps({
-  wellCollection: Object
+  wellCollection: Object,
+  allowNav: Boolean,
 })
 
-defineEmits(['wellSelected'])
+defineEmits(['wellSelected', 'runSelected'])
 </script>
 
 <template>
@@ -30,7 +32,7 @@ defineEmits(['wellSelected'])
       <th>Well time complete</th>
     </tr>
     <tr :key="wellObj.id_product" v-for="wellObj in wellCollection">
-      <td :id="wellObj.run_name">{{ wellObj.run_name }}</td>
+      <td :id="wellObj.run_name">{{ wellObj.run_name }}<el-icon v-if="allowNav" :size="10" v-on:click="$emit('runSelected', wellObj.run_name)"><Top /></el-icon></td>
       <td class="well_selector">
         <el-tooltip placement="top" effect="light" :show-after="tooltipDelay"
           :content="'<span>'.concat(listStudiesForTooltip(wellObj.study_names)).concat('</span>')"
diff --git a/frontend/src/components/__tests__/WellTable.spec.js b/frontend/src/components/__tests__/WellTable.spec.js
index 1374967..24a5b6f 100644
--- a/frontend/src/components/__tests__/WellTable.spec.js
+++ b/frontend/src/components/__tests__/WellTable.spec.js
@@ -74,4 +74,15 @@ describe('Rows of data give rows in the table', () => {
     expect(wellButton.classes('el-tooltip__trigger')).toBeTruthy()
     expect(wellButton.classes('el-button--warning')).toBeTruthy()
   })
+
+  test('No run selection icons appear by default', () => {
+    expect(() => table.get('el-icon')).toThrowError()
+  })
+
+  test('Setting allowNav property causes buttons to appear', async () => {
+    await table.setProps({'allowNav': true})
+    let icon = table.get('el-icon')
+    await icon.trigger('click')
+    expect(table.emitted().runSelected[0][0]).toEqual('TEST1')
+  })
 })

From b7b25dedee2161a69dc3cc35e39c19d5359c0633 Mon Sep 17 00:00:00 2001
From: Kieron Taylor <kt19@sanger.ac.uk>
Date: Thu, 15 Aug 2024 18:00:01 +0100
Subject: [PATCH 2/3] Capture events from the WellTable to navigate to a
 particular run.

---
 frontend/src/views/WellsByStatus.vue          |   6 +-
 .../src/views/__tests__/WellsByStatus.spec.js | 196 ++++++++++--------
 2 files changed, 116 insertions(+), 86 deletions(-)

diff --git a/frontend/src/views/WellsByStatus.vue b/frontend/src/views/WellsByStatus.vue
index 9e59f83..f3c3d45 100644
--- a/frontend/src/views/WellsByStatus.vue
+++ b/frontend/src/views/WellsByStatus.vue
@@ -128,6 +128,10 @@ function updateUrlQuery(newParams) {
   }
 }
 
+function showRun(runName) {
+  router.push({ name: 'WellsByRun', params: { runName: [runName] } })
+}
+
 onMounted(() => {
   // If there are no query properties in the URL, we can "redirect" to a
   // sensible default
@@ -141,7 +145,7 @@ onMounted(() => {
 <template>
   <el-tabs v-model="activeTab" type="border-card" @tab-change="clickTabChange">
     <el-tab-pane v-for="tab in appConfig.qc_flow_statuses" :key="tab.param" :label="tab.label" :name="tab.param">
-      <WellTable :wellCollection="wellCollection" @wellSelected="updateUrlQuery"/>
+      <WellTable allowNav :wellCollection="wellCollection" @wellSelected="updateUrlQuery" @runSelected="showRun"/>
     </el-tab-pane>
     <el-pagination v-model:currentPage="activePage" layout="prev, pager, next" v-bind:total="totalNumberOfWells"
       background :pager-count="5" :page-size="pageSize" :hide-on-single-page="true"
diff --git a/frontend/src/views/__tests__/WellsByStatus.spec.js b/frontend/src/views/__tests__/WellsByStatus.spec.js
index 6d61ed8..b07ca35 100644
--- a/frontend/src/views/__tests__/WellsByStatus.spec.js
+++ b/frontend/src/views/__tests__/WellsByStatus.spec.js
@@ -1,24 +1,34 @@
-import { describe, expect, test, vi } from 'vitest'
-import { mount, flushPromises } from '@vue/test-utils'
-import { ref } from 'vue'
-// import {createRouter, createWebHistory} from 'vue-router'
-// or routes arg to render(Component, {routes: []|vue-router obj})
+import { describe, expect, test, vi } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import { ref } from "vue";
 
-import { createTestingPinia } from '@pinia/testing'
-import ElementPlus from 'element-plus'
-import { createRouter, createWebHistory } from 'vue-router'
+import { createTestingPinia } from "@pinia/testing";
+import ElementPlus from "element-plus";
+import { createRouter, createWebHistory } from "vue-router";
+// or routes arg to render(Component, {routes: []|vue-router obj})
 
-import WellsByStatus from '@/views/WellsByStatus.vue'
+import WellsByStatus from "@/views/WellsByStatus.vue";
 
 // The giga-faking of most of the app:
 
-
 const router = createRouter({
   history: createWebHistory(),
-  routes: [{ path: '/', redirect: '/ui/wells' }, { path: '/ui/wells', component: WellsByStatus }]
-})
+  routes: [
+    { path: "/", redirect: "/ui/wells" },
+    { path: "/ui/wells", component: WellsByStatus },
+    {
+      path: "/ui/run/:runName+",
+      name: "WellsByRun",
+      props: true,
+      component: {
+        props: ["runName"],
+        template: "<div>{{props.runName[0]}}</div>",
+      },
+    },
+  ],
+});
 
-const testWells = []
+const testWells = [];
 for (let index = 0; index < 10; index++) {
   testWells.push({
     label: String.fromCharCode(97 + index) + "1",
@@ -31,29 +41,29 @@ for (let index = 0; index < 10; index++) {
     well_status: "Complete",
     qc_state: null,
     instrument_name: 1234,
-    instrument_type: 'Revio',
-    study_names: ['Some study'],
-  })
+    instrument_type: "Revio",
+    study_names: ["Some study"],
+  });
 }
 
 const configResponse = {
-  "qc_flow_statuses": [
-    { "label": "Inbox", "param": "inbox" },
-    { "label": "In Progress", "param": "in_progress" },
-    { "label": "On Hold", "param": "on_hold" },
-    { "label": "QC Complete", "param": "qc_complete" },
-    { "label": "Aborted", "param": "aborted" },
-    { "label": "Unknown", "param": "unknown" }
+  qc_flow_statuses: [
+    { label: "Inbox", param: "inbox" },
+    { label: "In Progress", param: "in_progress" },
+    { label: "On Hold", param: "on_hold" },
+    { label: "QC Complete", param: "qc_complete" },
+    { label: "Aborted", param: "aborted" },
+    { label: "Unknown", param: "unknown" },
   ],
-  "qc_states": [
-    { "description": "Passed", "only_prelim": false },
-    { "description": "Failed", "only_prelim": false },
-    { "description": "Failed, Instrument", "only_prelim": false },
-    { "description": "Failed, SMRT cell", "only_prelim": false },
-    { "description": "On hold", "only_prelim": true },
-    { "description": "Undecided", "only_prelim": false }
-  ]
-}
+  qc_states: [
+    { description: "Passed", only_prelim: false },
+    { description: "Failed", only_prelim: false },
+    { description: "Failed, Instrument", only_prelim: false },
+    { description: "Failed, SMRT cell", only_prelim: false },
+    { description: "On hold", only_prelim: true },
+    { description: "Undecided", only_prelim: false },
+  ],
+};
 
 fetch.mockResponses(
   [
@@ -62,10 +72,10 @@ fetch.mockResponses(
       userinfo: {
         sub: "00ucz5ud94VnrDGv0416",
         email: "user@test.com",
-        email_verified: true
-      }
+        email_verified: true,
+      },
     }),
-    { status: 200 }
+    { status: 200 },
   ],
   // Get wells data
   [
@@ -74,11 +84,11 @@ fetch.mockResponses(
       page_number: 1,
       total_number_of_items: 100,
       qc_flow_status: "inbox",
-      wells: testWells
+      wells: testWells,
     }),
-    { status: 200 }
-  ],
-)
+    { status: 200 },
+  ]
+);
 
 const wrapper = mount(WellsByStatus, {
   global: {
@@ -86,42 +96,40 @@ const wrapper = mount(WellsByStatus, {
       ElementPlus,
       createTestingPinia({
         createSpy: vi.fn,
-        stubActions: false
+        stubActions: false,
       }),
-      router
+      router,
     ],
     provide: {
-      appConfig: ref(configResponse)
-    }
-  }
-})
-
-
+      appConfig: ref(configResponse),
+    },
+  },
+});
 
-describe('View loads configuration on mount', async () => {
+describe("View loads configuration on mount", async () => {
   // onMount populates a Pinia store. Wait for reactivity to occur
-  await flushPromises()
+  await flushPromises();
 
-  test('Tabs in run-table configured and rendered', () => {
+  test("Tabs in run-table configured and rendered", () => {
     for (const flowStatus of configResponse.qc_flow_statuses) {
-      let tabId = `[id="tab-${flowStatus['param']}"]`
-      expect(wrapper.find(tabId).exists()).toBe(true)
+      let tabId = `[id="tab-${flowStatus["param"]}"]`;
+      expect(wrapper.find(tabId).exists()).toBe(true);
     }
-  })
+  });
 
-  test('Default tab is inbox', () => {
-    const inboxButton = wrapper.get('[id="tab-inbox"]')
-    expect(inboxButton.classes('is-active')).toBeTruthy()
-  })
+  test("Default tab is inbox", () => {
+    const inboxButton = wrapper.get('[id="tab-inbox"]');
+    expect(inboxButton.classes("is-active")).toBeTruthy();
+  });
 
-  test('Runs are rendered in rows', () => {
-    const table = wrapper.get('table')
-    expect(table.exists()).toBe(true)
-    const rows = table.findAll('tr')
-    expect(rows.length).toEqual(11) // 10 rows plus header
-  })
+  test("Runs are rendered in rows", () => {
+    const table = wrapper.get("table");
+    expect(table.exists()).toBe(true);
+    const rows = table.findAll("tr");
+    expect(rows.length).toEqual(11); // 10 rows plus header
+  });
 
-  test('Navigating to another tab makes things happen', async () => {
+  test("Navigating to another tab makes things happen", async () => {
     // Anticipate the loading of new tab data
     fetch.mockResponseOnce(
       JSON.stringify({
@@ -129,28 +137,46 @@ describe('View loads configuration on mount', async () => {
         page_number: 1,
         total_number_of_items: 1,
         qc_flow_status: "on_hold",
-        wells: [{
-          label: 'X1',
-          run_name: 'TRACTION-RUN-299',
-          run_start_time: "2023-04-24T10:10:10",
-          run_complete_time: "2023-05-25T02:10:10",
-          well_start_time: "2023-04-24T10:10:10",
-          well_complete_time: "2023-05-25T02:10:10",
-          run_status: "Complete",
-          well_status: "Complete",
-          qc_state: null,
-          instrument_name: '1234',
-          instrument_type: 'Revio',
-          study_names: [],
-        }]
+        wells: [
+          {
+            label: "X1",
+            run_name: "TRACTION-RUN-299",
+            run_start_time: "2023-04-24T10:10:10",
+            run_complete_time: "2023-05-25T02:10:10",
+            well_start_time: "2023-04-24T10:10:10",
+            well_complete_time: "2023-05-25T02:10:10",
+            run_status: "Complete",
+            well_status: "Complete",
+            qc_state: null,
+            instrument_name: "1234",
+            instrument_type: "Revio",
+            study_names: [],
+          },
+        ],
       })
-    )
+    );
 
-    await wrapper.get('[id="tab-on_hold"]').trigger('click')
-    await flushPromises() // Awaiting data change, but also router.isReady
+    await wrapper.get('[id="tab-on_hold"]').trigger("click");
+    await flushPromises(); // Awaiting data change, but also router.isReady
 
-    expect(fetch.requests().slice(-1)[0].url).toEqual('/api/pacbio/wells?qc_status=on_hold&page_size=10&page_number=1')
+    expect(fetch.requests().slice(-1)[0].url).toEqual(
+      "/api/pacbio/wells?qc_status=on_hold&page_size=10&page_number=1"
+    );
     // Access the current route by strange fashion
-    expect(router.currentRoute.value.query).toEqual({activeTab: 'on_hold', page: '1'})
-  })
-})
+    expect(router.currentRoute.value.query).toEqual({
+      activeTab: "on_hold",
+      page: "1",
+    });
+  });
+
+  test("Route changes when WellTable emits a runSelected event", async () => {
+    // console.log(wrapper.html())
+    await wrapper
+      .findComponent({ name: "well-table" })
+      .vm.$emit("runSelected", "TRACTION-RUN-299");
+    await flushPromises()
+    expect(router.currentRoute.value.path).toEqual(
+      "/ui/run/TRACTION-RUN-299"
+    );
+  });
+});

From 3d5b54f4479b36354279314f93f3dba622dad9c9 Mon Sep 17 00:00:00 2001
From: Kieron Taylor <kt19@sanger.ac.uk>
Date: Fri, 16 Aug 2024 10:53:47 +0100
Subject: [PATCH 3/3] Add to changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 126a057..f357346 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+### Added
+
+* Clickable icon next to run names to change to the view of all wells in that run
+
 ## [2.3.0] - 2024-07-30
 
 ### Added