@abi-software/map-utilities 1.4.0 → 1.4.1-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.4.0",
+  "version": "1.4.1-beta.1",
   "files": [
     "dist/*",
     "src/*",
@@ -30,6 +30,11 @@
   },
   "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,6 +160,10 @@ export default {
       type: Array,
       default: [],
     },
+    connectivityFromMap: {
+      type: Object,
+      default: () => null,
+    },
   },
   data: function () {
     return {
@@ -184,26 +188,19 @@ export default {
       connectivityGraphContainer: null,
     };
   },
+  watch: {
+    connectivityFromMap: function (oldVal, newVal) {
+      if (oldVal != newVal) {
+        this.start();
+      }
+    }
+  },
   mounted() {
     this.showSpinner();
     this.updateTooltipContainer();
     this.refreshCache();
     this.loadCacheData();
-    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();
-      });
+    this.start();
   },
   methods: {
     updateTooltipContainer: function () {
@@ -275,6 +272,23 @@ 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!';
+          }
+          this.hideSpinner();
+        })
+        .catch((error) => {
+          this.loadingError = 'Loading error!';
+          this.hideSpinner();
+        });
+    },
     run: async function () {
       if (!this.schemaVersion) {
         this.schemaVersion = await this.getSchemaVersion();
@@ -305,8 +319,24 @@ 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);
-      await this.connectivityGraph.addConnectivity(this.knowledgeByPath.get(neuronPath));
+      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);
 
       this.connectivityGraph.showConnectivity(graphCanvas);
 

package/src/components/ConnectivityList/ConnectivityList.vue

