Skip to content

Commit

Permalink
fix(openalex): Restore exports and feedbacks
Browse files Browse the repository at this point in the history
  • Loading branch information
@annelhote
annelhote committed Dec 3, 2024
1 parent 665ca80 commit 8b1657c
Show file tree
Hide file tree
Showing 8 changed files with 124 additions and 86 deletions.
4 changes: 2 additions & 2 deletions client/src/components/button-dropdown/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
.dropdown {
display: inline-block;
position: relative;
z-index: 2;
z-index: 20;

.dropdown-content {
display: none;
min-width: 160px;
position: absolute;
z-index: 1;
z-index: 20;
}
}

Expand Down
26 changes: 20 additions & 6 deletions client/src/pages/openalex-ror/components/export-errors-button.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,47 @@ import { useSearchParams } from 'react-router-dom';
import ButtonDropdown from '../../../components/button-dropdown';

export default function ExportErrorsButton({
allOpenalexCorrections,
corrections,
}) {
const [searchParams] = useSearchParams();

return (
<ButtonDropdown
className="fr-mr-1w"
data={allOpenalexCorrections}
data={corrections}
label="OpenAlex corrections"
searchParams={searchParams}
/>
);
}

ExportErrorsButton.propTypes = {
allOpenalexCorrections: PropTypes.arrayOf(PropTypes.shape({
correctedRors: PropTypes.arrayOf(PropTypes.object).isRequired,
rawAffiliationString: PropTypes.string.isRequired,
rorsInOpenAlex: PropTypes.arrayOf(PropTypes.shape({
corrections: PropTypes.arrayOf(PropTypes.shape({
addList: PropTypes.arrayOf(PropTypes.string).isRequired,
hasCorrection: PropTypes.bool.isRequired,
name: PropTypes.string.isRequired,
nameHtml: PropTypes.string.isRequired,
removeList: PropTypes.arrayOf(PropTypes.string).isRequired,
rors: PropTypes.arrayOf(PropTypes.shape({
rorCountry: PropTypes.string.isRequired,
rorId: PropTypes.string.isRequired,
rorName: PropTypes.string.isRequired,
})).isRequired,
rorsNumber: PropTypes.number.isRequired,
rorsToCorrect: PropTypes.arrayOf(PropTypes.shape({
rorCountry: PropTypes.string.isRequired,
rorId: PropTypes.string.isRequired,
rorName: PropTypes.string.isRequired,
})).isRequired,
selected: PropTypes.bool.isRequired,
source: PropTypes.string.isRequired,
status: PropTypes.string.isRequired,
works: PropTypes.arrayOf(PropTypes.string).isRequired,
worksExample: PropTypes.arrayOf(PropTypes.shape({
id_type: PropTypes.string.isRequired,
id_value: PropTypes.string.isRequired,
})).isRequired,
worksNumber: PropTypes.number.isRequired,
worksOpenAlex: PropTypes.arrayOf(PropTypes.string).isRequired,
})).isRequired,
};
53 changes: 37 additions & 16 deletions client/src/pages/openalex-ror/components/send-feedback-button.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import useToast from '../../../hooks/useToast';

const { VITE_WS_HOST } = import.meta.env;

export default function SendFeedbackButton({ allOpenalexCorrections, setAllOpenalexCorrections }) {
export default function SendFeedbackButton({ corrections, resetCorrections }) {
const [isModalOpen, setIsModalOpen] = useState(false);
const [userEmail, setUserEmail] = useState(null);
const [validEmail, setValidEmail] = useState(null);
Expand All @@ -41,14 +41,14 @@ export default function SendFeedbackButton({ allOpenalexCorrections, setAllOpena

const sendFeedback = async () => {
try {
sendJsonMessage({ data: allOpenalexCorrections, email: userEmail, type: 'openalex-affiliations' });
sendJsonMessage({ data: corrections, email: userEmail, type: 'openalex-affiliations' });
toast({
autoDismissAfter: 5000,
description: 'Your corrections are currently submitted to the <a href="https://github.com/dataesr/openalex-affiliations/issues" target="_blank">Github repository</a>',
id: 'initOpenAlex',
title: 'OpenAlex corrections submitted',
});
setAllOpenalexCorrections([]);
resetCorrections();
} catch (error) {
toast({
description: error.message,
Expand All @@ -73,7 +73,7 @@ export default function SendFeedbackButton({ allOpenalexCorrections, setAllOpena
<Button
aria-label="Send feedback to OpenAlex"
color="blue-ecume"
disabled={!allOpenalexCorrections.length > 0}
disabled={!corrections.length > 0}
icon="send-plane-fill"
onClick={switchModal}
size="sm"
Expand All @@ -84,7 +84,9 @@ export default function SendFeedbackButton({ allOpenalexCorrections, setAllOpena
<Modal isOpen={isModalOpen} hide={switchModal}>
<ModalTitle>Improve OpenAlex data</ModalTitle>
<ModalContent>
{`You corrected ROR matching for ${allOpenalexCorrections.length} raw affiliation(s) string(s).`}
{`You corrected ROR matching for ${corrections.length} raw
affiliation${(corrections.length === 1) ? '' : 's'}
string${(corrections.length === 1) ? '' : 's'}.`}
<TextInput
label="Please indicate your email. Only an encrypted version of your email will be public."
onChange={(e) => setUserEmail(e.target.value)}
Expand All @@ -95,7 +97,7 @@ export default function SendFeedbackButton({ allOpenalexCorrections, setAllOpena
<ModalFooter>
<Button
aria-label="Send feedback to OpenAlex"
disabled={!allOpenalexCorrections.length > 0 || !validEmail}
disabled={!corrections.length > 0 || !validEmail}
onClick={sendFeedback}
title="Send feedback to OpenAlex"
>
Expand All @@ -108,14 +110,33 @@ export default function SendFeedbackButton({ allOpenalexCorrections, setAllOpena
}

SendFeedbackButton.propTypes = {
allOpenalexCorrections: PropTypes.arrayOf(
PropTypes.shape({
rawAffiliationString: PropTypes.string.isRequired,
rorsInOpenAlex: PropTypes.arrayOf(PropTypes.object).isRequired,
correctedRors: PropTypes.arrayOf(PropTypes.object).isRequired,
worksExample: PropTypes.arrayOf(PropTypes.object).isRequired,
worksOpenAlex: PropTypes.arrayOf(PropTypes.string).isRequired,
}),
).isRequired,
setAllOpenalexCorrections: PropTypes.func.isRequired,
corrections: PropTypes.arrayOf(PropTypes.shape({
addList: PropTypes.arrayOf(PropTypes.string).isRequired,
hasCorrection: PropTypes.bool.isRequired,
name: PropTypes.string.isRequired,
nameHtml: PropTypes.string.isRequired,
removeList: PropTypes.arrayOf(PropTypes.string).isRequired,
rors: PropTypes.arrayOf(PropTypes.shape({
rorCountry: PropTypes.string.isRequired,
rorId: PropTypes.string.isRequired,
rorName: PropTypes.string.isRequired,
})).isRequired,
rorsNumber: PropTypes.number.isRequired,
rorsToCorrect: PropTypes.arrayOf(PropTypes.shape({
rorCountry: PropTypes.string.isRequired,
rorId: PropTypes.string.isRequired,
rorName: PropTypes.string.isRequired,
})).isRequired,
selected: PropTypes.bool.isRequired,
source: PropTypes.string.isRequired,
status: PropTypes.string.isRequired,
works: PropTypes.arrayOf(PropTypes.string).isRequired,
worksExample: PropTypes.arrayOf(PropTypes.shape({
id_type: PropTypes.string.isRequired,
id_value: PropTypes.string.isRequired,
})).isRequired,
worksNumber: PropTypes.number.isRequired,
worksOpenAlex: PropTypes.arrayOf(PropTypes.string).isRequired,
})).isRequired,
resetCorrections: PropTypes.func.isRequired,
};
91 changes: 47 additions & 44 deletions client/src/pages/openalex-ror/results/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,8 +124,6 @@ export default function Affiliations() {
}));
affiliation.rorsToCorrect = rorsToCorrect;
affiliation.hasCorrection = rorsToCorrect.filter((rorToCorrect) => rorToCorrect?.action).length > 0;
// TODO: should be replaced
affiliation.correctedRors = rorsToCorrect;
affiliation.rawAffiliationString = affiliation.name;
affiliation.rorsInOpenAlex = affiliation.rors;
});
Expand Down Expand Up @@ -275,9 +273,7 @@ export default function Affiliations() {
}, [ror]);

// -------------------------------------------
// TODO: afficher les ROR supprimer (striked) dans la modal de suppression - à discuter
// TODO: faire fonctionner les exports
// TODO: faire fonctionner le feedback
// TODO: afficher les ROR supprimés (striked) dans la modal de suppression - à discuter
// TODO: pastilles de couleur pour les RORs
// TODO: optimisation

Expand All @@ -298,8 +294,7 @@ export default function Affiliations() {

const removeRorMultiple = () => {
const selectedRorIds = rorsToRemove.filter((_ror) => _ror.removed).map((_ror) => _ror.rorId);

const updatedAffiliations = affiliations.map((affiliation) => {
const affiliationsTmp = affiliations.map((affiliation) => {
if (affiliation.selected) {
return {
...affiliation,
Expand All @@ -310,9 +305,8 @@ export default function Affiliations() {
}
return affiliation;
});

setAffiliations(updatedAffiliations);
setRorsToRemove([]);
setAffiliations(affiliationsTmp);
setRorsToRemove([]); // TODO: Is it still used ?
setIsRemoveModalOpen(false);
};

Expand Down Expand Up @@ -406,6 +400,16 @@ export default function Affiliations() {
return rorArray;
};

const resetCorrections = () => {
const affiliationsTmp = affiliations.map((affiliation) => ({
...affiliation,
addList: [],
removeList: [],
rorToCorrect: affiliation.rors,
}));
setAffiliations(affiliationsTmp);
};

return (
<>
<Header id="openalex-tile-title" />
Expand Down Expand Up @@ -504,7 +508,7 @@ export default function Affiliations() {
<Row key={`openalex-ror-search-${affiliation.label}`}>
<Tag
className={`fr-mr-1w ${affiliation.isDisabled ? 'scratched' : ''
}`}
}`}
color={getTagColor(affiliation)}
key={`openalex-ror-tag-${affiliation.label}`}
>
Expand All @@ -513,7 +517,7 @@ export default function Affiliations() {
{affiliation.children.map((child) => (
<Tag
className={`fr-mr-1w fr-mt-1w ${child.isDisabled ? 'scratched' : ''
}`}
}`}
color={getTagColor(child)}
key={`openalex-ror-tag-${child.label}`}
>
Expand Down Expand Up @@ -604,51 +608,52 @@ export default function Affiliations() {
<Col>
{
rorMessageType === 'valid' && cleanRor.rorName && cleanRor.rorCountry
&& (
<>
<div>
<span className="fr-icon-arrow-right-s-fill" aria-hidden="true" />
<span className="fr-mx-1w">
{cleanRor.rorName}
</span>
{getFlagEmoji(cleanRor.rorCountry)}
</div>
<Button
aria-label="Add ROR"
className="fr-mt-3w"
color="blue-ecume"
disabled={['', 'error'].includes(rorMessageType) || !cleanRor.rorName || !cleanRor.rorCountry}
onClick={() => { addRor(); }}
size="sm"
title="Add ROR"
>
Add this ROR to selected affiliations
</Button>
</>
)
&& (
<>
<div>
<span className="fr-icon-arrow-right-s-fill" aria-hidden="true" />
<span className="fr-mx-1w">
{cleanRor.rorName}
</span>
{getFlagEmoji(cleanRor.rorCountry)}
</div>
<Button
aria-label="Add ROR"
className="fr-mt-3w"
color="blue-ecume"
disabled={['', 'error'].includes(rorMessageType) || !cleanRor.rorName || !cleanRor.rorCountry}
onClick={() => { addRor(); }}
size="sm"
title="Add ROR"
>
Add this ROR to selected affiliations
</Button>
</>
)
}
</Col>
</Row>
</Container>
</ModalContent>
</Modal>
<Button
aria-label="Remove RORs to selected affiliations"
aria-label="Remove ROR to selected affiliations"
color="pink-tuile"
disabled={filteredAffiliations.filter((affiliation) => affiliation.selected).length === 0}
icon="delete-line"
onClick={() => { setRorsToRemove(getUniqueRors()); setIsRemoveModalOpen(true); }}
size="sm"
title="Remove RORs to selected affiliations"
title="Remove ROR to selected affiliations"
>
Remove RORs to selected affiliations
Remove ROR to selected affiliations
</Button>
<Modal
isOpen={isRemoveModalOpen}
hide={() => setIsRemoveModalOpen((prev) => !prev)}
>
<ModalTitle>
Remove ROR to &nbsp;
Remove ROR to
{' '}
{filteredAffiliations.filter((affiliation) => affiliation.selected).length}
{` selected affiliation${filteredAffiliations.filter((affiliation) => affiliation.selected).length > 1 ? 's' : ''}`}
</ModalTitle>
Expand Down Expand Up @@ -716,7 +721,6 @@ export default function Affiliations() {
</>
)
}

</li>
))}
</ul>
Expand All @@ -726,7 +730,7 @@ export default function Affiliations() {
</Row>
<Row>
<Col>
<Button color="pink-tuile" onClick={() => { removeRorMultiple(); }}>
<Button color="pink-tuile" onClick={removeRorMultiple}>
Apply to selected affiliations
</Button>
</Col>
Expand All @@ -737,12 +741,11 @@ export default function Affiliations() {
</div>
<div className="right-content fr-mr-1w">
<ExportErrorsButton
allOpenalexCorrections={affiliations.filter((affiliation) => affiliation.hasCorrection)}
options={body}
corrections={affiliations.filter((affiliation) => affiliation.addList.length > 0 || affiliation.removeList.length > 0)}
/>
<SendFeedbackButton
allOpenalexCorrections={allOpenalexCorrections}
setAllOpenalexCorrections={setAllOpenalexCorrections}
corrections={affiliations.filter((affiliation) => affiliation.addList.length > 0 || affiliation.removeList.length > 0)}
resetCorrections={resetCorrections}
/>
</div>
</div>
Expand Down
Loading

0 comments on commit 8b1657c

Please sign in to comment.