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

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));
 
@@ -78,7 +80,6 @@ export const BlrSearch = ({ endpoint, recordDOI, resourceType }) => {
 
   return (
     <>
-      <Header as="h2">Linked records</Header>
       <OverridableContext.Provider value={overriddenComponents}>
         <ReactSearchKit
           appName={blrSearchAppID}
@@ -99,10 +100,10 @@ export const BlrSearch = ({ endpoint, recordDOI, resourceType }) => {
                 <ResultsMultiLayout />
                 <Error />
                 <EmptyResults />
+                <Container align="center" className="rel-pt-1">
+                  <Pagination options={{ size: "mini", showEllipsis: true }} />
+                </Container>
               </ResultsLoader>
-              <Container align="center" className="rel-pt-1">
-                <Pagination options={{ size: "mini", showEllipsis: true }} />
-              </Container>
             </Segment>
           </>
         </ReactSearchKit>
@@ -115,4 +116,5 @@ BlrSearch.propTypes = {
   endpoint: PropTypes.string.isRequired,
   recordDOI: PropTypes.string.isRequired,
   resourceType: PropTypes.string.isRequired,
+  blrId: PropTypes.string.isRequired,
 };

site/zenodo_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
+  );
+};

site/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: "",
-};

site/zenodo_rdm/assets/semantic-ui/js/zenodo_rdm/src/blr-related-works/index.js

@@ -28,6 +28,7 @@ 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",
@@ -44,6 +45,7 @@ if (validTypes.includes(resourceType)) {
         endpoint={endpoint}
         recordDOI={recordDOI}
         resourceType={resourceType}
+        blrId={blrId}
       />,
       blrContainer
     );

templates/semantic-ui/zenodo_rdm/records/detail.html

@@ -65,16 +65,29 @@ <h4 class="inline">{{ record.ui.access_status.title_l10n }}</h4>
 {# Additional details #}
 {%- block record_details -%}
 
-  {% if record.expanded.parent.communities.default.slug == "biosyslit" %}
+  {% if record.expanded and record.expanded.parent.communities.default.slug == "biosyslit" %}
     {# 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 record.expanded and record.expanded.parent.communities.default.slug == "biosyslit" %}
     {{ webpack['zenodo-rdm-blr-search.js'] }}
   {% endif %}
 {% endblock javascript %}