From d1c5defcc88c6d2c8e5dcf2245275a26301e15ef Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Fri, 26 Aug 2022 13:08:38 -0400
Subject: [PATCH] Pre-release fixes (#573)

* Import and export implicitly save settings

* Fix recursion error when crosshair click location is undefined

* Use more flex boxes in Control Panel

* Remove border from window widget

* Trigger snackbar via event, not via error
---
 web_client/src/components/ControlPanel.vue    | 149 +++++++-------
 .../src/components/DataImportExport.vue       | 127 ++++++------
 web_client/src/components/ProjectSettings.vue |   4 +-
 web_client/src/components/WindowWidget.vue    | 185 +++++++++---------
 web_client/src/django.ts                      |   1 -
 web_client/src/store/index.ts                 |   2 +-
 web_client/src/views/Frame.vue                |   8 +
 web_client/src/views/Projects.vue             |   6 +
 8 files changed, 248 insertions(+), 234 deletions(-)

diff --git a/web_client/src/components/ControlPanel.vue b/web_client/src/components/ControlPanel.vue
index 8d4b97db..5d303a5c 100644
--- a/web_client/src/components/ControlPanel.vue
+++ b/web_client/src/components/ControlPanel.vue
@@ -323,81 +323,80 @@ export default {
                     fill-height
                     fluid
                   >
-                    <v-row no-gutters>
-                      <v-col cols="2">
-                        Scan:
-                      </v-col>
-                      <v-col
-                        cols="6"
-                        class="grey--text"
-                      >
-                        <div
-                          :class="currentViewData.scanLink ? 'link' : ''"
-                          style="display:inline"
-                          @click="openScanLink"
-                        >
-                          <b>{{ currentViewData.scanName }}</b>
+                    <div
+                      class="d-flex flex-column"
+                      style="width: 100%"
+                    >
+                      <div class="d-flex justify-space-between">
+                        <div>
+                          Scan:
+                          <p
+                            :class="currentViewData.scanLink ? 'link' : 'grey--text'"
+                            style="display:inline"
+                            @click="openScanLink"
+                          >
+                            <b>{{ currentViewData.scanName }}</b>
+                          </p>
+                          <p
+                            class="grey--text"
+                            style="display:inline"
+                          >
+                            {{ currentViewData.scanPositionString }}
+                          </p>
                         </div>
-                        {{ currentViewData.scanPositionString }}
-                      </v-col>
-                      <v-col
-                        cols="4"
-                        class="text-right"
-                      >
-                        <v-btn
-                          :disabled="!currentViewData.upTo"
-                          small
-                          depressed
-                          class="transparent-btn"
-                          @mousedown="handleKeyPress('previous')"
-                        >
-                          <v-icon>fa-caret-up</v-icon>
-                        </v-btn>
-                        <v-btn
-                          :disabled="!currentViewData.downTo"
-                          small
-                          depressed
-                          class="transparent-btn"
-                          @mousedown="handleKeyPress('next')"
-                        >
-                          <v-icon>fa-caret-down</v-icon>
-                        </v-btn>
-                      </v-col>
-                    </v-row>
-                    <v-row no-gutters>
-                      <v-col cols="2">
-                        Frame:
-                      </v-col>
-                      <v-col
-                        cols="6"
-                        class="grey--text"
-                      >
-                        {{ currentViewData.framePositionString }}
-                      </v-col>
-                      <v-col
-                        cols="4"
-                        class="text-right"
-                      >
-                        <v-btn
-                          :disabled="!previousFrame"
-                          small
-                          depressed
-                          class="transparent-btn"
-                          @mousedown="handleKeyPress('back')"
-                        >
-                          <v-icon>fa-caret-left</v-icon>
-                        </v-btn>
-                        <v-btn
-                          :disabled="!nextFrame"
-                          small
-                          depressed
-                          class="transparent-btn"
-                          @mousedown="handleKeyPress('forward')"
-                        >
-                          <v-icon>fa-caret-right</v-icon>
-                        </v-btn>
-                      </v-col>
-                    </v-row>
+                        <div>
+                          <v-btn
+                            :disabled="!currentViewData.upTo"
+                            small
+                            depressed
+                            class="transparent-btn"
+                            @mousedown="handleKeyPress('previous')"
+                          >
+                            <v-icon>fa-caret-up</v-icon>
+                          </v-btn>
+                          <v-btn
+                            :disabled="!currentViewData.downTo"
+                            small
+                            depressed
+                            class="transparent-btn"
+                            @mousedown="handleKeyPress('next')"
+                          >
+                            <v-icon>fa-caret-down</v-icon>
+                          </v-btn>
+                        </div>
+                      </div>
+                      <div class="d-flex justify-space-between">
+                        <div>
+                          Frame:
+                          <p
+                            class="grey--text"
+                            style="display:inline"
+                          >
+                            {{ currentViewData.framePositionString }}
+                          </p>
+                        </div>
+                        <div>
+                          <v-btn
+                            :disabled="!previousFrame"
+                            small
+                            depressed
+                            class="transparent-btn"
+                            @mousedown="handleKeyPress('back')"
+                          >
+                            <v-icon>fa-caret-left</v-icon>
+                          </v-btn>
+                          <v-btn
+                            :disabled="!nextFrame"
+                            small
+                            depressed
+                            class="transparent-btn"
+                            @mousedown="handleKeyPress('forward')"
+                          >
+                            <v-icon>fa-caret-right</v-icon>
+                          </v-btn>
+                        </div>
+                      </div>
+                    </div>
 
                     <window-widget
                       :representation="representation"
@@ -408,7 +407,7 @@ export default {
                       <v-col
                         cols="12"
                         class="grey lighten-4"
-                        style="height: 100px; overflow:auto; margin-bottom: 10px"
+                        style="height: 100px; overflow:auto; margin: 15px 0px"
                       >
                         <ScanDecision
                           v-for="decision in currentViewData.scanDecisions"
diff --git a/web_client/src/components/DataImportExport.vue b/web_client/src/components/DataImportExport.vue
index ab0c3d59..de412c32 100644
--- a/web_client/src/components/DataImportExport.vue
+++ b/web_client/src/components/DataImportExport.vue
@@ -31,71 +31,76 @@ export default defineComponent({
     const exporting = ref(false);
 
     async function importData() {
-      importing.value = true;
-      importErrorText.value = '';
-      importErrors.value = false;
-      try {
-        let response;
-        if (isGlobal.value) {
-          response = await djangoRest.globalImport();
-        } else {
-          response = await djangoRest.projectImport(currentProject.value.id);
-        }
-        importing.value = false;
-        if (response.detail) {
-          importErrors.value = true;
-          importErrorText.value = response.detail;
-          importErrorList.value = response.errors;
-        }
+      this.$emit('save', async () => {
+        importing.value = true;
+        importErrorText.value = '';
+        importErrors.value = false;
+        try {
+          let response;
+          if (isGlobal.value) {
+            response = await djangoRest.globalImport();
+          } else {
+            response = await djangoRest.projectImport(currentProject.value.id);
+          }
+          importing.value = false;
+          if (response.detail) {
+            importErrors.value = true;
+            importErrorText.value = response.detail;
+            importErrorList.value = response.errors;
+          } else {
+            this.$snackbar({
+              text: 'Import finished.',
+              timeout: 6000,
+            });
+          }
 
-        this.$snackbar({
-          text: 'Import finished.',
-          timeout: 6000,
-        });
-
-        if (!isGlobal.value) {
-          await loadProject(currentProject.value);
-        } else {
-          projects.value.forEach(
-            async (project: Project) => {
-              const taskOverview = await djangoRest.projectTaskOverview(project.id);
-              store.commit.setTaskOverview(taskOverview);
-            },
-          );
+          if (!isGlobal.value) {
+            await loadProject(currentProject.value);
+          } else {
+            projects.value.forEach(
+              async (project: Project) => {
+                const taskOverview = await djangoRest.projectTaskOverview(project.id);
+                store.commit.setTaskOverview(taskOverview);
+              },
+            );
+          }
+        } catch (ex) {
+          const text = ex || 'Import failed due to server error.';
+          importErrors.value = true;
+          importErrorText.value = text;
+          importing.value = false;
         }
-      } catch (ex) {
-        const text = ex || 'Import failed due to server error.';
-        importErrors.value = true;
-        importErrorText.value = text;
-        importing.value = false;
-      }
-      importDialog.value = false;
+        importDialog.value = false;
+      });
     }
     async function exportData() {
-      exporting.value = true;
-      try {
-        let response;
-        if (isGlobal.value) {
-          response = await djangoRest.globalExport();
-        } else {
-          response = await djangoRest.projectExport(currentProject.value.id);
-        }
-        if (response.detail) {
+      this.$emit('save', async () => {
+        exporting.value = true;
+        try {
+          let response;
+          if (isGlobal.value) {
+            response = await djangoRest.globalExport();
+          } else {
+            response = await djangoRest.projectExport(currentProject.value.id);
+          }
+          if (response.detail) {
+            importErrors.value = true;
+            importErrorText.value = response.detail;
+            importErrorList.value = response.warnings;
+          } else {
+            this.$snackbar({
+              text: 'Saved data to file successfully.',
+              timeout: 6000,
+            });
+          }
+        } catch (ex) {
+          const text = ex || 'Export failed due to server error.';
           importErrors.value = true;
-          importErrorText.value = response.detail;
-          importErrorList.value = response.warnings;
+          importErrorText.value = text;
+          importing.value = false;
         }
-        this.$snackbar({
-          text: 'Saved data to file successfully.',
-          timeout: 6000,
-        });
-      } catch (ex) {
-        const text = ex || 'Export failed due to server error.';
-        importErrors.value = true;
-        importErrorText.value = text;
-        importing.value = false;
-      }
-      exporting.value = false;
+        exporting.value = false;
+      });
     }
 
     return {
@@ -236,8 +241,8 @@ export default defineComponent({
         <v-divider class="my-3" />
 
         <v-card-text
-          v-for="importError in importErrorList"
-          :key="importError"
+          v-for="(importError, index) in importErrorList"
+          :key="index"
           class="console-format"
         >
           {{ importError }}
diff --git a/web_client/src/components/ProjectSettings.vue b/web_client/src/components/ProjectSettings.vue
index 809371a5..8a235fc4 100644
--- a/web_client/src/components/ProjectSettings.vue
+++ b/web_client/src/components/ProjectSettings.vue
@@ -46,7 +46,7 @@ export default defineComponent({
     const exportPathError = ref('');
     const form = ref(null);
 
-    async function save() {
+    async function save(callback) {
       if (!form.value.validate()) {
         return;
       }
@@ -77,6 +77,7 @@ export default defineComponent({
           exportPathError.value = '';
         }, 3000);
       }
+      if (callback) callback();
     }
 
     return {
@@ -209,6 +210,7 @@ export default defineComponent({
       <DataImportExport
         :import-path="importPath"
         :export-path="exportPath"
+        @save="save"
       />
       <div style="flex-grow:2">
         <v-btn
diff --git a/web_client/src/components/WindowWidget.vue b/web_client/src/components/WindowWidget.vue
index 08717456..205b393a 100644
--- a/web_client/src/components/WindowWidget.vue
+++ b/web_client/src/components/WindowWidget.vue
@@ -147,15 +147,11 @@ export default defineComponent({
 </script>
 
 <template>
-  <v-row
-    no-gutters
-    fill-height
-    align="center"
-    style="border: 1px solid gray; padding: 10px"
+  <div
+    class="d-flex flex-column"
+    style="width: 100%;"
   >
-    <v-col
-      cols="2"
-    >
+    <div class="d-flex justify-space-between gapped align-center flex-wrap">
       Window
       <v-tooltip bottom>
         <template #activator="{ on, attrs }">
@@ -171,11 +167,6 @@ export default defineComponent({
           Adjust window and level by moving the slider endpoints or sliding the range bar
         </span>
       </v-tooltip>
-    </v-col>
-    <v-col
-      cols="9"
-      style="text-align: center"
-    >
       <custom-range-slider
         :value="currentRange"
         :disabled="windowLocked"
@@ -183,6 +174,7 @@ export default defineComponent({
         :min="widthMin"
         class="align-center"
         height="5"
+        style="min-width: 300px"
         @input="updateFromRange"
       >
         <template #prepend>
@@ -208,90 +200,87 @@ export default defineComponent({
           />
         </template>
       </custom-range-slider>
-    </v-col>
-    <v-col
-      id="windowLockWidget"
-      cols="1"
-      style="text-align: right"
-    >
-      <v-icon
-        v-if="!windowLocked"
-        @click="() => showLockOptions = true"
+      <div
+        id="windowLockWidget"
+        cols="1"
+        style="text-align: right"
       >
-        mdi-lock-open
-      </v-icon>
-      <v-img
-        v-else
-        :src="windowLockImage"
-        height="24px"
-        width="18px"
-        class="float-right mx-1"
-        @click="() => setWindowLock(false)"
-        @error="imageLoadError = true"
-      />
-      <v-icon
-        v-if="imageLoadError && windowLocked"
-        @click="() => setWindowLock(false)"
-      >
-        mdi-lock
-      </v-icon>
-      <v-card
-        v-if="showLockOptions"
-        attach="#windowLockWidget"
-        class="py-3 px-5"
-        style="width: 300px; position: absolute; z-index: 2;"
-      >
-        <div
-          class="d-flex"
-          style="flex-direction: column; align-items: flex-start; gap: 5px;"
+        <v-icon
+          v-if="!windowLocked"
+          @click="() => showLockOptions = true"
         >
-          <v-btn
-            small
-            @click="() => setWindowLock(true, 'scan', currentViewData.scanId)"
-          >
-            <v-img
-              src="S.png"
-              height="18px"
-              width="12px"
-              class="mr-2"
-              @error="imageLoadError = true"
-            />
-            Maintain lock for Scan
-          </v-btn>
-          <v-btn
-            small
-            @click="() => setWindowLock(true, 'experiment', currentViewData.experimentId)"
-          >
-            <v-img
-              src="E.png"
-              height="18px"
-              width="12px"
-              class="mr-2"
-              @error="imageLoadError = true"
-            />
-            Maintain lock for Experiment
-          </v-btn>
-          <v-btn
-            small
-            @click="() => setWindowLock(true, 'project', currentViewData.projectId)"
+          mdi-lock-open
+        </v-icon>
+        <v-img
+          v-else
+          :src="windowLockImage"
+          height="24px"
+          width="18px"
+          class="float-right mx-1"
+          @click="() => setWindowLock(false)"
+          @error="imageLoadError = true"
+        />
+        <v-icon
+          v-if="imageLoadError && windowLocked"
+          @click="() => setWindowLock(false)"
+        >
+          mdi-lock
+        </v-icon>
+        <v-card
+          v-if="showLockOptions"
+          attach="#windowLockWidget"
+          class="py-3 px-5"
+          style="width: 300px; position: absolute; z-index: 2;"
+        >
+          <div
+            class="d-flex"
+            style="flex-direction: column; align-items: flex-start; gap: 5px;"
           >
-            <v-img
-              src="P.png"
-              height="18px"
-              width="12px"
-              class="mr-2"
-              @error="imageLoadError = true"
-            />
-            Maintain lock for Project
-          </v-btn>
-        </div>
-      </v-card>
-    </v-col>
-
-    <v-col cols="2">
+            <v-btn
+              small
+              @click="() => setWindowLock(true, 'scan', currentViewData.scanId)"
+            >
+              <v-img
+                src="S.png"
+                height="18px"
+                width="12px"
+                class="mr-2"
+                @error="imageLoadError = true"
+              />
+              Maintain lock for Scan
+            </v-btn>
+            <v-btn
+              small
+              @click="() => setWindowLock(true, 'experiment', currentViewData.experimentId)"
+            >
+              <v-img
+                src="E.png"
+                height="18px"
+                width="12px"
+                class="mr-2"
+                @error="imageLoadError = true"
+              />
+              Maintain lock for Experiment
+            </v-btn>
+            <v-btn
+              small
+              @click="() => setWindowLock(true, 'project', currentViewData.projectId)"
+            >
+              <v-img
+                src="P.png"
+                height="18px"
+                width="12px"
+                class="mr-2"
+                @error="imageLoadError = true"
+              />
+              Maintain lock for Project
+            </v-btn>
+          </div>
+        </v-card>
+      </div>
+    </div>
+    <div class="d-flex justify-space-between gapped align-center">
       Presets
-    </v-col>
-    <v-col cols="10">
       <v-select
         v-model="selectedPreset"
         :items="windowPresets"
@@ -301,6 +290,12 @@ export default defineComponent({
         class="pa-0"
         @change="applyPreset"
       />
-    </v-col>
-  </v-row>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.gapped {
+  column-gap: 10px;
+}
+</style>
diff --git a/web_client/src/django.ts b/web_client/src/django.ts
index 6fbc7332..38624d4f 100644
--- a/web_client/src/django.ts
+++ b/web_client/src/django.ts
@@ -216,7 +216,6 @@ const djangoClient = {
 apiClient.interceptors.response.use(null, (error) => {
   if (error?.response?.status === 401) {
     dispatchEvent(new Event('unauthorized'));
-    throw new Error('Server session expired.');
   }
   return error.response;
 });
diff --git a/web_client/src/store/index.ts b/web_client/src/store/index.ts
index 95fcdc0f..f4fe82d6 100644
--- a/web_client/src/store/index.ts
+++ b/web_client/src/store/index.ts
@@ -530,7 +530,7 @@ const {
       state.scanCachedPercentage = percentComplete;
     },
     setSliceLocation(state, ijkLocation) {
-      if (!Object.keys(ijkLocation).some((value) => value === undefined)) {
+      if (Object.values(ijkLocation).every((value) => value !== undefined)) {
         state.vtkViews.forEach(
           (view) => {
             state.proxyManager.getRepresentation(null, view).setSlice(
diff --git a/web_client/src/views/Frame.vue b/web_client/src/views/Frame.vue
index 439a41a0..69c98e03 100644
--- a/web_client/src/views/Frame.vue
+++ b/web_client/src/views/Frame.vue
@@ -87,6 +87,14 @@ export default {
       this.$router.replace('/').catch(this.handleNavigationError);
     }
   },
+  mounted() {
+    window.addEventListener('unauthorized', () => {
+      this.$snackbar({
+        text: 'Server session expired. Try again.',
+        timeout: 6000,
+      });
+    });
+  },
   methods: {
     ...mapActions([
       'loadProject',
diff --git a/web_client/src/views/Projects.vue b/web_client/src/views/Projects.vue
index 895ad6da..17163462 100644
--- a/web_client/src/views/Projects.vue
+++ b/web_client/src/views/Projects.vue
@@ -118,6 +118,12 @@ export default defineComponent({
         this.createProject();
       }
     });
+    window.addEventListener('unauthorized', () => {
+      this.$snackbar({
+        text: 'Server session expired. Try again.',
+        timeout: 6000,
+      });
+    });
   },
   beforeDestroy() {
     clearInterval(this.overviewPoll);