@abi-software/map-utilities 1.4.3-isan.1 → 1.5.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.4.3-isan.1",
+  "version": "1.5.0-beta.1",
   "files": [
     "dist/*",
     "src/*",
@@ -32,6 +32,7 @@
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "cytoscape": "^3.30.2",
+    "cytoscape-dagre": "^2.5.0",
     "element-plus": "2.8.4",
     "mitt": "^3.0.1",
     "vue": "^3.4.21"

package/src/App.vue

@@ -39,8 +39,16 @@ const drawnTypes = [
   { value: "None", label: "None" },
 ];
 const showConnectivityGraph = ref(false);
-const connectivityGraphEntry = "ilxtr:neuron-type-aacar-13";
-// const connectivityGraphEntry = "ilxtr:sparc-nlp/kidney/134";
+const connectivityGraphEntry = ref("ilxtr:neuron-type-aacar-13");
+const connectivityGraphEntries = [
+  "ilxtr:neuron-type-aacar-13",
+  "ilxtr:sparc-nlp/kidney/134",
+  "ilxtr:neuron-type-aacar-11",
+  "ilxtr:neuron-type-sstom-14",
+  "ilxtr:neuron-type-keast-6",
+  "ilxtr:neuron-type-aacar-4",
+  "ilxtr:neuron-type-aacar-12",
+];
 const mapServer = "https://mapcore-demo.org/curation/flatmap/";
 const sckanVersion = "sckan-2024-09-21-npo";
 
@@ -533,6 +541,28 @@ function confirmCreate(value) {
         <el-button @click="showConnectivityGraph = false" size="small">
           Hide connectivity graph
         </el-button>
+        <el-select
+          v-model="connectivityGraphEntry"
+          placeholder="Select featureId"
+          style="width: 180px"
+          size="small"
+        >
+          <el-option
+            v-for="item in connectivityGraphEntries"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
+        </el-select>
+      </el-col>
+      <el-col>
+        <ConnectivityGraph
+          v-if="showConnectivityGraph"
+          :key="connectivityGraphEntry"
+          :entry="connectivityGraphEntry"
+          :map-server="mapServer"
+          :sckanVersion="sckanVersion"
+        />
       </el-col>
     </el-row>
 
@@ -604,12 +634,6 @@ function confirmCreate(value) {
       @setColour="setColour"
       @checkChanged="checkChanged"
     />
-    <ConnectivityGraph
-      v-if="showConnectivityGraph"
-      :entry="connectivityGraphEntry"
-      :map-server="mapServer"
-      :sckanVersion="sckanVersion"
-    />
   </div>
 </template>
 
@@ -643,4 +667,7 @@ function confirmCreate(value) {
   height: 600px;
   margin-top: 1rem;
 }
+.el-button + .el-select {
+  margin-left: 12px;
+}
 </style>

package/src/components/ConnectivityGraph/graph.js

@@ -19,6 +19,8 @@ limitations under the License.
 ==============================================================================*/
 
 import cytoscape from 'cytoscape'
+import dagre from 'cytoscape-dagre'
+cytoscape.use( dagre );
 
 //==============================================================================
 
@@ -264,7 +266,7 @@ export class ConnectivityGraph extends EventTarget
                 }
             } else if (this.dendrites.includes(id) || this.somas.includes(id)) {
                 result['dendrite'] = true
-    
+
             }
         }
         return result
@@ -406,11 +408,13 @@ class CytoscapeGraph extends EventTarget
             container: graphCanvas,
             elements: connectivityGraph.elements,
             layout: {
-                name: 'breadthfirst',
-                circle: false,
-                roots: connectivityGraph.roots
+                name: 'dagre',
+                nodeSep: 150,
+                edgeSep: 50,
+                rankSep: 100,
+                rankDir: 'TB',
+                roots: connectivityGraph.roots.length ? connectivityGraph.roots : undefined,
             },
-            directed: true,
             style: GRAPH_STYLE,
             minZoom: 0.1,
             maxZoom: 10,

package/src/components/ConnectivityList/ConnectivityList.vue

@@ -23,8 +23,8 @@
         class="attribute-content"
         :origin-item-label="origin"
         :key="origin"
-        @mouseenter="toggleConnectivityTooltip(origin, {show: true})"
-        @mouseleave="toggleConnectivityTooltip(origin, {show: false})"
+        @mouseenter="onConnectivityHovered(origin)"
+        @mouseleave="onConnectivityHovered()"
       >
         {{ capitalise(origin) }}
       </div>
@@ -52,10 +52,10 @@
         class="attribute-content"
         :component-item-label="component"
         :key="component"
-        @mouseenter="toggleConnectivityTooltip(component, {show: true})"
-        @mouseleave="toggleConnectivityTooltip(component, {show: false})"
+        @mouseenter="onConnectivityHovered(component)"
+        @mouseleave="onConnectivityHovered()"
       >
-        {{ capitalise(component) }}
+      {{ capitalise(component) }}
       </div>
     </div>
     <div
