blr: landing page fixes

* search for related records only within BLR community * adjust empty search results to absence of search bar * add a new loader placeholder
zenodo · Jan 25, 2024 · b5268aa · b5268aa
1 parent f34ea49
commit b5268aa
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 78 deletions.
diff --git a/site/zenodo_rdm/assets/semantic-ui/js/zenodo_rdm/src/blr-related-works/BlrSearch.js b/site/zenodo_rdm/assets/semantic-ui/js/zenodo_rdm/src/blr-related-works/BlrSearch.js
@@ -35,12 +35,13 @@ import {
 } from "react-searchkit";
 import { OverridableContext } from "react-overridable";
 import { apiConfig } from "./api/config";
-import { Segment, Container, Header } from "semantic-ui-react";
+import { Segment, Container } from "semantic-ui-react";
 import { ResultsGridLayout, ResultsListLayout } from "./components/ResultsLayout";
 import { RecordGridItem, RecordListItem } from "./components/RecordItem";
 import { FilterContainer, Filter, FilterValues } from "./components/Filter";
 import { LayoutSwitchButtons } from "./components/LayoutSwitchButtons";
 import { NoResults } from "./components/NoResults";
+import { BlrResultsLoader } from "./components/BlrResultsLoader";
 
 const blrSearchAppID = "blrSearch";
 
@@ -54,16 +55,17 @@ const overriddenComponents = {
   [`${blrSearchAppID}.BucketAggregationValues.element`]: FilterValues,
   [`${blrSearchAppID}.LayoutSwitcher.element`]: LayoutSwitchButtons,
   [`${blrSearchAppID}.EmptyResults.element`]: NoResults,
+  [`${blrSearchAppID}.ResultsLoader.element`]: BlrResultsLoader,
 };
 
