Concept page mappings: style and visibility fixes

resource/js/concept-mappings.js

@@ -1,4 +1,5 @@
 /* global Vue */
+/* global fetchWithAbort */
 
 const conceptMappingsApp = Vue.createApp({
   data () {
@@ -9,15 +10,29 @@ const conceptMappingsApp = Vue.createApp({
   provide: {
     content_lang: window.SKOSMOS.content_lang
   },
+  computed: {
+    hasMappings () {
+      return Object.keys(this.mappings).length > 0
+    }
+  },
   methods: {
     loadMappings () {
-      fetch('rest/v1/' + window.SKOSMOS.vocab + '/mappings?uri=' + window.SKOSMOS.uri + '&external=true&clang=' + window.SKOSMOS.lang + '&lang=' + window.SKOSMOS.content_lang)
+      this.mappings = [] // clear mappings before starting to load new ones
+      const url = 'rest/v1/' + window.SKOSMOS.vocab + '/mappings?uri=' + window.SKOSMOS.uri + '&external=true&clang=' + window.SKOSMOS.lang + '&lang=' + window.SKOSMOS.content_lang
+      fetchWithAbort(url, 'concept')
         .then(data => {
           return data.json()
         })
         .then(data => {
           this.mappings = this.group_by(data.mappings, 'typeLabel')
         })
+        .catch(error => {
+          if (error.name === 'AbortError') {
+            console.log('Fetching of mappings aborted')
+          } else {
+            throw error
+          }
+        })
     },
     // from https://stackoverflow.com/a/71505541
     group_by (arr, prop) {
@@ -37,7 +52,9 @@ const conceptMappingsApp = Vue.createApp({
   },
   template: `
     <div v-load-concept-page="loadMappings">
-      <concept-mappings :mappings="mappings" v-if="mappings.length !== 0"></concept-mappings>
+      <div v-if="hasMappings" class="main-content-section p-5">
+        <concept-mappings :mappings="mappings"></concept-mappings>
+      </div>
     </div>
   `
 })

resource/js/partial-page-load.js

@@ -1,3 +1,28 @@
+const fetchWithAbort = (function () {
+  const controllers = {}
+
+  return function (url, category, options = {}) {
+    // Abort the previous request in the same category if it exists
+    if (controllers[category]) {
+      controllers[category].abort()
+    }
+
+    // Create a new AbortController instance for this request
+    controllers[category] = new AbortController()
+
+    // Add the AbortController signal to the fetch options
+    options.signal = controllers[category].signal
+
+    // Perform the fetch request
+    return fetch(url, options)
+      .then(response => {
+        // Remove the abort controller after the request is done
+        delete controllers[category]
+        return response
+      })
+  }
+})()
+
 const updateMainContent = (conceptHTML) => {
   // concept card
   const conceptMainContent = conceptHTML.querySelectorAll('#main-content > :not(#concept-mappings)') // all elements from concept card except concept mappings
@@ -53,7 +78,7 @@ const partialPageLoad = (event, pageUri) => {
   event.preventDefault()
 
   // fetching html content of the concept page
-  fetch(pageUri)
+  fetchWithAbort(pageUri, 'concept')
     .then(data => {
       return data.text()
     })
@@ -77,5 +102,12 @@ const partialPageLoad = (event, pageUri) => {
       const event = new Event('loadConceptPage')
       document.dispatchEvent(event)
     })
+    .catch(error => {
+      if (error.name === 'AbortError') {
+        console.log('Fetch aborted for ' + pageUri)
+      } else {
+        throw error
+      }
+    })
 }
 /* eslint-disable no-unused-vars */

resource/js/tab-alpha.js

@@ -1,5 +1,5 @@
 /* global Vue */
-/* global partialPageLoad, getConceptURL */
+/* global partialPageLoad, getConceptURL, fetchWithAbort */
 
 const tabAlphaApp = Vue.createApp({
   data () {
@@ -47,14 +47,22 @@ const tabAlphaApp = Vue.createApp({
     },
     loadConcepts (letter) {
       this.loadingConcepts = true
-      fetch('rest/v1/' + window.SKOSMOS.vocab + '/index/' + letter + '?lang=' + window.SKOSMOS.lang + '&limit=50')
+      const url = 'rest/v1/' + window.SKOSMOS.vocab + '/index/' + letter + '?lang=' + window.SKOSMOS.lang + '&limit=50'
+      fetchWithAbort(url, 'alpha')
         .then(data => {
           return data.json()
         })
         .then(data => {
           this.indexConcepts = data.indexConcepts
           this.loadingConcepts = false
         })
+        .catch(error => {
+          if (error.name === 'AbortError') {
+            console.log('Fetch aborted for letter ' + letter)
+          } else {
+            throw error
+          }
+        })
     }
   },
   template: `

src/view/concept-card.inc

@@ -120,7 +120,7 @@
       </div>
     </div>
     <!-- appendix / concept mapping properties -->
-    <div id="concept-mappings" class="main-content-section p-5">
+    <div id="concept-mappings">
     </div>
 
   </div>