@abi-software/flatmapvuer 0.6.1-annotator.1 → 0.6.1-annotator.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.6.1-annotator.1",
+  "version": "0.6.1-annotator.2",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@abi-software/flatmap-viewer": "^2.6.2",
-    "@abi-software/sparc-annotation": "0.2.0",
+    "@abi-software/sparc-annotation": "0.3.1",
     "@abi-software/svg-sprite": "^0.4.0-vue3.3",
     "@element-plus/icons-vue": "^2.3.1",
     "css-element-queries": "^1.2.2",

package/src/components/AnnotationTool.vue

@@ -82,7 +82,7 @@
               </el-row>
               <template v-if="!isDeleted">
                 <el-row class="dialog-text">
-                  <strong>Evidvence:</strong>
+                  <strong>Evidence:</strong>
                 </el-row>
                 <el-row v-for="(value, index) in evidence" :key="value">
                   <el-col :span="20">

package/src/components/{RelevanceDialog.vue → ConnectionDialog.vue}

@@ -2,7 +2,7 @@
     <div class="dialog-container">
         <el-row>
             <span class="dialog-title" v-if="drawing">Finalise drawing</span>
-            <span class="dialog-title" v-else>Visualise relevance</span>
+            <span class="dialog-title" v-else>Visualise connection</span>
             <el-row v-if="drawing">
                 <el-col :span="13">
                     <el-button type="primary" plain @click="$emit('confirm', true)">
@@ -21,16 +21,16 @@
                 </el-button>
             </el-row>
         </el-row>
-        <el-row v-if="relevance">
+        <el-row v-if="connection">
             <el-col>
                 <b><span>Related Features</span></b>
                 <el-row v-for="(value, key) in entry" :key="key">
                     <el-col :span="20">
-                        <el-card shadow="hover" @click="handleTooltipOpen(value)">
-                            <span>{{ capitalise(key) }}</span>
+                        <el-card shadow="hover" @click="handleTooltipOpen(key)">
+                            <span>{{ capitalise(value.label) }}</span>
                         </el-card>
                     </el-col>
-                    <el-col :span="4" v-if="value === tooltipId">
+                    <el-col :span="4" v-if="key === tooltipId">
                         <el-icon><el-icon-circle-close @click="handleTooltipClose" /></el-icon>
                     </el-col>
                 </el-row>
