@abi-software/map-utilities 1.3.3-beta.3 → 1.3.3-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.3.3-beta.3",
+  "version": "1.3.3-beta.5",
   "files": [
     "dist/*",
     "src/*",

package/src/App.vue

@@ -42,6 +42,7 @@ const showConnectivityGraph = ref(false);
 const connectivityGraphEntry = "ilxtr:neuron-type-aacar-13";
 // const connectivityGraphEntry = "ilxtr:sparc-nlp/kidney/134";
 const mapServer = "https://mapcore-demo.org/curation/flatmap/";
+const sckanVersion = "sckan-2024-09-21-npo";
 
 onMounted(() => {
   console.log("🚀 ~ onMounted ~ appRef:", appRef.value);
@@ -548,6 +549,7 @@ function confirmCreate(value) {
       v-if="showConnectivityGraph"
       :entry="connectivityGraphEntry"
       :map-server="mapServer"
+      :sckanVersion="sckanVersion"
     />
   </div>
 </template>

package/src/components/ConnectivityGraph/graph.js

@@ -252,8 +252,6 @@ const GRAPH_STYLE = [
         'style': {
             'width': 1,
             'line-color': 'dimgray',
-            'target-arrow-color': 'dimgray',
-            'target-arrow-shape': 'triangle',
             'curve-style': 'bezier'
         }
     },

package/src/components/Tooltip/ExternalResourceCard.vue

@@ -49,6 +49,17 @@
 
           <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>
+
             <CopyToClipboard :content="reference.citation[citationType]" />
           </template>
         </template>
@@ -56,11 +67,33 @@
 
       <li v-for="reference of openLibReferences">
         <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>
+
         <CopyToClipboard :content="formatCopyReference(reference)" />
       </li>
 
       <li v-for="reference of isbnDBReferences">
         <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>
+
         <CopyToClipboard :content="reference.url" />
       </li>
     </ul>
@@ -136,6 +169,9 @@ export default {
     this.getCitationText(CITATION_DEFAULT);
   },
   methods: {
+    showRelatedConnectivities: function (resource) {
+      this.$emit('show-reference-connectivities', resource);
+    },
     formatReferences: function (references) {
       const nonPubMedReferences = this.extractNonPubMedReferences(references);
       const pubMedReferences = references.filter((reference) => !nonPubMedReferences.includes(reference));
@@ -188,6 +224,7 @@ export default {
     formatNonPubMedReferences: async function (references) {
       const transformedReferences = [];
       const filteredReferences = references.filter((referenceURL) => referenceURL.indexOf('isbn') !== -1);
+
       const isbnIDs = filteredReferences.map((url) => {
         const isbnId = url.split('/').pop();
         return 'ISBN:' + isbnId;
@@ -195,6 +232,10 @@ export default {
       const isbnIDsKey = isbnIDs.join(',');
       const failedIDs = isbnIDs.slice();
 
+      const getOriginalURL = (id) => {
+        return filteredReferences.find((url) => url.includes(id));
+      };
+
       const openlibAPI = `https://openlibrary.org/api/books?bibkeys=${isbnIDsKey}&format=json`;
       const data = await this.fetchData(openlibAPI);
 
@@ -206,12 +247,15 @@ export default {
         const urlSegments = url.split('/');
         const endpointIndex = urlSegments.indexOf('books');
         const bookId = urlSegments[endpointIndex + 1];
+        const id = key.split(':')[1]; // Key => "ISBN:1234"
+        const resource = getOriginalURL(id);
 
         transformedReferences.push({
-          id: key.split(':')[1], // Key => "ISBN:1234"
+          id: id,
           type: 'openlib',
           url: url,
           bookId: bookId,
+          resource: resource,
         });
       }
 
@@ -220,10 +264,13 @@ export default {
         // Data does not exist in OpenLibrary
         // Provide ISBNDB link for reference
         const url = `https://isbndb.com/book/${id}`;
+        const resource = getOriginalURL(id);
+
         transformedReferences.push({
           id: id,
           url: url,
-          type: 'isbndb'
+          type: 'isbndb',
+          resource: resource,
         });
       });
 
@@ -234,7 +281,7 @@ export default {
 
       const str = decodeURIComponent(urlStr)
 
-      let term = {id: '', type: '', citation: {}}
+      let term = {id: '', type: '', citation: {}, resource: urlStr}
 
       const names = this.getPubMedDomains()
 
@@ -674,6 +721,20 @@ 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;