@@ -0,0 +1,395 @@
+<template>
+  <div class="connectivity-list">
+    {{ entry.paths }}
+    <div v-if="origins && 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 origins"
+        class="attribute-content"
+        :origin-item-label="origin"
+        :key="origin"
+        @mouseenter="toggleConnectivityTooltip(origin, {show: true})"
+        @mouseleave="toggleConnectivityTooltip(origin, {show: false})"
+      >
+        {{ capitalise(origin) }}
+      </div>
+      <el-button
+        v-show="
+          originsWithDatasets && originsWithDatasets.length > 0 &&
+          shouldShowExploreButton(originsWithDatasets)
+        "
+        class="button"
+        id="open-dendrites-button"
+        @click="openDendrites"
+      >
+        Explore origin data
+      </el-button>
+    </div>
+    <div
+      v-if="components && components.length > 0"
+      class="block"
+    >
+      <div class="attribute-title-container">
+        <div class="attribute-title">Components</div>
+      </div>
+      <div
+        v-for="(component, i) in components"
+        class="attribute-content"
+        :component-item-label="component"
+        :key="component"
+        @mouseenter="toggleConnectivityTooltip(component, {show: true})"
+        @mouseleave="toggleConnectivityTooltip(component, {show: false})"
+      >
+        {{ capitalise(component) }}
+      </div>
+    </div>
+    <div
+      v-if="destinations && 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 destinations"
+        class="attribute-content"
+        :destination-item-label="destination"
+        :key="destination"
+        @mouseenter="toggleConnectivityTooltip(destination, {show: true})"
+        @mouseleave="toggleConnectivityTooltip(destination, {show: false})"
+      >
+        {{ capitalise(destination) }}
+      </div>
+      <el-button
+        v-show="
+          destinationsWithDatasets &&
+          destinationsWithDatasets.length > 0 &&
+          shouldShowExploreButton(destinationsWithDatasets)
+        "
+        class="button"
+        @click="openAxons"
+      >
+        Explore destination data
+      </el-button>
+    </div>
+    <div
+      v-show="
+        componentsWithDatasets &&
+        componentsWithDatasets.length > 0 &&
+        shouldShowExploreButton(componentsWithDatasets)
+      "
+      class="block"
+    >
+      <el-button
+        class="button"
+        @click="openAll"
+      >
+        Search for data on components
+      </el-button>
+    </div>
+
+    <div class="connectivity-error-container">
+      <div class="connectivity-error" v-if="connectivityError">
+        <strong v-if="connectivityError.errorConnectivities">
+          {{ connectivityError.errorConnectivities }}
+        </strong>
+        {{ connectivityError.errorMessage }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  Warning as ElIconWarning,
+} from '@element-plus/icons-vue'
+import {
+  ElButton as Button,
+  ElContainer as Container,
+  ElIcon as Icon,
+} from 'element-plus'
+import { capitalise } from '../utilities'
+
+export default {
+  name: 'ConnectivityList',
+  components: {
+    Button,
+    Container,
+    Icon,
+    ElIconWarning,
+  },
+  props: {
+    entry: {
+      type: Object,
+      default: () => ({
+        destinations: [],
+        origins: [],
+        components: [],
+        destinationsWithDatasets: [],
+        originsWithDatasets: [],
+        componentsWithDatasets: [],
+        resource: undefined,
+        featuresAlert: undefined,
+      }),
+    },
+    origins: {
+      type: Array,
+      default: () => []
+    },
+    components: {
+      type: Array,
+      default: () => []
+    },
+    destinations: {
+      type: Array,
+      default: () => []
+    },
+    originsWithDatasets: {
+      type: Array,
+      default: () => []
+    },
+    componentsWithDatasets: {
+      type: Array,
+      default: () => []
+    },
+    destinationsWithDatasets: {
+      type: Array,
+      default: () => []
+    },
+    availableAnatomyFacets: {
+      type: Array,
+      default: () => [],
+    },
+    connectivityError: {
+      type: Object,
+      default: () => null,
+    }
+  },
+  data: function () {
+    return {
+      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',
+      },
+      facetList: [],
+      sckanVersion: '',
+    }
+  },
+  watch: {
+    availableAnatomyFacets: {
+      handler: function (val) {
+        this.convertFacetsToList(val)
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  computed: {
+    originDescription: function () {
+      if (
+        this.entry &&
+        this.entry.title &&
+        this.entry.title.toLowerCase().includes('motor')
+      ) {
+        return this.originDescriptions.motor
+      } else {
+        return this.originDescriptions.sensory
+      }
+    },
+  },
+  methods: {
+    capitalise: function (text) {
+      return capitalise(text)
+    },
+    toggleConnectivityTooltip: function (name, option) {
+      this.$emit('toggle-connectivity-tooltip', {
+        name,
+        option
+      });
+    },
+    // shouldShowExploreButton: Checks if the feature is in the list of available anatomy facets
+    shouldShowExploreButton: function (features) {
+      for (let i = 0; i < features.length; i++) {
+        if (this.facetList.includes(features[i].name.toLowerCase())) {
+          return true
+        }
+      }
+      return false
+    },
+    // convertFacetsToList: Converts the available anatomy facets to a list for easy searching
+    convertFacetsToList: function (facets) {
+      facets.forEach((facet) => {
+        if(facet.children) {
+          this.convertFacetsToList(facet.children)
+        } else {
+          this.facetList.push(facet.label.toLowerCase())
+        }
+      })
+    },
+    openAll: function () {
+      this.$emit('connectivity-action-click', {
+        type: 'Facets',
+        labels: this.componentsWithDatasets.map((a) => a.name.toLowerCase()),
+      })
+    },
+    openAxons: function () {
+      this.$emit('connectivity-action-click', {
+        type: 'Facets',
+        labels: this.destinationsWithDatasets.map((a) => a.name.toLowerCase()),
+      })
+    },
+    openDendrites: function () {
+      this.$emit('connectivity-action-click', {
+        type: 'Facets',
+        labels: this.originsWithDatasets.map((a) => a.name.toLowerCase()),
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.connectivity-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  position: relative;
+}
+
+.button {
+  margin-left: 0px !important;
+  margin-top: 0px !important;
+  font-size: 14px !important;
+  background-color: $app-primary-color;
+  color: #fff;
+
+  &:hover {
+    color: #fff !important;
+    background-color: #ac76c5 !important;
+    border: 1px solid #ac76c5 !important;
+  }
+
+  & + .button {
+    margin-top: 10px !important;
+  }
+}
+
+.icon {
+  right: 0px;
+  position: absolute;
+  top: 10px;
+}
+
+.icon:hover {
+  cursor: pointer;
+}
+
+:deep(.popover-origin-help.el-popover) {
+  text-transform: none !important; // need to overide the tooltip text transform
+  border: 1px solid $app-primary-color;
+  font-weight: 400;
+  font-family: Asap, sans-serif, Helvetica;
+
+  .el-popper__arrow {
+    &:before {
+      border-color: $app-primary-color;
+      background-color: #ffffff;
+    }
+  }
+}
+
+.info {
+  color: #8300bf;
+  transform: rotate(180deg);
+  margin-left: 8px;
+}
+
+.attribute-title-container {
+  margin-bottom: 0.5em;
+}
+
+.attribute-title {
+  font-size: 16px;
+  font-weight: 600;
+  /* font-weight: bold; */
+  text-transform: uppercase;
+}
+
+.attribute-content {
+  font-size: 14px;
+  font-weight: 500;
+  transition: color 0.25s ease;
+  position: relative;
+  cursor: default;
+
+  &:hover {
+    color: $app-primary-color;
+  }
+
+  + .attribute-content {
+    &::before {
+      content: "";
+      width: 90%;
+      height: 1px;
+      background-color: var(--el-border-color);
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  &:last-of-type {
+    margin-bottom: 0.5em;
+  }
+}
+
+.connectivity-error-container {
+  position: sticky;
+  bottom: 0.5rem;
+  width: 100%;
+  min-height: 31px; // placeholder
+  margin-top: -10px !important;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.connectivity-error {
+  width: fit-content;
+  font-size: 12px;
+  padding: 0.25rem 0.5rem;
+  background-color: var(--el-color-error-light-9);
+  border-radius: var(--el-border-radius-small);
+  border: 1px solid var(--el-color-error);
+}
+</style>

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="referencesWithDOI">
+    <div class="citation-tabs" v-if="useDOIFormatter ? referencesWithDOI : pubMedReferences.length">
       <el-button
         link
         v-for="citationOption of citationOptions"
@@ -102,7 +102,7 @@
 
 <script>
 import CopyToClipboard from '../CopyToClipboard/CopyToClipboard.vue';
-import { delay } from '../utilities';
+import { delay, getCitationById } from '../utilities';
 
 const CROSSCITE_API_HOST = 'https://citation.doi.org';
 const CITATION_OPTIONS = [
@@ -128,11 +128,18 @@ const LOADING_DELAY = 600;
 
 export default {
   name: "ExternalResourceCard",
+  components: {
+    CopyToClipboard,
+  },
   props: {
     resources: {
       type: Array,
       default: () => [],
     },
+    useDOIFormatter: {
+      type: Boolean,
+      default: true,
+    }
   },
   data: function () {
     return {
@@ -338,7 +345,14 @@ export default {
 
         if (type === 'doi' || doi) {
           const doiID = type === 'doi' ? id : doi;
-          this.getCitationTextByDOI(doiID).then((text) => {
+          const fetchCitationFromAPI = this.useDOIFormatter ?
+            this.getCitationTextByDOI(doiID) :
+            getCitationById(doiID, {
+              type: 'doi',
+              format: citationType
+            });
+
+          fetchCitationFromAPI.then((text) => {
             const formattedText = this.replaceLinkInText(text);
             reference.citation[citationType] = formattedText;
             this.updateCopyContents();
@@ -349,45 +363,61 @@ export default {
             };
           });
         } else if (type === 'pmid') {
-          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);
+          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}`,
+                  });
                   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',
-            };
-          });
+            }).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',
+              };
+            });
+          }
         }
       }
     },

package/src/components/Tooltip/ProvenancePopup.vue

@@ -171,6 +171,11 @@
 </template>
 
 <script>
+import {
+  ArrowUp as ElIconArrowUp,
+  ArrowDown as ElIconArrowDown,
+  Warning as ElIconWarning,
+} from '@element-plus/icons-vue'
 import EventBus from "../EventBus.js";
 
 const titleCase = (str) => {
@@ -186,6 +191,11 @@ const capitalise = function (str) {
 
 export default {
   name: "ProvenancePopup",
+  components: {
+    ElIconArrowUp,
+    ElIconArrowDown,
+    ElIconWarning,
+  },
   props: {
     tooltipEntry: {
       type: Object,

package/src/components/index.js

@@ -1,6 +1,7 @@
 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";
@@ -12,6 +13,7 @@ export {
   AnnotationPopup,
   CreateTooltipContent,
   ConnectivityGraph,
+  ConnectivityList,
   CopyToClipboard,
   DrawToolbar,
   HelpModeDialog,