layout

dataesr · Oct 24, 2024 · 449e4a3 · 449e4a3
1 parent e968a85
commit 449e4a3
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 21 deletions.
diff --git a/client/src/pages/mentions.jsx b/client/src/pages/mentions.jsx
@@ -17,7 +17,7 @@ import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import useWebSocket from 'react-use-websocket';
 
-import { affiliations2Template, authorsTemplate, hasCorrectionTemplate } from '../utils/templates';
+import { affiliations2Template, authorsTemplate, doiTemplate, hasCorrectionTemplate } from '../utils/templates';
 import useToast from '../hooks/useToast';
 import { getMentions } from '../utils/works';
 
@@ -156,9 +156,6 @@ export default function Mentions() {
       style={{ color: rowData.mention_context.created ? '#8dc572' : '#be6464' }}
     />
   );
-  const doiTemplate = (rowData) => (
-    <a href={`https://doi.org/${rowData.doi}`}>{rowData.doi}</a>
-  );
   const sharedTemplate = (rowData) => (
     <i
       className={`fr-mr-1w ${
@@ -374,13 +371,15 @@ export default function Mentions() {
           </Button>
         </Col>
       </Row>
-      <Button
-        disabled={!corrections.length > 0}
-        onClick={switchModal}
-        size="sm"
-      >
-        {`Send ${corrections.length} correction${corrections.length > 1 ? 's' : ''}`}
-      </Button>
+      <Row className="fr-mb-2w">
+        <Button
+          disabled={!corrections.length > 0}
+          onClick={switchModal}
+          size="sm"
+        >
+          {`Send ${corrections.length} correction${corrections.length > 1 ? 's' : ''}`}
+        </Button>
+      </Row>
       <Modal isOpen={isModalOpen} hide={switchModal}>
         <ModalTitle>Improve mentions characterizations</ModalTitle>
         <ModalContent>
@@ -435,25 +434,44 @@ export default function Mentions() {
             value={mentions}
           >
             <Column selectionMode="multiple" headerStyle={{ width: '3rem' }} />
-            <Column body={doiTemplate} field="doi" header="DOI" sortable />
-            <Column field="rawForm" header="Raw Form" sortable />
-            <Column body={contextTemplate} field="context" header="Context" />
+            <Column
+              body={doiTemplate}
+              field="doi"
+              header="DOI"
+              sortable
+              style={{ minWidth: '130px', maxWidth: '130px' }}
+            />
+            <Column
+              field="rawForm"
+              header="Raw Form"
+              sortable
+              style={{ minWidth: '100px', maxWidth: '100px' }}
+            />
+            <Column
+              body={contextTemplate}
+              field="context"
+              header="Context"
+              style={{ minWidth: '380px', maxWidth: '380px' }}
+            />
             <Column
               body={usedTemplate}
               field="mention.mention_context.used"
               header="Used"
+              style={{ minWidth: '70px', maxWidth: '70px' }}
               sortable
             />
             <Column
               body={createdTemplate}
               field="mention.mention_context.created"
               header="Created"
+              style={{ minWidth: '80px', maxWidth: '80px' }}
               sortable
             />
             <Column
               body={sharedTemplate}
               field="mention.mention_context.shared"
               header="Shared"
+              style={{ minWidth: '80px', maxWidth: '80px' }}
               sortable
             />
             <Column

diff --git a/client/src/utils/templates.jsx b/client/src/utils/templates.jsx
@@ -16,9 +16,17 @@ const affiliationsTemplate = (rowData) => (
   </>
 );
 
+const getEllipse = (x, len) => {
+  let idValueDisplay = x;
+  if (idValueDisplay.length > len) {
+    idValueDisplay = x.slice(0, len).concat('..');
+  }
+  return idValueDisplay;
+};
+
 const affiliations2Template = (rowData) => {
   let affiliationsHtml = `<ul data-tooltip-id="tooltip-affiliation-${rowData.id}">`;
-  affiliationsHtml += rowData.affiliations.slice(0, 3).map((affiliation, index) => `<li key="affiliation-${rowData.id}-${index}">${affiliation}</li>`).join('');
+  affiliationsHtml += rowData.affiliations.slice(0, 3).map((affiliation, index) => `<li key="affiliation-${rowData.id}-${index}">${getEllipse(affiliation, 50)}</li>`).join('');
   if (rowData.affiliations.length > 3) {
     affiliationsHtml += `<li>others (${rowData.affiliations.length - 3})</li>`;
   }
@@ -56,26 +64,33 @@ const statusRowFilterTemplate = (options) => (
   />
 );
 
+const getIdLinkDisplay = (idType, idValue) => {
+  const idLink = getIdLink(idType, idValue);
+  const idValueDisplay = getEllipse(idValue, 18);
+  const html = idLink ? `<a target="_blank" href="${idLink}">${idValueDisplay}</a>` : `<span>${idValue}</span>`;
+  return html;
+};
+
 const getIdsTemplate = (ids) => {
   let html = '<ul>';
   ids.forEach((id) => {
     if (['datacite', 'crossref'].includes(id.id_type)) {
       html += '';
     } else {
       html += `<li key="${id.id_value}"> `;
-      const idLink = getIdLink(id.id_type, id.id_value);
-      let idValueDisplay = id.id_value;
-      if (idValueDisplay.length > 18) {
-        idValueDisplay = id.id_value.slice(0, 18).concat('..');
-      }
-      html += idLink ? `<a target="_blank" href="${idLink}">${idValueDisplay}</a>` : `<span>${id.id_value}</span>`;
+      html += getIdLinkDisplay(id.id_type, id.id_value);
       html += '</li>';
     }
   });
   html += '</ul>';
   return <span dangerouslySetInnerHTML={{ __html: html }} />;
 };
 
+const doiTemplate = (data) => {
+  const html = getIdLinkDisplay('doi', data.doi);
+  return <span dangerouslySetInnerHTML={{ __html: html }} />;
+};
+
 const allIdsTemplate = (rowData) => getIdsTemplate(rowData?.allIds ?? []);
 
 const linkedDOITemplate = (rowData) => getIdsTemplate(rowData?.fr_publications_linked ?? []);
@@ -178,6 +193,7 @@ export {
   authorsTemplate,
   correctionTemplate,
   datasourceTemplate,
+  doiTemplate,
   frAuthorsTemplate,
   hasCorrectionTemplate,
   linkedDOITemplate,