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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.6.1-annotator.0",
+  "version": "0.6.1-annotator.2",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -17,11 +17,19 @@
     "serve": "vite --host",
     "build-bundle": "vite build",
     "build-static": "vite build -c vite.static-build.js",
+    "test": "cypress run --component",
+    "cypress:open": "cypress open",
     "release:beta": "npm version prerelease --preid=beta; npm publish --tag beta",
     "release:minor": "npm version minor; npm publish",
     "release:patch": "npm version patch;  npm publish",
     "changelog": "auto-changelog -p --output CHANGELOG.md --template keepachangelog",
-    "version": "npm run build-bundle;npm run changelog; git add CHANGELOG.md"
+    "version": "npm run build-bundle;npm run changelog; git add CHANGELOG.md",
+    "vuese-gen": "node vuese-generator.js",
+    "vuese-watch": "node vuese-generator.js watch",
+    "docs:dev": "vitepress dev docs",
+    "docs:watch": "concurrently \"npm run vuese-watch\" \"npm run docs:dev\"",
+    "docs:build": "npm run vuese-gen; vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   },
   "type": "module",
   "main": "./dist/flatmapvuer.umd.cjs",
@@ -35,34 +43,36 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "^2.5.9",
-    "@abi-software/sparc-annotation": "0.1.1",
+    "@abi-software/flatmap-viewer": "^2.6.2",
+    "@abi-software/sparc-annotation": "0.3.1",
     "@abi-software/svg-sprite": "^0.4.0-vue3.3",
     "@element-plus/icons-vue": "^2.3.1",
-    "@vue/compat": "^3.3.13",
-    "core-js": "^3.22.5",
     "css-element-queries": "^1.2.2",
-    "current-script-polyfill": "^1.0.0",
-    "customised-viewer": "^0.1.4",
-    "element-plus": "^2.4.4",
-    "file-loader": "^5.0.2",
-    "lodash": "^4.17.21",
+    "element-plus": "2.5.5",
     "mitt": "^3.0.1",
