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.

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

More annotation tool update #216

Merged
merged 11 commits into from
Jan 6, 2025
131 changes: 49 additions & 82 deletions src/components/FlatmapVuer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,6 @@ Please use `const` to assign meaningful names to them...
class: '.maplibregl-canvas',
}"
:toolbarOptions="toolbarOptions"
:drawnType="drawnType"
:activeDrawTool="activeDrawTool"
:activeDrawMode="activeDrawMode"
:newlyDrawnEntry="drawnCreatedEvent"
Expand Down Expand Up @@ -454,44 +453,22 @@ Please use `const` to assign meaningful names to them...
</template>
</div>
<el-row class="viewing-mode-description">
{{ viewingModes[viewingMode] }}
{{ modeDescription }}
</el-row>
</el-row>
<template v-if="viewingMode === 'Annotation' && userInformation">
<el-row class="backgroundText">Drawn By*</el-row>
<el-row class="backgroundText">Annotations From</el-row>
<el-row class="backgroundControl">
<el-select
:teleported="false"
v-model="drawnType"
v-model="annotationFrom"
placeholder="Select"
class="select-box"
popper-class="flatmap_dropdown"
@change="setDrawnType"
@change="setAnnotationFrom"
>
<el-option
v-for="item in drawnTypes"
:key="item"
:label="item"
:value="item"
>
<el-row>
<el-col :span="12">{{ item }}</el-col>
</el-row>
</el-option>
</el-select>
</el-row>
<el-row class="backgroundText">Annotated By*</el-row>
<el-row class="backgroundControl">
<el-select
:teleported="false"
v-model="annotatedType"
placeholder="Select"
class="select-box"
popper-class="flatmap_dropdown"
@change="setAnnotatedType"
>
<el-option
v-for="item in annotatedTypes"
v-for="item in annotatedSource"
:key="item"
:label="item"
:value="item"
Expand Down Expand Up @@ -885,8 +862,7 @@ export default {
}
this.doubleClickedFeature = false
}
}
if (this.activeDrawMode === 'Delete') {
} else if (this.activeDrawMode === 'Delete') {
this.changeAnnotationDrawMode({
mode: 'simple_select',
options: { featureIds: [data.feature.feature.id] }
Expand Down Expand Up @@ -1015,12 +991,6 @@ export default {
let drawnFeatures = await this.annotator.drawnFeatures(this.userToken, this.serverURL, annotatedItemIds)
// The annotator has `resource` and `features` fields
if ('resource' in drawnFeatures) drawnFeatures = drawnFeatures.features
// Use to switch the displayed feature type
if (this.drawnType !== 'All tools') {
drawnFeatures = drawnFeatures.filter((feature) => {
return feature.geometry.type === this.drawnType
})
}
return drawnFeatures
},
/**
Expand All @@ -1030,21 +1000,19 @@ export default {
addAnnotationFeature: async function () {
if (this.mapImp) {
if (!this.featureAnnotationSubmitted) this.clearAnnotationFeature()
if (this.drawnType !== 'None') {
if (!this.featureAnnotationSubmitted) this.loading = true
const userId = this.annotatedType === 'Anyone' ?
undefined : this.userInformation.orcid ?
this.userInformation.orcid : '0000-0000-0000-0000'
const participated = this.annotatedType === 'Anyone' ?
undefined : this.annotatedType === 'Me' ?
true : false
const drawnFeatures = await this.fetchDrawnFeatures(userId, participated)
this.existDrawnFeatures = drawnFeatures
this.loading = false
if (!this.featureAnnotationSubmitted) {
for (const feature of drawnFeatures) {
this.mapImp.addAnnotationFeature(feature)
}
if (!this.featureAnnotationSubmitted) this.loading = true
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line should be put into the same conditional block as the line above.

const userId = this.annotationFrom === 'Anyone' ?
undefined : this.userInformation.orcid ?
this.userInformation.orcid : '0000-0000-0000-0000'
const participated = this.annotationFrom === 'Anyone' ?
undefined : this.annotationFrom === 'Me' ?
true : false
const drawnFeatures = await this.fetchDrawnFeatures(userId, participated)
this.existDrawnFeatures = drawnFeatures
this.loading = false
if (!this.featureAnnotationSubmitted) {
for (const feature of drawnFeatures) {
this.mapImp.addAnnotationFeature(feature)
}
}
}
Expand All @@ -1062,26 +1030,13 @@ export default {
this.$el.querySelector('.maplibregl-ctrl-group').style.display = 'none'
}
},
/**
* @public
* Function to switch the type of annotation.
* @arg {Boolean} `flag`
*/
setDrawnType: function (flag) {
this.drawnType = flag
if (this.mapImp) {
this.manualAbortedOnClose()
this.addAnnotationFeature()
this.initialiseDrawing()
}
},
/**
* @public
* Function to switch the type of person who annotated.
* @arg {Boolean} `flag`
*/
setAnnotatedType: function (flag) {
this.annotatedType = flag
setAnnotationFrom: function (flag) {
this.annotationFrom = flag
if (this.mapImp) {
this.manualAbortedOnClose()
this.addAnnotationFeature()
Expand Down Expand Up @@ -1589,7 +1544,7 @@ export default {
this.annotationEntry = {}
} else if (data.type === 'modeChanged') {
if (data.feature.mode === 'direct_select') this.doubleClickedFeature = true
if (this.annotationSidebar && data.feature.mode === 'simple_select') {
if (this.annotationSidebar && data.feature.mode === 'simple_select' && this.activeDrawMode === 'Deleted') {
this.annotationEventCallback({}, { type: 'aborted' })
}
} else if (data.type === 'selectionChanged') {
Expand Down Expand Up @@ -1624,6 +1579,7 @@ export default {
if (data.type === 'created') this.drawnCreatedEvent = payload
else this.checkAndCreatePopups(payload)
}
if (data.type === 'updated') this.previousEditEvent = data
if (data.type === 'deleted') this.previousDeletedEvent = data
else this.previousDeletedEvent = {}
},
Expand Down Expand Up @@ -1711,6 +1667,14 @@ export default {
!this.activeDrawTool
) {
this.checkAndCreatePopups(payload)
if (this.annotationSidebar && this.previousEditEvent.type === 'updated') {
this.annotationEntry = {
...this.previousEditEvent,
resourceId: this.serverURL
}
this.annotationEventCallback({}, { type: 'aborted' })
}
this.previousEditEvent = {}
}
this.$emit('resource-selected', payload)
} else {
Expand Down Expand Up @@ -1870,12 +1834,8 @@ export default {
if (data.feature.featureId && data.feature.models) {
this.displayTooltip(data.feature.models)
} else if (data.feature.feature) {
// in drawing or edit/delete mode is on or has connectivity
if (
this.activeDrawTool ||
this.activeDrawMode ||
Object.keys(this.connectionEntry).length > 0
) {
// in drawing or edit/delete mode is on or valid drawn
if (this.activeDrawTool || this.activeDrawMode || this.isValidDrawnCreated) {
this.featureAnnotationSubmitted = false
this.annotationEntry.featureId = data.feature.feature.id
if (this.activeDrawTool) {
Expand Down Expand Up @@ -2178,8 +2138,7 @@ export default {
!this.disableUI && (
(
this.viewingMode === 'Annotation' &&
!this.annotationSidebar &&
this.userInformation
!this.annotationSidebar
) ||
(
this.viewingMode === 'Exploration' &&
Expand All @@ -2193,7 +2152,6 @@ export default {
this.mapImp.showPopup(featureId, this.$refs.tooltip.$el, options);
this.popUpCssHacks();
});

}
},
hasTooltipEntry: function () {
Expand Down Expand Up @@ -2953,12 +2911,10 @@ export default {
viewingModes: {
'Exploration': 'Find relevant research and view detail of neural pathways by selecting a pathway to view its connections and data sources',
'Neuron Connection': 'Discover Neuron connections by selecting a neuron and viewing its associated network connections',
'Annotation': 'View internal identifiers of features'
'Annotation': ['View feature annotations', 'Add, comment on and view feature annotations']
},
drawnType: 'All tools',
drawnTypes: ['All tools', 'Point', 'LineString', 'Polygon', 'None'],
annotatedType: 'Anyone',
annotatedTypes: ['Anyone', 'Me', 'Others'],
annotationFrom: 'Anyone',
annotatedSource: ['Anyone', 'Me', 'Others'],
openMapRef: undefined,
backgroundIconRef: undefined,
toolbarOptions: [
Expand All @@ -2975,6 +2931,7 @@ export default {
activeDrawTool: undefined,
featureAnnotationSubmitted: false,
drawnCreatedEvent: {},
previousEditEvent: {},
previousDeletedEvent: {},
connectionEntry: {},
existDrawnFeatures: [], // Store all exist drawn features
Expand Down Expand Up @@ -3029,7 +2986,17 @@ export default {
}
this.drawerOpen = false
return true
}
},
modeDescription: function () {
let description = this.viewingModes[this.viewingMode]
if (this.viewingMode === 'Annotation') {
if (this.userInformation) {
return description[1]
}
return description[0]
}
return description
},
},
watch: {
entry: function () {
Expand Down