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

package/src/components/MultiFlatmapVuer.vue

@@ -27,10 +27,10 @@
               :label="key"
               :value="key"
             >
-              <el-row>
-                <el-col :span="8"><i :class="item.iconClass"></i></el-col>
-                <el-col :span="12">{{ key }}</el-col>
-              </el-row>
+              <span class="select-box-icon">
+                <i :class="item.iconClass"></i>
+              </span>
+              {{ key }}
             </el-option>
           </el-select>
         </template>
@@ -40,7 +40,6 @@
     <FlatmapVuer
       v-for="(item, key) in speciesList"
       :key="key"
-      :showLayer="showLayer"
       v-show="activeSpecies == key"
       :entry="item.taxo"
       :uuid="item.uuid"
@@ -53,15 +52,17 @@
       :openMapOptions="openMapOptions"
       :disableUI="disableUI"
       @view-latest-map="viewLatestMap"
-      @resource-selected="FlatmapSelected"
+      @resource-selected="resourceSelected"
       @ready="FlatmapReady"
       @pan-zoom-callback="panZoomCallback"
-      @open-map="$emit('open-map', $event)"
-      :featureInfo="featureInfo"
+      @open-map="
+        /**
+         * This event is emitted when the user chooses a different map option
+         * from ``openMapOptions`` props.
+         * @arg $event
+         */
+        $emit('open-map', $event)"
       :minZoom="minZoom"
-      :pathControls="pathControls"
-      :searchable="searchable"
-      :layerControl="layerControl"
       :helpMode="helpMode"
       :renderAtMounted="renderAtMounted"
       :displayMinimap="displayMinimap"
@@ -78,7 +79,7 @@
 import { reactive } from 'vue'
 import EventBus from './EventBus'
 import FlatmapVuer from './FlatmapVuer.vue'