+    "pinia": "^2.1.7",
     "unplugin-vue-components": "^0.26.0",
     "vue": "^3.3.13"
   },
   "devDependencies": {
+    "@cypress/webpack-dev-server": "^3.6.1",
     "@vitejs/plugin-vue": "^4.6.2",
-    "@vue/compiler-sfc": "^3.3.13",
+    "@vuese/markdown-render": "^2.11.3",
+    "@vuese/parser": "^2.10.3",
     "auto-changelog": "^2.4.0",
     "babel-eslint": "^10.1.0",
-    "babel-plugin-component": "^1.1.1",
-    "base64-inline-loader": "^2.0.1",
+    "chokidar": "^3.6.0",
+    "concurrently": "^8.2.2",
+    "cypress": "^13.6.6",
+    "cypress-multi-reporters": "^1.6.4",
+    "cypress-wait-until": "^2.0.1",
     "eslint": "^8.56.0",
+    "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-vue": "^9.19.2",
+    "mochawesome": "^7.1.3",
     "sass": "^1.69.5",
     "vite": "^5.0.10",
-    "webpack-node-externals": "^2.5.2"
+    "vitepress": "^1.0.0-rc.44"
   },
   "eslintConfig": {
     "root": true,

package/reporter-config.json

@@ -0,0 +1,10 @@
+{
+  "reporterEnabled": "mochawesome",
+  "mochawesomeReporterOptions": {
+    "reportDir": "cypress/reports/mocha",
+    "quiet": true,
+    "overwrite": false,
+    "html": true,
+    "json": true
+  }
+}

package/src/App.vue

@@ -67,11 +67,7 @@
       @pan-zoom-callback="panZoomcallback"
       @open-map="openMap"
       @ready="FlatmapReady"
-      :featureInfo="featureInfo"
-      :searchable="searchable"
-      :layerControl="layerControl"
       :initial="initial"
-      :pathControls="pathControls"
       :helpMode="helpMode"
       :displayMinimap="true"
       :enableOpenMapUI="true"
@@ -166,10 +162,6 @@ export default {
   data: function () {
     return {
       searchText: '',
-      featureInfo: true,
-      searchable: true,
-      pathControls: true,
-      layerControl: true,
       disableUI: false,
       minZoom: 4,
       availableSpecies: {
@@ -233,8 +225,8 @@ export default {
       //flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v3/"
       //flatmapAPI: "https://mapcore-demo.org/current/flatmap/v3/"
       flatmapAPI: 'https://mapcore-demo.org/devel/flatmap/v4/',
-      //flatmapAPI: "https://mapcore-demo.org/fccb/flatmap/",
-      //flatmapAPI: "https://mapcore-demo.org/staging/flatmap/v1/",
+      //flatmapAPI: "https://mapcore-demo.org/fccb/flatmap/"
+      //flatmapAPI: "https://mapcore-demo.org/staging/flatmap/v1/"
       // flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v1/",
       ElIconSetting: shallowRef(ElIconSetting)
     }

package/src/components/AnnotationTool.vue

@@ -43,7 +43,7 @@
               <el-row class="dialog-text">
                 <strong>Evidence: </strong>
                 <el-row
-                  v-for="evidence in sub.evidence"
+                  v-for="evidence in sub.body.evidence"
                   :key="evidence"
                   class="dialog-text"
                 >
@@ -51,7 +51,7 @@
                 </el-row>
               </el-row>
               <el-row class="dialog-text">
-                <strong>Comment: </strong> {{ sub.comment }}
+                <strong>Comment: </strong> {{ sub.body.comment }}
               </el-row>
             </div>
           </template>
@@ -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">
@@ -189,7 +189,7 @@ export default {
       type: Object,
     },
   },
-  inject: ['flatmapAPI', '$annotator'],
+  inject: ['flatmapAPI', '$annotator', 'userApiKey'],
   data: function () {
     return {
       displayPair: {
@@ -209,6 +209,7 @@ export default {
       prevSubs: [],
       showSubmissions: true,
       errorMessage: '',
+      creator: undefined
     }
   },
   computed: {
@@ -258,6 +259,7 @@ export default {
         ) {
           this.$annotator
             .itemAnnotations(
+              this.userApiKey,
               this.annotationEntry['resourceId'],
               this.annotationEntry['featureId']
             )
@@ -307,16 +309,20 @@ export default {
           const userAnnotation = {
             resource: this.annotationEntry['resourceId'],
             item: this.annotationEntry['featureId'],
-            evidence: evidenceURLs,
-            comment: this.comment,
+            body: {
+              evidence: evidenceURLs,
+              comment: this.comment,
+            },
             feature: this.annotationEntry['feature']
           }
+          Object.assign(userAnnotation.body, this.annotationEntry['body'])
           if (this.annotationEntry['type'] === 'deleted') {
             userAnnotation.feature = undefined
           }
+          if (this.creator) userAnnotation.creator = this.creator
           this.$annotator
-          .addAnnotation(userAnnotation)
-          .then(() => {
+            .addAnnotation(this.userApiKey, userAnnotation)
+            .then(() => {
               this.$emit('annotation', userAnnotation)
               this.errorMessage = ''
               this.resetSubmission()
@@ -341,17 +347,21 @@ export default {
   },
   watch: {
     annotationEntry: {
-      handler: function () {
-        this.resetSubmission()
-        this.updatePrevSubmissions()
+      handler: function (newVal, oldVal) {
+        if (newVal !== oldVal) {
+          this.resetSubmission()
+          this.updatePrevSubmissions()
+        }
       },
       immediate: false,
       deep: false,
     },
   },
   mounted: function () {
-    this.$annotator.authenticate().then((userData) => {
+    this.$annotator.authenticate(this.userApiKey).then((userData) => {
       if (userData.name && userData.email) {
+        this.creator = userData
+        if (!userData.orcid) this.creator.orcid = '0000-0000-0000-0000'
         this.authenticated = true
         this.updatePrevSubmissions()
       } else {

package/src/components/ConnectionDialog.vue

@@ -0,0 +1,127 @@
+<template>
+    <div class="dialog-container">
+        <el-row>
+            <span class="dialog-title" v-if="drawing">Finalise drawing</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)">
+                        Confirm
+                    </el-button>
+                </el-col>
+                <el-col :span="11">
+                    <el-button type="primary" plain @click="$emit('cancel', true)">
+                        Cancel
+                    </el-button>
+                </el-col>
+            </el-row>
+            <el-row v-else>
+                <el-button type="primary" plain @click="$emit('display', false)">
+                    Close
+                </el-button>
+            </el-row>
+        </el-row>
+        <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(key)">
+                            <span>{{ capitalise(value.label) }}</span>
+                        </el-card>
+                    </el-col>
+                    <el-col :span="4" v-if="key === tooltipId">
+                        <el-icon><el-icon-circle-close @click="handleTooltipClose" /></el-icon>
+                    </el-col>
+                </el-row>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import { CircleClose as ElIconCircleClose } from '@element-plus/icons-vue'
+import {
+    ElRow as Row,
+    ElCol as Col,
+    ElCard as Card
+} from 'element-plus'
+
+export default {
+    name: 'ConnectionDialog',
+    components: {
+        Row,
+        Col,
+        Card
+    },
+    props: {
+        entry: {
+            type: Object,
+        },
+        drawing: {
+            type: Boolean,
+            default: false,
+        },
+        connection: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data: function () {
+        return {
+            tooltipId: undefined
+        }
+    },
+    watch: {
+        connection: function () {
+            this.tooltipId = undefined
+        },
+    },
+    methods: {
+        capitalise: function (label) {
+            return label[0].toUpperCase() + label.slice(1);
+        },
+        handleTooltipOpen: function (value) {
+            this.tooltipId = value
+            this.$emit('tooltip', value)
+        },
+        handleTooltipClose: function () {
+            this.tooltipId = undefined
+            this.$emit('popup', true)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-container {
+    width: 200px;
+    height: fit-content;
+    text-align: justify;
+    border-radius: 4px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    pointer-events: auto;
+    background: #fff;
+    border: 1px solid $app-primary-color;
+    display: flex;
+    flex-direction: column;
+    padding: .8em;
+}
+
+.dialog-title {
+    font-size: 18px;
+    font-weight: bold;
+    color: rgb(131, 0, 191);
+}
+
+.el-icon {
+    cursor: pointer;
+}
+
+:deep(.el-card) {
+    --el-card-padding: 8px;
+    border: 0;
+    cursor: pointer;
+}
+</style>

package/src/components/ExternalResourceCard.vue

@@ -5,6 +5,7 @@
         <el-button
           v-if="resource.id === 'pubmed'"
           class="button"
+          id="open-pubmed-button"
           :icon="ElIconNotebook"
           @click="openUrl(resource.url)"
         >