Merge pull request #182 from ddjnw1yu/map-annotation-shortcut

Map annotation shortcut feature UI tweaks
nih-sparc · Aug 15, 2024 · 3578d70 · 3578d70
2 parents e6ca29a + edd249a
commit 3578d70
Showing 1 changed file with 35 additions and 5 deletions.
diff --git a/pages/user/profile/index.vue b/pages/user/profile/index.vue
@@ -99,12 +99,27 @@
                   </span>
                 <div class="body4">
                   The Map Annotation Tool is built in to the Maps functionality within the SPARC Portal. The Tool allows you to add annotations to 2D and 3D anatomical models.
-                  View Maps guide <a href="https://docs.sparc.science/docs/introduction-to-maps" target="_blank">here</a>.
+                  <span class="help-link">
+                    <client-only>
+                      <el-popover width="fit-content" trigger="hover" :append-to-body=false popper-class="popover">
+                        <template v-slot:reference>
+                          <svgo-icon-help class="icon-help" />
+                        </template>
+                        <div>
+                          The Anatomical Connectivity (AC) flatmaps show physical connectivity derived from SCKAN in an anatomical schematic context.<br>
+                          The Functional Connectivity (FC) flatmap provides a visualization of semantic connectivity for a mammalian body.<br>
+                          The 3D whole-body shows physical connectivity derived from SCKAN in an anatomically realistic context.<br>
+                        </div>
+                      </el-popover>
+                    </client-only>
+                  </span>
                 </div>
                 <div class="mt-8">
-                  <el-button class='secondary' @click="handleAnnotateButtonClicked('ac')">Launch AC Map in Annotation Mode</el-button>
-                  <el-button class='secondary' @click="handleAnnotateButtonClicked('fc')">Launch FC Map in Annotation Mode</el-button>
-                  <el-button class='secondary' @click="handleAnnotateButtonClicked('wholebody')">Launch 3D Body in Annotation Mode</el-button>
+                  <template v-for="(value, key) in AnnotatorMaps" :key="key">
+                    <el-button class='secondary' @click="handleAnnotateButtonClicked(key)">
+                      Launch {{ value }} <br class="line-break"> in Annotation Mode <svgo-icon-open class="open-icon" />
+                    </el-button>
+                  </template>
                 </div>
               </template>
               <template v-else>
@@ -303,7 +318,12 @@ export default {
       submissionToRetract: '',
       showRetractConfirmationModal: false,
       organizations: [],
-      annotatorAuthenticated: false
+      annotatorAuthenticated: false,
+      AnnotatorMaps: {
+        'ac': 'AC Map',
+        'fc': 'FC Map',
+        'wholebody': '3D Body',
+      },
     }
   },
   async setup() {
@@ -680,4 +700,14 @@ a {
 .help-link {
   float: right;
 }
+.line-break {
+  display: none;
+  @media screen and (max-width: 24rem) {
+    display: inline;
+  }
+}
+.open-icon {
+  height: 1.5rem;
+  width: 1.5rem;
+}
 </style>