-import * as flatmap from 'customised-viewer'
+import * as flatmap from '@abi-software/flatmap-viewer'
 import {
   ElCol as Col,
   ElOption as Option,
@@ -95,6 +96,9 @@ const TAXON_UUID = {
   'NCBITaxon:9685': '73060497-46a6-52bf-b975-cac511c127cb',
 }
 
+/**
+ * A vue component to show a flatmap from the list of multiple flatmap data.
+ */
 export default {
   name: 'MultiFlatmapVuer',
   components: {
@@ -114,10 +118,15 @@ export default {
   mounted: function () {
     this.initialise()
     EventBus.on('onActionClick', (action) => {
-      this.FlatmapSelected(action)
+      this.resourceSelected(action)
     })
   },
   methods: {
+    /**
+     * @vuese
+     * Function to initialise the component when mounted.
+     * It returns a promise.
+     */
     initialise: function () {
       return new Promise((resolve) => {
         if (this.requireInitialisation) {
@@ -192,37 +201,89 @@ export default {
         }
       })
     },
-    FlatmapSelected: function (resource) {
-      this.$emit('resource-selected', resource)
+    /**
+     * @vuese
+     * Function to emit ``resource-selected`` event with provided ``resource``.
+     * @arg action
+     */
+     resourceSelected: function (action) {
+      /**
+       * This event is emitted by ``resourceSelected`` method.
+       */
+      this.$emit('resource-selected', action)
     },
+    /**
+     * @vuese
+     * Function to emit ``ready`` event after the flatmap is loaded.
+     * @arg component
+     */
     FlatmapReady: function (component) {
+      /**
+       * This event is emitted by ``FlatmapReady`` method after the flatmap is loaded.
+       * @arg component
+       */
       this.$emit('ready', component)
     },
-    getCoordinatesOfLastClick: function () {
-      const flatmap = this.$refs[this.activeSpecies]
-      if (flatmap && flatmap[0]) {
-        return flatmap[0].getCoordinatesOfLastClick()
-      }
-      return undefined
-    },
+    /**
+     * @vuese
+     * Function to get the current active map.
+     */
     getCurrentFlatmap: function () {
       return this.$refs[this.activeSpecies][0]
     },
+    /**
+     * @vuese
+     * Function to emit ``pan-zoom-callback`` event
+     * from the event emitted in ``callback`` function from ``MapManager.loadMap()``.
+     * @arg payload
+     */
     panZoomCallback: function (payload) {
+      /**
+       * The event emitted by ``panZoomCallback`` method.
+       * @arg payload
+       */
       this.$emit('pan-zoom-callback', payload)
     },
+    /**
+     * @vuese
+     * Function to show popup on map.
+     * @arg featureId,
+     * @arg node,
+     * @arg options
+     */
     showPopup: function (featureId, node, options) {
       let map = this.getCurrentFlatmap()
       map.showPopup(featureId, node, options)
     },
+    /**
+     * @vuese
+     * Function to show marker popup.
+     * @arg featureId,
+     * @arg node,
+     * @arg options
+     */
     showMarkerPopup: function (featureId, node, options) {
       let map = this.getCurrentFlatmap()
       map.showMarkerPopup(featureId, node, options)
     },
+    /**
+     * @vuese
+     * Function to set species.
+     * This function is called on the first load and
+     * when user changes the species.
+     * @arg species,
+     * @arg state,
+     * @arg numberOfRetry
+     */
     setSpecies: function (species, state, numberOfRetry) {
       if (this.$refs && species in this.$refs) {
         this.activeSpecies = species
         this.$refs[this.activeSpecies][0].createFlatmap(state)
+        /**
+         * This event is emitted by ``setSpecies`` method.
+         * Emitted on first load and when user changes species.
+         * @arg activeSpecies
+         */
         this.$emit('flatmapChanged', this.activeSpecies)
       } else if (numberOfRetry) {
         const retry = numberOfRetry - 1
@@ -234,8 +295,10 @@ export default {
       }
     },
     /**
+     * @vuese
      * Function to switch to the latest existing map from
      * a legacy map of the same species.
+     * @arg state
      *
      * @private
      */
@@ -254,7 +317,11 @@ export default {
       }
     },
     /**
+     * @vuese
      * Create a legacy entry with the provided information
+     * @arg state,
+     * @arg taxo,
+     * @arg uuid
      *
      * @private
      */
@@ -282,8 +349,10 @@ export default {
       }
     },
     /**
+     * @vuese
      * Function used to translate the legacy map state to one that can be used in current
      * flatmap if required. If it is a legacy, an Select entry will be added
+     * @arg state
      *
      * @private
      */
@@ -339,6 +408,7 @@ export default {
       })
     },
     /**
+     * @vuese
      * Function used for getting the current states of the scene. This exported states
      * can be imported using the importStates method.
      *
@@ -354,8 +424,10 @@ export default {
       return state
     },
     /**
+     * @vuese
      * Function used for importing the states of the scene. This exported states
      * can be imported using the read states method.
+     * @arg state
      *
      * @public
      */
@@ -377,31 +449,8 @@ export default {
         })
       }
     },
-    resourceSelected: function (action) {
-      this.$emit('resource-selected', action)
-    },
   },
   props: {
-    showLayer: {
-      type: Boolean,
-      default: false,
-    },
-    featureInfo: {
-      type: Boolean,
-      default: false,
-    },
-    pathControls: {
-      type: Boolean,
-      default: true,
-    },
-    searchable: {
-      type: Boolean,
-      default: false,
-    },
-    layerControl: {
-      type: Boolean,
-      default: false,
-    },
     /**
      * Initial species for the flatmap.
      * This value will be ignored if a valid state object is provided.
@@ -410,22 +459,37 @@ export default {
       type: String,
       default: '',
     },
+    /**
+     * The minimum zoom level of the map.
+     */
     minZoom: {
       type: Number,
       default: 4,
     },
+    /**
+     * The option to create map on component mounted.
+     */
     renderAtMounted: {
       type: Boolean,
       default: false,
     },
+    /**
+     * The option to show tooltips for help mode.
+     */
     helpMode: {
       type: Boolean,
       default: false,
     },
+    /**
+     * The option to display minimap at the top-right corner of the map.
+     */
     displayMinimap: {
       type: Boolean,
       default: false,
     },
+    /**
+     * The option to show star in legend area.
+     */
     showStarInLegend: {
       type: Boolean,
       default: false,
@@ -438,11 +502,55 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * The data to show different map options.
+     * Available at the bottom-left corner ("Open new map" tooltip).
+     */
     openMapOptions: {
       type: Array,
     },
+    /**
+     * The available species data for different maps.
+     * This data is used for multi flatmaps.
+     */
     availableSpecies: {
       type: Object,
+      /**
+       * ```{
+          'Human Female': {
+            taxo: 'NCBITaxon:9606',
+            biologicalSex: 'PATO:0000383',
+            iconClass: 'mapicon-icon_human',
+            displayWarning: true,
+          },
+          'Human Male': {
+            taxo: 'NCBITaxon:9606',
+            biologicalSex: 'PATO:0000384',
+            iconClass: 'mapicon-icon_human',
+            displayWarning: true,
+          },
+          Rat: {
+            taxo: 'NCBITaxon:10114',
+            iconClass: 'mapicon-icon_rat',
+            displayLatestChanges: true,
+          },
+          Mouse: {
+            taxo: 'NCBITaxon:10090',
+            iconClass: 'mapicon-icon_mouse',
+            displayWarning: true,
+          },
+          Pig: {
+            taxo: 'NCBITaxon:9823',
+            iconClass: 'mapicon-icon_pig',
+            displayWarning: true,
+          },
+          Cat: {
+            taxo: 'NCBITaxon:9685',
+            iconClass: 'mapicon-icon_cat',
+            displayWarning: true,
+          },
+        }```
+       */
       default: function () {
         return {
           'Human Female': {
@@ -494,6 +602,9 @@ export default {
       type: String,
       default: 'https://mapcore-demo.org/current/flatmap/v3/',
     },
+    /**
+     * Specify the endpoint of the SPARC API.
+     */
     sparcAPI: {
       type: String,
       default: 'https://api.sparc.science/',
@@ -567,6 +678,13 @@ export default {
       }
     }
   }
+
+  .select-box-icon {
+    display: inline-block;
+    width: 24px;
+    margin-right: 5px;
+    text-align: center;
+  }
 }
 
 .flatmap-dropdown {

package/src/components/ProvenancePopup.vue

@@ -15,11 +15,11 @@
     <div class="block" v-else>
       <span class="title">{{ entry.featureId }}</span>
     </div>
-    <div v-show="showDetails" class="hide" @click="showDetails = false">
+    <div v-show="showDetails" class="hide" id="hide-path-info" @click="showDetails = false">
       Hide path information
       <el-icon><el-icon-arrow-up /></el-icon>
     </div>
-    <div v-show="!showDetails" class="hide" @click="showDetails = true">
+    <div v-show="!showDetails" class="hide" id="show-path-info" @click="showDetails = true">
       Show path information
       <el-icon><el-icon-arrow-down /></el-icon>
     </div>
@@ -37,15 +37,17 @@
             >
               <template #reference>
                 <el-icon class="info"><el-icon-warning /></el-icon>
-                <span style="word-break: keep-all">
-                  <i>Origin</i> {{ originDescription }}
-                </span>
               </template>
+              <span style="word-break: keep-all">
+                <i>Origin</i> {{ originDescription }}
+              </span>
+
             </el-popover>
           </div>
           <div
             v-for="(origin, i) in entry.origins"
             class="attribute-content"
+            :origin-item-label="origin"
             :key="origin"
           >
             {{ capitalise(origin) }}
@@ -56,6 +58,7 @@
               entry.originsWithDatasets && entry.originsWithDatasets.length > 0
             "
             class="button"
+            id="open-dendrites-button"
             @click="openDendrites"
           >
             Explore origin data
@@ -69,6 +72,7 @@
           <div
             v-for="(component, i) in entry.components"
             class="attribute-content"
+            :component-item-label="component"
             :key="component"
           >
             {{ capitalise(component) }}
@@ -92,15 +96,16 @@
             >
               <template #reference>
                 <el-icon class="info"><el-icon-warning /></el-icon>
-                <span style="word-break: keep-all">
-                  <i>Destination</i> is where the axons terminate
-                </span>
               </template>
+              <span style="word-break: keep-all">
+                <i>Destination</i> is where the axons terminate
+              </span>
             </el-popover>
           </div>
           <div
             v-for="(destination, i) in entry.destinations"
             class="attribute-content"
+            :destination-item-label="destination"
             :key="destination"
           >
             {{ capitalise(destination) }}

package/src/components/RelevanceDialog.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 relevance</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="relevance">
+            <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>
+                    </el-col>
+                    <el-col :span="4" v-if="value === 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: 'RelevanceDialog',
+    components: {
+        Row,
+        Col,
+        Card
+    },
+    props: {
+        entry: {
+            type: Object,
+        },
+        drawing: {
+            type: Boolean,
+            default: false,
+        },
+        relevance: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data: function () {
+        return {
+            tooltipId: undefined
+        }
+    },
+    watch: {
+        relevance: 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/Tooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tooltip-container">
+  <div class="tooltip-container" id="tooltip-container">
     <template v-if="annotationDisplay">
       <annotation-tool :annotationEntry="annotationEntry" @annotation="$emit('annotation', $event)" />
     </template>
@@ -30,7 +30,7 @@ export default {
     },
     annotationEntry: {
       type: Object,
-    },
+    }
   },
 }
 </script>

package/src/components.d.ts

@@ -14,7 +14,6 @@ declare module 'vue' {
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
-    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElIconArrowDown: typeof import('@element-plus/icons-vue')['ArrowDown']
     ElIconArrowLeft: typeof import('@element-plus/icons-vue')['ArrowLeft']
@@ -39,6 +38,7 @@ 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']

package/src/icons/yellowstar.js

@@ -1,4 +1,4 @@
-export default '<svg width="195px" height="24px" viewBox="0 0 160 24" fill="yellow">' +
+export default '<svg width="195px" height="24px" viewBox="0 0 200 24" fill="yellow">' +
   '<path d="M22.0748 3.25583C22.4141 2.42845 23.5859 2.42845 23.9252 3.25583L25.6493 7.45955C25.793 7.80979 26.1221 8.04889 26.4995 8.07727L31.0303 8.41798C31.922 8.48504 32.2841 9.59942 31.6021 10.1778L28.1369 13.1166C27.8482 13.3614 27.7225 13.7483 27.8122 14.1161L28.8882 18.5304C29.1 19.3992 28.152 20.0879 27.3912 19.618L23.5255 17.2305C23.2034 17.0316 22.7966 17.0316 22.4745 17.2305L18.60881 19.618C17.84796 20.0879 16.9 19.3992 17.1118 18.5304L18.18785 14.1161C18.2775 13.7483 18.1518 13.3614 17.86309 13.1166L14.3979 10.1778C13.71588 9.59942 14.07796 8.48504 14.96971 8.41798L19.50046 8.07727C19.87794 8.04889 20.20704 7.80979 20.35068 7.45955L22.0748 3.25583Z" stroke="#000000" stroke-width="2"/>' +
   // Adjusting the x attribute and adding padding for the text element
   '<text x="42" y="50%" dominant-baseline="middle" text-anchor="start" font-family="Asap, sans-serif" font-size="12" fill="#000000">Featured dataset marker</text>' +

package/src/main.js

@@ -1,4 +1,19 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import App from './App.vue'
+import { useMainStore } from '@/store/index'
 
-createApp(App).mount('#app')
+const pinia = createPinia()
+const app = createApp(App)
+
+app.use(pinia)
+
+const mainStore = useMainStore()
+const token = document.cookie
+    .split("; ")
+    .find((row) => row.startsWith("user-token"))
+if (mainStore && token) {
+    mainStore.setUserToken(token.split("=")[1])
+}
+
+app.mount('#app')

package/src/services/flatmapQueries.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-alert, no-console */
 // remove duplicates by stringifying the objects
 const removeDuplicates = function (arrayOfAnything) {
+  if (!arrayOfAnything) return []
   return [...new Set(arrayOfAnything.map((e) => JSON.stringify(e)))].map((e) =>
     JSON.parse(e)
   )
@@ -35,6 +36,7 @@ const findTaxonomyLabel = async function (flatmapAPI, taxonomy) {
 }
 
 const inArray = function (ar1, ar2) {
+  if (!ar1 || !ar2) return false
   let as1 = JSON.stringify(ar1)
   let as2 = JSON.stringify(ar2)
   return as1.indexOf(as2) !== -1

package/src/store/index.js

@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia'
+
+/**
+ * Activate the store when run the application individually.
+ * If the store exist in parent application, 
+ * instead of creating a new store it will access the parent main store.
+ */
+export const useMainStore = defineStore('main', {
+  state: () => ({
+    userProfile: {
+      token: ''
+    },
+  }),
+  getters: {
+    userToken(state) {
+      return state.userProfile.token
+    },
+  },
+  actions: {
+    setUserToken(value) {
+      this.userProfile.token = value
+    },
+  }
+})