Skip to content

Commit

Permalink
Merge pull request #216 from ddjnw1yu/more-annotation-tool-update
Browse files Browse the repository at this point in the history 
More annotation tool update
  • Loading branch information
@alan-wu
alan-wu authored Jan 6, 2025
2 parents 76f0fb1 + 590ce32 commit e08a98e
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 107 deletions.
8 changes: 4 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
},
"dependencies": {
"@abi-software/flatmap-viewer": "3.2.10",
"@abi-software/map-utilities": "^1.2.1",
"@abi-software/map-utilities": "^1.2.2-beta.3",
"@abi-software/sparc-annotation": "0.3.2",
"@abi-software/svg-sprite": "^1.0.1",
"@element-plus/icons-vue": "^2.3.1",
Expand Down
180 changes: 78 additions & 102 deletions src/components/FlatmapVuer.vue
View file
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 @@ -668,20 +645,24 @@ const centroid = (geometry) => {
let featureGeometry = { lng: 0, lat: 0, }
let coordinates
if (geometry.type === "Polygon") {
coordinates = geometry.coordinates[0]
if (geometry.coordinates.length) {
coordinates = geometry.coordinates[0]
}
} else {
coordinates = geometry.coordinates
}
if (!(geometry.type === 'Point')) {
coordinates.map((coor) => {
featureGeometry.lng += parseFloat(coor[0])
featureGeometry.lat += parseFloat(coor[1])
})
featureGeometry.lng = featureGeometry.lng / coordinates.length
featureGeometry.lat = featureGeometry.lat / coordinates.length
} else {
featureGeometry.lng += parseFloat(coordinates[0])
featureGeometry.lat += parseFloat(coordinates[1])
if (coordinates) {
if (!(geometry.type === 'Point')) {
coordinates.map((coor) => {
featureGeometry.lng += parseFloat(coor[0])
featureGeometry.lat += parseFloat(coor[1])
})
featureGeometry.lng = featureGeometry.lng / coordinates.length
featureGeometry.lat = featureGeometry.lat / coordinates.length
} else {
featureGeometry.lng += parseFloat(coordinates[0])
featureGeometry.lat += parseFloat(coordinates[1])
}
}
return featureGeometry
}
Expand Down Expand Up @@ -773,6 +754,7 @@ export default {
if (this.annotationSidebar) this.$emit("annotation-close")
this.closeTooltip()
this.annotationEventCallback({}, { type: 'aborted' })
this.initialiseDrawing()
},
/**
* @public
Expand Down Expand Up @@ -848,21 +830,19 @@ export default {
* @arg {String} `name`
*/
toolbarEvent: function (type, name) {
if (this.isValidDrawnCreated) return;
this.manualAbortedOnClose()
this.doubleClickedFeature = false
this.connectionEntry = {}
// Deselect any feature when draw mode/tool is changed
this.changeAnnotationDrawMode({ mode: 'simple_select' })
if (type === 'mode') {
// Deselect any feature when draw mode is changed
this.changeAnnotationDrawMode({ mode: 'simple_select' })
this.activeDrawMode = name
} else if (type === 'tool') {
// Remove any unsubmitted drawn
this.cancelDrawnFeature()
if (name) {
const tool = name.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`)
this.changeAnnotationDrawMode({ mode: `draw${tool}` })
this.initialiseDrawing()
} else {
this.changeAnnotationDrawMode({ mode: 'simple_select' })
this.cancelDrawnFeature()
}
this.activeDrawTool = name
}
Expand All @@ -885,8 +865,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 @@ -972,9 +951,12 @@ export default {
) {
this.featureAnnotationSubmitted = true
this.mapImp.commitAnnotationEvent(this.annotationEntry)
if (this.annotationEntry.type === 'deleted') {
if (annotation.body.comment === "Position Updated") {
this.annotationEntry.positionUpdated = false
} else if (this.annotationEntry.type === 'deleted') {
if (this.annotationSidebar) this.$emit("annotation-close")
this.closeTooltip()
// Only delete need, keep the annotation tooltip/sidebar open if created/updated
this.annotationEntry = {}
}
this.addAnnotationFeature()
Expand Down Expand Up @@ -1015,12 +997,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 @@ -1029,22 +1005,22 @@ 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.clearAnnotationFeature()
this.loading = true
}
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 +1038,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 +1552,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 All @@ -1607,6 +1570,15 @@ export default {
this.connectionEntry = drawnFeature.connection
}
this.annotationDrawModeEvent(payload)
} else {
if (this.annotationSidebar && this.previousEditEvent.type === 'updated') {
this.annotationEntry = {
...this.previousEditEvent,
resourceId: this.serverURL
}
this.annotationEventCallback({}, { type: 'aborted' })
}
this.previousEditEvent = {}
}
}
} else {
Expand All @@ -1624,6 +1596,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 @@ -1870,12 +1843,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 +2147,7 @@ export default {
!this.disableUI && (
(
this.viewingMode === 'Annotation' &&
!this.annotationSidebar &&
this.userInformation
!this.annotationSidebar
) ||
(
this.viewingMode === 'Exploration' &&
Expand All @@ -2193,7 +2161,6 @@ export default {
this.mapImp.showPopup(featureId, this.$refs.tooltip.$el, options);
this.popUpCssHacks();
});
}
},
hasTooltipEntry: function () {
Expand Down Expand Up @@ -2958,12 +2925,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 @@ -2980,6 +2945,7 @@ export default {
activeDrawTool: undefined,
featureAnnotationSubmitted: false,
drawnCreatedEvent: {},
previousEditEvent: {},
previousDeletedEvent: {},
connectionEntry: {},
existDrawnFeatures: [], // Store all exist drawn features
Expand Down Expand Up @@ -3034,7 +3000,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

0 comments on commit e08a98e

Please sign in to comment.