From 8359508ee1d8eadd17117d02f0bab95939dd5fd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anne=20L=27H=C3=B4te?= <anne.lhote@gmail.com>
Date: Fri, 15 Nov 2024 15:13:46 +0100
Subject: [PATCH] feat(openalex): Display tags

---
 client/src/components/tag-input/index.jsx     | 14 ++-
 .../src/pages/openalex-ror/results/index.jsx  | 89 ++++++++++---------
 client/src/pages/openalex-ror/search.jsx      |  8 +-
 client/src/utils/tags.jsx                     |  9 ++
 4 files changed, 66 insertions(+), 54 deletions(-)
 create mode 100644 client/src/utils/tags.jsx

diff --git a/client/src/components/tag-input/index.jsx b/client/src/components/tag-input/index.jsx
index 9b96af3a..964905f1 100644
--- a/client/src/components/tag-input/index.jsx
+++ b/client/src/components/tag-input/index.jsx
@@ -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;
@@ -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);
@@ -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);
@@ -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>
diff --git a/client/src/pages/openalex-ror/results/index.jsx b/client/src/pages/openalex-ror/results/index.jsx
index cca8e0d2..983490d2 100644
--- a/client/src/pages/openalex-ror/results/index.jsx
+++ b/client/src/pages/openalex-ror/results/index.jsx
@@ -3,7 +3,7 @@ import {
   Button,
   Container, Row, Col,
   Modal, ModalContent, ModalFooter, ModalTitle,
-  Tag, TagGroup,
+  Tag,
   Text,
   TextInput,
 } from '@dataesr/dsfr-plus';
@@ -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';
@@ -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,
   });
 
@@ -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)) {
@@ -192,7 +204,7 @@ 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>
@@ -200,45 +212,40 @@ export default function Affiliations() {
                 <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
diff --git a/client/src/pages/openalex-ror/search.jsx b/client/src/pages/openalex-ror/search.jsx
index 763e5de7..7f00da34 100644
--- a/client/src/pages/openalex-ror/search.jsx
+++ b/client/src/pages/openalex-ror/search.jsx
@@ -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',
@@ -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',
@@ -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,
diff --git a/client/src/utils/tags.jsx b/client/src/utils/tags.jsx
new file mode 100644
index 00000000..4ef5f66c
--- /dev/null
+++ b/client/src/utils/tags.jsx
@@ -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
+};