From 202ec2207115d6b55837753b878a51ca12fc211f Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Wed, 2 Feb 2022 13:03:48 -0500
Subject: [PATCH 1/4] Make Control Panel take up less vertical space

---
 client/src/components/ControlPanel.vue    | 84 +++++++++++++----------
 client/src/components/DecisionButtons.vue | 65 +++++++-----------
 client/src/store/index.ts                 |  4 ++
 3 files changed, 76 insertions(+), 77 deletions(-)

diff --git a/client/src/components/ControlPanel.vue b/client/src/components/ControlPanel.vue
index be986c6a..f5663444 100644
--- a/client/src/components/ControlPanel.vue
+++ b/client/src/components/ControlPanel.vue
@@ -27,6 +27,7 @@ export default {
       'proxyManager',
       'scanCachedPercentage',
       'showCrosshairs',
+      'storeCrosshairs',
       'myCurrentProjectRoles',
     ]),
     ...mapGetters([
@@ -126,6 +127,7 @@ export default {
     ]),
     ...mapMutations([
       'setShowCrosshairs',
+      'setStoreCrosshairs',
     ]),
     async switchLock(newExp, oldExp = null) {
       if (!this.navigateToNextIfCurrentScanNull()) {
@@ -264,14 +266,13 @@ export default {
                   {{ currentViewData.experimentName }}
                 </v-col>
               </v-row>
-
               <v-textarea
                 v-model="currentViewData.experimentNote"
                 @input="handleExperimentNoteChange"
                 :disabled="!experimentIsEditable"
                 filled
                 no-resize
-                height="120px"
+                height="80px"
                 hide-details
                 class="mt-3"
                 name="input-experiment-notes"
@@ -288,6 +289,30 @@ export default {
                   Save Note
                 </v-col>
               </v-row>
+              <v-row>
+                <v-col cols="4">
+                  Display crosshairs
+                </v-col>
+                <v-col cols="2">
+                  <v-switch
+                    :input-value="showCrosshairs"
+                    @change="setShowCrosshairs"
+                    hide-details
+                    class="shrink ma-0 pa-0 ml-n2"
+                  />
+                </v-col>
+                <v-col cols="4">
+                  Store crosshairs with decision
+                </v-col>
+                <v-col cols="2">
+                  <v-switch
+                    :input-value="storeCrosshairs"
+                    @change="setStoreCrosshairs"
+                    hide-details
+                    class="shrink ma-0 pa-0 ml-n2"
+                  />
+                </v-col>
+              </v-row>
             </v-container>
           </v-card>
         </v-col>
@@ -304,7 +329,7 @@ export default {
               class="pa-0"
             >
               <v-row no-gutters>
-                <v-col cols="5">
+                <v-col cols="6">
                   <v-container
                     fill-height
                     fluid
@@ -494,43 +519,24 @@ export default {
                         </v-slider>
                       </v-col>
                     </v-row>
-                    <v-row>
-                      <v-col cols="4">
-                        Display crosshairs
-                      </v-col>
-                      <v-col cols="8">
-                        <v-switch
-                          :input-value="showCrosshairs"
-                          @change="setShowCrosshairs"
-                          hide-details
-                          class="shrink ma-0 pa-0 ml-n2"
-                        />
-                      </v-col>
-                    </v-row>
-                    <v-row class="py-3">
+                    <v-row
+                      v-if="scanCachedPercentage < 1"
+                      class="py-3"
+                    >
                       <v-col
                         cols="12"
                         style="text-align: center; height: 70px"
                       >
-                        <transition name="bounce">
-                          <div v-if="scanCachedPercentage < 1">
-                            <v-progress-circular
-                              :value="scanCachedPercentage * 100"
-                              color="blue"
-                            />
-                            <div> Loading... </div>
-                          </div>
-                        </transition>
+                        <div>
+                          <v-progress-circular
+                            :value="scanCachedPercentage * 100"
+                            color="blue"
+                          />
+                          <div> Loading... </div>
+                        </div>
                       </v-col>
                     </v-row>
-                  </v-container>
-                </v-col>
-                <v-col cols="7">
-                  <v-container
-                    fluid
-                    class="px-5"
-                  >
-                    <v-row>
+                    <v-row v-else>
                       <v-col cols="12">
                         <v-container
                           class="grey lighten-4"
@@ -550,12 +556,14 @@ export default {
                         </v-container>
                       </v-col>
                     </v-row>
-                    <DecisionButtons
-                      :experimentIsEditable="experimentIsEditable"
-                      @handleKeyPress="handleKeyPress"
-                    />
                   </v-container>
                 </v-col>
+                <v-col cols="6">
+                  <DecisionButtons
+                    :experimentIsEditable="experimentIsEditable"
+                    @handleKeyPress="handleKeyPress"
+                  />
+                </v-col>
               </v-row>
             </v-container>
           </v-card>
diff --git a/client/src/components/DecisionButtons.vue b/client/src/components/DecisionButtons.vue
index 21841ad0..386f9e0b 100644
--- a/client/src/components/DecisionButtons.vue
+++ b/client/src/components/DecisionButtons.vue
@@ -23,7 +23,6 @@ export default {
       newComment: '',
       confirmedPresent: [],
       confirmedAbsent: [],
-      storeCrosshairs: true,
     };
   },
   computed: {
@@ -31,6 +30,7 @@ export default {
       'currentViewData',
       'proxyManager',
       'vtkViews',
+      'storeCrosshairs',
     ]),
     ...mapGetters([
       'currentViewData',
@@ -109,10 +109,14 @@ export default {
   },
   methods: {
     convertValueToLabel(artifactName) {
-      return artifactName.replace('susceptibility_metal', 'metal_susceptibility').replace(/_/g, ' ').replace(
-        /\w\S*/g,
-        (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(),
-      );
+      return artifactName
+        .replace('susceptibility_metal', 'metal_susceptibility')
+        .replace('partial_brain_coverage', 'partial_coverage')
+        .replace(/_/g, ' ')
+        .replace(
+          /\w\S*/g,
+          (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(),
+        );
     },
     getCurrentChipState(artifact) {
       // this function determines the styling of the four chip states.
@@ -220,9 +224,13 @@ export default {
 </script>
 
 <template>
-  <div style="pa-0 ma-0">
-    <v-row no-gutters>
-      <v-col cols="7">
+  <v-container
+    v-if="experimentIsEditable"
+    fluid
+    class="px-5"
+  >
+    <v-row dense>
+      <v-col cols="6">
         <v-subheader class="pl-0">
           Indicate presence/absence of artifacts in this scan
           <v-tooltip bottom>
@@ -246,7 +254,7 @@ export default {
       </v-col>
       <v-col
         v-if="currentViewData.currentAutoEvaluation"
-        cols="5"
+        cols="6"
         class="d-flex justify-end align-center"
       >
         <v-subheader class="pr-0">
@@ -310,17 +318,18 @@ export default {
           :color="chipState.color"
           :text-color="chipState.textColor"
           :style="'text-decoration: '+chipState.textDecoration +'; margin-bottom: 3px;'"
+          small
         >
           {{ chipState.label }}
         </v-chip>
       </v-col>
     </v-row>
     <v-row
-      v-if="experimentIsEditable"
+      dense
     >
       <v-col
         cols="12"
-        class="pb-0 mb-0 pt-5"
+        class="pa-0 ma-0"
       >
         <v-textarea
           @input="handleCommentChange"
@@ -329,7 +338,7 @@ export default {
           v-model="newComment"
           filled
           no-resize
-          height="60px"
+          height="75px"
           name="input-comment"
           label="Evaluation Comment"
           placeholder="Write a comment about the scan and submit a decision"
@@ -338,7 +347,7 @@ export default {
     </v-row>
     <v-row
       v-if="warnDecision"
-      no-gutters
+      dense
     >
       <v-col
         cols="12"
@@ -348,16 +357,9 @@ export default {
         Decisions other than "usable" must have a comment.
       </v-col>
     </v-row>
-    <v-row
-      v-if="experimentIsEditable"
-      dense
-      class="pr-3"
-    >
-      <v-col cols="9">
-        <div
-          no-gutters
-          class="button-container"
-        >
+    <v-row dense>
+      <v-col cols="12">
+        <div class="button-container">
           <div
             v-for="option in options"
             :key="option.code"
@@ -372,23 +374,8 @@ export default {
           </div>
         </div>
       </v-col>
-      <v-col
-        cols="1"
-        align="right"
-      >
-        <v-simple-checkbox
-          :value="storeCrosshairs"
-          @input="(value) => storeCrosshairs = value"
-        />
-      </v-col>
-      <v-col
-        cols="2"
-        class="pa-0"
-      >
-        Store crosshair location
-      </v-col>
     </v-row>
-  </div>
+  </v-container>
 </template>
 
 <style scoped>
diff --git a/client/src/store/index.ts b/client/src/store/index.ts
index ae540070..081ad27e 100644
--- a/client/src/store/index.ts
+++ b/client/src/store/index.ts
@@ -301,6 +301,7 @@ const initState = {
   screenshots: [],
   scanCachedPercentage: 0,
   showCrosshairs: true,
+  storeCrosshairs: true,
   sliceLocation: {},
   iIndexSlice: 0,
   jIndexSlice: 0,
@@ -523,6 +524,9 @@ const {
     setShowCrosshairs(state, show) {
       state.showCrosshairs = show;
     },
+    setStoreCrosshairs(state, store) {
+      state.storeCrosshairs = store;
+    },
     switchReviewMode(state, mode) {
       state.reviewMode = mode || false;
       if (mode) {

From 4553c54eb27e9959fa4e771c1f6b1475c8b618c2 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Wed, 2 Feb 2022 13:45:10 -0500
Subject: [PATCH 2/4] Lint fix

---
 client/src/store/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/store/index.ts b/client/src/store/index.ts
index 081ad27e..48d23ebe 100644
--- a/client/src/store/index.ts
+++ b/client/src/store/index.ts
@@ -524,8 +524,8 @@ const {
     setShowCrosshairs(state, show) {
       state.showCrosshairs = show;
     },
-    setStoreCrosshairs(state, store) {
-      state.storeCrosshairs = store;
+    setStoreCrosshairs(state, value) {
+      state.storeCrosshairs = value;
     },
     switchReviewMode(state, mode) {
       state.reviewMode = mode || false;

From 00ef1c1f0c0d445f5109b52fc73b243c2313724d Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Wed, 2 Feb 2022 16:53:38 -0500
Subject: [PATCH 3/4] Slightly more squished layout

---
 client/src/components/ControlPanel.vue    | 114 ++++++++++------------
 client/src/components/DecisionButtons.vue |  67 +++++++------
 client/src/components/ScanDecision.vue    |  75 +++++++-------
 3 files changed, 124 insertions(+), 132 deletions(-)

diff --git a/client/src/components/ControlPanel.vue b/client/src/components/ControlPanel.vue
index f5663444..3c04fdac 100644
--- a/client/src/components/ControlPanel.vue
+++ b/client/src/components/ControlPanel.vue
@@ -239,31 +239,41 @@ export default {
           >
             <v-container fluid>
               <v-row dense>
-                <v-col cols="6">
-                  Project
+                <v-col
+                  cols="3"
+                  class="d-flex"
+                  style="flex-direction:column; row-gap: 5px;"
+                >
+                  <span>Project</span>
+                  <span>Experiment</span>
                 </v-col>
                 <v-col
                   cols="6"
-                  class="grey--text"
-                  style="text-align: right"
+                  rows="2"
+                  class="py-3"
+                  style="text-align: center; height: 70px"
                 >
-                  {{ currentViewData.projectName }}
-                </v-col>
-              </v-row>
-              <v-row dense>
-                <v-col cols="6">
-                  Experiment
+                  <div v-if="scanCachedPercentage < 1">
+                    <v-progress-circular
+                      :value="scanCachedPercentage * 100"
+                      color="blue"
+                    />
+                    <div> Loading... </div>
+                  </div>
                 </v-col>
                 <v-col
-                  cols="6"
-                  class="grey--text"
-                  style="text-align: right"
+                  cols="3"
+                  class="grey--text d-flex"
+                  style="text-align: right; flex-direction:column; row-gap: 5px;"
                 >
-                  <UserAvatar
-                    :target-user="lockOwner"
-                    as-editor
-                  />
-                  {{ currentViewData.experimentName }}
+                  <span>{{ currentViewData.projectName }}</span>
+                  <div>
+                    <UserAvatar
+                      :target-user="lockOwner"
+                      as-editor
+                    />
+                    {{ currentViewData.experimentName }}
+                  </div>
                 </v-col>
               </v-row>
               <v-textarea
@@ -279,7 +289,6 @@ export default {
                 label="Experiment Notes"
                 placeholder="There are no notes on this experiment."
               />
-
               <v-row no-gutters>
                 <v-col
                   v-on:click="handleExperimentNoteSave()"
@@ -289,30 +298,29 @@ export default {
                   Save Note
                 </v-col>
               </v-row>
-              <v-row>
-                <v-col cols="4">
-                  Display crosshairs
-                </v-col>
-                <v-col cols="2">
+              <v-flex
+                class="d-flex ml-5"
+                style="flex-direction:column"
+              >
+                <div style="flex-grow: 1">
                   <v-switch
                     :input-value="showCrosshairs"
                     @change="setShowCrosshairs"
+                    label="Display crosshairs"
                     hide-details
                     class="shrink ma-0 pa-0 ml-n2"
                   />
-                </v-col>
-                <v-col cols="4">
-                  Store crosshairs with decision
-                </v-col>
-                <v-col cols="2">
+                </div>
+                <div style="flex-grow: 1">
                   <v-switch
                     :input-value="storeCrosshairs"
                     @change="setStoreCrosshairs"
+                    label="Store crosshairs with decision"
                     hide-details
                     class="shrink ma-0 pa-0 ml-n2"
                   />
-                </v-col>
-              </v-row>
+                </div>
+              </v-flex>
             </v-container>
           </v-card>
         </v-col>
@@ -519,41 +527,23 @@ export default {
                         </v-slider>
                       </v-col>
                     </v-row>
-                    <v-row
-                      v-if="scanCachedPercentage < 1"
-                      class="py-3"
-                    >
+                    <v-row class="mx-0">
                       <v-col
                         cols="12"
-                        style="text-align: center; height: 70px"
+                        class="grey lighten-4"
+                        style="height: 100px; overflow:auto;"
                       >
-                        <div>
-                          <v-progress-circular
-                            :value="scanCachedPercentage * 100"
-                            color="blue"
-                          />
-                          <div> Loading... </div>
-                        </div>
-                      </v-col>
-                    </v-row>
-                    <v-row v-else>
-                      <v-col cols="12">
-                        <v-container
-                          class="grey lighten-4"
-                          style="height: 100px; overflow:auto;"
+                        <ScanDecision
+                          v-for="decision in currentViewData.scanDecisions"
+                          :key="decision.id"
+                          :decision="decision"
+                        />
+                        <div
+                          v-if="currentViewData.scanDecisions.length === 0"
+                          class="grey--text"
                         >
-                          <ScanDecision
-                            v-for="decision in currentViewData.scanDecisions"
-                            :key="decision.id"
-                            :decision="decision"
-                          />
-                          <div
-                            v-if="currentViewData.scanDecisions.length === 0"
-                            class="grey--text"
-                          >
-                            This scan has no prior comments.
-                          </div>
-                        </v-container>
+                          This scan has no prior comments.
+                        </div>
                       </v-col>
                     </v-row>
                   </v-container>
diff --git a/client/src/components/DecisionButtons.vue b/client/src/components/DecisionButtons.vue
index 386f9e0b..0175fcbd 100644
--- a/client/src/components/DecisionButtons.vue
+++ b/client/src/components/DecisionButtons.vue
@@ -229,35 +229,33 @@ export default {
     fluid
     class="px-5"
   >
-    <v-row dense>
-      <v-col cols="6">
-        <v-subheader class="pl-0">
-          Indicate presence/absence of artifacts in this scan
-          <v-tooltip bottom>
-            <template v-slot:activator="{ on, attrs }">
-              <v-icon
-                v-bind="attrs"
-                v-on="on"
-                small
-                class="pl-2"
-              >
-                info
-              </v-icon>
-            </template>
-            <span>
-              Toggle each tag below.
-              Fill red to confirm an artifact is present.
-              Crossthrough to confirm an artifact is absent.
-            </span>
-          </v-tooltip>
-        </v-subheader>
-      </v-col>
-      <v-col
+    <v-flex class="d-flex">
+      <v-subheader class="pa-0  ma-0">
+        Indicate artifacts in this scan
+        <v-tooltip bottom>
+          <template v-slot:activator="{ on, attrs }">
+            <v-icon
+              v-bind="attrs"
+              v-on="on"
+              small
+              class="pl-2"
+            >
+              info
+            </v-icon>
+          </template>
+          <span>
+            Toggle each tag below.
+            Fill red to confirm an artifact is present.
+            Crossthrough to confirm an artifact is absent.
+          </span>
+        </v-tooltip>
+      </v-subheader>
+      <v-flex
         v-if="currentViewData.currentAutoEvaluation"
         cols="6"
         class="d-flex justify-end align-center"
       >
-        <v-subheader class="pr-0">
+        <v-subheader class="pa-0 ma-0">
           Auto evaluation
         </v-subheader>
         <v-tooltip bottom>
@@ -278,13 +276,13 @@ export default {
         <EvaluationResults
           :results="currentViewData.currentAutoEvaluation.results"
         />
-      </v-col>
-      <v-col
+      </v-flex>
+      <v-flex
         v-else
         cols="5"
         class="d-flex justify-end align-center"
       >
-        <v-subheader class="pr-0">
+        <v-subheader class="pa-0 ma-0">
           No Auto evaluation available
         </v-subheader>
         <v-tooltip bottom>
@@ -302,8 +300,8 @@ export default {
             An evaluation performed by the MIQA server using artificial intelligence
           </span>
         </v-tooltip>
-      </v-col>
-    </v-row>
+      </v-flex>
+    </v-flex>
     <v-row no-gutters>
       <v-col
         cols="12"
@@ -324,12 +322,10 @@ export default {
         </v-chip>
       </v-col>
     </v-row>
-    <v-row
-      dense
-    >
+    <v-row dense>
       <v-col
         cols="12"
-        class="pa-0 ma-0"
+        class="pt-5"
       >
         <v-textarea
           @input="handleCommentChange"
@@ -384,4 +380,7 @@ export default {
   flex-wrap: wrap;
   justify-content: space-around;
 }
+.v-subheader {
+  height: 30px;
+}
 </style>
diff --git a/client/src/components/ScanDecision.vue b/client/src/components/ScanDecision.vue
index e5764bd9..ffdd9ddd 100644
--- a/client/src/components/ScanDecision.vue
+++ b/client/src/components/ScanDecision.vue
@@ -42,60 +42,63 @@ export default {
 </script>
 
 <template>
-  <v-row dense>
-    <v-col
-      :class="convertDecisionToColor(decision.decision)"
-      cols="2"
+  <v-flex
+    class="d-flex"
+    style="flex-direction:row; column-gap: 5px"
+  >
+    <div
+      class="d-flex"
+      style="flex-direction:row; column-gap: 2px"
     >
       <UserAvatar
         :target-user="decision.creator"
       />
-      ({{ decision.decision[0] }})
+      <div :class="convertDecisionToColor(decision.decision)">
+        ({{ decision.decision[0] }})
+      </div>
       <v-icon
         v-if="Object.values(decision.location).length > 0"
         @click="goToLocation"
       >
         mdi-crosshairs-gps
       </v-icon>
-    </v-col>
-    <v-col
+    </div>
+    <v-flex
       :class="decision.note ? 'black--text' : 'grey--text'"
       class="d-flex justify-space-between"
-      cols="8"
+      grow
     >
-      <v-flex grow>
-        {{ decision.note ? decision.note : "No comment" }}
-      </v-flex>
-      <v-flex
-        shrink
-        class="d-flex flex-wrap justify-end flex-shrink-1"
+      {{ decision.note ? decision.note : "No comment" }}
+    </v-flex>
+    <v-flex
+      shrink
+      class="d-flex flex-wrap justify-end flex-shrink-1"
+    >
+      <v-tooltip
+        v-for="chip in artifactChips"
+        :v-bind="chip.code"
+        :key="'chip_'+ chip.value"
+        bottom
       >
-        <v-tooltip
-          v-for="chip in artifactChips"
-          :v-bind="chip.code"
-          :key="'chip_'+ chip.value"
-          bottom
-        >
-          <template v-slot:activator="{ on, attrs }">
-            <v-chip
-              v-bind="attrs"
-              v-on="on"
-            >
-              {{ chip.code }}
-            </v-chip>
-          </template>
-          <span>{{ chip.value }}</span>
-        </v-tooltip>
-      </v-flex>
-    </v-col>
-    <v-col
-      cols="2"
+        <template v-slot:activator="{ on, attrs }">
+          <v-chip
+            v-bind="attrs"
+            v-on="on"
+            small
+          >
+            {{ chip.code }}
+          </v-chip>
+        </template>
+        <span>{{ chip.value }}</span>
+      </v-tooltip>
+    </v-flex>
+    <div
       class="grey--text"
       style="text-align: right"
     >
       {{ decision.created }}
-    </v-col>
-  </v-row>
+    </div>
+  </v-flex>
 </template>
 
 <style scoped>

From 4bd3d76a8a3e3b2464c53e951ffd12e659add88f Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Mon, 7 Feb 2022 10:49:23 -0500
Subject: [PATCH 4/4] Fix v-switch margins

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

diff --git a/client/src/components/ControlPanel.vue b/client/src/components/ControlPanel.vue
index 3c04fdac..f572cbd9 100644
--- a/client/src/components/ControlPanel.vue
+++ b/client/src/components/ControlPanel.vue
@@ -308,7 +308,7 @@ export default {
                     @change="setShowCrosshairs"
                     label="Display crosshairs"
                     hide-details
-                    class="shrink ma-0 pa-0 ml-n2"
+                    class="shrink pa-0 ml-n2"
                   />
                 </div>
                 <div style="flex-grow: 1">
@@ -317,7 +317,7 @@ export default {
                     @change="setStoreCrosshairs"
                     label="Store crosshairs with decision"
                     hide-details
-                    class="shrink ma-0 pa-0 ml-n2"
+                    class="shrink pa-0 ml-n2"
                   />
                 </div>
               </v-flex>