Merge pull request #2077 from sanger/ui-tweaks

Traction Dashboard refresh

src/App.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="flex flex-col min-h-screen">
     <TractionHeader></TractionHeader>
-    <TractionHeading level="1" shadow>{{ pipeline }} {{ page }}</TractionHeading>
     <div class="flex flex-col mb-auto px-4 pt-4 pb-10">
       <router-view class="text-center" />
     </div>
@@ -31,14 +30,12 @@
 <script>
 import InfoFooter from '@/components/InfoFooter'
 import TractionMessage from '@/components/TractionMessage'
-import TractionHeading from '@/components/TractionHeading'
 import TractionHeader from '@/components/TractionHeader'
 
 export default {
   components: {
     InfoFooter,
     TractionMessage,
-    TractionHeading,
     TractionHeader,
   },
   computed: {

src/components/DataFetcher.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <div v-if="isLoading" class="flex items-center justify-center">
-      <traction-spinner class="h-32 w-32" />
+    <div v-if="isLoading" class="flex p-32 items-center justify-center">
+      <traction-spinner classes="h-32 w-32" />
     </div>
-    <div v-else-if="isError" class="flex flex-col items-center justify-center">
-      <p class="flex mb-5 mt-10 text-lg font-bold">There was an error retrieving the data</p>
-      <traction-button class="flex mt-10" @click="getData()">Retry</traction-button>
+    <div v-else-if="isError" class="flex p-32 flex-col items-center justify-center">
+      <p class="flex text-lg font-semilight p-4">There was an error retrieving the data</p>
+      <traction-button @click="getData()">Retry</traction-button>
     </div>
     <slot v-else />
   </div>

src/components/FilterCard.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="flex flex-col w-full">
-    <div class="flex mx-auto w-full max-w-[1000px] bg-gray-100 rounded-md mt-2 mb-2 p-3">
-      <div class="grid grid-cols-5 gap-2 w-full">
+    <div class="flex mx-auto w-full max-w-[1000px] bg-gray-100 rounded-md py-2 px-4">
+      <div class="grid grid-cols-5 w-full">
         <div class="flex flex-col text-left">
-          <p class="flex font-semibold text-l">Filter results</p>
-          <p class="flex font-light text-gray-700 text-xs italiclist-none">
+          <p class="flex text-l">Filter results</p>
+          <p class="flex font-light text-gray-700 text-sm italiclist-none">
             By default filters by created at
           </p>
         </div>
@@ -29,7 +29,7 @@
         </div>
         <div class="flex items-center">
           <div class="w-full">
-            <traction-button @click="resetFilter()">Reset</traction-button>
+            <traction-button theme="accent" @click="resetFilter()">Reset</traction-button>
             <traction-button
               id="filterButton"
               :disabled="filter_value == '' || filter_input == ''"

src/components/LabelledCard.vue

@@ -1,16 +1,15 @@
 <template>
   <div
-    class="mt-4 border-t-4 border-sp rounded-md space-y-1 bg-sdb-400 text-gray-100"
+    class="border-2 border-sdb-200 rounded-md bg-white text-sdb-400 shadow-custom-pink"
     :data-pipeline="title"
   >
-    <div class="text-center text-2xl" data-attribute="title">{{ title }}</div>
-    <div class="text-center text-xs italic px-2" data-attribute="description">
-      {{ description }}
+    <div class="text-left p-4 border-b-2 border-gray-200 bg-gray-100 rounded-md">
+      <h3 class="text-xl" data-attribute="title">{{ title }}</h3>
+      <span class="text-gray-600 font-light" data-attribute="description">
+        {{ description }}
+      </span>
     </div>
-    <div class="pt-2">
-      <h1 class="border-b-2 border-sp" />
-    </div>
-    <div class="flex flex-row flex-wrap justify-center gap-y-8 gap-x-3 py-8 px-3">
+    <div class="flex flex-row flex-wrap gap-y-4 gap-x-3 py-4 px-4">
       <slot />
     </div>
   </div>

src/components/TractionHeader.vue

@@ -2,10 +2,10 @@
   <div :class="headerClasses">
     <div class="max-w-7xl mx-auto px-4 sm:px-6">
       <div class="flex justify-between items-center py-4 md:justify-start md:space-x-10">
-        <div class="flex flex-row gap-x-2">
-          <img class="w-8 h-8" src="../images/traction-logo.svg" alt="Traction logo" />
-          <div class="text-white text-2xl">Traction</div>
-          <TractionLink name="Home" link="/dashboard" view-type="2" />
+        <div class="flex flex-row gap-x-2 items-center">
+          <router-link to="/" class="flex-none gap-x-2">
+            <img class="w-10 h-10" src="../images/traction-logo.svg" alt="Traction logo" />
+          </router-link>
           <TractionLink name="Label Printing" link="/label-printing" view-type="2" />
           <TractionLink name="QC Results Upload" link="/qc-results-upload" view-type="2" />
           <TractionLink name="Reception" link="/reception" view-type="2" />
@@ -21,6 +21,5 @@ import TractionLink from '@/components/TractionLink'
 import { bgColorClass } from '@/lib/BgColorClass'
 
 const environment = import.meta.env['VITE_ENVIRONMENT']
-
 const headerClasses = ['relative', bgColorClass[environment]]
 </script>

src/components/TractionLink.vue

@@ -29,12 +29,16 @@ export default {
   computed: {
     cssClass() {
       return {
-        'flex w-32 h-20 whitespace-normal justify-center items-center rounded-md border border-transparent text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 sm:mt-0 text-black bg-gray-300 hover:bg-gray-100 shadow-sm focus:border-gray-100 focus:shadow-outline-gray active:bg-gray-100':
+        'flex w-32 h-20 p-2 justify-center items-center rounded-md border-2 border-gray-200 text-sm font-sm hover:bg-gray-100 shadow-sm':
           this.viewType == ViewType.Button,
-        'group items-center px-3 py-2 rounded-md text-sm font-medium focus:outline-none focus:text-white focus:bg-gray-700 text-gray-400 hover:text-white hover:bg-gray-700':
+        'items-center px-4 py-2 rounded-md text-sm font-medium focus:outline-none focus:text-white text-gray-400 hover:text-white':
           this.viewType == ViewType.MenuItem,
+        'text-white': this.isActive,
       }
     },
+    isActive() {
+      return this.$route.path === this.link
+    },
   },
 }
 </script>

src/components/shared/TractionMenu.vue

@@ -1,7 +1,5 @@
 <template>
-  <menu
-    :class="['list-none inline-flex ml-4 m-0 p-0 space-x-2 font-light', border ? `border-b-2` : ``]"
-  >
+  <menu :class="['list-none inline-flex m-0 p-0 space-x-2 font-light', border ? `border-b-2` : ``]">
     <slot />
   </menu>
 </template>

src/components/shared/TractionSpinner.vue

@@ -1,16 +1,27 @@
 <template>
   <svg
-    id="traction-spinner"
-    :class="['animate-spin text-sdb', classes]"
-    xmlns="http://www.w3.org/2000/svg"
+    :class="['animate-spin text-sp-400', classes]"
+    viewBox="0 0 64 64"
     fill="none"
-    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
   >
-    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
     <path
-      fill="#353a64"
-      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-    />
+      d="M32 3C35.8083 3 39.5794 3.75011 43.0978 5.20749C46.6163 6.66488 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3837 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32C61 35.8083 60.2499 39.5794 58.7925 43.0978C57.3351 46.6163 55.199 49.8132 52.5061 52.5061C49.8132 55.199 46.6163 57.3351 43.0978 58.7925C39.5794 60.2499 35.8083 61 32 61C28.1917 61 24.4206 60.2499 20.9022 58.7925C17.3837 57.3351 14.1868 55.199 11.4939 52.5061C8.801 49.8132 6.66487 46.6163 5.20749 43.0978C3.7501 39.5794 3 35.8083 3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66489 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.80099 17.3838 6.66487 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3L32 3Z"
+      stroke="currentColor"
+      stroke-width="6"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    ></path>
+    <path
+      d="M32 3C36.5778 3 41.0906 4.08374 45.1692 6.16256C49.2477 8.24138 52.7762 11.2562 55.466 14.9605C58.1558 18.6647 59.9304 22.9531 60.6448 27.4748C61.3591 31.9965 60.9928 36.6232 59.5759 40.9762"
+      stroke="currentColor"
+      stroke-width="6"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="text-sdb-400"
+    ></path>
   </svg>
 </template>
 
@@ -25,7 +36,7 @@ export default {
   props: {
     classes: {
       type: String,
-      default: '',
+      default: 'w-5 h-5',
     },
   },
 }

src/icons/DocsIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="32px"
+    viewBox="0 -960 960 960"
+    width="32px"
+    fill="#FAC7D8"
+  >
+    <path
+      d="M260-320q47 0 91.5 10.5T440-278v-394q-41-24-87-36t-93-12q-36 0-71.5 7T120-692v396q35-12 69.5-18t70.5-6Zm260 42q44-21 88.5-31.5T700-320q36 0 70.5 6t69.5 18v-396q-33-14-68.5-21t-71.5-7q-47 0-93 12t-87 36v394Zm-40 118q-48-38-104-59t-116-21q-42 0-82.5 11T100-198q-21 11-40.5-1T40-234v-482q0-11 5.5-21T62-752q46-24 96-36t102-12q58 0 113.5 15T480-740q51-30 106.5-45T700-800q52 0 102 12t96 36q11 5 16.5 15t5.5 21v482q0 23-19.5 35t-40.5 1q-37-20-77.5-31T700-240q-60 0-116 21t-104 59ZM280-494Z"
+    />
+  </svg>
+</template>

src/icons/GeneticsIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="32px"
+    viewBox="0 -960 960 960"
+    width="32px"
+    fill="#FAC7D8"
+  >
+    <path
+      d="M200-40v-40q0-139 58-225.5T418-480q-102-88-160-174.5T200-880v-40h80v40q0 11 .5 20.5T282-840h396q1-10 1.5-19.5t.5-20.5v-40h80v40q0 139-58 225.5T542-480q102 88 160 174.5T760-80v40h-80v-40q0-11-.5-20.5T678-120H282q-1 10-1.5 19.5T280-80v40h-80Zm138-640h284q13-19 22.5-38t17.5-42H298q8 22 17.5 41.5T338-680Zm142 148q20-17 39-34t36-34H405q17 17 36 34t39 34Zm-75 172h150q-17-17-36-34t-39-34q-20 17-39 34t-36 34ZM298-200h364q-8-22-17.5-41.5T622-280H338q-13 19-22.5 38T298-200Z"
+    />
+  </svg>
+</template>
+<script>
+export default {
+  name: 'GeneticsIcon',
+}
+</script>

src/icons/ToolsIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="32px"
+    viewBox="0 -960 960 960"
+    width="32px"
+    fill="#FAC7D8"
+  >
+    <path
+      d="M686-132 444-376q-20 8-40.5 12t-43.5 4q-100 0-170-70t-70-170q0-36 10-68.5t28-61.5l146 146 72-72-146-146q29-18 61.5-28t68.5-10q100 0 170 70t70 170q0 23-4 43.5T584-516l244 242q12 12 12 29t-12 29l-84 84q-12 12-29 12t-29-12Zm29-85 27-27-256-256q18-20 26-46.5t8-53.5q0-60-38.5-104.5T386-758l74 74q12 12 12 28t-12 28L332-500q-12 12-28 12t-28-12l-74-74q9 57 53.5 95.5T360-440q26 0 52-8t47-25l256 256ZM472-488Z"
+    />
+  </svg>
+</template>

src/views/PipelineView.vue

@@ -1,23 +1,26 @@
 <template>
   <div class="flex flex-col justify-start">
-    <traction-menu :border="true"
-      ><traction-menu-item
-        v-for="(pipelineRoute, index) in pipelineInfo.routes"
-        :key="index"
-        :active="isActive(pipelineRoute)"
-        color="blue"
-        @click="setSource(index)"
-        >{{ humanise(pipelineRoute) }}</traction-menu-item
-      >
-    </traction-menu>
+    <div class="flex flex-row border-b-2 border-gray-200">
+      <traction-menu>
+        <div v-for="(pipelineRoute, index) in pipelineInfo.routes" :key="index">
+          <router-link
+            v-if="!isActive(pipelineRoute)"
+            :class="routeClass(pipelineRoute)"
+            :to="`/${pipelineInfo.name}/${pipelineRoute}`"
+            >{{ humanise(pipelineRoute) }}
+          </router-link>
+          <span v-else :class="routeClass(pipelineRoute)">{{ humanise(pipelineRoute) }} </span>
+        </div>
+      </traction-menu>
+      <span class="flex items-center text-xl pl-4 text-gray-400">{{ pipelineInfo.title }}</span>
+    </div>
     <router-view class="mt-2" />
   </div>
 </template>
 
 <script>
 import PipelinesConfig from '@/config/PipelinesConfig'
 import { humanise } from '@/lib/stringHumanisation'
-import { isNavigationFailure, NavigationFailureType } from 'vue-router'
 export default {
   name: 'PipelineView',
   props: {
@@ -40,23 +43,15 @@ export default {
     path(route) {
       return '/' + this.pipelineInfo.name + '/' + route
     },
-    /** Callback handler for tab item selection - Each tab selection navigates user to a different page which
-     * is handled by the router.push method**/
-    setSource(index) {
-      this.sourceIndex = index
-      // If new tab is already active, do nothing
-      if (this.isActive(this.pipelineInfo.routes[index])) {
-        return
-      }
-      this.$router.push({ path: this.path(this.pipelineInfo.routes[index]) }).catch((error) => {
-        if (!isNavigationFailure(error, NavigationFailureType.duplicated)) {
-          console.error(error)
-        }
-      })
-    },
     isActive(pipelineRoute) {
       return this.$route.path === this.path(pipelineRoute)
     },
+    routeClass(route) {
+      return `text-black hover:bg-sdb-300 hover:text-white flex
+        py-1 rounded-t-md w-24 justify-center
+        transition-colors duration-100 ease-in-out cursor-pointer
+        ${this.isActive(route) ? 'text-white bg-sdb-300' : 'text-black bg-gray-200'}`
+    },
     humanise,
   },
 }