@abi-software/flatmapvuer 1.2.0 → 1.3.1-beta.0

package/src/components/MultiFlatmapVuer.vue

@@ -56,6 +56,9 @@
       @resource-selected="resourceSelected"
       @ready="FlatmapReady"
       @pan-zoom-callback="panZoomCallback"
+      :connectivityInfoSidebar="connectivityInfoSidebar"
+      @connectivity-info-open="onConnectivityInfoOpen"
+      @connectivity-info-close="onConnectivityInfoClose"
       @open-map="
         /**
          * This event is emitted when the user chooses a different map option
@@ -261,6 +264,12 @@ export default {
        */
       this.$emit('pan-zoom-callback', payload)
     },
+    onConnectivityInfoClose: function () {
+      this.$emit('connectivity-info-close');
+    },
+    onConnectivityInfoOpen: function (entryData) {
+      this.$emit('connectivity-info-open', entryData);
+    },
     onSelectionsDataChanged: function (data) {
       this.$emit('pathway-selection-changed', data);
     },
@@ -697,7 +706,14 @@ export default {
     disableUI: {
       type: Boolean,
       default: false,
-    }
+    },
+    /**
+     * The option to show connectivity information in sidebar
+     */
+    connectivityInfoSidebar: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: function () {
     return {

package/src/components/index.js

@@ -1,8 +1,6 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import FlatmapVuer from './FlatmapVuer.vue'
-import MultiFlatmapVuer from './MultiFlatmapVuer.vue'
-import Tooltip from './Tooltip.vue'
-import HelpModeDialog from './HelpModeDialog.vue'
+import FlatmapVuer from "./FlatmapVuer.vue";
+import MultiFlatmapVuer from "./MultiFlatmapVuer.vue";
 
-export { FlatmapVuer, MultiFlatmapVuer, Tooltip, HelpModeDialog }
+export { FlatmapVuer, MultiFlatmapVuer };

package/src/components.d.ts

@@ -7,44 +7,26 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    AnnotationTool: typeof import('./components/AnnotationTool.vue')['default']
-    ConnectionDialog: typeof import('./components/ConnectionDialog.vue')['default']
-    DrawTool: typeof import('./components/DrawTool.vue')['default']
     DynamicLegends: typeof import('./components/legends/DynamicLegends.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
-    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElIconArrowDown: typeof import('@element-plus/icons-vue')['ArrowDown']
     ElIconArrowLeft: typeof import('@element-plus/icons-vue')['ArrowLeft']
-    ElIconArrowUp: typeof import('@element-plus/icons-vue')['ArrowUp']
-    ElIconClose: typeof import('@element-plus/icons-vue')['Close']
-    ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
-    ElIconEdit: typeof import('@element-plus/icons-vue')['Edit']
-    ElIconFinished: typeof import('@element-plus/icons-vue')['Finished']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
     ElIconWarningFilled: typeof import('@element-plus/icons-vue')['WarningFilled']
-    ElInput: typeof import('element-plus/es')['ElInput']
-    ElMain: typeof import('element-plus/es')['ElMain']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElTree: typeof import('element-plus/es')['ElTree']
-    ExternalResourceCard: typeof import('./components/ExternalResourceCard.vue')['default']
     FlatmapVuer: typeof import('./components/FlatmapVuer.vue')['default']
-    HelpModeDialog: typeof import('./components/HelpModeDialog.vue')['default']
     MultiFlatmapVuer: typeof import('./components/MultiFlatmapVuer.vue')['default']
-    ProvenancePopup: typeof import('./components/ProvenancePopup.vue')['default']
     SelectionsGroup: typeof import('./components/SelectionsGroup.vue')['default']
     SvgLegends: typeof import('./components/legends/SvgLegends.vue')['default']
-    Tooltip: typeof import('./components/Tooltip.vue')['default']
-    TreeControls: typeof import('./components/TreeControls.vue')['default']
   }
   export interface ComponentCustomProperties {
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']

package/src/services/flatmapQueries.js

@@ -222,7 +222,7 @@ let FlatmapQueries = function () {
     this.origins = []
     this.components = []
     if (!keastIds || keastIds.length == 0) return
-    
+
     let prom1 = this.queryForConnectivity(keastIds, signal) // This on returns a promise so dont need 'await'
     let prom2 = await this.pubmedQueryOnIds(eventData)
     let results = await Promise.all([prom1, prom2])
@@ -281,10 +281,10 @@ let FlatmapQueries = function () {
     if (node.length === 1) { // If the node is in the form [id]
       console.error("Server returns a single node", node)
       return node[0]
-    } else {  
+    } else {
       if (node.length === 2 && node[1].length === 0) { // If the node is in the form [id, []]
         return node[0]
-      } else {  
+      } else {
         return false // If the node is in the form [id, [id1, id2]]
       }
     }
@@ -294,7 +294,7 @@ let FlatmapQueries = function () {
 
     // Check if the node is a single node or a node with multiple children
     let nodeIsSingle = this.findIfNodeIsSingle(node)
-   
+
     // Case where node is in the form [id]
     if (nodeIsSingle) {
       return lookUp[nodeIsSingle]
@@ -467,7 +467,8 @@ let FlatmapQueries = function () {
   this.pubmedSearchUrl = function (ids) {
     let url = 'https://pubmed.ncbi.nlm.nih.gov/?'
     let params = new URLSearchParams()
-    params.append('term', ids)
+    const decodedIDs = ids.map((id) => decodeURIComponent(id));
+    params.append('term', decodedIDs);
     return url + params.toString()
   }
 }

package/vite.config.js

@@ -50,11 +50,12 @@ export default defineConfig(({ command, mode }) => {
         fileName: 'flatmapvuer',
       },
       rollupOptions: {
-        external: ["vue", "@abi-software/svg-sprite"],
+        external: ["vue", "@abi-software/svg-sprite", "@abi-software/map-utilities"],
         output: {
           globals: {
             vue: "Vue",
-            "@abi-software/svg-sprite": "@abi-software/svg-sprite"
+            "@abi-software/svg-sprite": "@abi-software/svg-sprite",
+            "@abi-software/map-utilities": "@abi-software/map-utilities"
           },
         },
       },

package/src/components/AnnotationTool.vue

@@ -1,501 +0,0 @@
-<template>
-  <el-main class="main">
-    <div class="block">
-      <el-row class="info-field">
-        <div class="title">Feature Annotations</div>
-      </el-row>
-      <template v-if="annotationEntry">
-        <el-row
-          v-for="(key, label) in displayPair"
-          v-show="annotationEntry[key]"
-          class="dialog-text"
-          :key="key"
-        >
-          <strong>{{ label }}: </strong>&nbsp;{{ annotationEntry[key] }}
-        </el-row>
-        <template v-if="prevSubs.length > 0">
-          <div
-            v-show="showSubmissions"
-            class="hide"
-            @click="showSubmissions = false"
-          >
-            Hide previous submissions
-            <el-icon><el-icon-arrow-up /></el-icon>
-          </div>
-          <div
-            v-show="!showSubmissions"
-            class="hide"
-            @click="showSubmissions = true"
-          >
-            Show previous {{ prevSubs.length }} submission(s)
-            <el-icon><el-icon-arrow-down /></el-icon>
-          </div>
-          <template v-if="showSubmissions">
-            <el-row class="dialog-spacer"></el-row>
-            <el-row class="dialog-text">
-              <strong class="sub-title">Previous submissions:</strong>
-            </el-row>
-            <div class="entry" v-for="(sub, index) in prevSubs" :key="index">
-              <el-row class="dialog-text">
-                <strong>{{ formatTime(sub.created) }}</strong>
-                {{ sub.creator.name }}
-              </el-row>
-              <el-row class="dialog-text">
-                <strong>Evidence: </strong>
-                <el-row
-                  v-for="evidence in sub.body.evidence"
-                  :key="evidence"
-                  class="dialog-text"
-                >
-                  <a :href="evidence" target="_blank"> {{ evidence }}</a>
-                </el-row>
-              </el-row>
-              <el-row class="dialog-text">
-                <strong>Comment: </strong> {{ sub.body.comment }}
-              </el-row>
-            </div>
-          </template>
-        </template>
-        <template v-if="authenticated">
-          <template v-if="isEditable">
-            <el-row class="dialog-spacer"></el-row>
-            <el-row v-if="!editing">
-              <el-icon class="standard-icon">
-                <el-icon-edit @click="editing = true" />
-              </el-icon>
-              <el-icon
-                class="standard-icon"
-                v-if="isDeleted"
-              >
-                <el-icon-delete @click="submit"/>
-              </el-icon>
-              <el-icon
-                class="standard-icon"
-                v-else-if="isPositionUpdated"
-              >
-                <el-icon-finished @click="submit" />
-              </el-icon>
-            </el-row>
-            <template v-else>
-              <el-row class="dialog-text">
-                <strong class="sub-title">Suggest changes:</strong>
-              </el-row>
-              <template v-if="!isDeleted">
-                <el-row class="dialog-text">
-                  <strong>Evidence:</strong>
-                </el-row>
-                <el-row v-for="(value, index) in evidence" :key="value">
-                  <el-col :span="20">
-                    {{ evidence[index] }}
-                  </el-col>
-                  <el-col :span="4">
-                    <el-icon class="standard-icon">
-                      <el-icon-close @click="removeEvidence(index)" />
-                    </el-icon>
-                  </el-col>
-                </el-row>
-                <el-row>
-                  <el-input
-                    size="small"
-                    placeholder="Enter"
-                    v-model="newEvidence"
-                    @change="evidenceEntered($event)"
-                  >
-                    <template #prepend>
-                      <el-select
-                        :teleported="false"
-                        v-model="evidencePrefix"
-                        placeholder="Select"
-                        class="select-box"
-                        popper-class="flatmap_dropdown"
-                      >
-                        <el-option
-                          v-for="item in evidencePrefixes"
-                          :key="item"
-                          :label="item"
-                          :value="item"
-                        >
-                          <el-row>
-                            <el-col :span="12">{{ item }}</el-col>
-                          </el-row>
-                        </el-option>
-                      </el-select>
-                    </template>
-                  </el-input>
-                </el-row>
-              </template>
-              <el-row>
-                <strong>Comment:</strong>
-              </el-row>
-              <el-row class="dialog-text">
-                <el-input
-                  type="textarea"
-                  :autosize="{ minRows: 2, maxRows: 4 }"
-                  placeholder="Enter"
-                  v-model="comment"
-                />
-              </el-row>
-              <el-row class="dialog-text">
-                <el-button class="button" type="primary" plain @click="submit">
-                  Submit
-                </el-button>
-              </el-row>
-            </template>
-            <el-row class="dialog-text" v-if="errorMessage">
-              <strong class="sub-title"> {{ errorMessage }} </strong>
-            </el-row>
-          </template>
-        </template>
-      </template>
-    </div>
-  </el-main>
-</template>
-
-<script>
-import {
-  ArrowUp as ElIconArrowUp,
-  ArrowDown as ElIconArrowDown,
-  Edit as ElIconEdit,
-  Close as ElIconClose,
-  Delete as ElIconDelete,
-  Finished as ElIconFinished,
-} from '@element-plus/icons-vue'
-/* eslint-disable no-alert, no-console */
-import {
-  ElButton as Button,
-  ElCol as Col,
-  ElInput as Input,
-  ElMain as Main,
-  ElRow as Row,
-  ElSelect as Select,
-} from 'element-plus'
-
-export default {
-  name: 'AnnotationTool',
-  components: {
-    Button,
-    Col,
-    Input,
-    Main,
-    Row,
-    Select,
-    ElIconArrowUp,
-    ElIconArrowDown,
-    ElIconEdit,
-    ElIconClose,
-  },
-  props: {
-    annotationEntry: {
-      type: Object,
-    },
-  },
-  inject: ['flatmapAPI', '$annotator', 'userApiKey'],
-  data: function () {
-    return {
-      displayPair: {
-        'Feature ID': 'featureId',
-        Tooltip: 'label',
-        Models: 'models',
-        Name: 'name',
-        Resource: 'resourceId',
-      },
-      editing: false,
-      evidencePrefixes: ['DOI:', 'PMID:'],
-      evidencePrefix: 'DOI:',
-      evidence: [],
-      authenticated: false,
-      newEvidence: '',
-      comment: '',
-      prevSubs: [],
-      showSubmissions: true,
-      errorMessage: '',
-      creator: undefined
-    }
-  },
-  computed: {
-    isEditable: function () {
-      return (
-        this.annotationEntry['resourceId'] &&
-        this.annotationEntry['featureId']
-      )
-    },
-    isPositionUpdated: function () {
-      return (
-        this.annotationEntry['resourceId'] &&
-        this.annotationEntry['type'] === 'updated' &&
-        this.annotationEntry['positionUpdated']
-      )
-    },
-    isDeleted: function () {
-      return (
-        this.annotationEntry['resourceId'] &&
-        this.annotationEntry['type'] === 'deleted'
-      )
-    }
-  },
-  methods: {
-    evidenceEntered: function (value) {
-      if (value) {
-        this.evidence.push(this.evidencePrefix + value)
-        this.newEvidence = ''
-      }
-    },
-    formatTime: function (dateString) {
-      const options = {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-        hour: 'numeric',
-        minute: 'numeric',
-        second: 'numeric',
-      }
-      return new Date(dateString).toLocaleDateString(undefined, options)
-    },
-    updatePrevSubmissions: function () {
-      if (this.$annotator && this.authenticated) {
-        if (
-          this.annotationEntry['resourceId'] &&
-          this.annotationEntry['featureId']
-        ) {
-          this.$annotator
-            .itemAnnotations(
-              this.userApiKey,
-              this.annotationEntry['resourceId'],
-              this.annotationEntry['featureId']
-            )
-            .then((value) => {
-              this.prevSubs = value
-            })
-            .catch((reason) => {
-              console.log(reason) // Error!
-            })
-        }
-      }
-    },
-    submit: function () {
-      // User can either update/delete annotation directly 
-      // or provide extra comments for update/delete action
-      if (
-        this.annotationEntry['type'] === 'updated' &&
-        this.annotationEntry['positionUpdated']
-      ) {
-        this.comment = this.comment ?
-          `Position Updated: ${this.comment}` :
-          'Position Updated'
-      } else if (this.annotationEntry['type'] === 'deleted') {
-        this.comment = this.comment ?
-          `Feature Deleted: ${this.comment}` :
-          'Feature Deleted'
-      }
-
-      if (this.evidence.length > 0 || this.comment) {
-        if (
-          this.annotationEntry['resourceId'] &&
-          this.annotationEntry['featureId']
-        ) {
-          const evidenceURLs = []
-          this.evidence.forEach((evidence) => {
-            if (evidence.includes('DOI:')) {
-              const link = evidence.replace('DOI:', 'https://doi.org/')
-              evidenceURLs.push(new URL(link))
-            } else if (evidence.includes('PMID:')) {
-              const link = evidence.replace(
-                'PMID:',
-                'https://pubmed.ncbi.nlm.nih.gov/'
-              )
-              evidenceURLs.push(new URL(link))
-            }
-          })
-          const userAnnotation = {
-            resource: this.annotationEntry['resourceId'],
-            item: Object.assign({id: this.annotationEntry['featureId']},
-                    Object.fromEntries(
-                      Object.entries(this.annotationEntry)
-                            .filter(([key]) => ['label', 'models'].includes(key)))),
-            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(this.userApiKey, userAnnotation)
-            .then(() => {
-              this.$emit('annotation', userAnnotation)
-              this.errorMessage = ''
-              this.resetSubmission()
-              this.updatePrevSubmissions()
-            })
-            .catch(() => {
-              this.errorMessage =
-                'There is a problem with the submission, please try again later'
-            })
-        }
-      }
-    },
-    removeEvidence: function (index) {
-      this.evidence.splice(index, 1)
-    },
-    resetSubmission: function () {
-      this.editing = false
-      this.evidence = []
-      this.newFeature = ''
-      this.comment = ''
-    },
-  },
-  watch: {
-    annotationEntry: {
-      handler: function (newVal, oldVal) {
-        if (newVal !== oldVal) {
-          this.resetSubmission()
-          this.updatePrevSubmissions()
-        }
-      },
-      immediate: false,
-      deep: false,
-    },
-  },
-  mounted: function () {
-    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 {
-        this.errorMessage = ''
-      }
-    })
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-
-.info-field {
-  display: flex;
-}
-
-.block {
-  margin-bottom: 0.5em;
-
-  .main > &:first-of-type {
-    margin-right: 0.5em;
-  }
-}
-
-.button {
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-
-.standard-icon {
-  color: $app-primary-color;
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.dialog-text {
-  color: rgb(48, 49, 51);
-  font-size: 14px;
-  font-weight: normal;
-  line-height: 20px;
-}
-
-.main {
-  font-size: 14px;
-  text-align: left;
-  line-height: 1.5em;
-  font-family: Asap, sans-serif, Helvetica;
-  font-weight: 400;
-  /* outline: thin red solid; */
-  padding: 1em !important;
-  overflow-x: hidden;
-  overflow-y: auto;
-  min-width: 300px; // .maplibregl-popup max-width
-  max-height: 400px;
-  scrollbar-width: thin;
-
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    box-shadow: inset 0 0 6px #c0c4cc;
-  }
-}
-
-.title {
-  font-size: 18px;
-  font-weight: 500;
-  font-weight: bold;
-  padding-bottom: 8px;
-  color: rgb(131, 0, 191);
-}
-
-.sub-title {
-  font-size: 16px;
-}
-
-.dialog-spacer {
-  border-bottom: 1px solid #e4e7ed;
-  margin-bottom: 10px;
-}
-
-.submit {
-  color: $app-primary-color;
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.entry ~ .entry {
-  border-top: 1px solid #e4e7ed;
-  margin-top: 10px;
-}
-
-.hide {
-  color: $app-primary-color;
-  cursor: pointer;
-  margin-right: 6px;
-  margin-top: 3px;
-}
-
-:deep(.el-input__inner),
-:deep(.el-textarea__inner) {
-  font-family: Asap, sans-serif;
-}
-
-.select-box {
-  width: 80px;
-  background-color: var(--white);
-  font-weight: 500;
-  color: rgb(48, 49, 51);
-  :deep(.el-input__inner) {
-    height: 30px;
-    color: rgb(48, 49, 51);
-  }
-  :deep(.el-input__icon) {
-    line-height: 30px;
-  }
-}
-
-:deep(.flatmap_dropdown) {
-  min-width: 80px !important;
-  .el-select-dropdown__item {
-    white-space: nowrap;
-    text-align: left;
-    &.selected {
-      color: $app-primary-color;
-      font-weight: normal;
-    }
-  }
-}
-</style>