@@ -83,8 +83,8 @@
         class="attribute-content"
         :destination-item-label="destination"
         :key="destination"
-        @mouseenter="toggleConnectivityTooltip(destination, {show: true})"
-        @mouseleave="toggleConnectivityTooltip(destination, {show: false})"
+        @mouseenter="onConnectivityHovered(destination)"
+        @mouseleave="onConnectivityHovered()"
       >
         {{ capitalise(destination) }}
       </div>
@@ -229,14 +229,18 @@ export default {
     capitalise: function (text) {
       return capitalise(text)
     },
-    toggleConnectivityTooltip: function (name, option) {
-      this.$emit('toggle-connectivity-tooltip', {
-        name,
-        option
-      });
+    onConnectivityHovered: function (name) {
+      this.$emit('connectivity-hovered', name);
+    },
+    onConnectivityClicked: function (id, type, label) {
+      this.$emit('connectivity-clicked', { id, type, label });
     },
     // shouldShowExploreButton: Checks if the feature is in the list of available anatomy facets
     shouldShowExploreButton: function (features) {
+      // facetList will not be available when there has no Sidebar's data
+      if (!this.facetList.length) {
+        return true
+      }
       for (let i = 0; i < features.length; i++) {
         if (this.facetList.includes(features[i].name.toLowerCase())) {
           return true

package/src/components/DrawToolbar/DrawToolbar.vue

@@ -573,8 +573,8 @@ export default {
   border-color: var(--el-color-primary-light-5);
   border-radius: 1rem;
   position: absolute;
-  right: calc(50vw - 100px);
-  bottom: 16px;
+  right: 40%;
+  bottom: 1rem;
   z-index: 10;
 }
 

package/src/components/Tooltip/AnnotationPopup.vue

@@ -67,7 +67,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>
@@ -91,7 +91,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">
@@ -259,6 +259,12 @@ export default {
     updatedCopyContent: function () {
       return this.getUpdateCopyContent();
     },
+    offlineAnnotationEnabled: function () {
+      if (this.entry) {
+        return this.entry["offline"];
+      }
+      return false;
+    },
   },
   methods: {
     previous: function () {
@@ -314,7 +320,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('anonymous-annotation')) || [];
+        this.prevSubs = offlineAnnotations.filter((offline) => {
+          return (
+            offline.resource === this.entry.resourceId &&
+            offline.item.id === this.entry.featureId
+          )
+        });
+      } else if (this.$annotator && this.authenticated) {
         if (
           this.entry["resourceId"] &&
           this.entry["featureId"]
@@ -394,7 +408,6 @@ export default {
           this.$annotator
             ?.addAnnotation(this.userApiKey, userAnnotation)
             .then(() => {
-              this.$emit("annotation", userAnnotation);
               this.errorMessage = "";
               this.resetSubmission();
               this.updatePrevSubmissions();
@@ -403,6 +416,7 @@ export default {
               this.errorMessage =
                 "There is a problem with the submission, please try again later";
             });
+          this.$emit("annotation", userAnnotation);
         }
       }
     },
@@ -448,9 +462,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) => {
@@ -468,11 +484,20 @@ export default {
     },
   },
   watch: {
-    entry: {
+    annotationEntry: {
       deep: true,
       immediate: true,
       handler: function (newVal, oldVal) {
         if (newVal !== oldVal) {
+          this.entryIndex = 0;
+        }
+      },
+    },
+    entry: {
+      deep: true,
+      immediate: true,
+      handler: function (newVal, oldVal) {
+        if (newVal && newVal !== oldVal) {
           this.resetSubmission();
           this.updatePrevSubmissions();
         }
@@ -485,10 +510,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();
     });
   },
 };
@@ -498,7 +523,6 @@ export default {
 .toggle-button {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 30px;
 
   .is-disabled {
     color: #fff !important;

package/src/components/Tooltip/ExternalResourceCard.vue

@@ -22,8 +22,8 @@
         v-for="reference of pubMedReferences"
         :key="reference.id"
         :class="{
-          'loading': reference.citation && !reference.citation.error && reference.citation[citationType] === '',
-          'error': reference.citation && reference.citation.error
+          'loading': isCitationLoading(reference.citation),
+          'error': isCitationError(reference.citation),
         }"
       >
         <template v-if="reference.citation">
@@ -50,49 +50,34 @@
           <template v-else>
             <span v-html="reference.citation[citationType]"></span>
 
-            <div class="reference-button-container">
-              <el-button
-                class="reference-icon-button"
-                size="small"
-                @click="showRelatedConnectivities(reference.resource)"
-              >
-                Show related connectivities
-              </el-button>
-            </div>
+            <RelatedConnectivitiesButton
+              :resource="reference.resource"
+              @show-related-connectivities="showRelatedConnectivities"
+            />
 
             <CopyToClipboard :content="reference.citation[citationType]" />
           </template>
         </template>
       </li>
 
-      <li v-for="reference of openLibReferences">
+      <li v-for="reference of openLibReferences" :key="reference.id">
         <div v-html="formatCopyReference(reference)"></div>
 
-        <div class="reference-button-container">
-          <el-button
-            class="reference-icon-button"
-            size="small"
-            @click="showRelatedConnectivities(reference.resource)"
-          >
-            Show related connectivities
-          </el-button>
-        </div>
+        <RelatedConnectivitiesButton
+          :resource="reference.resource"
+          @show-related-connectivities="showRelatedConnectivities"
+        />
 
         <CopyToClipboard :content="formatCopyReference(reference)" />
       </li>
 
-      <li v-for="reference of isbnDBReferences">
+      <li v-for="reference of isbnDBReferences" :key="reference.id">
         <a :href="reference.url" target="_blank">{{ reference.url }}</a>
 
-        <div class="reference-button-container">
-          <el-button
-            class="reference-icon-button"
-            size="small"
-            @click="showRelatedConnectivities(reference.resource)"
-          >
-            Show related connectivities
-          </el-button>
-        </div>
+        <RelatedConnectivitiesButton
+          :resource="reference.resource"
+          @show-related-connectivities="showRelatedConnectivities"
+        />
 
         <CopyToClipboard :content="reference.url" />
       </li>
@@ -103,6 +88,7 @@
 <script>
 import CopyToClipboard from '../CopyToClipboard/CopyToClipboard.vue';
 import { delay } from '../utilities';
+import RelatedConnectivitiesButton from './RelatedConnectivitiesButton.vue';
 
 const CROSSCITE_API_HOST = 'https://citation.doi.org';
 const CITATION_OPTIONS = [
@@ -128,6 +114,10 @@ const LOADING_DELAY = 600;
 
 export default {
   name: "ExternalResourceCard",
+  components: {
+    CopyToClipboard,
+    RelatedConnectivitiesButton,
+  },
   props: {
     resources: {
       type: Array,
@@ -411,6 +401,12 @@ export default {
     reloadCitation: function (reference) {
       this.generateCitationText(reference, this.citationType);
     },
+    isCitationLoading: function (citation) {
+      return citation && !citation[this.citationType] && !citation.error;
+    },
+    isCitationError: function (citation) {
+      return citation && citation.error;
+    },
     updateCopyContents: function () {
       const citationTypeObj = this.citationOptions.find((item) => item.value === this.citationType);
       let citationFormatStyle = '';
@@ -611,7 +607,7 @@ export default {
     &.loading {
       padding: 1rem;
 
-      &::before {
+      &::after {
         content: "";
         display: block;
         width: 100%;
@@ -691,20 +687,6 @@ export default {
   cursor: pointer;
 }
 
-.reference-button-container {
-  margin-top: 0.5rem;
-}
-
-.reference-icon-button {
-  color: $app-primary-color !important;
-  background-color: #f9f2fc !important;
-  border-color: $app-primary-color !important;
-
-  &:hover {
-    background-color: transparent !important;
-  }
-}
-
 @keyframes loadingAnimation {
   0% {
     background-position: -30vw 0;

package/src/components/Tooltip/ProvenancePopup.vue

@@ -183,6 +183,17 @@ export default {
       return this.entry.hyperlinks;
     },
   },
+  watch: {
+    tooltipEntry: {
+      deep: true,
+      immediate: true,
+      handler: function (newVal, oldVal) {
+        if (newVal !== oldVal) {
+          this.entryIndex = 0;
+        }
+      },
+    },
+  },
   mounted: function () {
     this.loadAvailableAnatomyFacets();
   },

package/src/components/Tooltip/RelatedConnectivitiesButton.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="reference-button-container">
+    <el-button
+      class="reference-icon-button"
+      size="small"
+      @click="$emit('show-related-connectivities', resource)"
+    >
+      Show related connectivities
+    </el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RelatedConnectivitiesButton",
+  props: {
+    resource: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.reference-button-container {
+  margin-top: 0.5rem;
+}
+
+.reference-icon-button {
+  color: $app-primary-color !important;
+  background-color: #f9f2fc !important;
+  border-color: $app-primary-color !important;
+
+  &:hover {
+    background-color: transparent !important;
+  }
+}
+</style>

package/src/components.d.ts

@@ -45,6 +45,7 @@ declare module 'vue' {
     ExternalResourceCard: typeof import('./components/Tooltip/ExternalResourceCard.vue')['default']
     HelpModeDialog: typeof import('./components/HelpModeDialog/HelpModeDialog.vue')['default']
     ProvenancePopup: typeof import('./components/Tooltip/ProvenancePopup.vue')['default']
+    RelatedConnectivitiesButton: typeof import('./components/Tooltip/RelatedConnectivitiesButton.vue')['default']
     Tooltip: typeof import('./components/Tooltip/Tooltip.vue')['default']
     TreeControls: typeof import('./components/TreeControls/TreeControls.vue')['default']
   }