Skip to content

Commit

Permalink
feat(openalex): Display tags
Browse files Browse the repository at this point in the history
  • Loading branch information
@annelhote
annelhote committed Nov 15, 2024
1 parent a3885a3 commit 8359508
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 54 deletions.
14 changes: 5 additions & 9 deletions client/src/components/tag-input/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import {
TextInput,
} from '@dataesr/dsfr-plus';

import { getTagColor } from '../../utils/tags';

import './index.scss';

const { VITE_APP_TAG_LIMIT } = import.meta.env;
Expand Down Expand Up @@ -37,12 +39,6 @@ export default function TagInput({
const [values, setValues] = useState(tags);
const _seeMoreAction = seeMoreAction || (() => setSeeMore((prev) => !prev));

const getTagColor = (tag) => {
if (tag.disable) return 'beige-gris-galet';
if (tag.source === 'ror') return 'brown-caramel';
return 'brown-cafe-creme';
};

const handleDeleteClick = (tag) => {
const deletedValues = excludedValues;
deletedValues.push(tag);
Expand All @@ -60,7 +56,7 @@ export default function TagInput({
return;
}
const inputLabel = input.trim();
const newValues = [...values, { disable: inputLabel.length < VITE_APP_TAG_LIMIT, label: inputLabel, source: 'user' }];
const newValues = [...values, { isDisabled: inputLabel.length < VITE_APP_TAG_LIMIT, label: inputLabel, source: 'user' }];
setValues(newValues);
setInput('');
onTagsChange(newValues, excludedValues);
Expand Down Expand Up @@ -137,12 +133,12 @@ export default function TagInput({
<TagGroup>
{currentTags.map((tag) => (
<DismissibleTag
className={`fr-mr-1w ${tag.disable ? 'scratched' : ''}`}
className={`fr-mr-1w ${tag.isDisabled ? 'scratched' : ''}`}
color={getTagColor(tag)}
key={tag.label}
onClick={() => handleDeleteClick(tag)}
size="sm"
title={`${tag.label}${tag.disable ? ' (not searched)' : ''}`}
title={`${tag.label}${tag.isDisabled ? ' (not searched)' : ''}`}
>
{tag.label}
</DismissibleTag>
Expand Down
89 changes: 48 additions & 41 deletions client/src/pages/openalex-ror/results/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
Button,
Container, Row, Col,
Modal, ModalContent, ModalFooter, ModalTitle,
Tag, TagGroup,
Tag,
Text,
TextInput,
} from '@dataesr/dsfr-plus';
Expand All @@ -18,6 +18,7 @@ import { getAffiliationsCorrections } from '../../../utils/curations';
import { getRorData, isRor } from '../../../utils/ror';
import { capitalize, normalize, removeDiacritics } from '../../../utils/strings';
import { getWorks } from '../../../utils/works';
import { getTagColor } from '../../../utils/tags';
import ExportErrorsButton from '../components/export-errors-button';
import ViewsSelector from './views-selector';
import SendFeedbackButton from '../components/send-feedback-button';
Expand Down Expand Up @@ -52,7 +53,11 @@ export default function Affiliations() {
const { data, error, isFetched, isFetching, refetch } = useQuery({
queryKey: ['openalex-ror', JSON.stringify(body)],
// Search for works from affiliations for each affiliation strictly longer than 2 letters
queryFn: () => getWorks({ ...body, affiliationStrings: body.affiliationStrings.filter((affiliation) => affiliation.length >= VITE_APP_TAG_LIMIT) }, toast),
queryFn: () => getWorks({
...body,
affiliationStrings: body.affiliations.filter((affiliation) => !affiliation.isDisabled).map((affiliation) => affiliation.label),
rors: body.affiliations.filter((affiliation) => affiliation.isRor).map((affiliation) => affiliation.label),
}, toast),
enabled: false,
});

Expand All @@ -78,22 +83,29 @@ export default function Affiliations() {
endYear: searchParams.get('endYear') ?? '2023',
startYear: searchParams.get('startYear') ?? '2023',
};
queryParams.affiliationStrings = [];
queryParams.deletedAffiliations = [];
queryParams.rors = [];
queryParams.rorExclusions = [];
searchParams.getAll('affiliations').forEach((affiliation) => {
if (isRor(affiliation)) {
queryParams.rors.push(affiliation);
} else {
const normalizedAffiliation = normalize(affiliation);
queryParams.affiliationStrings.push(normalizedAffiliation);
queryParams.affiliations = await Promise.all(searchParams.getAll('affiliations').map(async (affiliation) => {
const label = normalize(affiliation);
let children = [];
// Compute rorNames
if (isRor(label)) {
const rorNames = await getRorData(label);
children = rorNames.map((item) => item.names).flat().map((name) => ({
isDisabled: name.length < VITE_APP_TAG_LIMIT,
isRor: false,
label: name,
source: 'ror',
}));
}
});

const queries = queryParams.rors.map((_ror) => getRorData(_ror));
const rorNames = await Promise.all(queries);
rorNames.forEach((level) => level.forEach((rorName) => rorName.names.forEach((name) => queryParams.affiliationStrings.push(name))));
return {
children,
isDisabled: label.length < VITE_APP_TAG_LIMIT,
isRor: isRor(label),
label,
source: 'user',
};
}));

searchParams.getAll('deletedAffiliations').forEach((item) => {
if (isRor(item)) {
Expand Down Expand Up @@ -192,53 +204,48 @@ export default function Affiliations() {
<Col>
Start year:
<Tag color="blue-ecume" key="tag-year-start" size="sm">
{searchParams.get('startYear') ?? '2023'}
{body.startYear}
</Tag>
</Col>
</Row>
<Row>
<Col>
End year:
<Tag color="blue-ecume" key="tag-year-end" size="sm">
{searchParams.get('endYear') ?? '2023'}
{body.endYear}
</Tag>
</Col>
</Row>
<Row>
<Col>
Affiliations:
{searchParams.getAll('affiliations').map((affiliation) => {
if (isRor(affiliation)) {
return (
<Row>
<Tag
className={affiliation.length < VITE_APP_TAG_LIMIT ? 'scratched' : ''}
color="brown-caramel"
key={`tag-${affiliation}`}
size="sm"
>
{affiliation}
</Tag>
</Row>
);
}
return (
<Row>
{body.affiliations.map((affiliation) => (
<Row key={`row-${affiliation.label}`}>
<Tag
className={`fr-mr-1w fr-mt-1w ${affiliation.isDisabled ? 'scratched' : ''}`}
color={getTagColor(affiliation)}
key={`tag-${affiliation.label}`}
size="sm"
>
{affiliation.label}
</Tag>
{affiliation.children.map((child) => (
<Tag
className={affiliation.length < VITE_APP_TAG_LIMIT ? 'scratched' : ''}
color="brown-cafe-creme"
key={`tag-${affiliation}`}
className={`fr-mr-1w fr-mt-1w ${child.isDisabled ? 'scratched' : ''}`}
color={getTagColor(child)}
key={`tag-${child.label}`}
size="sm"
>
{affiliation}
{child.label}
</Tag>
</Row>
)
})}
))}
</Row>
))}
</Col>
</Row>
<Row>
<Button
className="fr-mt-1w"
onClick={() => navigate(`/${pathname.split('/')[1]}/search${search}`)}
>
Modify search
Expand Down
8 changes: 4 additions & 4 deletions client/src/pages/openalex-ror/search.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,14 +107,14 @@ export default function OpenalexRorSearch() {
const label = cleanRor(affiliation);
if (isRor(label)) {
allTags.push({
disable: label.length < VITE_APP_TAG_LIMIT,
isDisabled: label.length < VITE_APP_TAG_LIMIT,
label,
source: 'user',
type: 'rorId',
});
} else {
allTags.push({
disable: affiliation.length < VITE_APP_TAG_LIMIT,
isDisabled: affiliation.length < VITE_APP_TAG_LIMIT,
label: affiliation,
source: 'user',
type: 'affiliationString',
Expand All @@ -127,7 +127,7 @@ export default function OpenalexRorSearch() {
if (knownTags[rorElt.rorId.toLowerCase()] === undefined) {
if (!deletedAffiliations.includes(rorElt.rorId)) {
allTags.push({
disable: rorElt.rorId.length < VITE_APP_TAG_LIMIT,
isDisabled: rorElt.rorId.length < VITE_APP_TAG_LIMIT,
label: rorElt.rorId,
source: 'ror',
type: 'rorId',
Expand All @@ -141,7 +141,7 @@ export default function OpenalexRorSearch() {
if (!deletedAffiliations.includes(rorName)) {
const isDangerous = rorName.length < 4;
allTags.push({
disable: rorName.length < VITE_APP_TAG_LIMIT,
isDisabled: rorName.length < VITE_APP_TAG_LIMIT,
isDangerous,
label: rorName,
rorId: rorElt.rorId,
Expand Down
9 changes: 9 additions & 0 deletions client/src/utils/tags.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
const getTagColor = (tag) => {
if (tag.isDisabled) return 'beige-gris-galet';
if (tag.source === 'ror') return 'brown-caramel';
return 'brown-cafe-creme';
};

export {
getTagColor
};

0 comments on commit 8359508

Please sign in to comment.