@abi-software/map-utilities 1.4.3-beta.2 → 1.4.3-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.4.3-beta.2",
+  "version": "1.4.3-beta.3",
   "files": [
     "dist/*",
     "src/*",
@@ -30,11 +30,6 @@
   },
   "dependencies": {
     "@abi-software/svg-sprite": "^1.0.1",
-    "@citation-js/core": "^0.7.14",
-    "@citation-js/plugin-bibtex": "^0.7.17",
-    "@citation-js/plugin-csl": "^0.7.14",
-    "@citation-js/plugin-doi": "^0.7.16",
-    "@citation-js/plugin-pubmed": "^0.3.0",
     "@element-plus/icons-vue": "^2.3.1",
     "cytoscape": "^3.30.2",
     "element-plus": "2.8.4",

package/src/components/ConnectivityGraph/ConnectivityGraph.vue

@@ -160,10 +160,6 @@ export default {
       type: Array,
       default: [],
     },
-    connectivityFromMap: {
-      type: Object,
-      default: () => null,
-    },
   },
   data: function () {
     return {
@@ -188,20 +184,26 @@ export default {
       connectivityGraphContainer: null,
     };
   },
-  watch: {
-    connectivityFromMap: function (oldVal, newVal) {
-      if (oldVal != newVal) {
-        this.showSpinner();
-        this.start();
-      }
-    }
-  },
   mounted() {
     this.showSpinner();
     this.updateTooltipContainer();
     this.refreshCache();
     this.loadCacheData();
-    this.start();
+    this.run()
+      .then((res) => {
+        if (res?.success) {
+          this.showGraph(this.entry);
+        } else if (res?.error) {
+          this.loadingError = res.error;
+        } else {
+          this.loadingError = 'Loading error!';
+        }
+        this.hideSpinner();
+      })
+      .catch((error) => {
+        this.loadingError = 'Loading error!';
+        this.hideSpinner();
+      });
   },
   methods: {
     updateTooltipContainer: function () {
@@ -273,22 +275,6 @@ export default {
 
       sessionStorage.setItem('connectivity-graph-expiry', expiry);
     },
-    start: function () {
-      this.run()
-        .then((res) => {
-          if (res?.success) {
-            this.showGraph(this.entry);
-          } else if (res?.error) {
-            this.loadingError = res.error;
-          } else {
-            this.loadingError = 'Loading error!';
-          }
-        })
-        .catch((error) => {
-          this.loadingError = 'Loading error!';
-          this.hideSpinner();
-        });
-    },
     run: async function () {
       if (!this.schemaVersion) {
         this.schemaVersion = await this.getSchemaVersion();
@@ -319,24 +305,8 @@ export default {
     showGraph: async function (neuronPath) {
       const graphCanvas = this.$refs.graphCanvas;
 
-      // Update label data
-      if (this.connectivityFromMap) {
-        this.cacheLabels(this.connectivityFromMap);
-        await this.getCachedTermLabels();
-      }
-
       this.connectivityGraph = new ConnectivityGraph(this.labelCache, graphCanvas);
-      const connectivityInfo = this.knowledgeByPath.get(neuronPath);
-
-      // Update connectivity
-      if (this.connectivityFromMap) {
-        connectivityInfo.axons = this.connectivityFromMap.axons;
-        connectivityInfo.connectivity = this.connectivityFromMap.connectivity;
-        connectivityInfo.dendrites = this.connectivityFromMap.dendrites;
-        connectivityInfo.somas = this.connectivityFromMap.somas;
-      }
-
-      await this.connectivityGraph.addConnectivity(connectivityInfo);
+      await this.connectivityGraph.addConnectivity(this.knowledgeByPath.get(neuronPath));
 
       this.connectivityGraph.showConnectivity(graphCanvas);
 
@@ -352,8 +322,6 @@ export default {
          */
         this.$emit('tap-node', data);
       });
-
-      this.hideSpinner();
     },
     query: async function (sql, params) {
       const url = `${this.mapServer}knowledge/query/`;

package/src/components/Tooltip/AnnotationPopup.vue

@@ -41,7 +41,7 @@
               <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">
+              <el-row class="dialog-text" v-if="sub.creator">
                 <strong>{{ formatTime(sub.created) }}</strong>
                 {{ sub.creator.name }}
               </el-row>
@@ -65,7 +65,7 @@
             </div>
           </template>
         </template>
-        <template v-if="authenticated">
+        <template v-if="authenticated || offlineAnnotationEnabled">
           <template v-if="isEditable">
             <el-row class="dialog-spacer"></el-row>
             <el-row v-if="!editing">
@@ -217,6 +217,9 @@ export default {
     updatedCopyContent: function () {
       return this.getUpdateCopyContent();
     },
+    offlineAnnotationEnabled: function () {
+      return this.annotationEntry["offline"];
+    },
   },
   methods: {
     processEvidences: function(sub) {
@@ -262,7 +265,15 @@ export default {
       return new Date(dateString).toLocaleDateString(undefined, options);
     },
     updatePrevSubmissions: function () {
-      if (this.$annotator && this.authenticated) {
+      if (this.offlineAnnotationEnabled) {
+        const offlineAnnotations = JSON.parse(sessionStorage.getItem('offline-annotation')) || [];
+        this.prevSubs = offlineAnnotations.filter((offline) => {
+          return (
+            offline.resource === this.annotationEntry.resourceId &&
+            offline.item.id === this.annotationEntry.featureId
+          )
+        });
+      } else if (this.$annotator && this.authenticated) {
         if (
           this.annotationEntry["resourceId"] &&
           this.annotationEntry["featureId"]
@@ -342,7 +353,6 @@ export default {
           this.$annotator
             ?.addAnnotation(this.userApiKey, userAnnotation)
             .then(() => {
-              this.$emit("annotation", userAnnotation);
               this.errorMessage = "";
               this.resetSubmission();
               this.updatePrevSubmissions();
@@ -351,6 +361,7 @@ export default {
               this.errorMessage =
                 "There is a problem with the submission, please try again later";
             });
+          this.$emit("annotation", userAnnotation);
         }
       }
     },
@@ -396,9 +407,11 @@ export default {
       if (this.prevSubs.length) {
         let annotationContent = '<div><strong>Annotations:</strong></div>\n<br>';
         this.prevSubs.map((sub, index) => {
-          annotationContent += `<div><strong>Created:</strong>${this.formatTime(sub.created)}</div>\n<br>`;
-          annotationContent += `<div><strong>Creator:</strong>${sub.creator.name}</div>\n<br>`;
-          annotationContent += `<div><strong>Email:</strong>${sub.creator.email}</div>\n<br>`;
+          if (sub.creator) {
+            annotationContent += `<div><strong>Created:</strong>${this.formatTime(sub.created)}</div>\n<br>`;
+            annotationContent += `<div><strong>Creator:</strong>${sub.creator.name}</div>\n<br>`;
+            annotationContent += `<div><strong>Email:</strong>${sub.creator.email}</div>\n<br>`;
+          }
           if (sub.body.evidence.length) {
             let evidenceContent = '';
             sub.body.evidence.forEach((evi, index) => {
@@ -433,10 +446,10 @@ export default {
         this.creator = userData;
         if (!userData.orcid) this.creator.orcid = "0000-0000-0000-0000";
         this.authenticated = true;
-        this.updatePrevSubmissions();
       } else {
         this.errorMessage = "";
       }
+      this.updatePrevSubmissions();
     });
   },
 };

package/src/components/Tooltip/ExternalResourceCard.vue

@@ -6,7 +6,7 @@
         <CopyToClipboard label="Copy list to clipboard" :content="referecesListContent" />
       </div>
     </div>
-    <div class="citation-tabs" v-if="useDOIFormatter ? referencesWithDOI : pubMedReferences.length">
+    <div class="citation-tabs" v-if="referencesWithDOI">
       <el-button
         link
         v-for="citationOption of citationOptions"
@@ -102,7 +102,7 @@
 
 <script>
 import CopyToClipboard from '../CopyToClipboard/CopyToClipboard.vue';
-import { delay, getCitationById } from '../utilities';
+import { delay } from '../utilities';
 
 const CROSSCITE_API_HOST = 'https://citation.doi.org';
 const CITATION_OPTIONS = [
@@ -128,18 +128,11 @@ const LOADING_DELAY = 600;
 
 export default {
   name: "ExternalResourceCard",
-  components: {
-    CopyToClipboard,
-  },
   props: {
     resources: {
       type: Array,
       default: () => [],
     },
-    useDOIFormatter: {
-      type: Boolean,
-      default: true,
-    }
   },
   data: function () {
     return {
@@ -345,14 +338,7 @@ export default {
 
         if (type === 'doi' || doi) {
           const doiID = type === 'doi' ? id : doi;
-          const fetchCitationFromAPI = this.useDOIFormatter ?
-            this.getCitationTextByDOI(doiID) :
-            getCitationById(doiID, {
-              type: 'doi',
-              format: citationType
-            });
-
-          fetchCitationFromAPI.then((text) => {
+          this.getCitationTextByDOI(doiID).then((text) => {
             const formattedText = this.replaceLinkInText(text);
             reference.citation[citationType] = formattedText;
             this.updateCopyContents();
@@ -363,61 +349,45 @@ export default {
             };
           });
         } else if (type === 'pmid') {
-          if (this.useDOIFormatter) {
-            this.getDOIFromPubMedID(id).then((data) => {
-              if (data?.result) {
-                const resultObj = data.result[id];
-                const articleIDs = resultObj?.articleids || [];
-                const doiObj = articleIDs.find((item) => item.idtype === 'doi');
-                const doiID = doiObj?.value;
-
-                if (doiID) {
-                  reference['doi'] = doiID;
-                  this.getCitationTextByDOI(doiID).then((text) => {
-                    const formattedText = this.replaceLinkInText(text);
-                    reference.citation[citationType] = formattedText;
-                    this.updateCopyContents();
-                  }).catch((error) => {
-                    reference.citation['error'] = {
-                      type: citationType,
-                      ref: 'doi',
-                    };
-                  });
-                } else {
-                  // If there has no doi in PubMed
-                  const { title, pubdate, authors } = resultObj;
-                  const authorNames = authors ? authors.map((author) => author.name) : [];
-                  const formattedText = this.formatCopyReference({
-                    title: title || '',
-                    date: pubdate || '',
-                    authors: authorNames,
-                    url: `https://pubmed.ncbi.nlm.nih.gov/${id}`,
-                  });
+          this.getDOIFromPubMedID(id).then((data) => {
+            if (data?.result) {
+              const resultObj = data.result[id];
+              const articleIDs = resultObj?.articleids || [];
+              const doiObj = articleIDs.find((item) => item.idtype === 'doi');
+              const doiID = doiObj?.value;
+
+              if (doiID) {
+                reference['doi'] = doiID;
+                this.getCitationTextByDOI(doiID).then((text) => {
+                  const formattedText = this.replaceLinkInText(text);
                   reference.citation[citationType] = formattedText;
                   this.updateCopyContents();
-                }
+                }).catch((error) => {
+                  reference.citation['error'] = {
+                    type: citationType,
+                    ref: 'doi',
+                  };
+                });
+              } else {
+                // If there has no doi in PubMed
+                const { title, pubdate, authors } = resultObj;
+                const authorNames = authors ? authors.map((author) => author.name) : [];
+                const formattedText = this.formatCopyReference({
+                  title: title || '',
+                  date: pubdate || '',
+                  authors: authorNames,
+                  url: `https://pubmed.ncbi.nlm.nih.gov/${id}`,
+                });
+                reference.citation[citationType] = formattedText;
+                this.updateCopyContents();
               }
-            }).catch((error) => {
-              reference.citation['error'] = {
-                type: citationType,
-                ref: 'pubmed',
-              };
-            });
-          } else {
-            getCitationById(id, {
-              type: 'pmid',
-              format: citationType
-            }).then((text) => {
-              const formattedText = this.replaceLinkInText(text);
-              reference.citation[citationType] = formattedText;
-              this.updateCopyContents();
-            }).catch((error) => {
-              reference.citation['error'] = {
-                type: citationType,
-                ref: 'pubmed',
-              };
-            });
-          }
+            }
+          }).catch((error) => {
+            reference.citation['error'] = {
+              type: citationType,
+              ref: 'pubmed',
+            };
+          });
         }
       }
     },

package/src/components/Tooltip/ProvenancePopup.vue

@@ -51,18 +51,118 @@
     </div>
     <transition name="slide-fade">
       <div v-show="showDetails" class="content-container scrollbar">
-        <connectivity-list
-          :key="tooltipEntry.featureId[0]"
-          :entry="tooltipEntry"
-          :origins="origins"
-          :components="components"
-          :destinations="destinations"
-          :originsWithDatasets="originsWithDatasets"
-          :componentsWithDatasets="componentsWithDatasets"
-          :destinationsWithDatasets="destinationsWithDatasets"
-          :availableAnatomyFacets="availableAnatomyFacets"
-          @connectivity-action-click="onConnectivityActionClick"
-        ></connectivity-list>
+        {{ tooltipEntry.paths }}
+        <div v-if="tooltipEntry.origins && tooltipEntry.origins.length > 0" class="block">
+          <div class="attribute-title-container">
+            <span class="attribute-title">Origin</span>
+            <el-popover
+              width="250"
+              trigger="hover"
+              :teleported="false"
+              popper-class="popover-origin-help"
+            >
+              <template #reference>
+                <el-icon class="info"><el-icon-warning /></el-icon>
+              </template>
+              <span style="word-break: keep-all">
+                <i>Origin</i> {{ originDescription }}
+              </span>
+            </el-popover>
+          </div>
+          <div
+            v-for="(origin, i) in tooltipEntry.origins"
+            class="attribute-content"
+            :origin-item-label="origin"
+            :key="origin"
+          >
+            {{ capitalise(origin) }}
+            <div v-if="i != tooltipEntry.origins.length - 1" class="separator"></div>
+          </div>
+          <el-button
+            v-show="
+              tooltipEntry.originsWithDatasets && tooltipEntry.originsWithDatasets.length > 0
+            "
+            class="button"
+            id="open-dendrites-button"
+            @click="openDendrites"
+          >
+            Explore origin data
+          </el-button>
+        </div>
+        <div
+          v-if="tooltipEntry.components && tooltipEntry.components.length > 0"
+          class="block"
+        >
+          <div class="attribute-title-container">
+            <div class="attribute-title">Components</div>
+          </div>
+          <div
+            v-for="(component, i) in tooltipEntry.components"
+            class="attribute-content"
+            :component-item-label="component"
+            :key="component"
+          >
+            {{ capitalise(component) }}
+            <div
+              v-if="i != tooltipEntry.components.length - 1"
+              class="separator"
+            ></div>
+          </div>
+        </div>
+        <div
+          v-if="tooltipEntry.destinations && tooltipEntry.destinations.length > 0"
+          class="block"
+        >
+          <div class="attribute-title-container">
+            <span class="attribute-title">Destination</span>
+            <el-popover
+              width="250"
+              trigger="hover"
+              :teleported="false"
+              popper-class="popover-origin-help"
+            >
+              <template #reference>
+                <el-icon class="info"><el-icon-warning /></el-icon>
+              </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 tooltipEntry.destinations"
+            class="attribute-content"
+            :destination-item-label="destination"
+            :key="destination"
+          >
+            {{ capitalise(destination) }}
+            <div
+              v-if="i != tooltipEntry.destinations.length - 1"
+              class="separator"
+            ></div>
+          </div>
+          <el-button
+            v-show="
+              tooltipEntry.destinationsWithDatasets &&
+              tooltipEntry.destinationsWithDatasets.length > 0
+            "
+            class="button"
+            @click="openAxons"
+          >
+            Explore destination data
+          </el-button>
+        </div>
+
+        <el-button
+          v-show="
+            tooltipEntry.componentsWithDatasets &&
+            tooltipEntry.componentsWithDatasets.length > 0
+          "
+          class="button"
+          @click="openAll"
+        >
+          Search for data on components
+        </el-button>
 
         <external-resource-card :resources="resources" v-if="resources.length"></external-resource-card>
       </div>
@@ -71,25 +171,21 @@
 </template>
 
 <script>
-import {
-  ArrowUp as ElIconArrowUp,
-  ArrowDown as ElIconArrowDown,
-  Warning as ElIconWarning,
-} from '@element-plus/icons-vue'
 import EventBus from "../EventBus.js";
-import ConnectivityList from '../ConnectivityList/ConnectivityList.vue';
-import ExternalResourceCard from './ExternalResourceCard.vue';
-import { capitalise, titleCase } from '../utilities.js';
+
+const titleCase = (str) => {
+  return str.replace(/\w\S*/g, (t) => {
+    return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase();
+  });
+};
+
+const capitalise = function (str) {
+  if (str) return str.charAt(0).toUpperCase() + str.slice(1);
+  return "";
+};
 
 export default {
   name: "ProvenancePopup",
-  components: {
-    ElIconArrowUp,
-    ElIconArrowDown,
-    ElIconWarning,
-    ConnectivityList,
-    ExternalResourceCard,
-  },
   props: {
     tooltipEntry: {
       type: Object,
@@ -107,30 +203,20 @@ export default {
   inject: ["getFeaturesAlert"],
   data: function () {
     return {
+      controller: undefined,
+      activeSpecies: undefined,
+      pubmedSearchUrl: "",
       loading: false,
+      showToolip: false,
       showDetails: false,
       originDescriptions: {
         motor: "is the location of the initial cell body of the circuit",
         sensory: "is the location of the initial cell body in the PNS circuit",
       },
-      origins: [],
-      components: [],
-      destinations: [],
-      originsWithDatasets: [],
       componentsWithDatasets: [],
-      destinationsWithDatasets: [],
-      availableAnatomyFacets: [],
+      uberons: [{ id: undefined, name: undefined }],
     };
   },
-  watch: {
-    tooltipEntry: {
-      handler: function (val) {
-        this.updateConnectionsData(val);
-      },
-      immediate: true,
-      deep: true,
-    }
-  },
   computed: {
     featuresAlert() {
       return this.getFeaturesAlert();
@@ -163,10 +249,6 @@ export default {
       return text;
     },
   },
-  mounted: function () {
-    this.loadAvailableAnatomyFacets();
-    this.updateConnectionsData(this.tooltipEntry);
-  },
   methods: {
     titleCase: function (title) {
       return titleCase(title);
@@ -174,25 +256,29 @@ export default {
     capitalise: function (text) {
       return capitalise(text);
     },
-    onConnectivityActionClick: function (data) {
-      EventBus.emit('onActionClick', data);
+    openUrl: function (url) {
+      window.open(url, "_blank");
     },
-    // Load available anatomy facets from the local storage if available.
-    // The data is from Algolia in Sidebar.
-    loadAvailableAnatomyFacets: function () {
-      const availableAnatomyFacets = localStorage.getItem('available-anatomy-facets');
-
-      if (availableAnatomyFacets) {
-        this.availableAnatomyFacets = JSON.parse(availableAnatomyFacets);
-      }
+    openAll: function () {
+      EventBus.emit("onActionClick", {
+        type: "Facets",
+        labels: this.tooltipEntry.componentsWithDatasets.map((a) => a.name),
+      });
     },
-    updateConnectionsData: function (source) {
-      this.origins = source.origins;
-      this.components = source.components;
-      this.destinations = source.destinations;
-      this.originsWithDatasets = source.originsWithDatasets;
-      this.componentsWithDatasets = source.componentsWithDatasets;
-      this.destinationsWithDatasets = source.destinationsWithDatasets;
+    openAxons: function () {
+      EventBus.emit("onActionClick", {
+        type: "Facets",
+        labels: this.tooltipEntry.destinationsWithDatasets.map((a) => a.name),
+      });
+    },
+    openDendrites: function () {
+      EventBus.emit("onActionClick", {
+        type: "Facets",
+        labels: this.tooltipEntry.originsWithDatasets.map((a) => a.name),
+      });
+    },
+    pubmedSearchUrlUpdate: function (val) {
+      this.pubmedSearchUrl = val;
     },
   },
 };
@@ -405,10 +491,6 @@ export default {
   .block {
     padding-top: 0.5em;
   }
-
-  .connectivity-list {
-    padding-top: 1rem;
-  }
 }
 
 .scrollbar::-webkit-scrollbar-track {

package/src/components/index.js

@@ -1,7 +1,6 @@
 import AnnotationPopup from "./Tooltip/AnnotationPopup.vue";
 import CreateTooltipContent from "./Tooltip/CreateTooltipContent.vue";
 import ConnectivityGraph from "./ConnectivityGraph/ConnectivityGraph.vue";
-import ConnectivityList from "./ConnectivityList/ConnectivityList.vue";
 import CopyToClipboard from "./CopyToClipboard/CopyToClipboard.vue";
 import DrawToolbar from "./DrawToolbar/DrawToolbar.vue";
 import HelpModeDialog from "./HelpModeDialog/HelpModeDialog.vue";
@@ -13,7 +12,6 @@ export {
   AnnotationPopup,
   CreateTooltipContent,
   ConnectivityGraph,
-  ConnectivityList,
   CopyToClipboard,
   DrawToolbar,
   HelpModeDialog,