@@ -49,7 +49,7 @@ import {
 } from 'element-plus'
 
 export default {
-    name: 'RelevanceDialog',
+    name: 'ConnectionDialog',
     components: {
         Row,
         Col,
@@ -63,7 +63,7 @@ export default {
             type: Boolean,
             default: false,
         },
-        relevance: {
+        connection: {
             type: Boolean,
             default: false,
         },
@@ -74,7 +74,7 @@ export default {
         }
     },
     watch: {
-        relevance: function () {
+        connection: function () {
             this.tooltipId = undefined
         },
     },
@@ -124,4 +124,4 @@ export default {
     border: 0;
     cursor: pointer;
 }
-</style>
+</style>

package/src/components/FlatmapVuer.vue

@@ -20,6 +20,11 @@
             :visible="hoverVisibilities[6].value"
             ref="warningPopover"
           >
+<!--
+What magic meaning do the numbers 6, 7, etc have?
+
+Please use `const` to assign meaningful names to them...
+ -->
             <p
               v-if="isLegacy"
               @mouseover="showToolitip(6)"
@@ -140,7 +145,7 @@
         v-show="viewingMode === 'Annotation' && userInformation && !disableUI"
       >
         <el-popover
-          content="Relevance"
+          content="Draw Connection"
           placement="top"
           :teleported="false"
           trigger="manual"
@@ -151,8 +156,8 @@
           <template #reference>
             <map-svg-icon
               icon="connection"
-              class="icon-button drawRelevance inactive"
-              @click="relevanceDialogPopup"
+              class="icon-button drawConnection inactive"
+              @click="connectionDialogPopup"
               @mouseover="showToolitip(10)"
               @mouseout="hideToolitip(10)"
             />
@@ -668,17 +673,17 @@
         :annotationDisplay="viewingMode === 'Annotation'"
         @annotation="commitAnnotationEvent"
       />
-      <RelevanceDialog
-        class="relevance-dialog"
-        v-show="relevanceDisplay"
-        :entry="relevanceEntry"
+      <ConnectionDialog
+        class="connection-dialog"
+        v-show="connectionDisplay"
+        :entry="connectionEntry"
         :drawing="inDrawing"
-        :relevance="relevance"
-        @display="relevanceDialogPopup"
+        :connection="connection"
+        @display="connectionDialogPopup"
         @confirm="confirmDrawnFeature"
         @cancel="cancelDrawnFeature"
         @popup="closePopup"
-        @tooltip="displayRelevantFeatureTooltip"
+        @tooltip="displayConnectedFeatureTooltip"
       />
     </div>
   </div>
@@ -717,7 +722,7 @@ import yellowstar from '../icons/yellowstar'
 import ResizeSensor from 'css-element-queries/src/ResizeSensor'
 import * as flatmap from '@abi-software/flatmap-viewer'
 import { AnnotationService } from '@abi-software/sparc-annotation'
-import RelevanceDialog from './RelevanceDialog.vue'
+import ConnectionDialog from './ConnectionDialog.vue'
 import { mapState } from 'pinia'
 import { useMainStore } from '@/store/index'
 
@@ -908,7 +913,7 @@ export default {
         this.initialiseDrawing()
       }
     },
-    displayRelevantFeatureTooltip: function (id) {
+    displayConnectedFeatureTooltip: function (id) {
       if (this.mapImp) {
         const data = this.mapImp.featureProperties(id)
         this.checkAndCreatePopups({ feature: data })
@@ -917,31 +922,31 @@ export default {
     confirmDrawnFeature: function () {
       if (this.createdEvent) {
         this.checkAndCreatePopups(this.createdEvent)
-        // Add relevance if exist to annotationEntry
-        // Relevance will only be added in creating new drawn feature annotation
+        // Add connection if exist to annotationEntry
+        // Connection will only be added in creating new drawn feature annotation
         // And will not be updated if move drawn features
-        if (Object.keys(this.relevanceEntry).length > 0) {
-          this.annotationEntry.feature.relevance = this.relevanceEntry
+        if (Object.keys(this.connectionEntry).length > 0) {
+          this.annotationEntry.feature.connection = this.connectionEntry
         }
         this.initialiseDrawing()
       }
     },
     initialiseDialog: function () {
-      this.relevanceDisplay = false
-      this.relevanceEntry = {}
+      this.connectionDisplay = false
+      this.connectionEntry = {}
     },
-    relevanceDialogPopup: function () {
-      const inactive = this.$el.querySelector('.drawRelevance').classList.contains('inactive')
+    connectionDialogPopup: function () {
+      const inactive = this.$el.querySelector('.drawConnection').classList.contains('inactive')
       // disable click popup if icon inactive or in drawing
       if (!inactive && !this.inDrawing) { 
-        this.closePopup()       
-        this.relevanceDisplay = !this.relevanceDisplay
+        this.closePopup()
+        this.connectionDisplay = !this.connectionDisplay
       }
     },
     drawingEvent: function (type) {
       this.closePopup()
       // disable mode icon click if any tool is active
-      if (this.drawnTypes.includes(type) && !this.activeDrawMode && !this.relevanceDisplay) {
+      if (this.drawnTypes.includes(type) && !this.activeDrawMode && !this.connectionDisplay) {
         if (type === 'Point') {
           const point = this.$el.querySelector('.mapbox-gl-draw_point')
           this.$el.querySelector('.mapbox-gl-draw_point').click()
@@ -1034,6 +1039,10 @@ export default {
       if (this.mapImp) {
         this.annotator.annotatedItemIds(this.userToken, this.serverURL)
           .then((annotatedItemIds) => {
+              if ('resource' in annotatedItemIds) {
+                // The annotator has `resource` and `items` fields
+                annotatedItemIds = annotatedItemIds.items
+              }
             for (const id of annotatedItemIds) {
               this.mapImp.setFeatureAnnotated(id)
             }
@@ -1050,6 +1059,10 @@ export default {
           if (!this.annotationSubmitted) this.loading = true
           this.annotator.drawnFeatures(this.userToken, this.serverURL)
             .then((drawnFeatures) => {
+              if ('resource' in drawnFeatures) {
+                // The annotator has `resource` and `features` fields
+                drawnFeatures = drawnFeatures.features
+              }
               // Use to switch the displayed feature type
               if (this.drawnType !== 'All tools') {
                 drawnFeatures = drawnFeatures.filter((feature) => {
@@ -1467,7 +1480,7 @@ export default {
               this.inDrawing = true
             } else if (data.feature.mode === 'simple_select' && this.inDrawing) {
               if (this.createdEvent) {
-                this.relevanceDisplay = true
+                this.connectionDisplay = true
               } else {
                 // Reset if a invalid draw
                 this.initialiseDrawing()
@@ -1487,8 +1500,8 @@ export default {
               if (this.currentDrawnFeature) {
                 let feature = this.drawnAnnotationFeatures
                   .filter((feature) => feature.id === this.currentDrawnFeature.id)[0]
-                if (feature && feature.relevance) {
-                  this.relevanceEntry = feature.relevance
+                if (feature && feature.connection) {
+                  this.connectionEntry = feature.connection
                 }
                 this.drawModeEvent(payload)
               }
@@ -1543,12 +1556,15 @@ export default {
               } else {
                 this.currentActive = data.models ? data.models : ''
                 // Stop adding features if dialog displayed
-                if (this.inDrawing && !this.relevanceDisplay) {
-                  // Only clicked relevance data will be added 
-                  let relevant = data.label ? data.label : `*${data.id}`
-                  // only the linestring will have relevance at the current stage
-                  if (relevant && this.activeDrawTool === 'LineString') {
-                    this.relevanceEntry[relevant] = data.featureId
+                if (this.inDrawing && !this.connectionDisplay) {
+                  // Only clicked connection data will be added
+                  let nodeLabel = data.label ? data.label : `Feature ${data.id}`
+                  // only the linestring will have connection at the current stage
+                  if (nodeLabel && this.activeDrawTool === 'LineString') {
+                    this.connectionEntry[data.featureId] = Object.assign({label: nodeLabel},
+                      Object.fromEntries(
+                        Object.entries(data)
+                              .filter(([key]) => ['featureId', 'models'].includes(key))))
                   }
                 }
               }
@@ -1578,7 +1594,7 @@ export default {
     // for dialog popup
     dialogCssHacks: function () {
       this.$nextTick(() => {
-        const dialog = this.$el.querySelector('.relevance-dialog')
+        const dialog = this.$el.querySelector('.connection-dialog')
         draggable(this.$el, dialog)
         // dialog popup at the click position
         // slightly change x or y if close to boundary
@@ -1601,7 +1617,7 @@ export default {
     },
     drawIconCssHacks: function () {
       // set tool/mode icon status
-      if (this.$el.querySelector('.iconSelected') || !this.relevanceDisplay) {
+      if (this.$el.querySelector('.iconSelected') || !this.connectionDisplay) {
         this.drawnTypes.map((t) => {
           const dtype = this.$el.querySelector(`.draw${t}`)
           if (dtype) {
@@ -1619,7 +1635,7 @@ export default {
         this.drawModes.map((m) => {
           this.$el.querySelector(`.draw${m}`).classList.add('inactive');
         })
-      } else if (this.activeDrawMode || this.relevanceDisplay) {
+      } else if (this.activeDrawMode || this.connectionDisplay) {
         if (this.activeDrawMode) {
           this.$el.querySelector(`.draw${this.activeDrawMode}`).classList.add('iconSelected');
         }
@@ -1657,18 +1673,13 @@ export default {
     },
     // checkNeuronClicked shows a neuron path pop up if a path was recently clicked
     createConnectivityBody: function () {
-      if (Object.keys(this.relevanceEntry).length > 0) {        
-        const featureIds = Object.values(this.relevanceEntry)
+      if (Object.keys(this.connectionEntry).length > 0) {
+        const features = Object.values(this.connectionEntry)
         const body = {
           type: 'connectivity',
-          sourceId: featureIds[0],
-          targetId: featureIds[featureIds.length - 1],
-          intermediateIds: [],
-        }
-        if (featureIds.length > 2) {
-          featureIds.slice(1, -1).forEach((id) => {
-            body.intermediateIds.push(id)
-          });
+          source: features[0],
+          target: features[features.length - 1],
+          intermediates: features.slice(1, -1),
         }
         this.annotationEntry.body = body
       }
@@ -2487,8 +2498,8 @@ export default {
       createdEvent: undefined,
       annotationSubmitted: false,
       inDrawing: false,
-      relevanceDisplay: false,
-      relevanceEntry: {},
+      connectionDisplay: false,
+      connectionEntry: {},
       drawnAnnotationFeatures: undefined, // Store all exist drawn features
       doubleClickedFeature: false,
       activeDrawMode: undefined,
@@ -2503,8 +2514,8 @@ export default {
   },
   computed: {
     ...mapState(useMainStore, ['userToken']),
-    relevance: function () {
-      return Object.keys(this.relevanceEntry).length > 0
+    connection: function () {
+      return Object.keys(this.connectionEntry).length > 0
     }
   },
   watch: {
@@ -2537,27 +2548,27 @@ export default {
       this.drawIconCssHacks()
     },
     /**
-     * hide dialog when relevanceEntry is empty
+     * hide dialog when connectionEntry is empty
      */
-    relevance: function (value) {
-      const relevanceIcon = this.$el.querySelector('.drawRelevance')
+    connection: function (value) {
+      const connectionIcon = this.$el.querySelector('.drawConnection')
       if (!value) {
-        this.relevanceDisplay = false
-        relevanceIcon.classList.add('inactive')
+        this.connectionDisplay = false
+        connectionIcon.classList.add('inactive')
       } else {
-        relevanceIcon.classList.remove('inactive')
+        connectionIcon.classList.remove('inactive')
       }
     },
     /**
      * popup dialog via click icon
      */
-    relevanceDisplay: function (display) {
-      const relevanceIcon = this.$el.querySelector('.drawRelevance')
+    connectionDisplay: function (display) {
+      const connectionIcon = this.$el.querySelector('.drawConnection')
       if (display) {
-        relevanceIcon.classList.add('iconSelected')
+        connectionIcon.classList.add('iconSelected')
         this.dialogCssHacks()
       } else {
-        relevanceIcon.classList.remove('iconSelected')
+        connectionIcon.classList.remove('iconSelected')
       }
       this.drawIconCssHacks()
     },
@@ -2871,7 +2882,7 @@ export default {
 }
 
 .drawPoint, .drawLineString, .drawPolygon, 
-.drawDelete, .drawEdit, .drawRelevance,
+.drawDelete, .drawEdit, .drawConnection,
 .zoomIn, .zoomOut, .fitWindow {
   padding: 4px;
 }
@@ -3298,7 +3309,7 @@ export default {
   }
 }
 
-.relevance-dialog {
+.connection-dialog {
   position: absolute;
   z-index: 10;
   cursor: move;

package/src/components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AnnotationTool: typeof import('./components/AnnotationTool.vue')['default']
+    ConnectionDialog: typeof import('./components/ConnectionDialog.vue')['default']
     DynamicLegends: typeof import('./components/legends/DynamicLegends.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
@@ -38,7 +39,6 @@ declare module 'vue' {
     FlatmapVuer: typeof import('./components/FlatmapVuer.vue')['default']
     MultiFlatmapVuer: typeof import('./components/MultiFlatmapVuer.vue')['default']
     ProvenancePopup: typeof import('./components/ProvenancePopup.vue')['default']
-    RelevanceDialog: typeof import('./components/RelevanceDialog.vue')['default']
     SelectionsGroup: typeof import('./components/SelectionsGroup.vue')['default']
     SvgLegends: typeof import('./components/legends/SvgLegends.vue')['default']
     Tooltip: typeof import('./components/Tooltip.vue')['default']