feat(ui): Set matched affiliations on top, close #26

dataesr · Oct 23, 2023 · dc0299b · dc0299b
1 parent 7a7c66c
commit dc0299b
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 17 deletions.
diff --git a/client/src/pages/home/index.jsx b/client/src/pages/home/index.jsx
@@ -17,7 +17,6 @@ import {
   getAllIdsHtmlField,
   getAffiliationRor,
   getAffiliationsHtmlField,
-  getAffiliationsSearchField,
   getAffiliationsTooltipField,
   getAuthorsHtmlField,
   getAuthorsTooltipField,
@@ -190,7 +189,6 @@ export default function Home() {
         .map((dataset) => ({
           ...dataset,
           affiliationsHtml: getAffiliationsHtmlField(dataset, regexp),
-          affiliationsSearch: getAffiliationsSearchField(dataset),
           affiliationsTooltip: getAffiliationsTooltipField(dataset),
           allIdsHtml: getAllIdsHtmlField(dataset),
           authorsHtml: getAuthorsHtmlField(dataset),
@@ -201,7 +199,6 @@ export default function Home() {
         .map((publication) => ({
           ...publication,
           affiliationsHtml: getAffiliationsHtmlField(publication, regexp),
-          affiliationsSearch: getAffiliationsSearchField(publication),
           affiliationsTooltip: getAffiliationsTooltipField(publication),
           allIdsHtml: getAllIdsHtmlField(publication),
           authorsHtml: getAuthorsHtmlField(publication),
@@ -482,7 +479,7 @@ export default function Home() {
                       <Checkbox
                         checked={filteredYears.includes(year)}
                         key={year}
-                        label={year}
+                        label={year.toString()}
                         onChange={() => onYearsChange(year)}
                         size="sm"
                       />

diff --git a/client/src/pages/home/views/works.jsx b/client/src/pages/home/views/works.jsx
@@ -42,8 +42,8 @@ export default function WorksView({
       <Column field="type" header="Type" />
       <Column field="year" header="Year" />
       <Column field="journal_name" header="Journal" />
-      <Column field="affiliationsHtml" header="Affiliations" body={affiliationsTemplate} filter filterField="affiliationsSearch" filterMatchMode="contains" filterPlaceholder="Search by affiliation" style={{ minWidth: '300px' }} />
-      <Column field="authorsHtml" header="Authors" body={authorsTemplate} filter filterMatchMode="contains" filterPlaceholder="Search by author" style={{ minWidth: '10px' }} />
+      <Column field="affiliationsHtml" header="Affiliations" body={affiliationsTemplate} filter filterField="affiliationsTooltip" filterMatchMode="contains" filterPlaceholder="Search by affiliation" style={{ minWidth: '300px' }} />
+      <Column field="authorsHtml" header="Authors" body={authorsTemplate} filter filterField="authorsTooltip" filterMatchMode="contains" filterPlaceholder="Search by author" style={{ minWidth: '10px' }} />
       <Column field="title" header="Title" filter filterMatchMode="contains" showFilterMenu={false} filterPlaceholder="Search by title" style={{ minWidth: '10px' }} />
     </DataTable>
   );

diff --git a/client/src/utils/templates.jsx b/client/src/utils/templates.jsx
@@ -36,6 +36,7 @@ const getAffiliationRor = (affiliation) => {
 const getAffiliationsHtmlField = (rowData, regexp) => {
   let affiliations = (rowData?.affiliations ?? [])
     .filter((affiliation) => Object.keys(affiliation).length && affiliation?.name)
+    .sort((a, b) => (b.name.match(regexp)?.length ?? 0) - (a.name.match(regexp)?.length ?? 0))
     .map((affiliation) => affiliation.name.replace(regexp, '<b>$&</b>'))
     .filter((affiliation) => affiliation?.length ?? 0)
     .flat();
@@ -49,16 +50,6 @@ const getAffiliationsHtmlField = (rowData, regexp) => {
   return html;
 };
 
-const getAffiliationsSearchField = (rowData) => {
-  let affiliations = (rowData?.affiliations ?? [])
-    .filter((affiliation) => Object.keys(affiliation).length && affiliation?.name)
-    .map((affiliation) => affiliation.name)
-    .filter((affiliation) => affiliation?.length ?? 0)
-    .flat();
-  affiliations = [...new Set(affiliations)];
-  return affiliations;
-};
-
 const getAffiliationsTooltipField = (rowData) => {
   let html = '<ul>';
   html += rowData.affiliations.map((affiliation, index) => `<li key="tooltip-affiliation-${rowData.id}-${index}">${affiliation.name}</li>`).join('');
@@ -134,7 +125,6 @@ export {
   authorsTemplate,
   getAffiliationRor,
   getAffiliationsHtmlField,
-  getAffiliationsSearchField,
   getAffiliationsTooltipField,
   getAllIdsHtmlField,
   getAuthorsHtmlField,