landing page: add blr related works section

assets/less/zenodo-rdm/globals/site.overrides

@@ -138,4 +138,9 @@ a.inverted {
   .ui.medium.header {
     font-size: 1.45rem;
   }
+}
+
+.image.thumbnail-image {
+  height: 150px;
+  object-fit: cover;
 }

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

@@ -0,0 +1,118 @@
+// This file is part of Zenodo.
+// Copyright (C) 2023 CERN.
+//
+// Zenodo is free software; you can redistribute it
+// and/or modify it under the terms of the GNU General Public License as
+// published by the Free Software Foundation; either version 2 of the
+// License, or (at your option) any later version.
+//
+// Zenodo is distributed in the hope that it will be
+// useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+// General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Zenodo; if not, write to the
+// Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston,
+// MA 02111-1307, USA.
+//
+// In applying this license, CERN does not
+// waive the privileges and immunities granted to it by virtue of its status
+// as an Intergovernmental Organization or submit itself to any jurisdiction.
+
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  ReactSearchKit,
+  InvenioSearchApi,
+  ResultsLoader,
+  ResultsMultiLayout,
+  Error,
+  EmptyResults,
+  Pagination,
+  BucketAggregation,
+  LayoutSwitcher,
+} from "react-searchkit";
+import { OverridableContext } from "react-overridable";
+import { apiConfig } from "./api/config";
+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";
+
+const overriddenComponents = {
+  [`${blrSearchAppID}.ResultsGrid.container`]: ResultsGridLayout,
+  [`${blrSearchAppID}.ResultsGrid.item`]: RecordGridItem,
+  [`${blrSearchAppID}.ResultsList.container`]: ResultsListLayout,
+  [`${blrSearchAppID}.ResultsList.item`]: RecordListItem,
+  [`${blrSearchAppID}.BucketAggregation.element`]: FilterContainer,
+  [`${blrSearchAppID}.BucketAggregationContainer.element`]: Filter,
+  [`${blrSearchAppID}.BucketAggregationValues.element`]: FilterValues,
+  [`${blrSearchAppID}.LayoutSwitcher.element`]: LayoutSwitchButtons,
+  [`${blrSearchAppID}.EmptyResults.element`]: NoResults,
+  [`${blrSearchAppID}.ResultsLoader.element`]: BlrResultsLoader,
+};
+
+export const BlrSearch = ({ endpoint, recordDOI, resourceType, blrId }) => {
+  const relationType = (resourceType) =>
+    resourceType === "Journal article" || resourceType === "Book chapter"
+      ? "ispartof"
+      : "haspart";
+
+  const queryString = (relationType, 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));
+
+  const initialState = {
+    queryString: queryString(relationType(resourceType), recordDOI),
+    sortBy: "bestmatch",
+    sortOrder: "asc",
+    page: 1,
+    size: 4,
+    layout: "list",
+  };
+
+  return (
+    <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 />
+              <Container align="center" className="rel-pt-1">
+                <Pagination options={{ size: "mini", showEllipsis: true }} />
+              </Container>
+            </ResultsLoader>
+          </Segment>
+        </>
+      </ReactSearchKit>
+    </OverridableContext.Provider>
+  );
+};
+
+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/api/config.js

@@ -0,0 +1,31 @@
+// This file is part of Zenodo.
+// Copyright (C) 2023 CERN.
+//
+// Zenodo is free software; you can redistribute it
+// and/or modify it under the terms of the GNU General Public License as
+// published by the Free Software Foundation; either version 2 of the
+// License, or (at your option) any later version.
+//
+// Zenodo is distributed in the hope that it will be
+// useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+// General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Zenodo; if not, write to the
+// Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston,
+// MA 02111-1307, USA.
+//
+// In applying this license, CERN does not
+// waive the privileges and immunities granted to it by virtue of its status
+// as an Intergovernmental Organization or submit itself to any jurisdiction.
+
+export const apiConfig = (endpoint) => ({
+  axios: {
+    url: endpoint,
+    timeout: 5000,
+    headers: {
+      Accept: "application/vnd.inveniordm.v1+json",
+    },
+  },
+});

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/Filter.js

