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

package/package.json

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