From f5f9dbb596a1850a1f651a9bb122c18f5eeb2563 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Mon, 3 Oct 2022 14:11:13 -0400
Subject: [PATCH] Create a slider to navigate between frames (#607)

---
 web_client/src/components/ControlPanel.vue | 17 +++++++++++++++--
 web_client/src/store/index.ts              |  6 ++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/web_client/src/components/ControlPanel.vue b/web_client/src/components/ControlPanel.vue
index 17302499..0a85cd40 100644
--- a/web_client/src/components/ControlPanel.vue
+++ b/web_client/src/components/ControlPanel.vue
@@ -132,6 +132,9 @@ export default {
           .catch(this.handleNavigationError);
       }
     },
+    slideToFrame(framePosition) {
+      this.navigateToFrame(this.currentViewData.scanFramesList[framePosition - 1]);
+    },
     updateImage() {
       if (this.direction === 'back') {
         this.navigateToFrame(this.previousFrame);
@@ -337,7 +340,8 @@ export default {
                             class="grey--text"
                             style="display:inline"
                           >
-                            {{ currentViewData.scanPositionString }}
+                            ({{ currentViewData.scanPosition }} /
+                            {{ currentViewData.experimentScansList.length }})
                           </p>
                         </div>
                         <div>
@@ -368,9 +372,18 @@ export default {
                             class="grey--text"
                             style="display:inline"
                           >
-                            {{ currentViewData.framePositionString }}
+                            ({{ currentViewData.framePosition }} /
+                            {{ currentViewData.scanFramesList.length }})
                           </p>
                         </div>
+                        <v-slider
+                          :value="currentViewData.framePosition"
+                          ticks="always"
+                          tick-size="4"
+                          :min="1"
+                          :max="currentViewData.scanFramesList.length"
+                          @input="slideToFrame"
+                        />
                         <div>
                           <v-btn
                             :disabled="!previousFrame"
diff --git a/web_client/src/store/index.ts b/web_client/src/store/index.ts
index 04b55d1d..bea7f384 100644
--- a/web_client/src/store/index.ts
+++ b/web_client/src/store/index.ts
@@ -383,8 +383,10 @@ const {
         scanSubject: scan.subjectID,
         scanLink: scan.link,
         scanDecisions: scan.decisions,
-        scanPositionString: `(${experimentScansList.indexOf(scan.id) + 1}/${experimentScansList.length})`,
-        framePositionString: `(${scanFramesList.indexOf(currentFrame.id) + 1}/${scanFramesList.length})`,
+        experimentScansList,
+        scanFramesList,
+        scanPosition: experimentScansList.indexOf(scan.id) + 1,
+        framePosition: scanFramesList.indexOf(currentFrame.id) + 1,
         backTo: currentFrame.previousFrame,
         forwardTo: currentFrame.nextFrame,
         upTo: state.scanFrames[upTo] ? state.scanFrames[upTo][0] : undefined,