@@ -0,0 +1,92 @@
+// This file is part of Zenodo.
+// Copyright (C) 2023 CERN.
+//
+// Zenodo is free software; you can redistribute it
+// and/or modify it under the terms of the GNU General Public License as
+// published by the Free Software Foundation; either version 2 of the
+// License, or (at your option) any later version.
+//
+// Zenodo is distributed in the hope that it will be
+// useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+// General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Zenodo; if not, write to the
+// Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston,
+// MA 02111-1307, USA.
+//
+// In applying this license, CERN does not
+// waive the privileges and immunities granted to it by virtue of its status
+// as an Intergovernmental Organization or submit itself to any jurisdiction.
+
+import React from "react";
+import { PropTypes } from "prop-types";
+import { Dropdown, Label, Button, Icon } from "semantic-ui-react";
+import { withState } from "react-searchkit";
+
+export const FilterContainer = ({ agg, containerCmp, updateQueryFilters }) => {
+  const clearFacets = () => {
+    if (containerCmp.props.selectedFilters.length) {
+      updateQueryFilters([agg.aggName, ""], containerCmp.props.selectedFilters);
+    }
+  };
+
+  return (
+    <div className="flex align-items-center">
+      <div>{containerCmp}</div>
+      <div>
+        <Button onClick={clearFacets} content="Reset filters" />
+      </div>
+    </div>
+  );
+};
+
+FilterContainer.propTypes = {
+  agg: PropTypes.object.isRequired,
+  updateQueryFilters: PropTypes.func.isRequired,
+  containerCmp: PropTypes.node.isRequired,
+};
+
+export const Filter = withState(({ currentQueryState, valuesCmp }) => {
+  const numSelectedFilters = currentQueryState.filters.length;
+  return (
+    <Dropdown
+      text={`Filter by type ${numSelectedFilters ? `(${numSelectedFilters})` : ""}`}
+      button
+    >
+      <Dropdown.Menu>{valuesCmp}</Dropdown.Menu>
+    </Dropdown>
+  );
+});
+
+Filter.propTypes = {
+  valuesCmp: PropTypes.array.isRequired,
+};
+
+export const FilterValues = ({ bucket, isSelected, onFilterClicked, label }) => {
+  return (
+    <Dropdown.Item
+      key={bucket.key}
+      id={`${bucket.key}-agg-value`}
+      selected={isSelected}
+      onClick={() => onFilterClicked(bucket.key)}
+      value={bucket.key}
+      className="flex align-items-center justify-space-between"
+    >
+      {isSelected && <Icon name="check" className="positive" />}
+
+      <span>{label}</span>
+      <Label size="small" className="rel-ml-1 mr-0">
+        {bucket.doc_count.toLocaleString("en-US")}
+      </Label>
+    </Dropdown.Item>
+  );
+};
+
+FilterValues.propTypes = {
+  bucket: PropTypes.object.isRequired,
+  isSelected: PropTypes.bool.isRequired,
+  onFilterClicked: PropTypes.func.isRequired,
+  label: PropTypes.string.isRequired,
+};

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

@@ -0,0 +1,51 @@
+// This file is part of Zenodo.
+// Copyright (C) 2023 CERN.
+//
+// Zenodo is free software; you can redistribute it
+// and/or modify it under the terms of the GNU General Public License as
+// published by the Free Software Foundation; either version 2 of the
+// License, or (at your option) any later version.
+//
+// Zenodo is distributed in the hope that it will be
+// useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+// General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Zenodo; if not, write to the
+// Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston,
+// MA 02111-1307, USA.
+//
+// In applying this license, CERN does not
+// waive the privileges and immunities granted to it by virtue of its status
+// as an Intergovernmental Organization or submit itself to any jurisdiction.
+
+import React from "react";
+import { PropTypes } from "prop-types";
+import { Button } from "semantic-ui-react";
+
+export const LayoutSwitchButtons = ({ currentLayout, onLayoutChange }) => {
+  return (
+    <Button.Group>
+      <Button
+        icon="th list"
+        name="list"
+        active={currentLayout === "list"}
+        onClick={() => onLayoutChange("list")}
+        aria-label="List view"
+      />
+      <Button
+        icon="th"
+        name="grid"
+        active={currentLayout === "grid"}
+        onClick={() => onLayoutChange("grid")}
+        aria-label="Grid view"
+      />
+    </Button.Group>
+  );
+};
+
+LayoutSwitchButtons.propTypes = {
+  currentLayout: PropTypes.string.isRequired,
+  onLayoutChange: PropTypes.func.isRequired,
+};

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

@@ -0,0 +1,34 @@
+// This file is part of Zenodo.
+// Copyright (C) 2023 CERN.
+//
+// Zenodo is free software; you can redistribute it
+// and/or modify it under the terms of the GNU General Public License as
+// published by the Free Software Foundation; either version 2 of the
+// License, or (at your option) any later version.
+//
+// Zenodo is distributed in the hope that it will be
+// useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+// General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Zenodo; if not, write to the
+// Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston,
+// MA 02111-1307, USA.
+//
+// In applying this license, CERN does not
+// waive the privileges and immunities granted to it by virtue of its status
+// as an Intergovernmental Organization or submit itself to any jurisdiction.
+
+import React from "react";
+import { Container } from "semantic-ui-react";
+
+export const NoResults = () => {
+  return (
+    <Container align="left">
+      <p>
+        <em>No related content for this record</em>
+      </p>
+    </Container>
+  );
+};