From 09849ce0640985dddfc090544137b26e53ce3ce8 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 27 Oct 2020 14:04:55 +0000
Subject: [PATCH 1/9] Explicit JPEG thumbnail on capture

---
 openflexure_microscope/camera/pi.py  | 2 ++
 openflexure_microscope/microscope.py | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/openflexure_microscope/camera/pi.py b/openflexure_microscope/camera/pi.py
index 4ea5e691..d49af7e9 100644
--- a/openflexure_microscope/camera/pi.py
+++ b/openflexure_microscope/camera/pi.py
@@ -484,6 +484,7 @@ class PiCameraStreamer(BaseCamera):
         use_video_port: bool = False,
         resize: Tuple[int, int] = None,
         bayer: bool = True,
+        thumbnail: tuple = None
     ):
         """
         Capture a still image to a StreamObject.
@@ -515,6 +516,7 @@ class PiCameraStreamer(BaseCamera):
                 resize=resize,
                 bayer=(not use_video_port) and bayer,
                 use_video_port=use_video_port,
+                thumbnail=thumbnail
             )
 
             # Set resolution and start stream recording if necessary
diff --git a/openflexure_microscope/microscope.py b/openflexure_microscope/microscope.py
index 824ce971..f68ca1d9 100644
--- a/openflexure_microscope/microscope.py
+++ b/openflexure_microscope/microscope.py
@@ -384,6 +384,9 @@ class Microscope:
             )
 
             # Capture to output object
+            extras = {}
+            if fmt == "jpeg":
+                extras["thumbnail"] = (200,150,85)
             logging.info("Starting microscope capture %s", output.file)
             self.camera.capture(
                 output,
@@ -391,6 +394,7 @@ class Microscope:
                 resize=resize,
                 bayer=bayer,
                 fmt=fmt,
+                **extras
             )
 
         output.put_and_save(tags, annotations, full_metadata)

From 10d264c526aaaaffcaf0884cd99a68a5f3e8de02 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 27 Oct 2020 14:05:24 +0000
Subject: [PATCH 2/9] Always use builtin JPEG thumbnails

---
 openflexure_microscope/captures/capture.py | 25 ++++++----------------
 1 file changed, 6 insertions(+), 19 deletions(-)

diff --git a/openflexure_microscope/captures/capture.py b/openflexure_microscope/captures/capture.py
index 2c2812f5..2550c59d 100644
--- a/openflexure_microscope/captures/capture.py
+++ b/openflexure_microscope/captures/capture.py
@@ -16,7 +16,6 @@ from openflexure_microscope.config import JSONEncoder
 
 PIL_FORMATS = ["JPG", "JPEG", "PNG", "TIF", "TIFF"]
 EXIF_FORMATS = ["JPG", "JPEG", "TIF", "TIFF"]
-THUMBNAIL_SIZE = (200, 150)
 
 
 def pull_usercomment_dict(filepath):
@@ -145,9 +144,6 @@ class CaptureObject(object):
         # List for storing tags
         self.tags = []
 
-        # Thumbnail (populated only for PIL captures)
-        self.thumb_bytes = None
-
     def write(self, s):
         logging.debug("Writing to %s", self)
         self.stream.write(s)
@@ -349,21 +345,12 @@ class CaptureObject(object):
         """
         Returns a thumbnail of the capture data, for supported image formats.
         """
-        # If no thumbnail exists, try and make one
-        if not self.thumb_bytes:
-            logging.info("Building thumbnail")
-            self.thumb_bytes = io.BytesIO()
-            if self.format.upper() in PIL_FORMATS:
-                im = Image.open(self.data)
-                im.thumbnail(THUMBNAIL_SIZE)
-                im.save(self.thumb_bytes, self.format)
-                self.thumb_bytes.seek(0)
-        else:
-            self.thumb_bytes.seek(0)
-
-        # Copy the buffer, to avoid closing the file
-        data = io.BytesIO(self.thumb_bytes.getbuffer())
-        return data
+        exif_dict = piexif.load(self.file)
+        thumbnail = exif_dict.pop("thumbnail")
+        if thumbnail:
+            return io.BytesIO(thumbnail)
+        # If no thumbnail exists, serve the full image
+        return self.data.getvalue()
 
     def save(self) -> None:
         """Write stream to file, and save/update metadata file"""

From 13b4c84783a726ab65c9f70c50d534e8ef8f166e Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 27 Oct 2020 14:12:41 +0000
Subject: [PATCH 3/9] Fixed node_modules exclusion from Black

---
 pyproject.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pyproject.toml b/pyproject.toml
index 4bedf683..29a62813 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -60,7 +60,7 @@ pylint = "^2.3"
 black = {version = "^18.3-alpha.0",allow-prereleases = true}
 
 [tool.black]
-exclude = '(\.eggs|\.git|\.venv)'
+exclude = '(\.eggs|\.git|\.venv|node_modules/)'
 
 [tool.isort]
 multi_line_output = 3

From 250fd07e9a6331d9aaa9429166f56d526fc193fa Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 27 Oct 2020 14:14:59 +0000
Subject: [PATCH 4/9] Code formatting and linting

---
 openflexure_microscope/camera/pi.py        | 4 ++--
 openflexure_microscope/captures/capture.py | 2 --
 openflexure_microscope/microscope.py       | 4 ++--
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/openflexure_microscope/camera/pi.py b/openflexure_microscope/camera/pi.py
index d49af7e9..65fd8c35 100644
--- a/openflexure_microscope/camera/pi.py
+++ b/openflexure_microscope/camera/pi.py
@@ -484,7 +484,7 @@ class PiCameraStreamer(BaseCamera):
         use_video_port: bool = False,
         resize: Tuple[int, int] = None,
         bayer: bool = True,
-        thumbnail: tuple = None
+        thumbnail: tuple = None,
     ):
         """
         Capture a still image to a StreamObject.
@@ -516,7 +516,7 @@ class PiCameraStreamer(BaseCamera):
                 resize=resize,
                 bayer=(not use_video_port) and bayer,
                 use_video_port=use_video_port,
-                thumbnail=thumbnail
+                thumbnail=thumbnail,
             )
 
             # Set resolution and start stream recording if necessary
diff --git a/openflexure_microscope/captures/capture.py b/openflexure_microscope/captures/capture.py
index 2550c59d..ecee9462 100644
--- a/openflexure_microscope/captures/capture.py
+++ b/openflexure_microscope/captures/capture.py
@@ -8,13 +8,11 @@ import uuid
 from collections import OrderedDict
 
 import dateutil.parser
-from PIL import Image
 
 from openflexure_microscope.camera import piexif
 from openflexure_microscope.camera.piexif._exceptions import InvalidImageDataError
 from openflexure_microscope.config import JSONEncoder
 
-PIL_FORMATS = ["JPG", "JPEG", "PNG", "TIF", "TIFF"]
 EXIF_FORMATS = ["JPG", "JPEG", "TIF", "TIFF"]
 
 
diff --git a/openflexure_microscope/microscope.py b/openflexure_microscope/microscope.py
index f68ca1d9..22824815 100644
--- a/openflexure_microscope/microscope.py
+++ b/openflexure_microscope/microscope.py
@@ -386,7 +386,7 @@ class Microscope:
             # Capture to output object
             extras = {}
             if fmt == "jpeg":
-                extras["thumbnail"] = (200,150,85)
+                extras["thumbnail"] = (200, 150, 85)
             logging.info("Starting microscope capture %s", output.file)
             self.camera.capture(
                 output,
@@ -394,7 +394,7 @@ class Microscope:
                 resize=resize,
                 bayer=bayer,
                 fmt=fmt,
-                **extras
+                **extras,
             )
 
         output.put_and_save(tags, annotations, full_metadata)

From eff03bfa2c08709056d76b3168729f3d7acb1146 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 27 Oct 2020 14:52:27 +0000
Subject: [PATCH 5/9] Rearranged main components

---
 .../api/static/package-lock.json              | 196 ++++-----
 .../miniStreamDisplay.vue                     |   0
 .../genericComponents/taskSubmitter.vue       |   4 +-
 .../static/src/components/loadingContent.vue  |   2 +-
 .../modalComponents/calibrationModal.vue      |   6 +-
 .../aboutComponents}/devTools.vue             |   0
 .../aboutComponents}/statusPane.vue           |   0
 .../tabContentComponents/aboutContent.vue     |   4 +-
 .../captureComponents}/paneCapture.vue        |   6 +-
 .../tabContentComponents/captureContent.vue   |   4 +-
 .../tabContentComponents/extensionContent.vue |  14 +-
 .../galleryComponents/captureCard.vue         |   0
 .../galleryComponents/scanCard.vue            |   0
 .../galleryComponents/zipDownloader.vue       |   0
 .../tabContentComponents/galleryContent.vue   | 405 ++++++++++++++++-
 .../navigateComponents}/paneNavigate.vue      |   2 +-
 .../tabContentComponents/navigateContent.vue  |   4 +-
 .../settingsComponents/CSMSettings.vue        |   2 +-
 .../CSMCalibrationSettings.vue                |   0
 .../settingsComponents/appSettings.vue        |   0
 .../settingsComponents/cameraSettings.vue     |   2 +-
 .../cameraCalibrationSettings.vue             |   0
 .../settingsComponents/featuresSettings.vue   |   0
 .../settingsComponents/microscopeSettings.vue |   0
 .../settingsComponents/stageSettings.vue      |   0
 .../settingsComponents/streamSettings.vue     |   0
 .../tabContentComponents/settingsContent.vue  | 212 ++++++++-
 .../slideScanComponents}/paneSlideScan.vue    |   2 +-
 .../tabContentComponents/slideScanContent.vue |   4 +-
 .../streamContent.vue}                        |   0
 .../tabContentComponents/viewContent.vue      |   2 +-
 .../connectComponents/hostCard.vue            | 168 -------
 .../viewComponents/galleryDisplay.vue         | 409 ------------------
 .../viewComponents/settingsDisplay.vue        | 224 ----------
 34 files changed, 734 insertions(+), 938 deletions(-)
 rename openflexure_microscope/api/static/src/components/{viewComponents => genericComponents}/miniStreamDisplay.vue (100%)
 rename openflexure_microscope/api/static/src/components/{controlComponents => tabContentComponents/aboutComponents}/devTools.vue (100%)
 rename openflexure_microscope/api/static/src/components/{viewComponents => tabContentComponents/aboutComponents}/statusPane.vue (100%)
 rename openflexure_microscope/api/static/src/components/{controlComponents => tabContentComponents/captureComponents}/paneCapture.vue (98%)
 rename openflexure_microscope/api/static/src/components/{viewComponents => tabContentComponents}/galleryComponents/captureCard.vue (100%)
 rename openflexure_microscope/api/static/src/components/{viewComponents => tabContentComponents}/galleryComponents/scanCard.vue (100%)
 rename openflexure_microscope/api/static/src/components/{viewComponents => tabContentComponents}/galleryComponents/zipDownloader.vue (100%)
 rename openflexure_microscope/api/static/src/components/{controlComponents => tabContentComponents/navigateComponents}/paneNavigate.vue (99%)
 rename openflexure_microscope/api/static/src/components/{viewComponents => tabContentComponents}/settingsComponents/CSMSettings.vue (98%)
 rename openflexure_microscope/api/static/src/components/{viewComponents => tabContentComponents}/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue (100%)
 rename openflexure_microscope/api/static/src/components/{viewComponents => tabContentComponents}/settingsComponents/appSettings.vue (100%)
 rename openflexure_microscope/api/static/src/components/{viewComponents => tabContentComponents}/settingsComponents/cameraSettings.vue (97%)
 rename openflexure_microscope/api/static/src/components/{viewComponents => tabContentComponents}/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue (100%)
 rename openflexure_microscope/api/static/src/components/{viewComponents => tabContentComponents}/settingsComponents/featuresSettings.vue (100%)
 rename openflexure_microscope/api/static/src/components/{viewComponents => tabContentComponents}/settingsComponents/microscopeSettings.vue (100%)
 rename openflexure_microscope/api/static/src/components/{viewComponents => tabContentComponents}/settingsComponents/stageSettings.vue (100%)
 rename openflexure_microscope/api/static/src/components/{viewComponents => tabContentComponents}/settingsComponents/streamSettings.vue (100%)
 rename openflexure_microscope/api/static/src/components/{controlComponents => tabContentComponents/slideScanComponents}/paneSlideScan.vue (99%)
 rename openflexure_microscope/api/static/src/components/{viewComponents/streamDisplay.vue => tabContentComponents/streamContent.vue} (100%)
 delete mode 100644 openflexure_microscope/api/static/src/components/viewComponents/connectComponents/hostCard.vue
 delete mode 100644 openflexure_microscope/api/static/src/components/viewComponents/galleryDisplay.vue
 delete mode 100644 openflexure_microscope/api/static/src/components/viewComponents/settingsDisplay.vue

