implement fetchWithAbort and use it for partial page load, mappings & alphabetical index

resource/js/concept-mappings.js

@@ -1,4 +1,5 @@
 /* global Vue */
+/* global fetchWithAbort */
 
 const conceptMappingsApp = Vue.createApp({
   data () {
@@ -11,13 +12,21 @@ const conceptMappingsApp = Vue.createApp({
   },
   methods: {
     loadMappings () {
-      fetch('rest/v1/' + window.SKOSMOS.vocab + '/mappings?uri=' + window.SKOSMOS.uri + '&external=true&clang=' + window.SKOSMOS.lang + '&lang=' + window.SKOSMOS.content_lang)
+      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) {

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: `

tests/cypress/template/concept.cy.js

@@ -84,7 +84,7 @@ describe('Concept page', () => {
 
       // check the first mapping property name
       // NOTE: we need to increase the timeout as the mappings can take a long time to load
-      cy.get('.prop-mapping h2', {'timeout': 10000}).eq(0).contains('Closely matching concepts')
+      cy.get('.prop-mapping h2', {'timeout': 15000}).eq(0).contains('Closely matching concepts')
       // check the first mapping property values
       cy.get('.prop-mapping').eq(0).find('.prop-mapping-label').eq(0).contains('Labyrinths')
       cy.get('.prop-mapping').eq(0).find('.prop-mapping-label').eq(0).find('a').should('have.attr', 'href', 'http://id.loc.gov/authorities/subjects/sh85073793')

tests/cypress/template/vocab-home.cy.js

@@ -73,7 +73,7 @@ describe('Vocabulary home page', () => {
     cy.get('#concept-mappings').should('not.be.empty')
 
     // check the second mapping property name
-    cy.get('.prop-mapping h2').eq(0).contains('Exactly matching concepts')
+    cy.get('.prop-mapping h2', {'timeout': 15000}).eq(0).contains('Exactly matching concepts')
     // check the second mapping property values
     cy.get('.prop-mapping').eq(0).find('.prop-mapping-label').eq(0).contains('vårdinrättningar (sv)')
     cy.get('.prop-mapping').eq(0).find('.prop-mapping-label').eq(0).find('a').invoke('text').should('equal', 'vårdinrättningar')
@@ -109,7 +109,7 @@ describe('Vocabulary home page', () => {
     cy.get('#concept-mappings').should('not.be.empty')
 
     // check the second mapping property name
-    cy.get('.prop-mapping h2').eq(0).contains('Exactly matching concepts')
+    cy.get('.prop-mapping h2', {'timeout': 15000}).eq(0).contains('Exactly matching concepts')
     // check the second mapping property values
     cy.get('.prop-mapping').eq(0).find('.prop-mapping-label').eq(0).find('a').invoke('text').should('equal', 'fish')
     cy.get('.prop-mapping').eq(0).find('.prop-mapping-label').eq(0).find('a').should('have.attr', 'href', 'http://www.wikidata.org/entity/Q152')