feat: introduce linked records section on record detail pages #653
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| // -*- coding: utf-8 -*- | ||
| // | ||
| // Copyright (C) 2025 CERN. | ||
| // | ||
| // CDS-RDM is free software; you can redistribute it and/or modify it under | ||
| // the terms of the MIT License; see LICENSE file for more details. | ||
|
|
||
| import React from "react"; | ||
| import PropTypes from "prop-types"; | ||
| import { | ||
| ReactSearchKit, | ||
| InvenioSearchApi, | ||
| ResultsLoader, | ||
| ResultsMultiLayout, | ||
| Error, | ||
| EmptyResults, | ||
| Pagination, | ||
| BucketAggregation, | ||
| SearchBar, | ||
| } from "react-searchkit"; | ||
| import { OverridableContext } from "react-overridable"; | ||
| import { apiConfig } from "./api/config"; | ||
| import { Segment, Container, Grid } from "semantic-ui-react"; | ||
| import { ResultsListLayout } from "./components/ResultsLayout"; | ||
| import { RecordListItem } from "./components/RecordItem"; | ||
| import { FilterContainer, Filter, FilterValues } from "./components/Filter"; | ||
| import { NoResults } from "./components/NoResults"; | ||
| import { RelatedRecordsResultsLoader } from "./components/RelatedRecordsResultsLoader"; | ||
|
|
||
| const linkedRecordsSearchAppID = "linkedRecordsSearch"; | ||
|
|
||
| const overriddenComponents = { | ||
| [`${linkedRecordsSearchAppID}.ResultsList.container`]: ResultsListLayout, | ||
| [`${linkedRecordsSearchAppID}.ResultsList.item`]: RecordListItem, | ||
| [`${linkedRecordsSearchAppID}.BucketAggregation.element`]: FilterContainer, | ||
| [`${linkedRecordsSearchAppID}.BucketAggregationContainer.element`]: Filter, | ||
| [`${linkedRecordsSearchAppID}.BucketAggregationValues.element`]: FilterValues, | ||
| [`${linkedRecordsSearchAppID}.EmptyResults.element`]: NoResults, | ||
| [`${linkedRecordsSearchAppID}.ResultsLoader.element`]: RelatedRecordsResultsLoader, | ||
| }; | ||
|
|
||
| export const LinkedRecordsSearch = ({ endpoint, searchQuery }) => { | ||
| // Pass the base query to apiConfig so it can be handled by the request interceptor | ||
| const searchApi = new InvenioSearchApi(apiConfig(endpoint, searchQuery)); | ||
|
|
||
| const initialState = { | ||
| queryString: "", // Keep search bar empty for user input | ||
| sortBy: "bestmatch", | ||
| sortOrder: "asc", | ||
| page: 1, | ||
| size: 5, | ||
| layout: "list", | ||
| }; | ||
|
|
||
| return ( | ||
| <OverridableContext.Provider value={overriddenComponents}> | ||
| <ReactSearchKit | ||
| appName={linkedRecordsSearchAppID} | ||
| searchApi={searchApi} | ||
| urlHandlerApi={{ enabled: false }} | ||
| initialQueryState={initialState} | ||
| > | ||
| <> | ||
| {/* Search Bar and Controls */} | ||
| <Grid> | ||
| <Grid.Row> | ||
| <Grid.Column mobile={16} tablet={7} computer={8}> | ||
| <SearchBar | ||
| className="mb-10" | ||
| placeholder="Search within linked records..." | ||
| uiProps={{ | ||
| name: "linked-records-search", | ||
| id: "linked-records-search-bar", | ||
| icon: "search", | ||
| }} | ||
| actionProps={{ | ||
| icon: "search", | ||
| content: null, | ||
| "aria-label": "Search", | ||
| }} | ||
| /> | ||
| </Grid.Column> | ||
| <Grid.Column mobile={16} tablet={9} computer={8}> | ||
| <div className="flex align-items-center justify-end rel-mobile-pt-1"> | ||
| <BucketAggregation | ||
| agg={{ field: "resource_type", aggName: "resource_type" }} | ||
| /> | ||
| </div> | ||
| </Grid.Column> | ||
| </Grid.Row> | ||
| </Grid> | ||
|
|
||
| {/* Results */} | ||
| <Segment> | ||
| <ResultsLoader> | ||
| <ResultsMultiLayout /> | ||
| <Error /> | ||
| <EmptyResults /> | ||
| <Container align="center" className="rel-pt-1"> | ||
| <Pagination options={{ size: "mini", showEllipsis: true }} /> | ||
| </Container> | ||
| </ResultsLoader> | ||
| </Segment> | ||
| </> | ||
| </ReactSearchKit> | ||
| </OverridableContext.Provider> | ||
| ); | ||
| }; | ||
|
|
||
| LinkedRecordsSearch.propTypes = { | ||
| endpoint: PropTypes.string.isRequired, | ||
| searchQuery: PropTypes.string.isRequired, | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| // -*- coding: utf-8 -*- | ||
| // | ||
| // Copyright (C) 2025 CERN. | ||
| // | ||
| // CDS-RDM is free software; you can redistribute it and/or modify it under | ||
| // the terms of the MIT License; see LICENSE file for more details. | ||
|
|
||
| export const apiConfig = (endpoint, baseQuery) => ({ | ||
| axios: { | ||
| url: endpoint, | ||
| timeout: 5000, | ||
| headers: { | ||
| Accept: "application/vnd.inveniordm.v1+json", | ||
| }, | ||
| }, | ||
| interceptors: { | ||
| request: { | ||
| resolve: (config) => { | ||
| // Modify the params to combine base query with user search | ||
| if (config.params) { | ||
| const userQuery = config.params.queryString; | ||
|
|
||
| // Combine base query with user search | ||
| if (baseQuery && userQuery) { | ||
| config.params.queryString = `(${baseQuery}) AND (${userQuery})`; | ||
| } else if (baseQuery) { | ||
| config.params.queryString = baseQuery; | ||
| } | ||
| // If only userQuery exists, leave it as is (though this shouldn't happen) | ||
| } | ||
|
|
||
| return config; | ||
| }, | ||
| reject: (error) => Promise.reject(error), | ||
| }, | ||
| }, | ||
| }); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| // -*- coding: utf-8 -*- | ||
| // | ||
| // Copyright (C) 2025 CERN. | ||
| // | ||
| // CDS-RDM is free software; you can redistribute it and/or modify it under | ||
| // the terms of the MIT License; see LICENSE file for more details. | ||
|
|
||
| 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, | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| // -*- coding: utf-8 -*- | ||
| // | ||
| // Copyright (C) 2025 CERN. | ||
| // | ||
| // CDS-RDM is free software; you can redistribute it and/or modify it under | ||
| // the terms of the MIT License; see LICENSE file for more details. | ||
|
|
||
| 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> | ||
| ); | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| // -*- coding: utf-8 -*- | ||
| // | ||
| // Copyright (C) 2025 CERN. | ||
| // | ||
| // CDS-RDM is free software; you can redistribute it and/or modify it under | ||
| // the terms of the MIT License; see LICENSE file for more details. | ||
|
|
||
| import React from "react"; | ||
| import PropTypes from "prop-types"; | ||
| import { Item, Label } from "semantic-ui-react"; | ||
| import _get from "lodash/get"; | ||
| import { SearchItemCreators } from "@js/invenio_app_rdm/utils"; | ||
|
|
||
|
|
||
| const layoutProps = (result) => { | ||
| return { | ||
| accessStatusId: _get(result, "ui.access_status.id", "open"), | ||
| accessStatus: _get(result, "ui.access_status.title_l10n", "Open"), | ||
| accessStatusIcon: _get(result, "ui.access_status.icon", "unlock"), | ||
| createdDate: _get(result, "ui.created_date_l10n_long", "Unknown date"), | ||
| creators: _get(result, "ui.creators.creators", []).slice(0, 3), | ||
| resourceType: _get(result, "ui.resource_type.title_l10n", "No resource type"), | ||
| title: _get(result, "metadata.title", "No title"), | ||
| link: _get(result, "links.self_html", "#"), | ||
| }; | ||
| }; | ||
|
Comment on lines
+15
to
+26
Contributor
There was a problem hiding this comment. could this part be imported from somewhere so we don't need to maintain it?
Contributor
Author
There was a problem hiding this comment. Unless I am mistaken there is no other place we can import this from. I see that we usually do it on the cmp itself, f.e. check here RecordsResultsListItem from invenio-app-rdm. Not sure how reusable this is, as different cmps might want to display different things. I am happy to move this somewhere more resusable. If you think we should, let me know where we should do it, invenio-rdm-records or invenio-app-rdm (or somewhere else?) |
||
|
|
||
| export const RecordListItem = ({ result }) => { | ||
| const { | ||
| accessStatusId, | ||
| accessStatus, | ||
| createdDate, | ||
| creators, | ||
| resourceType, | ||
| title, | ||
| link, | ||
| } = layoutProps(result); | ||
|
|
||
| return ( | ||
| <Item> | ||
| <Item.Content> | ||
| {/* Metadata badges */} | ||
| <div className="mb-10"> | ||
| <Label size="small"> | ||
| {resourceType} | ||
| </Label> | ||
|
|
||
| <Label size="small"> | ||
| {createdDate} | ||
| </Label> | ||
|
|
||
| <Label size="small" className={`access-status ${accessStatusId}`}> | ||
| {accessStatus} | ||
| </Label> | ||
| </div> | ||
|
|
||
| {/* Title */} | ||
| <Item.Header as="a" href={link}> | ||
| {title} | ||
| </Item.Header> | ||
|
|
||
| {/* Creators */} | ||
| <Item.Extra> | ||
| <SearchItemCreators creators={creators} /> | ||
| </Item.Extra> | ||
| </Item.Content> | ||
| </Item> | ||
| ); | ||
| }; | ||
|
|
||
| RecordListItem.propTypes = { | ||
| result: PropTypes.object.isRequired, | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| // -*- coding: utf-8 -*- | ||
| // | ||
| // Copyright (C) 2025 CERN. | ||
| // | ||
| // CDS-RDM is free software; you can redistribute it and/or modify it under | ||
| // the terms of the MIT License; see LICENSE file for more details. | ||
|
|
||
| import React from "react"; | ||
| import { Placeholder } from "semantic-ui-react"; | ||
|
|
||
| export const RelatedRecordsResultsLoader = (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 | ||
| ); | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| // -*- coding: utf-8 -*- | ||
| // | ||
| // Copyright (C) 2025 CERN. | ||
| // | ||
| // CDS-RDM is free software; you can redistribute it and/or modify it under | ||
| // the terms of the MIT License; see LICENSE file for more details. | ||
|
|
||
| import React from "react"; | ||
| import PropTypes from "prop-types"; | ||
| import { Grid, Item } from "semantic-ui-react"; | ||
|
|
||
| export const ResultsListLayout = ({ results }) => ( | ||
| <Item.Group unstackable divided relaxed link> | ||
| {results} | ||
| </Item.Group> | ||
| ); | ||
|
|
||
| ResultsListLayout.propTypes = { | ||
| results: PropTypes.array.isRequired, | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| // -*- coding: utf-8 -*- | ||
| // | ||
| // Copyright (C) 2025 CERN. | ||
| // | ||
| // CDS-RDM is free software; you can redistribute it and/or modify it under | ||
| // the terms of the MIT License; see LICENSE file for more details. | ||
|
|
||
| import React from "react"; | ||
| import ReactDOM from "react-dom"; | ||
| import { LinkedRecordsSearch } from "./LinkedRecordsSearch"; | ||
|
|
||
| const linkedRecordsContainer = document.getElementById("cds-linked-records"); | ||
|
|
||
| if (linkedRecordsContainer) { | ||
| const endpoint = linkedRecordsContainer.dataset.apiEndpoint; | ||
| const searchQuery = linkedRecordsContainer.dataset.searchQuery; | ||
|
|
||
| ReactDOM.render( | ||
| <LinkedRecordsSearch | ||
| endpoint={endpoint} | ||
| searchQuery={searchQuery} | ||
| />, | ||
| linkedRecordsContainer | ||
| ); | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
just for my understanding: do we need the custom function for this? isn't there one already somewhere?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The main point of having this is that I am using the interceptors to enable the searchbar, and this is unique for this case. Without this we cannot hide the default query - needed to filter only related records - from the user input component, so we need to use the interceptors to build it with the user input query. I checked the hiddenParams but this doesn't allow queries, it works similar to filters, unless I am missing something.