fix(openalex): Restore DataTable view

client/src/pages/openalex-ror/components/ror-badge_old.jsx

@@ -9,8 +9,8 @@ export default function RorBadge({ isRemoved, ror, setFilteredAffiliationName, r
         <img
           alt="ROR logo"
           className="vertical-middle fr-mx-1w"
-          src="https://raw.githubusercontent.com/ror-community/ror-logos/main/ror-icon-rgb.svg"
           height="16"
+          src="https://raw.githubusercontent.com/ror-community/ror-logos/main/ror-icon-rgb.svg"
         />
       </div>
       {isRemoved ? (
@@ -25,19 +25,25 @@ export default function RorBadge({ isRemoved, ror, setFilteredAffiliationName, r
         </Link>
       )}
       <button
-        type="button"
-        aria-label="filter on this ROR id"
+        aria-label="Filter on this ROR"
         className="fr-icon fr-fi-filter-line fr-icon--sm"
         onClick={() => setFilteredAffiliationName(ror.rorId)}
+        title="Filter on this ROR"
+        type="button"
       />
     </div>
   );
 }
 
+RorBadge.defaultProps = {
+  isRemoved: false,
+};
+
 RorBadge.propTypes = {
+  isRemoved: PropTypes.bool,
   ror: PropTypes.shape({
     rorId: PropTypes.string.isRequired,
   }).isRequired,
-  setFilteredAffiliationName: PropTypes.func.isRequired,
   rorColor: PropTypes.string.isRequired,
+  setFilteredAffiliationName: PropTypes.func.isRequired,
 };

client/src/pages/openalex-ror/components/ror-name.jsx

@@ -37,8 +37,12 @@ export default function RorName({ isRemoved, ror }) {
   );
 }
 
+RorName.defaultProps = {
+  isRemoved: false,
+};
+
 RorName.propTypes = {
-  isRemoved: PropTypes.bool.isRequired,
+  isRemoved: PropTypes.bool,
   ror: PropTypes.shape({
     rorCountry: PropTypes.string.isRequired,
     rorName: PropTypes.string.isRequired,

client/src/pages/openalex-ror/results/datatable-view.jsx

@@ -23,7 +23,7 @@ export default function DataTableView({
       id="editor-ror"
       onChange={(e) => options.editorCallback(e.target.value)}
       type="text"
-      value={options.value}
+      value={Array.isArray(options?.value) ? options.value?.map((v) => v.rorId).join(';') : options.value}
     />
   );
 

client/src/pages/openalex-ror/results/index.jsx

@@ -121,6 +121,10 @@ 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;
     });
     setAffiliations(affiliationsTmp);
     setAddList([]);
@@ -587,7 +591,7 @@ export default function Affiliations() {
                   </div>
                   <div className="right-content fr-mr-1w">
                     <ExportErrorsButton
-                      allOpenalexCorrections={allOpenalexCorrections}
+                      allOpenalexCorrections={affiliations.filter((affiliation) => affiliation.hasCorrection)}
                       options={body}
                     />
                     <SendFeedbackButton
@@ -597,10 +601,12 @@ export default function Affiliations() {
                   </div>
                 </div>
                 <ViewsSelector
-                  allAffiliations={filteredAffiliations}
+                  affiliations={affiliations}
                   allOpenalexCorrections={allOpenalexCorrections}
                   filteredAffiliationName={filteredAffiliationName}
+                  filteredAffiliations={filteredAffiliations}
                   selectedOpenAlex={selectedOpenAlex}
+                  setAffiliations={setAffiliations}
                   setAllOpenalexCorrections={setAllOpenalexCorrections}
                   setFilteredAffiliationName={setFilteredAffiliationName}
                   setSelectedOpenAlex={setSelectedOpenAlex}

client/src/pages/openalex-ror/results/list-view.jsx

@@ -7,7 +7,6 @@ import RorName from '../components/ror-name';
 
 export default function ListView({
   allAffiliations,
-  allOpenalexCorrections,
   selectedOpenAlex,
   setFilteredAffiliationName,
   setSelectedOpenAlex,
@@ -69,46 +68,29 @@ export default function ListView({
                       <tr key={`openalex-ror-affiliations-${rorToCorrect.rorId}`}>
                         <td>
                           <RorBadge
-                            isRemoved={
-                              allOpenalexCorrections.find((correctedAffiliation) => correctedAffiliation.id === affiliation.id)
-                                ?.correctedRors?.find((_ror) => _ror.rorId === rorToCorrect.rorId)?.action === 'remove' ?? false
-                            }
+                            isRemoved={rorToCorrect?.action === 'remove' ?? false}
                             ror={rorToCorrect}
                             rorColor={defineRorColor.find((item) => item.ror === rorToCorrect.rorId)?.color || 'beige-gris-galet'}
                             setFilteredAffiliationName={setFilteredAffiliationName}
                           />
                           <br />
                           <RorName
-                            isRemoved={
-                              allOpenalexCorrections.find((correctedAffiliation) => correctedAffiliation.id === affiliation.id)
-                                ?.correctedRors?.find((_ror) => _ror.rorId === rorToCorrect.rorId)?.action === 'remove' ?? false
-                            }
+                            isRemoved={rorToCorrect?.action === 'remove' ?? false}
                             ror={rorToCorrect}
                           />
                         </td>
                       </tr>
                     ))}
-                    {(allOpenalexCorrections.find((correctedAffiliation) => correctedAffiliation.id === affiliation.id)
-                      ?.correctedRors?.filter((_ror) => _ror.action === 'add') ?? []).map((rorToCorrect) => (
+                    {affiliation.rorsToCorrect?.filter((_ror) => _ror.action === 'add').map((rorToCorrect) => (
                       <tr key={`openalex-ror-affiliations-${rorToCorrect.rorId}`}>
                         <td>
                           <RorBadge
-                            isRemoved={
-                              allOpenalexCorrections.find((correctedAffiliation) => correctedAffiliation.id === affiliation.id)
-                                ?.correctedRors?.find((_ror) => _ror.rorId === rorToCorrect.rorId)?.action === 'remove' ?? false
-                            }
                             ror={rorToCorrect}
                             rorColor={defineRorColor.find((item) => item.ror === rorToCorrect.rorId)?.color || 'beige-gris-galet'}
                             setFilteredAffiliationName={setFilteredAffiliationName}
                           />
                           <br />
-                          <RorName
-                            isRemoved={
-                              allOpenalexCorrections.find((correctedAffiliation) => correctedAffiliation.id === affiliation.id)
-                                ?.correctedRors?.find((_ror) => _ror.rorId === rorToCorrect.rorId)?.action === 'remove' ?? false
-                            }
-                            ror={rorToCorrect}
-                          />
+                          <RorName ror={rorToCorrect} />
                           <Badge
                             className="fr-ml-1w"
                             color="warning"
@@ -131,7 +113,6 @@ export default function ListView({
 
 ListView.propTypes = {
   allAffiliations: PropTypes.array.isRequired,
-  allOpenalexCorrections: PropTypes.array.isRequired,
   setSelectedOpenAlex: PropTypes.func.isRequired,
   selectedOpenAlex: PropTypes.array.isRequired,
   setFilteredAffiliationName: PropTypes.func.isRequired,

client/src/pages/openalex-ror/results/views-selector.jsx

@@ -17,10 +17,12 @@ import DataTableView from './datatable-view';
 import ListView from './list-view';
 
 export default function ViewsSelector({
-  allAffiliations,
+  affiliations,
   allOpenalexCorrections,
   filteredAffiliationName,
+  filteredAffiliations,
   selectedOpenAlex,
+  setAffiliations,
   setAllOpenalexCorrections,
   setFilteredAffiliationName,
   setSelectedOpenAlex,
@@ -37,12 +39,12 @@ export default function ViewsSelector({
     showAffiliations: 'all',
     rorCountry: 'all',
   });
-  const [sortedOrFilteredAffiliations, setSortedOrFilteredAffiliations] = useState(allAffiliations);
+  const [sortedOrFilteredAffiliations, setSortedOrFilteredAffiliations] = useState(filteredAffiliations);
   const { toast } = useToast();
 
   useEffect(() => {
-    // Deep copy of allAffiliations object
-    const initialAffiliations = JSON.parse(JSON.stringify(allAffiliations));
+    // Deep copy of filteredAffiliations object
+    const initialAffiliations = JSON.parse(JSON.stringify(filteredAffiliations));
     if (sortsAndFilters.sortOnNumberOfRors === 'default') {
       setSortedOrFilteredAffiliations(initialAffiliations);
     }
@@ -70,7 +72,7 @@ export default function ViewsSelector({
     if (sortsAndFilters.rorCountry !== 'all') {
       setSortedOrFilteredAffiliations(initialAffiliations.filter((affiliation) => affiliation.rors.some((ror) => ror.rorCountry === sortsAndFilters.rorCountry)));
     }
-  }, [allAffiliations, sortsAndFilters]);
+  }, [filteredAffiliations, sortsAndFilters]);
 
   const changeView = (view) => {
     searchParams.set('view', view);
@@ -97,7 +99,18 @@ export default function ViewsSelector({
         const rorsToCorrect = [...new Set(newValue.split(';'))].join(';');
         data.rorsToCorrect = rorsToCorrect;
         data.hasCorrection = data.rors.map((r) => r.rorId).join(';') !== rorsToCorrect;
-        setAllOpenalexCorrections([...allOpenalexCorrections, ...getAffiliationsCorrections(allAffiliations)]);
+        setAllOpenalexCorrections([...allOpenalexCorrections, ...getAffiliationsCorrections(filteredAffiliations)]);
+        // Deep copy of affiliations array
+        const affiliationsTmp = [...affiliations];
+        const affiliation = affiliationsTmp.find((aff) => data.id === aff.id);
+        const rorsToCorrect2 = rorsToCorrect.split(';').map((ror) => ({ rorId: ror }));
+        affiliation.rorsToCorrect = rorsToCorrect2;
+        affiliation.hasCorrection = data.hasCorrection;
+        // TODO: should be replaced
+        affiliation.correctedRors = rorsToCorrect2;
+        affiliation.rawAffiliationString = affiliation.name;
+        affiliation.rorsInOpenAlex = affiliation.rors;
+        setAffiliations(affiliationsTmp);
       }
     }
   };
@@ -108,11 +121,11 @@ export default function ViewsSelector({
         <Row>
           <Col xs="3">
             <input
-              checked={(selectedOpenAlex.length === allAffiliations.length) && (selectedOpenAlex.length > 0)}
+              checked={(selectedOpenAlex.length === filteredAffiliations.length) && (selectedOpenAlex.length > 0)}
               className="fr-ml-2w"
               onChange={() => {
                 if (selectedOpenAlex.length === 0) {
-                  setSelectedOpenAlex(allAffiliations);
+                  setSelectedOpenAlex(filteredAffiliations);
                 } else {
                   setSelectedOpenAlex([]);
                 }
@@ -124,7 +137,7 @@ export default function ViewsSelector({
                 {selectedOpenAlex.length}
               </Badge>
               <i>
-                {` selected affiliation${selectedOpenAlex.length === 1 ? '' : 's'} / ${allAffiliations.length}`}
+                {` selected affiliation${selectedOpenAlex.length === 1 ? '' : 's'} / ${filteredAffiliations.length}`}
               </i>
             </span>
           </Col>
@@ -175,7 +188,7 @@ export default function ViewsSelector({
       </div>
       {searchParams.get('view') === 'table' ? (
         <DataTableView
-          allAffiliations={allAffiliations}
+          allAffiliations={filteredAffiliations}
           onRowEditComplete={onRowEditComplete}
           selectedOpenAlex={selectedOpenAlex}
           setSelectedOpenAlex={setSelectedOpenAlex}
@@ -184,7 +197,6 @@ export default function ViewsSelector({
       ) : (
         <ListView
           allAffiliations={sortedOrFilteredAffiliations}
-          allOpenalexCorrections={allOpenalexCorrections}
           selectedOpenAlex={selectedOpenAlex}
           setFilteredAffiliationName={setFilteredAffiliationName}
           setSelectedOpenAlex={setSelectedOpenAlex}
@@ -221,9 +233,7 @@ export default function ViewsSelector({
               <select
                 className="fr-select"
                 id="select-show-affiliations"
-                onChange={(e) => {
-                  setSelectShowAffiliations(e.target.value);
-                }}
+                onChange={(e) => setSelectShowAffiliations(e.target.value)}
                 value={selectShowAffiliations}
               >
                 <option value="all">All affiliations</option>
@@ -246,17 +256,17 @@ export default function ViewsSelector({
               >
                 <option value="all">All countries</option>
                 {
-                  [...new Set(allAffiliations.flatMap((affiliation) => affiliation.rors.map((ror) => ror.rorCountry)))]
+                  [...new Set(filteredAffiliations.flatMap((affiliation) => affiliation.rors.map((ror) => ror.rorCountry)))]
                     .filter((country) => !!country)
                     .sort((a, b) => new Intl.DisplayNames(['en'], { type: 'region' }).of(a).localeCompare(new Intl.DisplayNames(['en'], { type: 'region' }).of(b)))
-                    .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)
+                    .sort((a, b) => filteredAffiliations.filter((aff) => aff.rors.some((r) => r.rorCountry === b)).length - filteredAffiliations.filter((aff) => aff.rors.some((r) => r.rorCountry === a)).length)
                     .map((country) => (
                       <option
                         key={country}
                         value={country}
                       >
                         {getFlagEmoji(country)}
-                        {` ${new Intl.DisplayNames(['en'], { type: 'region' }).of(country)} (${allAffiliations.filter((aff) => aff.rors.some((r) => r.rorCountry === country)).length})`}
+                        {` ${new Intl.DisplayNames(['en'], { type: 'region' }).of(country)} (${filteredAffiliations.filter((aff) => aff.rors.some((r) => r.rorCountry === country)).length})`}
                       </option>
                     ))
                 }
@@ -293,7 +303,7 @@ export default function ViewsSelector({
 }
 
 ViewsSelector.propTypes = {
-  allAffiliations: PropTypes.arrayOf(
+  affiliations: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string.isRequired,
       nameHtml: PropTypes.string.isRequired,
@@ -305,6 +315,16 @@ ViewsSelector.propTypes = {
   ).isRequired,
   allOpenalexCorrections: PropTypes.array.isRequired,
   filteredAffiliationName: PropTypes.string.isRequired,
+  filteredAffiliations: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      nameHtml: PropTypes.string.isRequired,
+      source: PropTypes.string.isRequired,
+      status: PropTypes.string.isRequired,
+      works: PropTypes.arrayOf(PropTypes.string).isRequired,
+      worksNumber: PropTypes.number.isRequired,
+    }),
+  ).isRequired,
   selectedOpenAlex: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string.isRequired,
@@ -315,6 +335,7 @@ ViewsSelector.propTypes = {
       worksNumber: PropTypes.number.isRequired,
     }),
   ).isRequired,
+  setAffiliations: PropTypes.func.isRequired,
   setAllOpenalexCorrections: PropTypes.func.isRequired,
   setFilteredAffiliationName: PropTypes.func.isRequired,
   setSelectedOpenAlex: PropTypes.func.isRequired,

client/src/utils/templates.jsx

@@ -194,8 +194,12 @@ const datasourceTemplate = (rowData) => {
 const correctionTemplate = (rowData) => {
   let html = '';
   html = html.concat('<ul>');
-  const rorsToCorrect = rowData.rorsToCorrect
-    .map((item) => item.rorId);
+  let rorsToCorrect = [];
+  if (Array.isArray(rowData?.rorsToCorrect)) {
+    rorsToCorrect = rowData.rorsToCorrect.map((item) => item.rorId);
+  } else {
+    rorsToCorrect = rowData.rorsToCorrect.split(';');
+  }
   if (rorsToCorrect.length > 0) {
     rorsToCorrect.forEach((ror) => {
       html = html.concat(`<li key="ror-${ror}">${ror}</li>`);