Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Map annotation shortcut feature UI tweaks #182

Merged
merged 2 commits into from
Aug 15, 2024
Merged

Map annotation shortcut feature UI tweaks #182

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
62e9d17
Add popover message
ddjnw1yu Aug 15, 2024
edd249a
Add external link icon
ddjnw1yu Aug 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 35 additions & 5 deletions pages/user/profile/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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>
Loading