-export const BlrSearch = ({ endpoint, recordDOI, resourceType }) => {
+export const BlrSearch = ({ endpoint, recordDOI, resourceType, blrId }) => {
   const relationType = (resourceType) =>
     resourceType === "Journal article" || resourceType === "Book chapter"
       ? "ispartof"
       : "haspart";
 
   const queryString = (relationType, identifier) =>
-    `metadata.related_identifiers.relation_type.id:${relationType} AND metadata.related_identifiers.identifier:"${identifier}"`;
+    `parent.communities.ids:${blrId} AND metadata.related_identifiers.relation_type.id:${relationType} AND metadata.related_identifiers.identifier:"${identifier}"`;
 
   const searchApi = new InvenioSearchApi(apiConfig(endpoint));
 
@@ -77,42 +79,40 @@ export const BlrSearch = ({ endpoint, recordDOI, resourceType }) => {
   };
 
   return (
-    <>
-      <Header as="h2">Linked records</Header>
-      <OverridableContext.Provider value={overriddenComponents}>
-        <ReactSearchKit
-          appName={blrSearchAppID}
-          searchApi={searchApi}
-          urlHandlerApi={{ enabled: false }}
-          initialQueryState={initialState}
-        >
-          <>
-            <div className="flex align-items-center justify-space-between">
-              <BucketAggregation
-                agg={{ field: "resource_type", aggName: "resource_type" }}
-              />
-              <LayoutSwitcher />
-            </div>
+    <OverridableContext.Provider value={overriddenComponents}>
+      <ReactSearchKit
+        appName={blrSearchAppID}
+        searchApi={searchApi}
+        urlHandlerApi={{ enabled: false }}
+        initialQueryState={initialState}
+      >
+        <>
+          <div className="flex align-items-center justify-space-between">
+            <BucketAggregation
+              agg={{ field: "resource_type", aggName: "resource_type" }}
+            />
+            <LayoutSwitcher />
+          </div>
 
-            <Segment>
-              <ResultsLoader>
-                <ResultsMultiLayout />
-                <Error />
-                <EmptyResults />
-              </ResultsLoader>
+          <Segment>
+            <ResultsLoader>
+              <ResultsMultiLayout />
+              <Error />
+              <EmptyResults />
               <Container align="center" className="rel-pt-1">
                 <Pagination options={{ size: "mini", showEllipsis: true }} />
               </Container>
-            </Segment>
-          </>
-        </ReactSearchKit>
-      </OverridableContext.Provider>
-    </>
+            </ResultsLoader>
+          </Segment>
+        </>
+      </ReactSearchKit>
+    </OverridableContext.Provider>
   );
 };
 
 BlrSearch.propTypes = {
   endpoint: PropTypes.string.isRequired,
   recordDOI: PropTypes.string.isRequired,
   resourceType: PropTypes.string.isRequired,
+  blrId: PropTypes.string.isRequired,
 };
diff --git a/...rdm/assets/semantic-ui/js/zenodo_rdm/src/blr-related-works/components/BlrResultsLoader.js b/...rdm/assets/semantic-ui/js/zenodo_rdm/src/blr-related-works/components/BlrResultsLoader.js
@@ -0,0 +1,19 @@
+import React from "react";
+import { Placeholder } from "semantic-ui-react";
+
+export const BlrResultsLoader = (children, loading) => {
+  return loading ? (
+    <Placeholder fluid>
+      <Placeholder.Header image>
+        <Placeholder.Line length="long" />
+        <Placeholder.Line />
+      </Placeholder.Header>
+      <Placeholder.Header image>
+        <Placeholder.Line length="long" />
+        <Placeholder.Line />
+      </Placeholder.Header>
+    </Placeholder>
+  ) : (
+    children
+  );
+};
diff --git a/...zenodo_rdm/assets/semantic-ui/js/zenodo_rdm/src/blr-related-works/components/NoResults.js b/...zenodo_rdm/assets/semantic-ui/js/zenodo_rdm/src/blr-related-works/components/NoResults.js
@@ -21,33 +21,14 @@
 // as an Intergovernmental Organization or submit itself to any jurisdiction.
 
 import React from "react";
-import { PropTypes } from "prop-types";
-import { Container, Icon } from "semantic-ui-react";
+import { Container } from "semantic-ui-react";
 
-export const NoResults = ({ queryString }) => {
+export const NoResults = () => {
   return (
-    <Container align={(!queryString && "left") || "center"}>
-      {(queryString && (
-        <div className="text-muted rel-p-1">
-          <Icon name="search" size="huge" />
-          <p className="rel-mt-1">
-            <strong>No results found for '{queryString}'</strong>
-          </p>
-        </div>
-      )) || (
-        <p>
-          <Icon name="folder open outline" />
-          <em>No related content for this record.</em>
-        </p>
-      )}
+    <Container align="left">
+      <p>
+        <em>No related content for this record</em>
+      </p>
     </Container>
   );
 };
-
-NoResults.propTypes = {
-  queryString: PropTypes.string,
-};
-
-NoResults.defaultProps = {
-  queryString: "",
-};
diff --git a/site/zenodo_rdm/assets/semantic-ui/js/zenodo_rdm/src/blr-related-works/index.js b/site/zenodo_rdm/assets/semantic-ui/js/zenodo_rdm/src/blr-related-works/index.js
@@ -28,23 +28,15 @@ const blrContainer = document.getElementById("blr-search");
 const endpoint = blrContainer.dataset.blrEndpoint;
 const recordDOI = JSON.parse(blrContainer.dataset.recordDoi);
 const resourceType = JSON.parse(blrContainer.dataset.resourceType);
+const blrId = JSON.parse(blrContainer.dataset.blrId);
 
-const validTypes = [
-  "Figure",
-  "Taxonomic treatment",
-  "Book chapter",
-  "Journal article",
-  "Drawing",
-];
-
-if (validTypes.includes(resourceType)) {
-  blrContainer &&
-    ReactDOM.render(
-      <BlrSearch
-        endpoint={endpoint}
-        recordDOI={recordDOI}
-        resourceType={resourceType}
-      />,
-      blrContainer
-    );
-}
+blrContainer &&
+  ReactDOM.render(
+    <BlrSearch
+      endpoint={endpoint}
+      recordDOI={recordDOI}
+      resourceType={resourceType}
+      blrId={blrId}
+    />,
+    blrContainer
+  );
diff --git a/site/zenodo_rdm/filters.py b/site/zenodo_rdm/filters.py
@@ -0,0 +1,33 @@
+# -*- coding: utf-8 -*-
+#
+# Copyright (C) 2024 CERN.
+#
+# ZenodoRDM is free software; you can redistribute it and/or modify it
+# under the terms of the MIT License; see LICENSE file for more details.
+
+"""Filters to be used in the Jinja templates."""
+
+from invenio_records.dictutils import dict_lookup
+
+
+def is_blr_related_record(record):
+    """Check if we need to display related records for this record."""
+    valid_types = [
+        "Figure",
+        "Taxonomic treatment",
+        "Book chapter",
+        "Journal article",
+        "Drawing",
+    ]
+
+    try:
+        slug = dict_lookup(record, "expanded.parent.communities.default.slug")
+        resource_type = dict_lookup(record, "metadata.resource_type.title.en")
+        is_valid_type = resource_type in valid_types
+
+        if slug == "biosyslit" and is_valid_type:
+            return True
+
+        return False
+    except KeyError:
+        return False
diff --git a/site/zenodo_rdm/views.py b/site/zenodo_rdm/views.py
@@ -14,6 +14,7 @@
 from marshmallow import ValidationError
 
 from .decorators import cached_unless_authenticated_or_flashes
+from .filters import is_blr_related_record
 from .support.support import ZenodoSupport
 
 
@@ -87,4 +88,7 @@ def handle_validation_errors(e):
 
     app.register_error_handler(400, handle_validation_errors)
 
+    # Register template filters
+    blueprint.add_app_template_filter(is_blr_related_record)
+
     return blueprint
diff --git a/templates/semantic-ui/zenodo_rdm/records/detail.html b/templates/semantic-ui/zenodo_rdm/records/detail.html
@@ -9,6 +9,7 @@
 {%- extends "invenio_app_rdm/records/detail.html" %}
 
 {%- set citations_enabled = config.ZENODO_RECORDS_UI_CITATIONS_ENABLE %}
+{%- set isBlrRecord = record | is_blr_related_record %}
 
 {%- block record_files -%}
   {# record has files BUT passed files are empty. This happens when we display are request. #}
@@ -65,16 +66,28 @@ <h4 class="inline">{{ record.ui.access_status.title_l10n }}</h4>
 {# Additional details #}
 {%- block record_details -%}
 
-  {% if record.expanded.parent.communities.default.slug == "biosyslit" %}
+  {% if isBlrRecord %}
     {# BLR Related works #}
+    <h2>Linked records</h2>
     <section
       id="blr-search"
-      class="rel-mt-2"
       data-blr-endpoint="/api/records"
       data-record-doi='{{ record.pids.doi.identifier | tojson }}'
       data-resource-type='{{ record.metadata.resource_type.title.en | tojson }}'
-      data-communities='{{ record.expanded.parent.communities | tojson }}'
+      data-blr-id='{{ record.expanded.parent.communities.default.id | tojson }}'
     >
+      <div class="ui segment">
+        <div class="ui fluid placeholder">
+          <div class="image header">
+            <div class="long line"></div>
+            <div class="line"></div>
+          </div>
+          <div class="image header">
+            <div class="long line"></div>
+            <div class="line"></div>
+          </div>
+        </div>
+      </div>
     </section>
   {% endif %}
 
@@ -103,7 +116,7 @@ <h4 class="inline">{{ record.ui.access_status.title_l10n }}</h4>
   {{super()}}
   {{ webpack['zenodo-rdm-citations.js'] }}
 
-  {% if record.expanded.parent.communities.default.slug == "biosyslit" %}
+  {% if isBlrRecord %}
     {{ webpack['zenodo-rdm-blr-search.js'] }}
   {% endif %}
 {% endblock javascript %}