From caea5d23b0e55c24e2fa24f3f5b867188a08c92d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Anne=20L=27H=C3=B4te?= Date: Fri, 13 Dec 2024 12:05:31 +0100 Subject: [PATCH 1/4] feat(openalex): Display spinner while computing data --- .../openalex-affiliations/results/index.jsx | 26 ++- .../results/list-view.jsx | 200 +++++++++--------- client/src/utils/works.jsx | 2 + 3 files changed, 112 insertions(+), 116 deletions(-) diff --git a/client/src/pages/openalex-affiliations/results/index.jsx b/client/src/pages/openalex-affiliations/results/index.jsx index 93dca6b..d51a6f9 100644 --- a/client/src/pages/openalex-affiliations/results/index.jsx +++ b/client/src/pages/openalex-affiliations/results/index.jsx @@ -40,7 +40,7 @@ export default function Affiliations() { const [searchParams] = useSearchParams(); const { toast } = useToast(); - const [addList, setAddList] = useState([]); + const [addList, setAddList] = useState([]); // TODO: still used ? const [affiliations, setAffiliations] = useState([]); const [body, setBody] = useState({}); const [cleanRor, setCleanRor] = useState(''); @@ -731,16 +731,20 @@ export default function Affiliations() { /> - + {filteredAffiliations.length === 0 ? ( + // TODO replace spinner by skeleton + ) : ( + + )} diff --git a/client/src/pages/openalex-affiliations/results/list-view.jsx b/client/src/pages/openalex-affiliations/results/list-view.jsx index bb24424..10d76de 100644 --- a/client/src/pages/openalex-affiliations/results/list-view.jsx +++ b/client/src/pages/openalex-affiliations/results/list-view.jsx @@ -5,7 +5,6 @@ import { Col, Modal, ModalContent, ModalFooter, ModalTitle, Row, - Spinner, Text, } from '@dataesr/dsfr-plus'; import { Steps } from 'intro.js-react'; @@ -36,9 +35,9 @@ export default function ListView({ const [selectShowAffiliations, setSelectShowAffiliations] = useState('all'); const [selectRorCountry, setSelectRorCountry] = useState('all'); const [sortsAndFilters, setSortsAndFilters] = useState({ - sortOnNumberOfRors: 'default', - showAffiliations: 'all', rorCountry: 'all', + showAffiliations: 'all', + sortOnNumberOfRors: 'default', }); const [sortedOrFilteredAffiliations, setSortedOrFilteredAffiliations] = useState(filteredAffiliations); @@ -113,17 +112,14 @@ export default function ListView({ } else if (sortsAndFilters.sortOnNumberOfRors === 'empty') { initialAffiliations = initialAffiliations.filter((affiliation) => affiliation.rors.length === 0); } - if (sortsAndFilters.showAffiliations === 'onlyWithCorrections') { initialAffiliations = initialAffiliations.filter((affiliation) => affiliation.addList.length > 0 || affiliation.removeList.length > 0); } else if (sortsAndFilters.showAffiliations === 'onlyWithNoCorrection') { initialAffiliations = initialAffiliations.filter((affiliation) => affiliation.addList.length === 0 && affiliation.removeList.length === 0); } - if (sortsAndFilters.rorCountry !== 'all') { initialAffiliations = initialAffiliations.filter((affiliation) => affiliation.rors.some((ror) => ror.rorCountry === sortsAndFilters.rorCountry)); } - setSortedOrFilteredAffiliations(initialAffiliations); setIsLoading(false); }, [filteredAffiliations, sortsAndFilters]); @@ -145,9 +141,7 @@ export default function ListView({ !affiliation.selected) === undefined} - onChange={() => { - setSelectAffiliations(sortedOrFilteredAffiliations.map((affiliation) => affiliation.id)); - }} + onChange={() => setSelectAffiliations(sortedOrFilteredAffiliations.map((affiliation) => affiliation.id))} /> @@ -221,9 +215,9 @@ export default function ListView({ aria-label="Open colors info modal" className="step-affiliations-colors" color="beige-gris-galet" + icon="palette-fill" onClick={() => setIsColorInfoModalOpen((prev) => !prev)} size="sm" - icon="palette-fill" /> setIsColorInfoModalOpen((prev) => !prev)} size="md"> @@ -283,98 +277,94 @@ export default function ListView({ - {isLoading ? ( - - ) : ( -
-
    - { - sortedOrFilteredAffiliations.map((affiliation, index) => ( -
  • - - -
    -
    - setSelectAffiliations([affiliation.id])} - /> -
    - { - (affiliation.hasCorrection) && ( - - ) - } -
    -
    - setSelectAffiliations([affiliation.id])} - style={{ cursor: 'pointer' }} - > -
    - - -
    +
    +
      + { + sortedOrFilteredAffiliations.map((affiliation, index) => ( +
    • + + +
      +
      + setSelectAffiliations([affiliation.id])} + /> +
      + { + (affiliation.hasCorrection) && ( + + ) + }
      - - - - - {affiliation.rorsToCorrect.map((rorToCorrect) => ( - - - - ))} - {affiliation.addList.map((ror) => ( - - - - ))} - -
      - toggleRemovedRor(affiliation.id, rorToCorrect.rorId)} - ror={rorToCorrect} - rorColor={defineRorColor.find((item) => item.ror === rorToCorrect.rorId)?.color || 'beige-gris-galet'} - setFilteredAffiliationName={setFilteredAffiliationName} - /> -
      - -
      - removeRorFromAddList(affiliation.id, ror.rorId)} - ror={ror} - rorColor={defineRorColor.find((item) => item.ror === ror.rorId)?.color || 'beige-gris-galet'} - setFilteredAffiliationName={setFilteredAffiliationName} - /> -
      - - - Added - -
      - - -
      • - )) - } -
    -
    - )} +
    + setSelectAffiliations([affiliation.id])} + style={{ cursor: 'pointer' }} + > +
    + + +
    +
    + + + + + {affiliation.rorsToCorrect.map((rorToCorrect) => ( + + + + ))} + {affiliation.addList.map((ror) => ( + + + + ))} + +
    + toggleRemovedRor(affiliation.id, rorToCorrect.rorId)} + ror={rorToCorrect} + rorColor={defineRorColor.find((item) => item.ror === rorToCorrect.rorId)?.color || 'beige-gris-galet'} + setFilteredAffiliationName={setFilteredAffiliationName} + /> +
    + +
    + removeRorFromAddList(affiliation.id, ror.rorId)} + ror={ror} + rorColor={defineRorColor.find((item) => item.ror === ror.rorId)?.color || 'beige-gris-galet'} + setFilteredAffiliationName={setFilteredAffiliationName} + /> +
    + + + Added + +
    + + +
    • + )) + } +
