Scan viewer component

webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue

@@ -0,0 +1,171 @@
+<template>
+  <div id="scan-modal" ref="scanModal" style="padding: 10px;" uk-modal>
+    <div
+      class="uk-modal-dialog uk-modal-body"
+      v-if="selectedScan"
+      style="padding: 10px; width: 95%; height: 95%; display: flex; flex-direction: column;"
+    >
+      <h2 class="uk-modal-title" style="flex: 0 0 auto;">
+        {{ selectedScan.name }}
+        <button class="uk-modal-close uk-float-right" type="button">
+          <span class="material-symbols-outlined">close</span>
+        </button>
+        <button class="uk-float-right" type="button" @click="goFullscreen">
+          <span class="material-symbols-outlined">fullscreen</span>
+        </button>
+      </h2>
+
+      <!-- Viewer -->
+      <div
+        v-if="selectedScanDZI"
+        id="viewer_container"
+        class="viewer_container"
+      >
+        <OpenSeadragonViewer
+          id="openseadragon"
+          ref="openseadragon"
+          :src="selectedScanDZI"
+        />
+      </div>
+
+      <!-- Controls -->
+      <div
+        v-if="selectedScanDZI"
+        class="viewer-controls"
+      >
+        <div class="controlsContainer">
+          <label>
+            Brightness
+            <input
+              type="range"
+              min="0.2"
+              max="1.8"
+              step="0.01"
+              v-model.number="brightness"
+              @input="updateViewerFilter"
+            />
+          </label>
+          <label>
+            Contrast
+            <input
+              type="range"
+              min="0.2"
+              max="1.8"
+              step="0.01"
+              v-model.number="contrast"
+              @input="updateViewerFilter"
+            />
+          </label>
+          <label>
+            Saturation
+            <input
+              type="range"
+              min="0"
+              max="2"
+              step="0.01"
+              v-model.number="saturation"
+              @input="updateViewerFilter"
+            />
+          </label>
+        </div>
+
+        <button
+          type="button"
+          class="uk-button uk-button-default"
+          style="margin-top: 0.5rem;"
+          @click="resetFilters"
+        >
+          Reset Filters
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import UIkit from "uikit";
+import OpenSeadragonViewer from "./openSeadragonViewer.vue";
+
+export default {
+  name: "ScanViewerModal",
+  components: { OpenSeadragonViewer },
+  props: {
+    selectedScan: {
+      type: Object,
+      default: null,
+    },
+    baseUri: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      brightness: 1,
+      contrast: 1,
+      saturation: 1,
+    };
+  },
+  computed: {
+    selectedScanDZI() {
+      if (this.selectedScan && this.selectedScan.dzi) {
+        return `${this.baseUri}/scans/${this.selectedScan.name}/images/${this.selectedScan.dzi}`;
+      }
+      return null;
+    },
+  },
+  methods: {
+    show() {
+      UIkit.modal(this.$refs.scanModal).show();
+    },
+    hide() {
+      UIkit.modal(this.$refs.scanModal).hide();
+    },
+    goFullscreen() {
+      this.$refs.openseadragon.openFullscreen();
+    },
+    updateViewerFilter() {
+      const viewer = this.$refs.openseadragon;
+      if (viewer) {
+        viewer.brightness = this.brightness;
+        viewer.contrast = this.contrast;
+        viewer.saturation = this.saturation;
+        viewer.updateFilter();
+      }
+    },
+    resetFilters() {
+      this.brightness = 1;
+      this.contrast = 1;
+      this.saturation = 1;
+      this.updateViewerFilter();
+    },
+  },
+};
+</script>
+
+<style scoped>
+input[type="range"] {
+  pointer-events: auto;
+  z-index: 1001;
+}
+
+.controlsContainer {
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+}
+
+.viewer-controls {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.viewer_container {
+    flex: 1 1 auto;
+    position: relative;
+    overflow: hidden;
+}
+</style>

webapp/src/components/tabContentComponents/scanListContent.vue

@@ -50,97 +50,12 @@
       </div>
     </nav>
 
-    <!-- Modal for scan display -->
+    <ScanViewerModal
-    <div id="scan-modal" ref="scanModal" style="padding: 10px;" uk-modal>
+      ref="scanViewer"
-      <div
+      :selectedScan="selectedScan"
-        class="uk-modal-dialog uk-modal-body"
+      :baseUri="$store.getters.baseUri"
-        v-if="selectedScan"
+    />
-        style="padding: 10px; width: 95%; height: 95%; display: flex; flex-direction: column;"
-      >
-        <h2 class="uk-modal-title" style="flex: 0 0 auto;">
-          {{ selectedScan.name }}
-          <button class="uk-modal-close uk-float-right" type="button">
-            <span class="material-symbols-outlined">close</span>
-          </button>
-          <button class="uk-float-right" type="button" @click="goFullscreen">
-            <span class="material-symbols-outlined">fullscreen</span>
-          </button>
-        </h2>
 
-        <!-- Viewer -->
-        <div
-          v-if="selectedScanDZI"
-          id="viewer_container"
-          style="flex: 1 1 auto; position: relative; overflow: hidden;"
-        >
-          <OpenSeadragonViewer
-            id="openseadragon"
-            ref="openseadragon"
-            :src="selectedScanDZI"
-          />
-        </div>
-
-        <!-- Controls -->
-        <div
-          v-if="selectedScanDZI"
-          class="viewer-controls"
-          style="
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 0.5rem;
-            margin-top: 0.5rem;
-          "
-        >
-          <!-- Brightness/Contrast/Saturation -->
-          <div style="display: flex; justify-content: center; gap: 1.5rem;">
-            <label>
-              Brightness
-              <input
-                type="range"
-                min="0.2"
-                max="1.8"
-                step="0.01"
-                v-model.number="brightness"
-                @input="updateViewerFilter"
-              />
-            </label>
-            <label>
-              Contrast
-              <input
-                type="range"
-                min="0.2"
-                max="1.8"
-                step="0.01"
-                v-model.number="contrast"
-                @input="updateViewerFilter"
-              />
-            </label>
-            <label>
-              Saturation
-              <input
-                type="range"
-                min="0"
-                max="2"
-                step="0.01"
-                v-model.number="saturation"
-                @input="updateViewerFilter"
-              />
-            </label>
-          </div>
-
-          <!-- Reset Button -->
-          <button
-            type="button"
-            class="uk-button uk-button-default"
-            style="margin-top: 0.5rem;"
-            @click="resetFilters"
-          >
-            Reset Filters
-          </button>
-        </div>
-      </div>
-    </div>
 
     <!-- Gallery -->
     <div
@@ -172,15 +87,14 @@
 
 <script>
 import axios from "axios";
-import UIkit from "uikit";
 import actionButton from "../labThingsComponents/actionButton.vue";
 import scanCard from "./scanListComponents/scanCard.vue";
-import OpenSeadragonViewer from "./scanListComponents/openSeadragonViewer.vue";
+import ScanViewerModal from "./scanListComponents/scanViewer.vue";
 
 // Export main app
 export default {
   name: "ScanListContent",
-  components: { actionButton, OpenSeadragonViewer, scanCard },
+  components: { actionButton, scanCard, ScanViewerModal },
 
   data: function() {
     return {
@@ -263,24 +177,6 @@ export default {
         this.updateScans();
       }
     },
-    updateViewerFilter() {
-      const viewer = this.$refs.openseadragon;
-      if (viewer) {
-        viewer.brightness = this.brightness;
-        viewer.contrast = this.contrast;
-        viewer.saturation = this.saturation;
-        viewer.updateFilter();
-      }
-    },
-    resetFilters() {
-      this.brightness = 1;
-      this.contrast = 1;
-      this.saturation = 1;
-      this.updateViewerFilter();
-    },
-    goFullscreen() {
-      this.$refs.openseadragon.openFullscreen();
-    },
     async updateScans() {
       try {
         let scans_information = await this.readThingProperty("smart_scan", "scans");
@@ -320,16 +216,15 @@ export default {
       }
     },
     showScan(scan) {
-      if (scan.dzi){
+      if (scan.dzi) {
         this.selectedScan = scan;
-        UIkit.modal(this.$refs.scanModal).show();
+        this.$refs.scanViewer.show();
+      } else {
+        this.modalError("Scan not stitched for viewing in webapp, please download or stitch");
       }
-      else {
+    },
-        this.modalError(`Scan not stitched for viewing in webapp, please download or stitch`)
-      }
-    }
   }
-};
+}
 </script>
 
 <style lang="less" scoped>