diff --git a/openflexure_microscope/api/static/package-lock.json b/openflexure_microscope/api/static/package-lock.json
index a7705d27..0d939672 100644
--- a/openflexure_microscope/api/static/package-lock.json
+++ b/openflexure_microscope/api/static/package-lock.json
@@ -2828,6 +2828,16 @@
           "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
         "browserslist": {
           "version": "4.14.3",
           "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.3.tgz",
@@ -2872,12 +2882,36 @@
           "integrity": "sha512-ziNcheTGTHlu9g34EVoHQdIu5g4foc8EsxMGC7Xkokmvw0dqNtX8BS8RgCgFBaAiSp2IdjvBxNdh0ssib28eVQ==",
           "dev": true
         },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
         "electron-to-chromium": {
           "version": "1.3.570",
           "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.570.tgz",
           "integrity": "sha512-Y6OCoVQgFQBP5py6A/06+yWxUZHDlNr/gNDGatjH8AZqXl8X0tE4LfjLJsXGz/JmWJz8a6K7bR1k+QzZ+k//fg==",
           "dev": true
         },
+        "emojis-list": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+          "dev": true,
+          "optional": true
+        },
         "fast-deep-equal": {
           "version": "3.1.3",
           "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2911,6 +2945,35 @@
           "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
           "dev": true
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "json5": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
+          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -3053,6 +3116,16 @@
             "ansi-regex": "^5.0.0"
           }
         },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -3079,6 +3152,31 @@
             "psl": "^1.1.28",
             "punycode": "^2.1.1"
           }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.0.0-beta.8",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
+          "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          },
+          "dependencies": {
+            "chalk": {
+              "version": "4.1.0",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+              "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "ansi-styles": "^4.1.0",
+                "supports-color": "^7.1.0"
+              }
+            }
+          }
         }
       }
     },
@@ -13291,104 +13389,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.0.0-beta.8",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
-      "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "emojis-list": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "json5": {
-          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
-          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "minimist": "^1.2.5"
-          }
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-observe-visibility": {
       "version": "0.4.6",
       "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
