Skip to content

Commit

Permalink
feat(openalex): Add Spinner while loading ROR data
Browse files Browse the repository at this point in the history
  • Loading branch information
@annelhote
annelhote committed Nov 22, 2024
1 parent 8d0e667 commit 38abae1
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 50 deletions.
68 changes: 39 additions & 29 deletions client/src/pages/openalex-ror/results/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
ModalFooter,
ModalTitle,
Row,
Spinner,
Tag,
Text,
TextInput,
Expand Down Expand Up @@ -38,21 +39,22 @@ export default function Affiliations() {
const { pathname, search } = useLocation();
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const { toast } = useToast();

const [addList, setAddList] = useState([]);
const [affiliations, setAffiliations] = useState([]);
const [allOpenalexCorrections, setAllOpenalexCorrections] = useState([]);
const [body, setBody] = useState({});
const { toast } = useToast();
const [addList, setAddList] = useState([]);
const [removeList, setRemoveList] = useState([]);

const [filteredAffiliations, setFilteredAffiliations] = useState([]);
const [filteredAffiliationName, setFilteredAffiliationName] = useState('');
const [filteredAffiliations, setFilteredAffiliations] = useState([]);
const [filteredStatus] = useState([
status.tobedecided.id,
status.validated.id,
status.excluded.id,
]);
const [isLoadingRorData, setIsLoadingRorData] = useState(false);
const [isModalOpen, setIsModalOpen] = useState(false);
const [removeList, setRemoveList] = useState([]);
const [ror, setRor] = useState('');
const [rorMessage, setRorMessage] = useState('');
const [rorMessageType, setRorMessageType] = useState('');
Expand Down Expand Up @@ -128,16 +130,18 @@ export default function Affiliations() {

useEffect(() => {
const get = async () => {
const addedRorsData = await Promise.all(
setIsLoadingRorData(true);
const addedRors = await Promise.all(
addList.map((add) => getRorData(add)),
);
const uniqueRorsTmp = {};
addedRorsData.flat().forEach((dd) => {
if (!Object.keys(uniqueRors).includes(dd.rorId)) {
uniqueRorsTmp[dd.rorId] = { ...dd, countAffiliations: 0 };
addedRors.flat().forEach((addedRor) => {
if (!Object.keys(uniqueRors).includes(addedRor.rorId)) {
uniqueRorsTmp[addedRor.rorId] = { ...addedRor, countAffiliations: 0 };
}
});
setUniqueRors({ ...uniqueRors, ...uniqueRorsTmp });
setIsLoadingRorData(false);
};
get();
// eslint-disable-next-line react-hooks/exhaustive-deps
Expand Down Expand Up @@ -370,11 +374,7 @@ export default function Affiliations() {
size="xl"
>
<ModalTitle>
Modify ROR in
<Badge color="brown-opera" className="fr-ml-1w">
{selectedOpenAlex.length}
</Badge>
{` OpenAlex selected affiliation${selectedOpenAlex.length > 1 ? 's' : ''}`}
{`Modify ROR in ${selectedOpenAlex.length} OpenAlex selected affiliation${selectedOpenAlex.length > 1 ? 's' : ''}`}
</ModalTitle>
<ModalContent>
<Row>
Expand Down Expand Up @@ -472,25 +472,34 @@ export default function Affiliations() {
title="Remove ROR"
/>
)}
<Button
aria-label="Propagate ROR to all affiliations"
disabled={
uniqueRor.countAffiliations
=== selectedOpenAlex.length
}
onClick={() => setAddList((prevList) => [
...prevList,
uniqueRor.rorId,
])}
size="sm"
title="Propagate ROR to all affiliations"
>
Propagate ROR to all affiliations
</Button>
{(uniqueRor.countAffiliations < selectedOpenAlex.length) && (
<Button
aria-label="Propagate ROR to all affiliations"
disabled={
uniqueRor.countAffiliations
=== selectedOpenAlex.length
}
onClick={() => setAddList((prevList) => [
...prevList,
uniqueRor.rorId,
])}
size="sm"
title="Propagate ROR to all affiliations"
>
Propagate ROR to all affiliations
</Button>
)}
</td>
</tr>
),
)}
{isLoadingRorData && (
<tr>
<td colspan="4">
<Spinner size={24} />
</td>
</tr>
)}
</tbody>
</table>
</div>
Expand Down Expand Up @@ -531,6 +540,7 @@ export default function Affiliations() {
using the "Send feedback to OpenAlex" button.
<Button
aria-label="Apply corrections"
className="fr-ml-1w"
color="blue-ecume"
disabled={removeList.length === 0 && addList.length === 0}
onClick={() => {
Expand Down
45 changes: 24 additions & 21 deletions client/src/pages/openalex-ror/results/views-selector.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,35 +35,36 @@ export default function OpenalexView({
const { toast } = useToast();

useEffect(() => {
const initiaAffiliations = JSON.parse(JSON.stringify(allAffiliations));
// Deep copy of allAffiliations object
const initialAffiliations = JSON.parse(JSON.stringify(allAffiliations));
if (sortsAndFilters.sortOnNumberOfRors === 'default') {
setSortedOrFilteredAffiliations(initiaAffiliations);
setSortedOrFilteredAffiliations(initialAffiliations);
}
if (sortsAndFilters.sortOnNumberOfRors === 'numberASC') {
setSortedOrFilteredAffiliations(initiaAffiliations.sort((a, b) => a.rors.length - b.rors.length));
setSortedOrFilteredAffiliations(initialAffiliations.sort((a, b) => a.rors.length - b.rors.length));
}
if (sortsAndFilters.sortOnNumberOfRors === 'numberDESC') {
setSortedOrFilteredAffiliations(initiaAffiliations.sort((a, b) => b.rors.length - a.rors.length));
setSortedOrFilteredAffiliations(initialAffiliations.sort((a, b) => b.rors.length - a.rors.length));
}
if (sortsAndFilters.sortOnNumberOfRors === 'empty') {
setSortedOrFilteredAffiliations(initiaAffiliations.filter((affiliation) => affiliation.rors.length === 0));
setSortedOrFilteredAffiliations(initialAffiliations.filter((affiliation) => affiliation.rors.length === 0));
}
if (sortsAndFilters.showAffiliations === 'all') {
setSortedOrFilteredAffiliations(initiaAffiliations);
setSortedOrFilteredAffiliations(initialAffiliations);
}
if (sortsAndFilters.showAffiliations === 'onlyWithCorrections') {
setSortedOrFilteredAffiliations(initiaAffiliations.filter((affiliation) => affiliation.hasCorrection));
setSortedOrFilteredAffiliations(initialAffiliations.filter((affiliation) => affiliation.hasCorrection));
}
if (sortsAndFilters.showAffiliations === 'onlyWithNoCorrection') {
setSortedOrFilteredAffiliations(initiaAffiliations.filter((affiliation) => !affiliation.hasCorrection));
setSortedOrFilteredAffiliations(initialAffiliations.filter((affiliation) => !affiliation.hasCorrection));
}
if (sortsAndFilters.rorCountry === 'all') {
setSortedOrFilteredAffiliations(initiaAffiliations);
setSortedOrFilteredAffiliations(initialAffiliations);
}
if (sortsAndFilters.rorCountry !== 'all') {
setSortedOrFilteredAffiliations(initiaAffiliations.filter((affiliation) => affiliation.rors.some((ror) => ror.rorCountry === sortsAndFilters.rorCountry)));
setSortedOrFilteredAffiliations(initialAffiliations.filter((affiliation) => affiliation.rors.some((ror) => ror.rorCountry === sortsAndFilters.rorCountry)));
}
}, [sortsAndFilters, allAffiliations]);
}, [allAffiliations, sortsAndFilters]);

const changeView = (view) => {
searchParams.set('view', view);
Expand Down Expand Up @@ -136,13 +137,15 @@ export default function OpenalexView({
</Col>
<Col xs="3" className="text-right">
<Button
aria-label="Sorts & filters"
className="fr-mr-1w"
color="beige-gris-galet"
icon="filter-line"
onClick={() => setIsModalOpen((prev) => !prev)}
size="sm"
title="Sorts & filters"
>
sorts & filters
Sorts & filters
<Badge
className="fr-ml-1w"
color="green-bourgeon"
Expand Down Expand Up @@ -189,17 +192,17 @@ export default function OpenalexView({
value={sortsAndFilters.sortOnNumberOfRors}
>
<option value="" disabled hidden>Select an option</option>
<option value="default">default</option>
<option value="numberASC">ASC</option>
<option value="numberDESC">DESC</option>
<option value="empty">no ROR detected</option>
<option value="default">Default</option>
<option value="numberASC">Ascending</option>
<option value="numberDESC">Descending</option>
<option value="empty">No ROR detected</option>
</select>
</label>
</div>

<div className="fr-select-group fr-mt-7w">
<label className="fr-label" htmlFor="select-show-affiliations">
Show affiliations
Filter on affiliations corrections
<select
className="fr-select"
id="select-show-affiliations"
Expand All @@ -208,9 +211,9 @@ export default function OpenalexView({
}}
value={sortsAndFilters.showAffiliations}
>
<option value="all">all affiliations</option>
<option value="onlyWithCorrections">only those with corrections</option>
<option value="onlyWithNoCorrection">only those with no correction</option>
<option value="all">All affiliations</option>
<option value="onlyWithCorrections">Only those with corrections</option>
<option value="onlyWithNoCorrection">Only those without corrections</option>
</select>
</label>
</div>
Expand All @@ -226,7 +229,7 @@ export default function OpenalexView({
setSortsAndFilters({ ...sortsAndFilters, rorCountry: e.target.value });
}}
>
<option value="all">all countries</option>
<option value="all">All countries</option>
{
[...new Set(allAffiliations.flatMap((affiliation) => affiliation.rors.map((ror) => ror.rorCountry)))]
.sort((a, b) => allAffiliations.filter((aff) => aff.rors.some((r) => r.rorCountry === b)).length - allAffiliations.filter((aff) => aff.rors.some((r) => r.rorCountry === a)).length)
Expand Down

0 comments on commit 38abae1

Please sign in to comment.