merge: PR #738 from dev

Weekly release 2023-12-11

.readthedocs.yaml

@@ -1,5 +1,10 @@
 version: 2
 
+build:
+  os: ubuntu-22.04
+  tools:
+    python: "3.11"
+
 python:
   install:
     - requirements: docs/requirements.txt

ckanext/nhm/theme/assets/scripts/apps/search/src/components/Results.vue

@@ -36,7 +36,7 @@
       <Share />
       <Download v-if="total > 0" />
     </div>
-    <div v-show="hasResult" :class="{ disabled: invalidated }">
+    <div v-show="hasResult" :class="{ disabled: invalidated }" key="resultView">
       <div class="flex-container flex-stretch-first flex-center">
         <ul class="nav nav-tabs">
           <li

ckanext/nhm/theme/assets/scripts/apps/search/src/components/views/GalleryView.vue

@@ -169,12 +169,9 @@ export default {
         if (wasAdded) {
           return this.runSearch(0);
         } else {
-          return new Promise((resolve) => {
-            resolve();
-          });
+          return this.loadAndCheckImages();
         }
       })
-      .then(this.loadAndCheckImages)
       .then(() => {
         this.setFilteredRecordTag(this.recordTag + '$ with images');
         this.loading = false;

ckanext/nhm/theme/assets/scripts/apps/search/src/store/results/images.js

@@ -8,9 +8,16 @@ let images = {
   },
   getters: {
     loadedImageRecords: (state) => {
-      return state.imageRecords.filter(
+      let loadedImgRecords = state.imageRecords.filter(
         (r) => r.image.canLoad && !r.image.loading,
       );
+      loadedImgRecords.sort((a, b) => {
+        const recordOrder = a.recordIndex - b.recordIndex;
+        return recordOrder === 0
+          ? a.recordImageIndex - b.recordImageIndex
+          : recordOrder;
+      });
+      return loadedImgRecords;
     },
     getItemImages:
       (state, getters, rootState, rootGetters) =>
@@ -105,7 +112,8 @@ let images = {
       },
   },
   actions: {
-    loadAndCheckImages(context) {
+    loadAndCheckImages(context, searchId) {
+      const isAborted = context.rootGetters['results/isAborted'];
       Vue.set(context.state, 'imageRecords', []);
       if (context.state.locked) {
         return;
@@ -134,7 +142,13 @@ let images = {
             resolve(ratio);
           };
           imageElement.onerror = reject;
-          imageElement.src = url;
+          if (isAborted(searchId)) {
+            // don't try and load if this request has been aborted
+            reject();
+          } else {
+            // this starts the loading test
+            imageElement.src = url;
+          }
         });
       }
 
@@ -150,10 +164,17 @@ let images = {
           })
           .finally(() => {
             r.image.loading = false;
-            context.state.imageRecords.push(r);
+            if (!isAborted(searchId)) {
+              // only add to the state if the search is still ongoing
+              context.state.imageRecords.push(r);
+            }
           });
       });
       return Promise.allSettled(brokenChecks).then(() => {
+        if (isAborted(searchId)) {
+          // remove everything already added to the state
+          Vue.set(context.state, 'imageRecords', []);
+        }
         context.commit(
           'results/display/addPageImages',
           context.getters.loadedImageRecords,

ckanext/nhm/theme/assets/scripts/apps/search/src/store/results/main.js

@@ -75,6 +75,9 @@ let results = {
         return [a[0], a[1], getters['query/resources/sortedResources'][a[2]]];
       });
     },
+    isAborted: (state) => (searchId) => {
+      return state.searchControllers[searchId].controller.signal.aborted;
+    },
   },
   mutations: {
     addPage(state, after) {
@@ -134,9 +137,7 @@ let results = {
           { signal: context.state.searchControllers[searchId].signal },
         ).then((data) => {
           // check to see if this request was aborted and don't add any data if so
-          if (
-            context.state.searchControllers[searchId].controller.signal.aborted
-          ) {
+          if (context.getters.isAborted(searchId)) {
             throw new AbortError(searchId);
           }
 
@@ -218,20 +219,12 @@ let results = {
           }
         })
         .then(() => {
-          Vue.set(
-            context.rootState.appState.status.resultData,
-            'loading',
-            false,
-          );
           context.state.invalidated = false;
-          const aborted =
-            context.state.searchControllers[searchId].controller.signal.aborted;
-          Vue.delete(context.state.searchControllers, searchId);
-          if (aborted) {
+          if (context.getters.isAborted(searchId)) {
             throw new AbortError(searchId);
           }
           if (context.state.display.view.toLowerCase() === 'gallery') {
-            return context.dispatch('images/loadAndCheckImages');
+            return context.dispatch('images/loadAndCheckImages', searchId);
           }
           return new Promise((r) => {
             r();
@@ -246,6 +239,13 @@ let results = {
             );
             throw e;
           }
+        })
+        .finally(() => {
+          Vue.set(
+            context.rootState.appState.status.resultData,
+            'loading',
+            false,
+          );
           Vue.delete(context.state.searchControllers, searchId);
         });
 

ckanext/nhm/theme/templates/home/snippets/featured/dataset4.html

@@ -1,17 +1,17 @@
 {% extends "home/snippets/featured/base.html" %}
 
-{% set title = "Join the Dots" %}
-{% set url="/dataset/join-the-dots-collection-level-descriptions" %}
+{% set title = "Aphid Slide Digitisation" %}
+{% set url="/search/aphid-slides" %}
 
 {% block image %}
 <div class="featured-image"
-     style="background-image:url('/images/featured-binders.jpg'); background-position-x: 50%;"
+     style="background-image:url('/images/featured-aphid.jpg'); background-position-x: 60%; background-position-y: 2%; background-size: 250%;"
      role="img"
-     aria-label="A stack of cardboard binders filled with papers and notebooks. Some binders are tied with black ribbon."
-     title="seargreyson/unsplash">
+     aria-label="A zoomed-in view of a slide for a specimen of the species Myzus (Nectarosiphon) persicae."
+     title="NHMUK014801150, Myzus (Nectarosiphon) persicae">
 </div>
 {% endblock %}
 
 {% block description %}
-Join the Dots is an extensive project giving a high-level overview of the Museum's collections, including undigitised material.
+Browse the museum's fully digitised collection of Aphidoidea slides! Over the past 14 months, digitisers at the museum have imaged more than 200,000 of these slides.
 {% endblock %}