diff --git a/openflexure_microscope/api/static/src/components/viewComponents/miniStreamDisplay.vue b/openflexure_microscope/api/static/src/components/genericComponents/miniStreamDisplay.vue
similarity index 100%
rename from openflexure_microscope/api/static/src/components/viewComponents/miniStreamDisplay.vue
rename to openflexure_microscope/api/static/src/components/genericComponents/miniStreamDisplay.vue
diff --git a/openflexure_microscope/api/static/src/components/genericComponents/taskSubmitter.vue b/openflexure_microscope/api/static/src/components/genericComponents/taskSubmitter.vue
index 78c6d780..a0d8161f 100644
--- a/openflexure_microscope/api/static/src/components/genericComponents/taskSubmitter.vue
+++ b/openflexure_microscope/api/static/src/components/genericComponents/taskSubmitter.vue
@@ -200,13 +200,13 @@ export default {
           // If task ends with an error
           else if (result == "error") {
             // Pass the error string back with reject
-            console.log("Rejecting pollTask due to error")
+            console.log("Rejecting pollTask due to error");
             reject(new Error(response.data.output));
           }
           // If task ends with termination
           else if (result == "cancelled") {
             // Pass a generic termination error back with reject
-            console.log("Rejecting pollTask due to cancellation")
+            console.log("Rejecting pollTask due to cancellation");
             reject(new Error("Task cancelled"));
           } else {
             // Since the task is still running, we can update the progress bar
diff --git a/openflexure_microscope/api/static/src/components/loadingContent.vue b/openflexure_microscope/api/static/src/components/loadingContent.vue
index 5bd92b3a..2d12c99f 100644
--- a/openflexure_microscope/api/static/src/components/loadingContent.vue
+++ b/openflexure_microscope/api/static/src/components/loadingContent.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import devTools from "./controlComponents/devTools.vue";
+import devTools from "./tabContentComponents/aboutComponents/devTools.vue";
 
 // Export main app
 export default {
diff --git a/openflexure_microscope/api/static/src/components/modalComponents/calibrationModal.vue b/openflexure_microscope/api/static/src/components/modalComponents/calibrationModal.vue
index 8194e61b..feda2acb 100644
--- a/openflexure_microscope/api/static/src/components/modalComponents/calibrationModal.vue
+++ b/openflexure_microscope/api/static/src/components/modalComponents/calibrationModal.vue
@@ -148,9 +148,9 @@
 <script>
 import axios from "axios";
 
-import cameraCalibrationSettings from "../viewComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue";
-import CSMCalibrationSettings from "../viewComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue";
-import miniStreamDisplay from "../viewComponents/miniStreamDisplay.vue";
+import cameraCalibrationSettings from "../tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue";
+import CSMCalibrationSettings from "../tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue";
+import miniStreamDisplay from "../genericComponents/miniStreamDisplay.vue";
 
 export default {
   name: "CalibrationModal",
diff --git a/openflexure_microscope/api/static/src/components/controlComponents/devTools.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/aboutComponents/devTools.vue
similarity index 100%
rename from openflexure_microscope/api/static/src/components/controlComponents/devTools.vue
rename to openflexure_microscope/api/static/src/components/tabContentComponents/aboutComponents/devTools.vue
diff --git a/openflexure_microscope/api/static/src/components/viewComponents/statusPane.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/aboutComponents/statusPane.vue
similarity index 100%
rename from openflexure_microscope/api/static/src/components/viewComponents/statusPane.vue
rename to openflexure_microscope/api/static/src/components/tabContentComponents/aboutComponents/statusPane.vue
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/aboutContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/aboutContent.vue
index 3f5ebd6e..f507d44d 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/aboutContent.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/aboutContent.vue
@@ -21,8 +21,8 @@
 </template>
 
 <script>
-import devTools from "../controlComponents/devTools.vue";
-import statusPane from "../viewComponents/statusPane.vue";
+import devTools from "./aboutComponents/devTools.vue";
+import statusPane from "./aboutComponents/statusPane.vue";
 
 export default {
   name: "AboutContent",
diff --git a/openflexure_microscope/api/static/src/components/controlComponents/paneCapture.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/captureComponents/paneCapture.vue
similarity index 98%
rename from openflexure_microscope/api/static/src/components/controlComponents/paneCapture.vue
rename to openflexure_microscope/api/static/src/components/tabContentComponents/captureComponents/paneCapture.vue
index 1f1113c4..9d19ff44 100644
--- a/openflexure_microscope/api/static/src/components/controlComponents/paneCapture.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/captureComponents/paneCapture.vue
@@ -269,10 +269,10 @@
 <script>
 import axios from "axios";
 
-import tagList from "../fieldComponents/tagList";
-import keyvalList from "../fieldComponents/keyvalList";
+import tagList from "../../fieldComponents/tagList";
+import keyvalList from "../../fieldComponents/keyvalList";
 
-import taskSubmitter from "../genericComponents/taskSubmitter";
+import taskSubmitter from "../../genericComponents/taskSubmitter";
 
 // Export main app
 export default {
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/captureContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/captureContent.vue
index a2959bd2..a1758f9b 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/captureContent.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/captureContent.vue
@@ -11,8 +11,8 @@
 </template>
 
 <script>
-import paneCapture from "../controlComponents/paneCapture";
-import streamDisplay from "../viewComponents/streamDisplay.vue";
+import paneCapture from "./captureComponents/paneCapture";
+import streamDisplay from "./streamContent.vue";
 
 export default {
   name: "NavigateContent",
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/extensionContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/extensionContent.vue
index 001d2e79..10a8931f 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/extensionContent.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/extensionContent.vue
@@ -28,8 +28,8 @@
       </div>
     </div>
     <div class="view-component uk-width-expand">
-      <galleryDisplay v-if="viewPanel == 'gallery'" />
-      <settingsDisplay v-else-if="viewPanel == 'settings'" />
+      <galleryContent v-if="viewPanel == 'gallery'" />
+      <settingsContent v-else-if="viewPanel == 'settings'" />
       <streamDisplay v-else />
     </div>
   </div>
@@ -38,9 +38,9 @@
 <script>
 import JsonForm from "../pluginComponents/JsonForm";
 import WebComponentLoader from "../pluginComponents/WebComponentLoader";
-import streamDisplay from "../viewComponents/streamDisplay.vue";
-import galleryDisplay from "../viewComponents/galleryDisplay.vue";
-import settingsDisplay from "../viewComponents/settingsDisplay.vue";
+import streamDisplay from "./streamContent.vue";
+import galleryDisplay from "../tabContentComponents/galleryContent.vue";
+import settingsDisplay from "../tabContentComponents/settingsContent.vue";
 
 export default {
   name: "ExtensionContent",
@@ -49,8 +49,8 @@ export default {
     JsonForm,
     WebComponentLoader,
     streamDisplay,
-    galleryDisplay,
-    settingsDisplay
+    galleryContent,
+    settingsContent
   },
 
   props: {
diff --git a/openflexure_microscope/api/static/src/components/viewComponents/galleryComponents/captureCard.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue
similarity index 100%
rename from openflexure_microscope/api/static/src/components/viewComponents/galleryComponents/captureCard.vue
rename to openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue
diff --git a/openflexure_microscope/api/static/src/components/viewComponents/galleryComponents/scanCard.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/scanCard.vue
similarity index 100%
rename from openflexure_microscope/api/static/src/components/viewComponents/galleryComponents/scanCard.vue
rename to openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/scanCard.vue
diff --git a/openflexure_microscope/api/static/src/components/viewComponents/galleryComponents/zipDownloader.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/zipDownloader.vue
similarity index 100%
rename from openflexure_microscope/api/static/src/components/viewComponents/galleryComponents/zipDownloader.vue
rename to openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/zipDownloader.vue
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryContent.vue
index c7454cff..9c128f55 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryContent.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryContent.vue
@@ -1,19 +1,412 @@
 <template>
-  <!-- Grid managing tab content -->
+  <div class="galleryDisplay uk-padding uk-padding-remove-top">
+    <!-- Gallery nav bar -->
+    <nav
+      class="gallery-navbar uk-navbar-container uk-navbar-transparent"
+      uk-navbar="mode: click"
+    >
+      <!-- Left side controls -->
+      <div
+        class="uk-navbar-left uk-padding-remove-top uk-padding-remove-bottom"
+      >
+        <ul class="uk-navbar-nav">
+          <li :class="[sortDescending ? 'uk-active' : '']">
+            <a class="uk-icon" href="#" @click="sortDescending = true">
+              <i class="material-icons">keyboard_arrow_down</i>
+            </a>
+          </li>
+          <li :class="[!sortDescending ? 'uk-active' : '']">
+            <a class="uk-icon" href="#" @click="sortDescending = false">
+              <i class="material-icons">keyboard_arrow_up</i>
+            </a>
+          </li>
+          <li>
+            <a href="#">Filter</a>
+            <div
+              :class="{
+                'uk-light uk-background-secondary':
+                  $store.state.globalSettings.darkMode
+              }"
+              class="uk-navbar-dropdown"
+            >
+              <ul class="uk-nav uk-navbar-dropdown-nav">
+                <form class="uk-form-stacked">
+                  <div
+                    v-for="tag in allTags"
+                    :key="tag"
+                    class="uk-margin-small"
+                  >
+                    <label>
+                      <input
+                        :id="tag"
+                        v-model="checkedTags"
+                        :value="tag"
+                        checked
+                        class="uk-checkbox"
+                        type="checkbox"
+                      />
+                      {{ tag }}
+                    </label>
+                  </div>
+                </form>
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </div>
 
-  <div class="view-component uk-height-1-1 uk-width-expand">
-    <galleryDisplay />
+      <!-- Right side buttons -->
+      <div class="uk-navbar-right">
+        <div class="uk-grid">
+          <div>
+            <button
+              class="uk-button uk-button-default uk-width-1-1"
+              type="button"
+              @click="updateCaptures()"
+            >
+              Refresh Captures
+            </button>
+          </div>
+          <div>
+            <ZipDownloader :capture-ids="Object.keys(filteredCaptures)" />
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Gallery -->
+    <div
+      v-if="$store.getters.ready"
+      class="uk-padding-remove-top"
+      uk-lightbox="toggle: .lightbox-link"
+    >
+      <!-- Folder heading -->
+      <div
+        v-if="galleryFolder"
+        class="gallery-folder-heading uk-flex uk-flex-middle"
+      >
+        <a
+          class="uk-icon uk-margin-remove"
+          href="#"
+          @click="galleryFolder = ''"
+        >
+          <i class="material-icons">arrow_back</i>
+        </a>
+        <div class="uk-margin-left">
+          <h3 class="uk-margin-remove uk-margin-left">
+            <b>SCAN</b>
+            {{ allScans[galleryFolder].metadata.image.name }}
+          </h3>
+        </div>
+      </div>
+
+      <!-- Gallery capture cards -->
+      <div class="gallery-grid">
+        <div v-for="item in sortedItems" :key="item.metadata.id">
+          <scanCard
+            v-if="'isScan' in item"
+            :captures="item.captures"
+            :metadata="item.metadata"
+            :thumbnail="item.thumbnail"
+          />
+          <captureCard v-else :capture-state="item" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import galleryDisplay from "../viewComponents/galleryDisplay.vue";
+import axios from "axios";
+import captureCard from "./galleryComponents/captureCard.vue";
+import scanCard from "./galleryComponents/scanCard.vue";
 
+import ZipDownloader from "./galleryComponents/zipDownloader";
+
+// Export main app
 export default {
-  name: "NavigateContent",
+  name: "GalleryDisplay",
 
   components: {
-    galleryDisplay
+    captureCard,
+    scanCard,
+    ZipDownloader
+  },
+
+  data: function() {
+    return {
+      captures: [],
+      checkedTags: [],
+      sortDescending: true,
+      galleryFolder: "",
+      scanTag: "scan",
+      unwatchStoreFunction: null
+    };
+  },
+
+  computed: {
+    capturesUri: function() {
+      return `${this.$store.getters.baseUri}/api/v2/captures`;
+    },
+    allTags: function() {
+      // Return an array of unique tags across all captures
+      var tags = [];
+      for (var capture of this.captures) {
+        for (var tag of capture.metadata.image.tags) {
+          if (!tags.includes(tag)) {
+            tags.push(tag);
+          }
+        }
+      }
+      return tags.sort();
+    },
+
+    noScanCaptures: function() {
+      // List of captures that are not part of a scan
+      var captures = [];
+      for (var capture of this.captures) {
+        // Add to capture list if matched
+        if (!capture.metadata.dataset) {
+          captures.push(capture);
+        }
+      }
+
+      return captures;
+    },
+
+    allScans: function() {
+      // List of scans as capture-like objects
+      var scans = {};
+
+      for (var capture of this.captures) {
+        var annotations = capture.metadata.image.annotations;
+        var tags = capture.metadata.image.tags;
+        var dataset = capture.metadata.dataset;
+
+        if (dataset) {
+          var id = dataset["id"];
+
+          // If this scan ID hasn't been seen before
+          if (!(id in scans)) {
+            scans[id] = {};
+            scans[id].isScan = true;
+            scans[id].captures = [];
+            scans[id].metadata = {
+              image: {
+                name: dataset.name,
+                acquisitionDate: dataset.acquisitionDate,
+                id: dataset.id,
+                tags: [],
+                annotations: {}
+              },
+              type: dataset.type
+            };
+          }
+
+          // Add the capture object to the scan
+          scans[id].captures.push(capture);
+
+          // Add missing scan metadata, prioritising first capture
+          for (var key of Object.keys(annotations)) {
+            if (!(key in scans[id].metadata.image.annotations)) {
+              scans[id].metadata.image.annotations[key] = annotations[key];
+            }
+          }
+
+          // Append missing tags
+          for (var tag of tags) {
+            if (!scans[id].metadata.image.tags.includes(tag)) {
+              scans[id].metadata.image.tags.push(tag);
+            }
+          }
+
+          // Create a preview thumbnail
+          if (!("thumbnail" in scans[id])) {
+            scans[
+              id
+            ].thumbnail = `${capture.links.download.href}?thumbnail=true`;
+          }
+        }
+      }
+      return scans;
+    },
+
+    scanList: function() {
+      // List of scans, obtained from this.allScans values
+      return Object.values(this.allScans);
+    },
+
+    itemList: function() {
+      // Get list of current items to show
+      // If galleryFolder (ie inside a scan folder), show scan captures
+      // Otherwise, show root captures and scan cards
+      if (this.galleryFolder) {
+        console.log(this.allScans[this.galleryFolder].captures);
+        return this.allScans[this.galleryFolder].captures;
+      } else {
+        return this.noScanCaptures.concat(this.scanList);
+      }
+    },
+
+    filteredItems: function() {
+      // Filter itemList by checkedTags
+      return this.filterCaptures(this.itemList, this.checkedTags);
+    },
+
+    filteredCaptures: function() {
+      var captures = {};
+
+      for (var item of this.filteredItems) {
+        // If it's a dataset
+        if ("captures" in item) {
+          for (var capture of item.captures) {
+            // Get the ID of each capture in the set
+            captures[capture.metadata.image.id] = capture;
+          }
+        } else {
+          // If it's a single capture, get the ID of the capture
+          captures[item.metadata.image.id] = item;
+        }
+      }
+
+      return captures;
+    },
+
+    sortedItems: function() {
+      // Sort filteredItems using sortCaptures function
+      return this.sortCaptures(this.filteredItems);
+    }
+  },
+
+  mounted() {
+    // Update on mount (does nothing if not connected)
+    this.updateCaptures();
+    // A global signal listener to perform a gallery refresh
+    this.$root.$on("globalUpdateCaptures", () => {
+      this.updateCaptures();
+    });
+    // A global signal listener to set the gallery folder
+    this.$root.$on("globalUpdateCaptureFolder", folder => {
+      this.galleryFolder = folder;
+    });
+  },
+
+  created: function() {
+    // Watch for host 'ready', then update status
+    this.unwatchStoreFunction = this.$store.watch(
+      (state, getters) => {
+        return getters.ready;
+      },
+      ready => {
+        if (ready) {
+          // If the connection is now ready, update capture list
+          this.updateCaptures();
+        } else {
+          // If the connection is now disconnected, empty capture list
+          this.captures = {};
+        }
+      }
+    );
+  },
+
+  beforeDestroy() {
+    // Remove global signal listener to perform a gallery refresh
+    this.$root.$off("globalUpdateCaptures");
+    // Remove global signal listener to set the gallery folder
+    this.$root.$off("globalUpdateCaptureFolder");
+    // Then we call that function here to unwatch
+    if (this.unwatchStoreFunction) {
+      this.unwatchStoreFunction();
+      this.unwatchStoreFunction = null;
+    }
+  },
+
+  methods: {
+    updateCaptures: function() {
+      if (this.$store.state.available) {
+        console.log("Updating capture list...");
+        axios
+          .get(this.capturesUri)
+          .then(response => {
+            this.captures = response.data;
+          })
+          .catch(error => {
+            this.modalError(error); // Let mixin handle error
+          });
+      } else {
+        console.log("Delaying capture update until connection is available");
+      }
+    },
+
+    filterCaptures: function(list, filterTags) {
+      // Filter a list of captures by an array of tags
+      var result = [];
+      for (var capture of list) {
+        // Assume exclusion
+        var includeCapture = false;
+
+        // Filter by selected tags
+        var tags = capture.metadata.image.tags;
+        let checker = (arr, target) => target.every(v => arr.includes(v));
+        // True if all tags match
+        includeCapture = checker(tags, filterTags);
+
+        // Add to capture list if matched
+        if (includeCapture == true) {
+          result.push(capture);
+        }
+      }
+
+      return result;
+    },
+
+    sortCaptures: function(list) {
+      // Sort a list of captures by metadata time
+      function compare(a, b) {
+        if (a.metadata.image.acquisitionDate < b.metadata.image.acquisitionDate)
+          return -1;
+        if (a.metadata.image.acquisitionDate > b.metadata.image.acquisitionDate)
+          return 1;
+        return 0;
+      }
+
+      if (this.sortDescending == true) {
+        return list.sort(compare).reverse();
+      } else {
+        return list.sort(compare);
+      }
+    }
   }
 };
 </script>
+
+<style lang="less" scoped>
+.gallery-navbar {
+  border-width: 0 0 1px 0;
+  border-style: solid;
+  border-color: rgba(180, 180, 180, 0.25);
+}
+
+.gallery-navbar,
+.gallery-folder-heading {
+  margin-bottom: 30px;
+}
+
+.gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 320px);
+  justify-content: center;
+}
+
+.gallery-grid > div {
+  display: inline-block;
+  margin-bottom: 20px;
+}
+
+/deep/ .capture-card {
+  width: 300px;
+  height: 100%; // Used to have all cards in a row match their heights
+  margin-left: auto;
+  margin-right: auto;
+}
+</style>
diff --git a/openflexure_microscope/api/static/src/components/controlComponents/paneNavigate.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
similarity index 99%
rename from openflexure_microscope/api/static/src/components/controlComponents/paneNavigate.vue
rename to openflexure_microscope/api/static/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
index 0810cfe1..d8c53fbc 100644
--- a/openflexure_microscope/api/static/src/components/controlComponents/paneNavigate.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
@@ -158,7 +158,7 @@
 
 <script>
 import axios from "axios";
-import taskSubmitter from "../genericComponents/taskSubmitter";
+import taskSubmitter from "../../genericComponents/taskSubmitter";
 
 // Export main app
 export default {
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/navigateContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/navigateContent.vue
index f29d4c5f..0d0e05d9 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/navigateContent.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/navigateContent.vue
@@ -11,8 +11,8 @@
 </template>
 
 <script>
-import paneNavigate from "../controlComponents/paneNavigate";
-import streamDisplay from "../viewComponents/streamDisplay.vue";
+import paneNavigate from "./navigateComponents/paneNavigate";
+import streamDisplay from "./streamContent.vue";
 
 export default {
   name: "NavigateContent",
diff --git a/openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/CSMSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
similarity index 98%
rename from openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/CSMSettings.vue
rename to openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
index adc6dba5..565278c3 100644
--- a/openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/CSMSettings.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
@@ -10,7 +10,7 @@
 <script>
 import axios from "axios";
 import CSMCalibrationSettings from "./CSMSettingsComponents/CSMCalibrationSettings.vue";
-import miniStreamDisplay from "../miniStreamDisplay.vue";
+import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";
 
 // Export main app
 export default {
diff --git a/openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
similarity index 100%
rename from openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
rename to openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
diff --git a/openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/appSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/appSettings.vue
similarity index 100%
rename from openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/appSettings.vue
rename to openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/appSettings.vue
diff --git a/openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/cameraSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
similarity index 97%
rename from openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/cameraSettings.vue
rename to openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
index 358f7421..06fd99cd 100644
--- a/openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/cameraSettings.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
@@ -69,7 +69,7 @@
 <script>
 import axios from "axios";
 import cameraCalibrationSettings from "./cameraSettingsComponents/cameraCalibrationSettings.vue";
-import miniStreamDisplay from "../miniStreamDisplay.vue";
+import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";
 
 // Export main app
 export default {
diff --git a/openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
similarity index 100%
rename from openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
rename to openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
diff --git a/openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/featuresSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/featuresSettings.vue
similarity index 100%
rename from openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/featuresSettings.vue
rename to openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/featuresSettings.vue
diff --git a/openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/microscopeSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/microscopeSettings.vue
similarity index 100%
rename from openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/microscopeSettings.vue
rename to openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/microscopeSettings.vue
diff --git a/openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/stageSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/stageSettings.vue
similarity index 100%
rename from openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/stageSettings.vue
rename to openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/stageSettings.vue
diff --git a/openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/streamSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/streamSettings.vue
similarity index 100%
rename from openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/streamSettings.vue
rename to openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/streamSettings.vue
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsContent.vue
index d9ad4810..1f1ababb 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsContent.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsContent.vue
@@ -1,20 +1,224 @@
 <template>
   <!-- Grid managing tab content -->
   <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
+    <div class="settings-nav">
+      <ul class="uk-nav uk-nav-default">
+        <li class="uk-nav-header">Application settings</li>
+        <li>
+          <tabIcon
+            id="settings-display-icon"
+            tab-i-d="display"
+            :show-title="false"
+            :show-tooltip="false"
+            :require-connection="false"
+            :current-tab="currentTab"
+            @set-tab="setTab"
+          >
+            Display
+          </tabIcon>
+        </li>
+        <li>
+          <tabIcon
+            id="settings-features-icon"
+            tab-i-d="features"
+            :show-title="false"
+            :show-tooltip="false"
+            :require-connection="false"
+            :current-tab="currentTab"
+            @set-tab="setTab"
+          >
+            Features
+          </tabIcon>
+        </li>
+        <li class="uk-nav-header">Microscope settings</li>
+        <li>
+          <tabIcon
+            id="settings-camera-icon"
+            tab-i-d="camera"
+            :show-title="false"
+            :show-tooltip="false"
+            :require-connection="true"
+            :current-tab="currentTab"
+            @set-tab="setTab"
+          >
+            Camera
+          </tabIcon>
+        </li>
+        <li>
+          <tabIcon
+            id="settings-stage-icon"
+            tab-i-d="stage"
+            :show-title="false"
+            :show-tooltip="false"
+            :require-connection="true"
+            :current-tab="currentTab"
+            @set-tab="setTab"
+          >
+            Stage
+          </tabIcon>
+        </li>
+        <li>
+          <tabIcon
+            id="settings-mapping-icon"
+            tab-i-d="mapping"
+            :show-title="false"
+            :show-tooltip="false"
+            :require-connection="true"
+            :current-tab="currentTab"
+            @set-tab="setTab"
+          >
+            Camera/stage mapping
+          </tabIcon>
+        </li>
+        <li>
+          <tabIcon
+            id="settings-microscope-icon"
+            tab-i-d="microscope"
+            :show-title="false"
+            :show-tooltip="false"
+            :require-connection="true"
+            :current-tab="currentTab"
+            @set-tab="setTab"
+          >
+            General
+          </tabIcon>
+        </li>
+      </ul>
+    </div>
     <div class="view-component uk-width-expand uk-padding-small">
-      <settingsDisplay />
+      <tabContent
+        tab-i-d="display"
+        :require-connection="false"
+        :current-tab="currentTab"
+      >
+        <div class="settings-pane uk-padding-small">
+          <appSettings />
+          <streamSettings />
+        </div>
+      </tabContent>
+
+      <tabContent
+        tab-i-d="features"
+        :require-connection="false"
+        :current-tab="currentTab"
+      >
+        <div class="settings-pane uk-padding-small">
+          <featuresSettings />
+        </div>
+      </tabContent>
+
+      <tabContent
+        tab-i-d="camera"
+        :require-connection="true"
+        :current-tab="currentTab"
+      >
+        <div class="settings-pane uk-padding-small">
+          <cameraSettings />
+        </div>
+      </tabContent>
+
+      <tabContent
+        tab-i-d="stage"
+        :require-connection="true"
+        :current-tab="currentTab"
+      >
+        <div class="settings-pane uk-padding-small">
+          <stageSettings />
+        </div>
+      </tabContent>
+
+      <tabContent
+        tab-i-d="mapping"
+        :require-connection="true"
+        :current-tab="currentTab"
+      >
+        <div class="settings-pane uk-padding-small">
+          <h3>Camera/stage mapping</h3>
+          <p>
+            Camera/stage mapping allows the stage to move relative to the camera
+            view. This enables functions like click-to-move, and more precise
+            tile scans.
+          </p>
+          <CSMSettings />
+        </div>
+      </tabContent>
+
+      <tabContent
+        tab-i-d="microscope"
+        :require-connection="true"
+        :current-tab="currentTab"
+      >
+        <div class="settings-pane uk-padding-small">
+          <h3>Microscope settings</h3>
+          <microscopeSettings />
+        </div>
+      </tabContent>
     </div>
   </div>
 </template>
 
 <script>
-import settingsDisplay from "../viewComponents/settingsDisplay.vue";
+import streamSettings from "./settingsComponents/streamSettings.vue";
+import microscopeSettings from "./settingsComponents/microscopeSettings.vue";
+import cameraSettings from "./settingsComponents/cameraSettings.vue";
+import appSettings from "./settingsComponents/appSettings.vue";
+import featuresSettings from "./settingsComponents/featuresSettings.vue";
+import CSMSettings from "./settingsComponents/CSMSettings.vue";
+import stageSettings from "./settingsComponents/stageSettings.vue";
+// Import generic components
+import tabIcon from "../genericComponents/tabIcon";
+import tabContent from "../genericComponents/tabContent";
 
+// Export main app
 export default {
-  name: "NavigateContent",
+  name: "SettingsContent",
 
   components: {
-    settingsDisplay
+    streamSettings,
+    cameraSettings,
+    stageSettings,
+    microscopeSettings,
+    CSMSettings,
+    appSettings,
+    featuresSettings,
+    tabIcon,
+    tabContent
+  },
+
+  data: function() {
+    return {
+      selected: "display",
+      currentTab: "display"
+    };
+  },
+
+  methods: {
+    setTab: function(event, tab) {
+      if (!(this.currentTab == tab)) {
+        this.currentTab = tab;
+      }
+    }
   }
 };
 </script>
+
+<style lang="less" scoped>
+// Custom UIkit CSS modifications
+@import "../../assets/less/theme.less";
+
+.settings-nav {
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 250px;
+  padding: 10px;
+  background-color: rgba(180, 180, 180, 0.03);
+  border-width: 0 1px 0 0;
+  border-style: solid;
+  border-color: rgba(180, 180, 180, 0.25);
+}
+
+.settings-nav li > a {
+  padding-left: 6px !important;
+  border-radius: @button-border-radius;
+}
+</style>
diff --git a/openflexure_microscope/api/static/src/components/controlComponents/paneSlideScan.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/slideScanComponents/paneSlideScan.vue
similarity index 99%
rename from openflexure_microscope/api/static/src/components/controlComponents/paneSlideScan.vue
rename to openflexure_microscope/api/static/src/components/tabContentComponents/slideScanComponents/paneSlideScan.vue
index 78738a6d..7ce7a0b3 100644
--- a/openflexure_microscope/api/static/src/components/controlComponents/paneSlideScan.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/slideScanComponents/paneSlideScan.vue
@@ -135,7 +135,7 @@
 
 <script>
 import axios from "axios";
-import taskSubmitter from "../genericComponents/taskSubmitter";
+import taskSubmitter from "../../genericComponents/taskSubmitter";
 
 export default {
   components: {
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/slideScanContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/slideScanContent.vue
index c04a6ce7..53f3c3fa 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/slideScanContent.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/slideScanContent.vue
@@ -11,8 +11,8 @@
 </template>
 
 <script>
-import paneSlideScan from "../controlComponents/paneSlideScan";
-import streamDisplay from "../viewComponents/streamDisplay.vue";
+import paneSlideScan from "./slideScanComponents/paneSlideScan";
+import streamDisplay from "./streamContent.vue";
 
 export default {
   name: "SlideScanContent",
diff --git a/openflexure_microscope/api/static/src/components/viewComponents/streamDisplay.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/streamContent.vue
similarity index 100%
rename from openflexure_microscope/api/static/src/components/viewComponents/streamDisplay.vue
rename to openflexure_microscope/api/static/src/components/tabContentComponents/streamContent.vue
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/viewContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/viewContent.vue
index 0eebd4ec..5d7baad8 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/viewContent.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/viewContent.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import streamDisplay from "../viewComponents/streamDisplay.vue";
+import streamDisplay from "./streamContent.vue";
 
 export default {
   name: "ViewContent",
diff --git a/openflexure_microscope/api/static/src/components/viewComponents/connectComponents/hostCard.vue b/openflexure_microscope/api/static/src/components/viewComponents/connectComponents/hostCard.vue
deleted file mode 100644
index ee5ea2d6..00000000
--- a/openflexure_microscope/api/static/src/components/viewComponents/connectComponents/hostCard.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<template>
-  <div
-    class="hostCard uk-card uk-card-default uk-padding-remove uk-width-medium"
-    :class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }"
-  >
-    <div class="uk-card-media-top">
-      <div class="snapshot-container uk-width-1-1 uk-height-auto">
-        <img
-          class="uk-width-1-1"
-          :data-src="snapshotSrc"
-          :src="snapshotSrc"
-          width="300"
-          height="225"
-        />
-        <div
-          v-if="!snapshotAvailable"
-          class="uk-position-cover uk-flex uk-flex-center uk-flex-middle"
-        >
-          Snapshot unavailable
-        </div>
-      </div>
-    </div>
-
-    <div class="uk-card-body uk-padding-small">
-      <div
-        class="uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-flex uk-flex-middle"
-      >
-        <div class="uk-width-expand host-description">
-          <div class="host-description">
-            <b>{{ name }}</b>
-          </div>
-          <div class="host-description">{{ hostname }}:{{ port }}</div>
-        </div>
-        <a
-          v-if="deletable"
-          href="#"
-          class="uk-icon uk-width-auto host-delete"
-          @click="$emit('delete')"
-          ><i class="material-icons">delete</i></a
-        >
-      </div>
-    </div>
-
-    <div class="uk-card-footer uk-padding-small">
-      <button
-        class="uk-button uk-button-default uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1"
-        @click="$emit('connect')"
-      >
-        Connect
-      </button>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from "axios";
-
-// Export main app
-export default {
-  name: "HostCard",
-
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-    hostname: {
-      type: String,
-      required: true
-    },
-    port: {
-      type: Number,
-      required: true
-    },
-    deletable: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-
-  data: function() {
-    return {
-      snapshotRule: "/api/v2/streams/snapshot",
-      snapshotSrc: "",
-      snapshotAvailable: false,
-      polling: null
-    };
-  },
-
-  computed: {
-    routesURL: function() {
-      return `http://${this.hostname}:${this.port}/routes`;
-    },
-    snapshotURL: function() {
-      return `http://${this.hostname}:${this.port}${this.snapshotRule}`;
-    }
-  },
-
-  mounted() {
-    // Try to load the microscope snapshot when mounted
-    this.checkSnapshotAvailable();
-  },
-
-  beforeDestroy() {
-    // Clear the polling timer
-    if (this.polling !== null) {
-      clearInterval(this.polling);
-    }
-  },
-
-  methods: {
-    checkSnapshotAvailable: function() {
-      // Fetches the list of routes from the host, and starts
-      // a snapshot timer if the snapshot route is available
-
-      // Send tag request
-      axios
-        .get(this.routesURL)
-        .then(response => {
-          // If the host has a snapshot route available
-          if (this.snapshotRule in response.data) {
-            // Tell the view that a snapshot is available
-            this.snapshotAvailable = true;
-            // Update the snapshot URL
-            this.updateSnapshotURL();
-            // If not already polling, start polling
-            if (this.polling === null) {
-              this.updateSnapshotPoll();
-            }
-          }
-        })
-        .catch(() => {
-          // Tell the view that a snapshot is not available, and ignore
-          this.snapshotAvailable = false;
-        });
-    },
-
-    updateSnapshotURL: function() {
-      // Set the snapshot image src to the snapshot URL,
-      // adding a timestamp argument to act as a cache-breaker
-      this.snapshotSrc = `${this.snapshotURL}?${Date.now()}`;
-    },
-
-    updateSnapshotPoll: function() {
-      // Start a timer to call updateSnapshotURL periodically
-      this.polling = setInterval(() => {
-        this.updateSnapshotURL();
-      }, 15000);
-    }
-  }
-};
-</script>
-
-<style>
-.host-description {
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.snapshot-container {
-  position: relative;
-}
-
-img[data-src][src*="data:image"] {
-  background: rgba(127, 127, 127, 0.1);
-}
-</style>
diff --git a/openflexure_microscope/api/static/src/components/viewComponents/galleryDisplay.vue b/openflexure_microscope/api/static/src/components/viewComponents/galleryDisplay.vue
deleted file mode 100644
index c33407d8..00000000
--- a/openflexure_microscope/api/static/src/components/viewComponents/galleryDisplay.vue
+++ /dev/null
@@ -1,409 +0,0 @@
-<template>
-  <div class="galleryDisplay uk-padding uk-padding-remove-top">
-    <!-- Gallery nav bar -->
-    <nav
-      class="gallery-navbar uk-navbar-container uk-navbar-transparent"
-      uk-navbar="mode: click"
-    >
-      <!-- Left side controls -->
-      <div
-        class="uk-navbar-left uk-padding-remove-top uk-padding-remove-bottom"
-      >
-        <ul class="uk-navbar-nav">
-          <li :class="[sortDescending ? 'uk-active' : '']">
-            <a class="uk-icon" href="#" @click="sortDescending = true">
-              <i class="material-icons">keyboard_arrow_down</i>
-            </a>
-          </li>
-          <li :class="[!sortDescending ? 'uk-active' : '']">
-            <a class="uk-icon" href="#" @click="sortDescending = false">
-              <i class="material-icons">keyboard_arrow_up</i>
-            </a>
-          </li>
-          <li>
-            <a href="#">Filter</a>
-            <div
-              class="uk-navbar-dropdown"
-              :class="{
-                'uk-light uk-background-secondary':
-                  $store.state.globalSettings.darkMode
-              }"
-            >
-              <ul class="uk-nav uk-navbar-dropdown-nav">
-                <form class="uk-form-stacked">
-                  <div
-                    v-for="tag in allTags"
-                    :key="tag"
-                    class="uk-margin-small"
-                  >
-                    <label>
-                      <input
-                        :id="tag"
-                        v-model="checkedTags"
-                        class="uk-checkbox"
-                        type="checkbox"
-                        :value="tag"
-                        checked
-                      />
-                      {{ tag }}
-                    </label>
-                  </div>
-                </form>
-              </ul>
-            </div>
-          </li>
-        </ul>
-      </div>
-
-      <!-- Right side buttons -->
-      <div class="uk-navbar-right">
-        <div class="uk-grid">
-          <div>
-            <button
-              type="button"
-              class="uk-button uk-button-default uk-width-1-1"
-              @click="updateCaptures()"
-            >
-              Refresh Captures
-            </button>
-          </div>
-          <div>
-            <ZipDownloader :capture-ids="Object.keys(filteredCaptures)" />
-          </div>
-        </div>
-      </div>
-    </nav>
-
-    <!-- Gallery -->
-    <div
-      v-if="$store.getters.ready"
-      class="uk-padding-remove-top"
-      uk-lightbox="toggle: .lightbox-link"
-    >
-      <!-- Folder heading -->
-      <div
-        v-if="galleryFolder"
-        class="gallery-folder-heading uk-flex uk-flex-middle"
-      >
-        <a
-          href="#"
-          class="uk-icon uk-margin-remove"
-          @click="galleryFolder = ''"
-        >
-          <i class="material-icons">arrow_back</i>
-        </a>
-        <div class="uk-margin-left">
-          <h3 class="uk-margin-remove uk-margin-left">
-            <b>SCAN</b>
-            {{ allScans[galleryFolder].metadata.image.name }}
-          </h3>
-        </div>
-      </div>
-
-      <!-- Gallery capture cards -->
-      <div class="gallery-grid">
-        <div v-for="item in sortedItems" :key="item.metadata.id">
-          <scanCard
-            v-if="'isScan' in item"
-            :metadata="item.metadata"
-            :thumbnail="item.thumbnail"
-            :captures="item.captures"
-          />
-          <captureCard v-else :capture-state="item" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from "axios";
-import captureCard from "./galleryComponents/captureCard.vue";
-import scanCard from "./galleryComponents/scanCard.vue";
-
-import ZipDownloader from "./galleryComponents/zipDownloader";
-
-// Export main app
-export default {
-  name: "GalleryDisplay",
-
-  components: {
-    captureCard,
-    scanCard,
-    ZipDownloader
-  },
-
-  data: function() {
-    return {
-      captures: [],
-      checkedTags: [],
-      sortDescending: true,
-      galleryFolder: "",
-      scanTag: "scan",
-      unwatchStoreFunction: null
-    };
-  },
-
-  computed: {
-    capturesUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/captures`;
-    },
-    allTags: function() {
-      // Return an array of unique tags across all captures
-      var tags = [];
-      for (var capture of this.captures) {
-        for (var tag of capture.metadata.image.tags) {
-          if (!tags.includes(tag)) {
-            tags.push(tag);
-          }
-        }
-      }
-      return tags.sort();
-    },
-
-    noScanCaptures: function() {
-      // List of captures that are not part of a scan
-      var captures = [];
-      for (var capture of this.captures) {
-        // Add to capture list if matched
-        if (!capture.metadata.dataset) {
-          captures.push(capture);
-        }
-      }
-
-      return captures;
-    },
-
-    allScans: function() {
-      // List of scans as capture-like objects
-      var scans = {};
-
-      for (var capture of this.captures) {
-        var annotations = capture.metadata.image.annotations;
-        var tags = capture.metadata.image.tags;
-        var dataset = capture.metadata.dataset;
-
-        if (dataset) {
-          var id = dataset["id"];
-
-          // If this scan ID hasn't been seen before
-          if (!(id in scans)) {
-            scans[id] = {};
-            scans[id].isScan = true;
-            scans[id].captures = [];
-            scans[id].metadata = {
-              image: {
-                name: dataset.name,
-                acquisitionDate: dataset.acquisitionDate,
-                id: dataset.id,
-                tags: [],
-                annotations: {}
-              },
-              type: dataset.type
-            };
-          }
-
-          // Add the capture object to the scan
-          scans[id].captures.push(capture);
-
-          // Add missing scan metadata, prioritising first capture
-          for (var key of Object.keys(annotations)) {
-            if (!(key in scans[id].metadata.image.annotations)) {
-              scans[id].metadata.image.annotations[key] = annotations[key];
-            }
-          }
-
-          // Append missing tags
-          for (var tag of tags) {
-            if (!scans[id].metadata.image.tags.includes(tag)) {
-              scans[id].metadata.image.tags.push(tag);
-            }
-          }
-
-          // Create a preview thumbnail
-          if (!("thumbnail" in scans[id])) {
-            scans[
-              id
-            ].thumbnail = `${capture.links.download.href}?thumbnail=true`;
-          }
-        }
-      }
-      return scans;
-    },
-
-    scanList: function() {
-      // List of scans, obtained from this.allScans values
-      return Object.values(this.allScans);
-    },
-
-    itemList: function() {
-      // Get list of current items to show
-      // If galleryFolder (ie inside a scan folder), show scan captures
-      // Otherwise, show root captures and scan cards
-      if (this.galleryFolder) {
-        console.log(this.allScans[this.galleryFolder].captures);
-        return this.allScans[this.galleryFolder].captures;
-      } else {
-        return this.noScanCaptures.concat(this.scanList);
-      }
-    },
-
-    filteredItems: function() {
-      // Filter itemList by checkedTags
-      return this.filterCaptures(this.itemList, this.checkedTags);
-    },
-
-    filteredCaptures: function() {
-      var captures = {};
-
-      for (var item of this.filteredItems) {
-        // If it's a dataset
-        if ("captures" in item) {
-          for (var capture of item.captures) {
-            // Get the ID of each capture in the set
-            captures[capture.metadata.image.id] = capture;
-          }
-        } else {
-          // If it's a single capture, get the ID of the capture
-          captures[item.metadata.image.id] = item;
-        }
-      }
-
-      return captures;
-    },
-
-    sortedItems: function() {
-      // Sort filteredItems using sortCaptures function
-      return this.sortCaptures(this.filteredItems);
-    }
-  },
-
-  mounted() {
-    // Update on mount (does nothing if not connected)
-    this.updateCaptures();
-    // A global signal listener to perform a gallery refresh
-    this.$root.$on("globalUpdateCaptures", () => {
-      this.updateCaptures();
-    });
-    // A global signal listener to set the gallery folder
-    this.$root.$on("globalUpdateCaptureFolder", folder => {
-      this.galleryFolder = folder;
-    });
-  },
-
-  created: function() {
-    // Watch for host 'ready', then update status
-    this.unwatchStoreFunction = this.$store.watch(
-      (state, getters) => {
-        return getters.ready;
-      },
-      ready => {
-        if (ready) {
-          // If the connection is now ready, update capture list
-          this.updateCaptures();
-        } else {
-          // If the connection is now disconnected, empty capture list
-          this.captures = {};
-        }
-      }
-    );
-  },
-
-  beforeDestroy() {
-    // Remove global signal listener to perform a gallery refresh
-    this.$root.$off("globalUpdateCaptures");
-    // Remove global signal listener to set the gallery folder
-    this.$root.$off("globalUpdateCaptureFolder");
-    // Then we call that function here to unwatch
-    if (this.unwatchStoreFunction) {
-      this.unwatchStoreFunction();
-      this.unwatchStoreFunction = null;
-    }
-  },
-
-  methods: {
-    updateCaptures: function() {
-      if (this.$store.state.available) {
-        console.log("Updating capture list...");
-        axios
-          .get(this.capturesUri)
-          .then(response => {
-            this.captures = response.data;
-          })
-          .catch(error => {
-            this.modalError(error); // Let mixin handle error
-          });
-      } else {
-        console.log("Delaying capture update until connection is available");
-      }
-    },
-
-    filterCaptures: function(list, filterTags) {
-      // Filter a list of captures by an array of tags
-      var result = [];
-      for (var capture of list) {
-        // Assume exclusion
-        var includeCapture = false;
-
-        // Filter by selected tags
-        var tags = capture.metadata.image.tags;
-        let checker = (arr, target) => target.every(v => arr.includes(v));
-        // True if all tags match
-        includeCapture = checker(tags, filterTags);
-
-        // Add to capture list if matched
-        if (includeCapture == true) {
-          result.push(capture);
-        }
-      }
-
-      return result;
-    },
-
-    sortCaptures: function(list) {
-      // Sort a list of captures by metadata time
-      function compare(a, b) {
-        if (a.metadata.image.acquisitionDate < b.metadata.image.acquisitionDate)
-          return -1;
-        if (a.metadata.image.acquisitionDate > b.metadata.image.acquisitionDate)
-          return 1;
-        return 0;
-      }
-
-      if (this.sortDescending == true) {
-        return list.sort(compare).reverse();
-      } else {
-        return list.sort(compare);
-      }
-    }
-  }
-};
-</script>
-
-<style scoped lang="less">
-.gallery-navbar {
-  border-width: 0 0 1px 0;
-  border-style: solid;
-  border-color: rgba(180, 180, 180, 0.25);
-}
-.gallery-navbar,
-.gallery-folder-heading {
-  margin-bottom: 30px;
-}
-.gallery-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 320px);
-  justify-content: center;
-}
-.gallery-grid > div {
-  display: inline-block;
-  margin-bottom: 20px;
-}
-
-/deep/ .capture-card {
-  width: 300px;
-  height: 100%; // Used to have all cards in a row match their heights
-  margin-left: auto;
-  margin-right: auto;
-}
-</style>
diff --git a/openflexure_microscope/api/static/src/components/viewComponents/settingsDisplay.vue b/openflexure_microscope/api/static/src/components/viewComponents/settingsDisplay.vue
deleted file mode 100644
index c78a9729..00000000
--- a/openflexure_microscope/api/static/src/components/viewComponents/settingsDisplay.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<template>
-  <!-- Grid managing tab content -->
-  <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
-    <div class="settings-nav">
-      <ul class="uk-nav uk-nav-default">
-        <li class="uk-nav-header">Application settings</li>
-        <li>
-          <tabIcon
-            id="settings-display-icon"
-            tab-i-d="display"
-            :show-title="false"
-            :show-tooltip="false"
-            :require-connection="false"
-            :current-tab="currentTab"
-            @set-tab="setTab"
-          >
-            Display
-          </tabIcon>
-        </li>
-        <li>
-          <tabIcon
-            id="settings-features-icon"
-            tab-i-d="features"
-            :show-title="false"
-            :show-tooltip="false"
-            :require-connection="false"
-            :current-tab="currentTab"
-            @set-tab="setTab"
-          >
-            Features
-          </tabIcon>
-        </li>
-        <li class="uk-nav-header">Microscope settings</li>
-        <li>
-          <tabIcon
-            id="settings-camera-icon"
-            tab-i-d="camera"
-            :show-title="false"
-            :show-tooltip="false"
-            :require-connection="true"
-            :current-tab="currentTab"
-            @set-tab="setTab"
-          >
-            Camera
-          </tabIcon>
-        </li>
-        <li>
-          <tabIcon
-            id="settings-stage-icon"
-            tab-i-d="stage"
-            :show-title="false"
-            :show-tooltip="false"
-            :require-connection="true"
-            :current-tab="currentTab"
-            @set-tab="setTab"
-          >
-            Stage
-          </tabIcon>
-        </li>
-        <li>
-          <tabIcon
-            id="settings-mapping-icon"
-            tab-i-d="mapping"
-            :show-title="false"
-            :show-tooltip="false"
-            :require-connection="true"
-            :current-tab="currentTab"
-            @set-tab="setTab"
-          >
-            Camera/stage mapping
-          </tabIcon>
-        </li>
-        <li>
-          <tabIcon
-            id="settings-microscope-icon"
-            tab-i-d="microscope"
-            :show-title="false"
-            :show-tooltip="false"
-            :require-connection="true"
-            :current-tab="currentTab"
-            @set-tab="setTab"
-          >
-            General
-          </tabIcon>
-        </li>
-      </ul>
-    </div>
-    <div class="view-component uk-width-expand uk-padding-small">
-      <tabContent
-        tab-i-d="display"
-        :require-connection="false"
-        :current-tab="currentTab"
-      >
-        <div class="settings-pane uk-padding-small">
-          <appSettings />
-          <streamSettings />
-        </div>
-      </tabContent>
-
-      <tabContent
-        tab-i-d="features"
-        :require-connection="false"
-        :current-tab="currentTab"
-      >
-        <div class="settings-pane uk-padding-small">
-          <featuresSettings />
-        </div>
-      </tabContent>
-
-      <tabContent
-        tab-i-d="camera"
-        :require-connection="true"
-        :current-tab="currentTab"
-      >
-        <div class="settings-pane uk-padding-small">
-          <cameraSettings />
-        </div>
-      </tabContent>
-
-      <tabContent
-        tab-i-d="stage"
-        :require-connection="true"
-        :current-tab="currentTab"
-      >
-        <div class="settings-pane uk-padding-small">
-          <stageSettings />
-        </div>
-      </tabContent>
-
-      <tabContent
-        tab-i-d="mapping"
-        :require-connection="true"
-        :current-tab="currentTab"
-      >
-        <div class="settings-pane uk-padding-small">
-          <h3>Camera/stage mapping</h3>
-          <p>
-            Camera/stage mapping allows the stage to move relative to the camera
-            view. This enables functions like click-to-move, and more precise
-            tile scans.
-          </p>
-          <CSMSettings />
-        </div>
-      </tabContent>
-
-      <tabContent
-        tab-i-d="microscope"
-        :require-connection="true"
-        :current-tab="currentTab"
-      >
-        <div class="settings-pane uk-padding-small">
-          <h3>Microscope settings</h3>
-          <microscopeSettings />
-        </div>
-      </tabContent>
-    </div>
-  </div>
-</template>
-
-<script>
-import streamSettings from "./settingsComponents/streamSettings.vue";
-import microscopeSettings from "./settingsComponents/microscopeSettings.vue";
-import cameraSettings from "./settingsComponents/cameraSettings.vue";
-import appSettings from "./settingsComponents/appSettings.vue";
-import featuresSettings from "./settingsComponents/featuresSettings.vue";
-import CSMSettings from "./settingsComponents/CSMSettings.vue";
-import stageSettings from "./settingsComponents/stageSettings.vue";
-// Import generic components
-import tabIcon from "../genericComponents/tabIcon";
-import tabContent from "../genericComponents/tabContent";
-
-// Export main app
-export default {
-  name: "SettingsDisplay",
-
-  components: {
-    streamSettings,
-    cameraSettings,
-    stageSettings,
-    microscopeSettings,
-    CSMSettings,
-    appSettings,
-    featuresSettings,
-    tabIcon,
-    tabContent
-  },
-
-  data: function() {
-    return {
-      selected: "display",
-      currentTab: "display"
-    };
-  },
-
-  methods: {
-    setTab: function(event, tab) {
-      if (!(this.currentTab == tab)) {
-        this.currentTab = tab;
-      }
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-// Custom UIkit CSS modifications
-@import "../../assets/less/theme.less";
-
-.settings-nav {
-  overflow-y: auto;
-  overflow-x: hidden;
-  width: 250px;
-  padding: 10px;
-  background-color: rgba(180, 180, 180, 0.03);
-  border-width: 0 1px 0 0;
-  border-style: solid;
-  border-color: rgba(180, 180, 180, 0.25);
-}
-
-.settings-nav li > a {
-  padding-left: 6px !important;
-  border-radius: @button-border-radius;
-}
-</style>

From 89b1f9dac9dda076a36aebce62d5d1306402338c Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 27 Oct 2020 16:36:30 +0000
Subject: [PATCH 6/9] Fixed incorrect import

---
 .../src/components/tabContentComponents/extensionContent.vue  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/extensionContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/extensionContent.vue
index 10a8931f..28a72c07 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/extensionContent.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/extensionContent.vue
@@ -39,8 +39,8 @@
 import JsonForm from "../pluginComponents/JsonForm";
 import WebComponentLoader from "../pluginComponents/WebComponentLoader";
 import streamDisplay from "./streamContent.vue";
-import galleryDisplay from "../tabContentComponents/galleryContent.vue";
-import settingsDisplay from "../tabContentComponents/settingsContent.vue";
+import galleryContent from "../tabContentComponents/galleryContent.vue";
+import settingsContent from "../tabContentComponents/settingsContent.vue";
 
 export default {
   name: "ExtensionContent",

From e3a45b84d8bb8b343b63915298d71e7493e1bd67 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 27 Oct 2020 16:36:40 +0000
Subject: [PATCH 7/9] Fixed gallery overflow

---
 openflexure_microscope/api/static/src/components/appContent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/openflexure_microscope/api/static/src/components/appContent.vue b/openflexure_microscope/api/static/src/components/appContent.vue
index 122adca7..3fa5e57f 100644
--- a/openflexure_microscope/api/static/src/components/appContent.vue
+++ b/openflexure_microscope/api/static/src/components/appContent.vue
@@ -349,7 +349,7 @@ export default {
 }
 
 #container-left {
-  overflow: hidden;
+  overflow: auto;
   background-color: rgba(180, 180, 180, 0.025);
   width: 100%;
   height: 100%;

From e1cca30deb4cf6059b276377ef43e3178bbc7609 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 27 Oct 2020 16:37:11 +0000
Subject: [PATCH 8/9] Added pagination to gallery

---
 .../api/static/package-lock.json              | 202 +++++++++---------
 .../api/static/package.json                   |   1 +
 .../galleryComponents/captureCard.vue         |   5 +-
 .../galleryComponents/scanCard.vue            |  58 +++--
 .../tabContentComponents/galleryContent.vue   |  63 ++++--
 5 files changed, 177 insertions(+), 152 deletions(-)

diff --git a/openflexure_microscope/api/static/package-lock.json b/openflexure_microscope/api/static/package-lock.json
index 0d939672..459ca460 100644
--- a/openflexure_microscope/api/static/package-lock.json
+++ b/openflexure_microscope/api/static/package-lock.json
@@ -2828,16 +2828,6 @@
           "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
         "browserslist": {
           "version": "4.14.3",
           "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.3.tgz",
@@ -2882,36 +2872,12 @@
           "integrity": "sha512-ziNcheTGTHlu9g34EVoHQdIu5g4foc8EsxMGC7Xkokmvw0dqNtX8BS8RgCgFBaAiSp2IdjvBxNdh0ssib28eVQ==",
           "dev": true
         },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
         "electron-to-chromium": {
           "version": "1.3.570",
           "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.570.tgz",
           "integrity": "sha512-Y6OCoVQgFQBP5py6A/06+yWxUZHDlNr/gNDGatjH8AZqXl8X0tE4LfjLJsXGz/JmWJz8a6K7bR1k+QzZ+k//fg==",
           "dev": true
         },
-        "emojis-list": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-          "dev": true,
-          "optional": true
-        },
         "fast-deep-equal": {
           "version": "3.1.3",
           "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2945,35 +2911,6 @@
           "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
           "dev": true
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "json5": {
-          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
-          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "minimist": "^1.2.5"
-          }
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -3116,16 +3053,6 @@
             "ansi-regex": "^5.0.0"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -3152,31 +3079,6 @@
             "psl": "^1.1.28",
             "punycode": "^2.1.1"
           }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.0.0-beta.8",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
-          "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          },
-          "dependencies": {
-            "chalk": {
-              "version": "4.1.0",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-              "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "ansi-styles": "^4.1.0",
-                "supports-color": "^7.1.0"
-              }
-            }
-          }
         }
       }
     },
@@ -13389,6 +13291,104 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.0.0-beta.9",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.9.tgz",
+      "integrity": "sha512-mu9pg6554GbXDSO8LlxkQM6qUJzUkb/A0FJc9LgRqnU9MCnhzEXwCt1Zx5NObvFpzs2mH2dH/uUCDwL8Qaz9sA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "emojis-list": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "json5": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
+          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-observe-visibility": {
       "version": "0.4.6",
       "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
@@ -13446,6 +13446,12 @@
         "vue": "^2.6.10"
       }
     },
+    "vuejs-paginate": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/vuejs-paginate/-/vuejs-paginate-2.1.0.tgz",
+      "integrity": "sha512-gnwyXlmCiDOu9MLWxN5UJ4PGijKGNOMpHG8ujsrynCzTJljn/rp7Jq0WiDGDAMi5/u0AHuYIHhced+tUW4jblA==",
+      "dev": true
+    },
     "vuex": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.5.1.tgz",
diff --git a/openflexure_microscope/api/static/package.json b/openflexure_microscope/api/static/package.json
index 09c2e756..0ab3d092 100644
--- a/openflexure_microscope/api/static/package.json
+++ b/openflexure_microscope/api/static/package.json
@@ -36,6 +36,7 @@
     "vue-plugin-load-script": "^1.3.2",
     "vue-template-compiler": "^2.6.12",
     "vue-tour": "^1.5.0",
+    "vuejs-paginate": "^2.1.0",
     "vuex": "^3.5.1"
   },
   "postcss": {
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue
index be3ccfdb..42730f07 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue
@@ -212,8 +212,9 @@ export default {
   },
 
   created: function() {
-    this.getTagRequest();
-    this.getAnnotationsRequest();
+    // Get initial metadata from prop
+    this.tags = this.captureState.metadata.image.tags;
+    this.annotations = this.captureState.metadata.annotations;
   },
 
   methods: {
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/scanCard.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/scanCard.vue
index 7432709f..163f2861 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/scanCard.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/scanCard.vue
@@ -6,12 +6,12 @@
       <a href="#">
         <img
           class="uk-width-1-1"
-          :data-src="thumbnail"
-          :alt="metadata.image.id"
+          :data-src="scanState.thumbnail"
+          :alt="scanState.metadata.image.id"
           width="300"
           height="225"
           uk-img
-          @click="$root.$emit('globalUpdateCaptureFolder', metadata.image.id)"
+          @click="onClick"
         />
       </a>
     </div>
@@ -22,7 +22,8 @@
         uk-grid
       >
         <div class="uk-margin-remove-top uk-padding-remove uk-width-expand">
-          <b>{{ metadata.type || "Dataset" }}: </b> {{ metadata.image.name }}
+          <b>{{ scanState.metadata.type || "Dataset" }}: </b>
+          {{ scanState.metadata.image.name }}
         </div>
         <div class="uk-margin-remove-top uk-padding-remove uk-width-auto">
           <a href="#" class="uk-icon" @click="delAllConfirm()">
@@ -34,7 +35,7 @@
       <div
         class="uk-text-meta uk-margin-remove-top uk-padding-remove uk-width-expand"
       >
-        <time>{{ metadata.image.acquisitionDate }}</time>
+        <time>{{ scanState.metadata.image.acquisitionDate }}</time>
       </div>
       <div
         class="uk-text-meta uk-margin-remove-top uk-padding-remove uk-width-auto"
@@ -45,7 +46,7 @@
 
     <div class="uk-card-footer uk-padding-small">
       <span
-        v-for="tag in metadata.image.tags"
+        v-for="tag in scanState.metadata.image.tags"
         :key="tag"
         class="uk-label uk-margin-small-right deletable-label"
       >
@@ -56,13 +57,16 @@
     <div :id="metadataModalID" uk-modal>
       <div class="uk-modal-dialog uk-modal-body">
         <button class="uk-modal-close-default" type="button" uk-close></button>
-        <h2 class="uk-modal-title">{{ metadata.image.name }}</h2>
-        <p><b>Time: </b>{{ metadata.image.acquisitionDate }}</p>
-        <p><b>ID: </b>{{ metadata.image.id }}</p>
+        <h2 class="uk-modal-title">{{ scanState.metadata.image.name }}</h2>
+        <p><b>Time: </b>{{ scanState.metadata.image.acquisitionDate }}</p>
+        <p><b>ID: </b>{{ scanState.metadata.image.id }}</p>
 
         <hr />
 
-        <div v-for="(value, key) in metadata.image.annotations" :key="key">
+        <div
+          v-for="(value, key) in scanState.metadata.image.annotations"
+          :key="key"
+        >
           <p>
             <b>{{ key }}: </b>{{ value }}
           </p>
@@ -80,17 +84,9 @@ export default {
   name: "ScanCard",
 
   props: {
-    metadata: {
+    scanState: {
       type: Object,
       required: true
-    },
-    thumbnail: {
-      type: String,
-      required: true
-    },
-    captures: {
-      type: Array,
-      required: true
     }
   },
 
@@ -109,7 +105,7 @@ export default {
     },
     allURLs: function() {
       var urls = [];
-      for (var capture of this.captures) {
+      for (var capture of this.scanState.captures) {
         urls.push(capture.links.self.href);
       }
       return urls;
@@ -117,8 +113,12 @@ export default {
   },
 
   methods: {
+    onClick: function() {
+      this.$emit("selectFolder", this.scanState.metadata.image.id);
+    },
+
     makeModalName: function(prefix) {
-      return prefix + this.metadata.image.id;
+      return prefix + this.scanState.metadata.image.id;
     },
 
     delAllConfirm: function() {
@@ -131,18 +131,10 @@ export default {
     },
 
     deleteAll: function() {
-      axios
-        .all(this.allURLs.map(l => axios.delete(l)))
-        .then
-        //axios.spread(function(...res) {
-        // all requests are now complete
-        //console.log(res);
-        //})
-        ()
-        .then(() => {
-          // Emit signal to update capture list
-          this.$root.$emit("globalUpdateCaptures");
-        });
+      axios.all(this.allURLs.map(l => axios.delete(l))).then(() => {
+        // Emit signal to update capture list
+        this.$root.$emit("globalUpdateCaptures");
+      });
     }
   }
 };
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryContent.vue
index 9c128f55..5e4269cb 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryContent.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryContent.vue
@@ -85,11 +85,7 @@
         v-if="galleryFolder"
         class="gallery-folder-heading uk-flex uk-flex-middle"
       >
-        <a
-          class="uk-icon uk-margin-remove"
-          href="#"
-          @click="galleryFolder = ''"
-        >
+        <a class="uk-icon uk-margin-remove" href="#" @click="galleryBack()">
           <i class="material-icons">arrow_back</i>
         </a>
         <div class="uk-margin-left">
@@ -102,25 +98,38 @@
 
       <!-- Gallery capture cards -->
       <div class="gallery-grid">
-        <div v-for="item in sortedItems" :key="item.metadata.id">
+        <div v-for="item in pagedItems" :key="item.metadata.id">
           <scanCard
             v-if="'isScan' in item"
-            :captures="item.captures"
-            :metadata="item.metadata"
-            :thumbnail="item.thumbnail"
+            :scan-state="item"
+            @selectFolder="selectFolder"
           />
           <captureCard v-else :capture-state="item" />
         </div>
       </div>
+
+      <Paginate
+        v-model="page"
+        :page-count="numberOfPages"
+        :page-range="3"
+        :margin-pages="1"
+        :container-class="'uk-pagination uk-flex-center'"
+        :prev-text="'Prev'"
+        :next-text="'Next'"
+        :page-class="'page-item'"
+        :disabled-class="'uk-disabled'"
+      >
+      </Paginate>
     </div>
   </div>
 </template>
 
 <script>
 import axios from "axios";
+import Paginate from "vuejs-paginate";
+
 import captureCard from "./galleryComponents/captureCard.vue";
 import scanCard from "./galleryComponents/scanCard.vue";
-
 import ZipDownloader from "./galleryComponents/zipDownloader";
 
 // Export main app
@@ -130,7 +139,8 @@ export default {
   components: {
     captureCard,
     scanCard,
-    ZipDownloader
+    ZipDownloader,
+    Paginate
   },
 
   data: function() {
@@ -140,7 +150,9 @@ export default {
       sortDescending: true,
       galleryFolder: "",
       scanTag: "scan",
-      unwatchStoreFunction: null
+      unwatchStoreFunction: null,
+      maxitems: 10,
+      page: 1
     };
   },
 
@@ -241,7 +253,6 @@ export default {
       // If galleryFolder (ie inside a scan folder), show scan captures
       // Otherwise, show root captures and scan cards
       if (this.galleryFolder) {
-        console.log(this.allScans[this.galleryFolder].captures);
         return this.allScans[this.galleryFolder].captures;
       } else {
         return this.noScanCaptures.concat(this.scanList);
@@ -275,6 +286,15 @@ export default {
     sortedItems: function() {
       // Sort filteredItems using sortCaptures function
       return this.sortCaptures(this.filteredItems);
+    },
+
+    pagedItems: function() {
+      let startIndex = (this.page - 1) * this.maxitems;
+      return this.sortedItems.slice(startIndex, startIndex + this.maxitems);
+    },
+
+    numberOfPages: function() {
+      return Math.floor(this.sortedItems.length / this.maxitems);
     }
   },
 
@@ -285,10 +305,6 @@ export default {
     this.$root.$on("globalUpdateCaptures", () => {
       this.updateCaptures();
     });
-    // A global signal listener to set the gallery folder
-    this.$root.$on("globalUpdateCaptureFolder", folder => {
-      this.galleryFolder = folder;
-    });
   },
 
   created: function() {
@@ -312,8 +328,6 @@ export default {
   beforeDestroy() {
     // Remove global signal listener to perform a gallery refresh
     this.$root.$off("globalUpdateCaptures");
-    // Remove global signal listener to set the gallery folder
-    this.$root.$off("globalUpdateCaptureFolder");
     // Then we call that function here to unwatch
     if (this.unwatchStoreFunction) {
       this.unwatchStoreFunction();
@@ -375,6 +389,16 @@ export default {
       } else {
         return list.sort(compare);
       }
+    },
+
+    galleryBack: function() {
+      this.galleryFolder = "";
+      this.page = 1;
+    },
+
+    selectFolder: function(folderID) {
+      console.log(folderID);
+      this.galleryFolder = folderID;
     }
   }
 };
@@ -396,6 +420,7 @@ export default {
   display: grid;
   grid-template-columns: repeat(auto-fill, 320px);
   justify-content: center;
+  overflow-y: auto;
 }
 
 .gallery-grid > div {

From 81ca64e0d8aa1f83bbc72abb55ccc2028938913a Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 27 Oct 2020 17:05:57 +0000
Subject: [PATCH 9/9] Properly set up ESLint

---
 .../api/static/.eslintrc.js                   |  16 +-
 .../api/static/babel.config.js                |   6 +-
 .../api/static/package-lock.json              | 463 +++++++++++++++++-
 .../api/static/package.json                   |  17 +-
 openflexure_microscope/api/static/src/App.vue |   2 +-
 .../components/fieldComponents/htmlBlock.vue  |   1 +
 .../captureComponents/paneCapture.vue         |   1 -
 .../settingsComponents/featuresSettings.vue   |   8 +-
 8 files changed, 491 insertions(+), 23 deletions(-)

diff --git a/openflexure_microscope/api/static/.eslintrc.js b/openflexure_microscope/api/static/.eslintrc.js
index d1d8c124..e7ec7f8b 100644
--- a/openflexure_microscope/api/static/.eslintrc.js
+++ b/openflexure_microscope/api/static/.eslintrc.js
@@ -1,24 +1,30 @@
-
 module.exports = {
   root: true,
+
   env: {
     node: true
   },
+
   extends: [
     "plugin:vue/recommended",
     "eslint:recommended",
     "prettier/vue",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:vue/essential",
+    "@vue/prettier"
   ],
+
   rules: {
     "vue/component-name-in-template-casing": ["error", "PascalCase"],
-    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
   },
+
   globals: {
     $nuxt: true
   },
+
   parserOptions: {
     parser: "babel-eslint"
   }
-};
\ No newline at end of file
+};
diff --git a/openflexure_microscope/api/static/babel.config.js b/openflexure_microscope/api/static/babel.config.js
index ba179669..3ecebf1a 100644
--- a/openflexure_microscope/api/static/babel.config.js
+++ b/openflexure_microscope/api/static/babel.config.js
@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/app'
-  ]
-}
+  presets: ["@vue/app"]
+};
diff --git a/openflexure_microscope/api/static/package-lock.json b/openflexure_microscope/api/static/package-lock.json
index 459ca460..067019f7 100644
--- a/openflexure_microscope/api/static/package-lock.json
+++ b/openflexure_microscope/api/static/package-lock.json
@@ -2618,6 +2618,101 @@
         "webpack": "^4.0.0"
       }
     },
+    "@vue/cli-plugin-eslint": {
+      "version": "4.5.8",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.5.8.tgz",
+      "integrity": "sha512-1lg3K2D/harXbN4FvRoA1b0X9947H+G4Ql/43rxJY39OqswfK/d1ck438Fo9M4l1+zhBSUNDmcjn7Q2EH6qWmA==",
+      "dev": true,
+      "requires": {
+        "@vue/cli-shared-utils": "^4.5.8",
+        "eslint-loader": "^2.2.1",
+        "globby": "^9.2.0",
+        "inquirer": "^7.1.0",
+        "webpack": "^4.0.0",
+        "yorkie": "^2.0.0"
+      },
+      "dependencies": {
+        "@vue/cli-shared-utils": {
+          "version": "4.5.8",
+          "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.5.8.tgz",
+          "integrity": "sha512-pa6oenhBO/5HeDLRSokiwVN01gROACEDy3ESXWuPmragOREGNmmFKtkPHlqeYavGEX6LFp7f0VK3uMX6UYS5mQ==",
+          "dev": true,
+          "requires": {
+            "@hapi/joi": "^15.0.1",
+            "chalk": "^2.4.2",
+            "execa": "^1.0.0",
+            "launch-editor": "^2.2.1",
+            "lru-cache": "^5.1.1",
+            "node-ipc": "^9.1.1",
+            "open": "^6.3.0",
+            "ora": "^3.4.0",
+            "read-pkg": "^5.1.1",
+            "request": "^2.88.2",
+            "semver": "^6.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+          "dev": true
+        },
+        "request": {
+          "version": "2.88.2",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+          "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+          "dev": true,
+          "requires": {
+            "aws-sign2": "~0.7.0",
+            "aws4": "^1.8.0",
+            "caseless": "~0.12.0",
+            "combined-stream": "~1.0.6",
+            "extend": "~3.0.2",
+            "forever-agent": "~0.6.1",
+            "form-data": "~2.3.2",
+            "har-validator": "~5.1.3",
+            "http-signature": "~1.2.0",
+            "is-typedarray": "~1.0.0",
+            "isstream": "~0.1.2",
+            "json-stringify-safe": "~5.0.1",
+            "mime-types": "~2.1.19",
+            "oauth-sign": "~0.9.0",
+            "performance-now": "^2.1.0",
+            "qs": "~6.5.2",
+            "safe-buffer": "^5.1.2",
+            "tough-cookie": "~2.5.0",
+            "tunnel-agent": "^0.6.0",
+            "uuid": "^3.3.2"
+          }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        },
+        "tough-cookie": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+          "dev": true,
+          "requires": {
+            "psl": "^1.1.28",
+            "punycode": "^2.1.1"
+          }
+        }
+      }
+    },
     "@vue/cli-plugin-router": {
       "version": "4.5.6",
       "resolved": "https://registry.npmjs.org/@vue/cli-plugin-router/-/cli-plugin-router-4.5.6.tgz",
@@ -3157,6 +3252,15 @@
         }
       }
     },
+    "@vue/eslint-config-prettier": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-6.0.0.tgz",
+      "integrity": "sha512-wFQmv45c3ige5EA+ngijq40YpVcIkAy0Lihupnsnd1Dao5CBbPyfCzqtejFLZX1EwH/kCJdpz3t6s+5wd3+KxQ==",
+      "dev": true,
+      "requires": {
+        "eslint-config-prettier": "^6.0.0"
+      }
+    },
     "@vue/preload-webpack-plugin": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
@@ -3436,6 +3540,23 @@
       "integrity": "sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==",
       "dev": true
     },
+    "ansi-escapes": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.1.tgz",
+      "integrity": "sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==",
+      "dev": true,
+      "requires": {
+        "type-fest": "^0.11.0"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.11.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
+          "integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==",
+          "dev": true
+        }
+      }
+    },
     "ansi-html": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@@ -4576,6 +4697,12 @@
         "tslib": "^1.9.0"
       }
     },
+    "ci-info": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-1.6.0.tgz",
+      "integrity": "sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==",
+      "dev": true
+    },
     "cipher-base": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
@@ -6402,6 +6529,19 @@
         }
       }
     },
+    "eslint-loader": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-loader/-/eslint-loader-2.2.1.tgz",
+      "integrity": "sha512-RLgV9hoCVsMLvOxCuNjdqOrUqIj9oJg8hF44vzJaYqsAHuY9G2YAeN3joQ9nxP0p5Th9iFSIpKo+SD8KISxXRg==",
+      "dev": true,
+      "requires": {
+        "loader-fs-cache": "^1.0.0",
+        "loader-utils": "^1.0.2",
+        "object-assign": "^4.0.1",
+        "object-hash": "^1.1.4",
+        "rimraf": "^2.6.1"
+      }
+    },
     "eslint-plugin-prettier": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.4.tgz",
@@ -6833,6 +6973,15 @@
       "integrity": "sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==",
       "dev": true
     },
+    "figures": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
+      "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.5"
+      }
+    },
     "file-entry-cache": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-5.0.1.tgz",
@@ -8344,6 +8493,162 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "inquirer": {
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
+      "integrity": "sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==",
+      "dev": true,
+      "requires": {
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-width": "^3.0.0",
+        "external-editor": "^3.0.3",
+        "figures": "^3.0.0",
+        "lodash": "^4.17.19",
+        "mute-stream": "0.0.8",
+        "run-async": "^2.4.0",
+        "rxjs": "^6.6.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "through": "^2.3.6"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "cli-cursor": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+          "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+          "dev": true,
+          "requires": {
+            "restore-cursor": "^3.1.0"
+          }
+        },
+        "cli-width": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
+          "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
+          "dev": true
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
+        "mimic-fn": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+          "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+          "dev": true
+        },
+        "onetime": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+          "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+          "dev": true,
+          "requires": {
+            "mimic-fn": "^2.1.0"
+          }
+        },
+        "restore-cursor": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+          "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+          "dev": true,
+          "requires": {
+            "onetime": "^5.1.0",
+            "signal-exit": "^3.0.2"
+          }
+        },
+        "run-async": {
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
+          "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
+          "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "internal-ip": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
@@ -8452,6 +8757,15 @@
       "integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==",
       "dev": true
     },
+    "is-ci": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.1.tgz",
+      "integrity": "sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==",
+      "dev": true,
+      "requires": {
+        "ci-info": "^1.5.0"
+      }
+    },
     "is-color-stop": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz",
@@ -8966,6 +9280,57 @@
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
       "dev": true
     },
+    "loader-fs-cache": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz",
+      "integrity": "sha512-ldcgZpjNJj71n+2Mf6yetz+c9bM4xpKtNds4LbqXzU/PTdeAX0g3ytnU1AJMEcTk2Lex4Smpe3Q/eCTsvUBxbA==",
+      "dev": true,
+      "requires": {
+        "find-cache-dir": "^0.1.1",
+        "mkdirp": "^0.5.1"
+      },
+      "dependencies": {
+        "find-cache-dir": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-0.1.1.tgz",
+          "integrity": "sha1-yN765XyKUqinhPnjHFfHQumToLk=",
+          "dev": true,
+          "requires": {
+            "commondir": "^1.0.1",
+            "mkdirp": "^0.5.1",
+            "pkg-dir": "^1.0.0"
+          }
+        },
+        "find-up": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
+          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+          "dev": true,
+          "requires": {
+            "path-exists": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
+          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+          "dev": true,
+          "requires": {
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "pkg-dir": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-1.0.0.tgz",
+          "integrity": "sha1-ektQio1bstYp1EcFb/TpyTFM89Q=",
+          "dev": true,
+          "requires": {
+            "find-up": "^1.0.0"
+          }
+        }
+      }
+    },
     "loader-runner": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
@@ -9475,6 +9840,12 @@
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
       "dev": true
     },
+    "mute-stream": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
+      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
+      "dev": true
+    },
     "mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -9722,6 +10093,12 @@
         }
       }
     },
+    "object-hash": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-1.3.1.tgz",
+      "integrity": "sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==",
+      "dev": true
+    },
     "object-inspect": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.7.0.tgz",
@@ -10891,8 +11268,7 @@
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
       "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "prettier-linter-helpers": {
       "version": "1.0.0",
@@ -11509,6 +11885,15 @@
         "aproba": "^1.1.1"
       }
     },
+    "rxjs": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz",
+      "integrity": "sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==",
+      "dev": true,
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -12415,6 +12800,12 @@
       "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
       "dev": true
     },
+    "strip-indent": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-2.0.0.tgz",
+      "integrity": "sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=",
+      "dev": true
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -14269,6 +14660,74 @@
         "camelcase": "^5.0.0",
         "decamelize": "^1.2.0"
       }
+    },
+    "yorkie": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/yorkie/-/yorkie-2.0.0.tgz",
+      "integrity": "sha512-jcKpkthap6x63MB4TxwCyuIGkV0oYP/YRyuQU5UO0Yz/E/ZAu+653/uov+phdmO54n6BcvFRyyt0RRrWdN2mpw==",
+      "dev": true,
+      "requires": {
+        "execa": "^0.8.0",
+        "is-ci": "^1.0.10",
+        "normalize-path": "^1.0.0",
+        "strip-indent": "^2.0.0"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
+        "execa": {
+          "version": "0.8.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-0.8.0.tgz",
+          "integrity": "sha1-2NdrvBtVIX7RkP1t1J08d07PyNo=",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "^5.0.1",
+            "get-stream": "^3.0.0",
+            "is-stream": "^1.1.0",
+            "npm-run-path": "^2.0.0",
+            "p-finally": "^1.0.0",
+            "signal-exit": "^3.0.0",
+            "strip-eof": "^1.0.0"
+          }
+        },
+        "get-stream": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
+          "dev": true
+        },
+        "lru-cache": {
+          "version": "4.1.5",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+          "dev": true,
+          "requires": {
+            "pseudomap": "^1.0.2",
+            "yallist": "^2.1.2"
+          }
+        },
+        "normalize-path": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-1.0.0.tgz",
+          "integrity": "sha1-MtDkcvkf80VwHBWoMRAY07CpA3k=",
+          "dev": true
+        },
+        "yallist": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
+          "dev": true
+        }
+      }
     }
   }
 }
diff --git a/openflexure_microscope/api/static/package.json b/openflexure_microscope/api/static/package.json
index 0ab3d092..bd24e7cb 100644
--- a/openflexure_microscope/api/static/package.json
+++ b/openflexure_microscope/api/static/package.json
@@ -4,13 +4,11 @@
   "private": true,
   "description": "User client for the OpenFlexure Microscope Server",
   "author": "OpenFlexure <contact@openflexure.org> (https://www.openflexure.org)",
-  "homepage": "https://gitlab.com/openflexure/openflexure-microscope-jsclient",
-  "publisher": "Bath Open Instrumentation Group",
-  "displayName": "OpenFlexure Microscope",
-  "license": "GNU General Public License v3.0 ",
   "scripts": {
+    "serve": "vue-cli-service serve --mode development",
     "build": "vue-cli-service build --mode production",
-    "serve": "vue-cli-service serve --mode development"
+    "lint": "vue-cli-service lint",
+    "prettier": "vue-cli-service lint --fix"
   },
   "dependencies": {
     "material-design-icons": "^3.0.1",
@@ -19,7 +17,9 @@
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.12.1",
+    "@vue/cli-plugin-eslint": "^4.5.8",
     "@vue/cli-service": "^4.5.6",
+    "@vue/eslint-config-prettier": "^6.0.0",
     "axios": "^0.19.2",
     "babel-eslint": "^10.1.0",
     "css-loader": "^3.6.0",
@@ -30,6 +30,7 @@
     "less": "^3.12.2",
     "less-loader": "^5.0.0",
     "mdns-js": "^1.0.3",
+    "prettier": "^1.19.1",
     "uikit": "^3.5.7",
     "vue": "^2.6.12",
     "vue-friendly-iframe": "^0.17.0",
@@ -48,5 +49,9 @@
     "> 1%",
     "last 2 versions",
     "not ie <= 8"
-  ]
+  ],
+  "displayName": "OpenFlexure Microscope",
+  "homepage": "https://gitlab.com/openflexure/openflexure-microscope-jsclient",
+  "license": "GNU General Public License v3.0 ",
+  "publisher": "Bath Open Instrumentation Group"
 }
diff --git a/openflexure_microscope/api/static/src/App.vue b/openflexure_microscope/api/static/src/App.vue
index 9e1a31c1..09ccbb4f 100644
--- a/openflexure_microscope/api/static/src/App.vue
+++ b/openflexure_microscope/api/static/src/App.vue
@@ -45,7 +45,7 @@ import loadingContent from "./components/loadingContent.vue";
 import axios from "axios";
 var Mousetrap = require("mousetrap");
 
-Mousetrap.prototype.stopCallback = function(e, element, combo) {
+Mousetrap.prototype.stopCallback = function(e, element) {
   // if the element has the class "mousetrap" then no need to stop
   if ((" " + element.className + " ").indexOf(" mousetrap ") > -1) {
     return false;
diff --git a/openflexure_microscope/api/static/src/components/fieldComponents/htmlBlock.vue b/openflexure_microscope/api/static/src/components/fieldComponents/htmlBlock.vue
index 812c526f..14dc354d 100644
--- a/openflexure_microscope/api/static/src/components/fieldComponents/htmlBlock.vue
+++ b/openflexure_microscope/api/static/src/components/fieldComponents/htmlBlock.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <!-- eslint-disable-next-line vue/no-v-html -->
     <p v-html="content"></p>
   </div>
 </template>
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/captureComponents/paneCapture.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/captureComponents/paneCapture.vue
index 9d19ff44..ba030908 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/captureComponents/paneCapture.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/captureComponents/paneCapture.vue
@@ -237,7 +237,6 @@
                 <option>Number</option>
               </select>
             </div>
-
           </div>
         </div>
       </li>
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/featuresSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/featuresSettings.vue
index 97e033e7..1d6f298a 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/featuresSettings.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/featuresSettings.vue
@@ -8,11 +8,11 @@
       >
     </p>
     <p class="uk-margin-small uk-width-xlarge">
-      Enabling IHI Slide Scan will add a new tab designed to simplify
-      acquiring blood smear tile scans. </br>
+      Enabling IHI Slide Scan will add a new tab designed to simplify acquiring
+      blood smear tile scans. <br />
       While this may be useful for other applications, it is primarily designed
-      for use in clinics acquiring blood smear samples using a 100x oil-immersion
-      objective, with a Raspberry Pi Camera v2.
+      for use in clinics acquiring blood smear samples using a 100x
+      oil-immersion objective, with a Raspberry Pi Camera v2.
     </p>
   </div>
 </template>