+
setIsModalOpen((prev) => !prev)} size="md"> Sorts & filters @@ -447,9 +437,9 @@ export default function ListView({ ) - } + )} From 82b8c2911cdb372b6fcb9ff023ff779759770717 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Anne=20L=27H=C3=B4te?= Date: Fri, 13 Dec 2024 13:21:39 +0100 Subject: [PATCH 3/4] fix(publications): Restore tag affiliations --- client/src/pages/affiliationsTab.jsx | 4 ++-- client/src/pages/affiliationsView.jsx | 4 +--- client/src/pages/datasets/results.jsx | 5 ++++- client/src/pages/publications/results.jsx | 5 ++++- client/src/pages/views/publications.jsx | 1 + client/src/utils/templates.jsx | 6 +++--- client/src/utils/works.jsx | 2 +- 7 files changed, 16 insertions(+), 11 deletions(-) diff --git a/client/src/pages/affiliationsTab.jsx b/client/src/pages/affiliationsTab.jsx index 484e9cc..69cc606 100644 --- a/client/src/pages/affiliationsTab.jsx +++ b/client/src/pages/affiliationsTab.jsx @@ -6,11 +6,11 @@ import { import PropTypes from 'prop-types'; import { useEffect, useState } from 'react'; -import AffiliationsView from './affiliationsView'; import Gauge from '../components/gauge'; import { status } from '../config'; import { removeDiacritics } from '../utils/strings'; import { renderButtons } from '../utils/works'; +import AffiliationsView from './affiliationsView'; export default function AffiliationsTab({ affiliations, selectedAffiliations, setSelectedAffiliations, tagAffiliations }) { const [filteredAffiliations, setFilteredAffiliations] = useState([]); @@ -43,7 +43,7 @@ export default function AffiliationsTab({ affiliations, selectedAffiliations, se {selectedAffiliations.length} - {`selected affiliation${selectedAffiliations.length === 1 ? '' : 's'}`} + {` selected affiliation${selectedAffiliations.length === 1 ? '' : 's'}`} {renderButtons(selectedAffiliations, tagAffiliations)}
diff --git a/client/src/pages/affiliationsView.jsx b/client/src/pages/affiliationsView.jsx index db27500..e90569e 100644 --- a/client/src/pages/affiliationsView.jsx +++ b/client/src/pages/affiliationsView.jsx @@ -20,9 +20,7 @@ export default function AffiliationsView({ setFilteredAffiliationName, setSelectedAffiliations, }) { - const [filters] = useState({ - status: { value: null, matchMode: FilterMatchMode.IN }, - }); + const [filters] = useState({ status: { matchMode: FilterMatchMode.IN, value: null } }); const [selectionPageOnly, setSelectionPageOnly] = useState(true); const paginatorLeft = () => ( diff --git a/client/src/pages/datasets/results.jsx b/client/src/pages/datasets/results.jsx index 965cebd..9027861 100644 --- a/client/src/pages/datasets/results.jsx +++ b/client/src/pages/datasets/results.jsx @@ -55,7 +55,10 @@ export default function Affiliations() { setAffiliations( _affiliations ?.filter((affiliation) => affiliationIds.includes(affiliation.id)) - .map((affiliation) => (affiliation.status = action)), + .map((affiliation) => ({ + ...affiliation, + status: action, + })), ); setSelectedAffiliations([]); }; diff --git a/client/src/pages/publications/results.jsx b/client/src/pages/publications/results.jsx index f628920..e621d73 100644 --- a/client/src/pages/publications/results.jsx +++ b/client/src/pages/publications/results.jsx @@ -47,7 +47,10 @@ export default function Affiliations() { setAffiliations( _affiliations ?.filter((affiliation) => affiliationIds.includes(affiliation.id)) - .map((affiliation) => (affiliation.status = action)), + .map((affiliation) => ({ + ...affiliation, + status: action, + })), ); setSelectedAffiliations([]); }; diff --git a/client/src/pages/views/publications.jsx b/client/src/pages/views/publications.jsx index aa57e20..da53169 100644 --- a/client/src/pages/views/publications.jsx +++ b/client/src/pages/views/publications.jsx @@ -31,6 +31,7 @@ export default function Publications({ if (allPublications?.length === 0) { return
No publications detected.
; } + return (
{options.datasets ? ( diff --git a/client/src/utils/templates.jsx b/client/src/utils/templates.jsx index bc7f02c..7f19b1a 100644 --- a/client/src/utils/templates.jsx +++ b/client/src/utils/templates.jsx @@ -4,6 +4,7 @@ import { Badge, Button } from '@dataesr/dsfr-plus'; import { MultiSelect } from 'primereact/multiselect'; import { Tooltip } from 'react-tooltip'; +import { status } from '../config'; import { getIdLink } from './works'; const affiliationsTemplate = (rowData) => ( @@ -24,9 +25,8 @@ const affiliations2Template = (rowData) => { ) .join(''); if (rowData.affiliations.length > 3) { - affiliationsHtml += `
  • and others (${ - rowData.affiliations.length - 3 - })
    • `; + affiliationsHtml += `
  • and others (${rowData.affiliations.length - 3 + })
    • `; } affiliationsHtml += ''; let affiliationsTooltip = '
      '; diff --git a/client/src/utils/works.jsx b/client/src/utils/works.jsx index 6435a19..ad7c344 100644 --- a/client/src/utils/works.jsx +++ b/client/src/utils/works.jsx @@ -130,12 +130,12 @@ const range = (startYear, endYear = new Date().getFullYear()) => { const renderButtons = (selected, fn) => Object.values(status).map((st) => (
    @@ -465,7 +465,7 @@ export default function Affiliations() { Searched affiliations
    - {body.affiliations.map((affiliation) => ( + {options.affiliations.map((affiliation) => ( - {(body.excludedRors.length > 0) && ( + {(options.excludedRors.length > 0) && (
    @@ -500,7 +500,7 @@ export default function Affiliations() {
    - {body.excludedRors.split(' ').map((excludedRor) => ( + {options.excludedRors.split(' ').map((excludedRor) => ( getWorks(options, toast), enabled: false, }); @@ -39,18 +39,19 @@ export default function Affiliations() { data?.publications?.results ?.filter((publication) => worksIds.includes(publication.id)) .map((publication) => (publication.status = action)); - data?.datasets?.results - ?.filter((dataset) => worksIds.includes(dataset.id)) - .map((dataset) => (dataset.status = action)); } const affiliationIds = _affiliations.map((affiliation) => affiliation.id); setAffiliations( - _affiliations - ?.filter((affiliation) => affiliationIds.includes(affiliation.id)) - .map((affiliation) => ({ - ...affiliation, - status: action, - })), + affiliations + .map((affiliation) => { + if (affiliationIds.includes(affiliation.id)) { + return ({ + ...affiliation, + status: action, + }); + } + return affiliation; + }), ); setSelectedAffiliations([]); };