Merge pull request #302 from sanger/develop

DPL-890-4 Release - Merging develop into master
sanger · Jan 18, 2024 · 33937cc · 33937cc
2 parents 961a8d2 + c500896
commit 33937cc
Show file tree

Hide file tree

Showing 59 changed files with 4,104 additions and 2,384 deletions.
diff --git a/.gitignore b/.gitignore
@@ -25,3 +25,7 @@ npm-debug.log*
 *.sw*
 
 .talismanrc
+
+# We build the style programatically, so we'll add it to the .gitignore to
+# avoid uneccessary noise
+/src/styles/index.css
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,11 @@
+{
+  "include": ["src/**/*", "tailwind.config.js"],
+  "exclude": ["node_modules", "build", "dist"],
+  "vueCompilerOptions": { "target": 3.3 },
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,22 +4,25 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "start": "npm-run-all -p serve:css serve",
     "serve": "vite",
-    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vite build",
-    "test:unit": "vitest run",
+    "build": "npm-run-all build:css build:js",
+    "build:js": "vite build",
+    "test:unit": "vitest run --silent",
     "test:e2e": "npm-run-all -p serve test:cypress:all",
     "test:cypress:all": "cypress run",
     "test:e2e:one": "npm-run-all -p serve test:cypress:one",
     "test:cypress:one": "cypress open",
     "test": "npm-run-all test:unit test:e2e",
     "lint": "eslint . --ext .js,.vue,.cjs",
     "prettier-check": "prettier --check .",
-    "prettify": "prettier --write ."
+    "prettify": "prettier --write .",
+    "serve:css": "postcss src/styles/tailwind.css -o src/styles/index.css",
+    "build:css": "postcss src/styles/tailwind.css -o src/styles/index.css --env production"
   },
   "dependencies": {
     "@vitejs/plugin-vue": "^2.3.3",
     "axios": "^0.21.4",
-    "bootstrap-vue": "^2.23.1",
     "buffer": "^6.0.3",
     "csv-parse": "^5.5.2",
     "isomorphic-fetch": "^2.2.1",
@@ -31,7 +34,9 @@
     "vite-plugin-vue2": "^2.0.1",
     "vue": "^2.7.5",
     "vue-router": "^3.5.4",
-    "vue-simple-spinner": "^1.2.10",
+    "tailwindcss": "3.3.5",
+    "postcss": "^8.4.31",
+    "@sanger/ui-styling": "^4.1.0",
     "xvfb": "^0.4.0"
   },
   "resolutions": {
@@ -56,8 +61,8 @@
     "lint-staged": "^7.3.0",
     "node-stdlib-browser": "^1.2.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.31",
-    "prettier": "^2.8.7",
+    "postcss-cli": "^10.1.0",
+    "prettier": "^3.1.0",
     "sass": "^1.69.4",
     "vite-plugin-node-polyfills": "^0.15.0",
     "vitest": "^0.34.6",

diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -1,5 +1,7 @@
 module.exports = {
   plugins: {
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
     autoprefixer: {},
   },
 }
diff --git a/src/App.vue b/src/App.vue
@@ -1,28 +1,49 @@
 <template>
-  <div id="app">
-    <nav-bar></nav-bar>
-    <router-view />
+  <div class="flex flex-col min-h-screen">
+    <!-- TODO: move this into a header component -->
+    <div class="relative bg-gradient-to-tr from-sdb to-sdb-400">
+      <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">
+            <a href="/"><div class="text-white text-2xl">Quanthub</div></a>
+            <PageLink name="Upload a new plate" link="/" view-type="2" />
+            <PageLink name="Print a barcode" link="/print_job" view-type="2" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <PageHeading level="1" shadow>{{ page }}</PageHeading>
+    <div class="flex flex-col mb-auto px-4 pt-4 pb-10">
+      <router-view class="text-center" />
+    </div>
+    <PageFooter></PageFooter>
   </div>
 </template>
 
 <script>
-import NavBar from '@/components/NavBar.vue'
+import PageFooter from '@/components/PageFooter.vue'
+import PageLink from '@/components/PageLink.vue'
+import PageHeading from '@/components/PageHeading.vue'
 
 export default {
   name: 'App',
   components: {
-    NavBar,
+    PageFooter,
+    PageLink,
+    PageHeading,
+  },
+  computed: {
+    mergedRoute() {
+      return Object.assign({}, ...this.$route.matched.map(({ meta }) => meta))
+    },
+    page() {
+      return this.mergedRoute.page
+    },
   },
 }
 </script>
 
-<style lang="scss">
-@import 'src/assets/stylesheets/colors.scss';
-@import '~bootstrap/scss/bootstrap';
-
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-</style>
+<style lang="scss"></style>
diff --git a/src/Calculations.js b/src/Calculations.js
@@ -49,7 +49,7 @@ const isOutlier = (value, limit = 3.5) => {
 // will return 0 if array is empty
 const mean = (
   values,
-  { sample = 0, conversionExpression = `(${originalValue})` } = {}
+  { sample = 0, conversionExpression = `(${originalValue})` } = {},
 ) => {
   if (conversionExpression.indexOf(originalValue) === -1) {
     return NaN

diff --git a/src/Grid.js b/src/Grid.js
@@ -75,7 +75,7 @@ const grid = (
     numberOfColumns = 24,
     numberOfRows = 16,
   } = {},
-  cells = []
+  cells = [],
 ) => {
   const columns = Array.from(Array(numberOfColumns), (_v, i) => String(i + 1))
   const rows = buildRows(numberOfRows, columns)

diff --git a/src/QuantType.js b/src/QuantType.js
@@ -46,7 +46,7 @@ const defaults = {
 const insertFactorsForConversion = ({ factors, expression }) =>
   Object.entries(factors).reduce(
     (calculation, [factor, value]) => calculation.replaceAll(factor, value),
-    expression
+    expression,
   )
 
 const quantType = (quantType, data = {}) => {

diff --git a/src/Replicates.js b/src/Replicates.js
@@ -107,7 +107,7 @@ const Replicate = ({ wells, options } = { wells: [], options: {} }) => {
    **/
   const standardDeviation = () => {
     return Calculations.standardDeviation(concentrations()).toDecimalPlaces(
-      options.decimalPlaces
+      options.decimalPlaces,
     )
   }
 
@@ -116,7 +116,7 @@ const Replicate = ({ wells, options } = { wells: [], options: {} }) => {
    **/
   const cv = () => {
     return Calculations.cv(concentrations()).toDecimalPlaces(
-      options.decimalPlaces
+      options.decimalPlaces,
     )
   }
 
@@ -173,7 +173,7 @@ const Replicate = ({ wells, options } = { wells: [], options: {} }) => {
         const zscore = Calculations.modifiedZScores(
           well.concentration,
           median,
-          mad
+          mad,
         )
         if (Calculations.isOutlier(zscore, options.outlier.threshold)) {
           Vue.set(well, 'outlier', true)

diff --git a/src/assets/stylesheets/colors.scss b/src/assets/stylesheets/colors.scss
diff --git a/src/assets/stylesheets/layout.scss b/src/assets/stylesheets/layout.scss
diff --git a/src/components/Alert.vue b/src/components/Alert.vue
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue