feat(openAlex): refactor RorBadge component and add RorName component…

… for improved display
dataesr · Nov 20, 2024 · 7f7165d · 7f7165d
1 parent 1324d4b
commit 7f7165d
Show file tree

Hide file tree

Showing 4 changed files with 151 additions and 68 deletions.
diff --git a/client/src/pages/openalex-ror/components/ror-badge.jsx b/client/src/pages/openalex-ror/components/ror-badge.jsx
@@ -1,62 +1,56 @@
-import { Link } from '@dataesr/dsfr-plus';
+import { Link, Tag } from '@dataesr/dsfr-plus';
 import PropTypes from 'prop-types';
 
-export default function RorBadge({ ror, setFilteredAffiliationName, rorColor }) {
-  console.log(rorColor, getComputedStyle(document.documentElement).getPropertyValue(`--${rorColor}`));
-
+export default function RorBadge({
+  isRemoved,
+  ror,
+  rorColor,
+  setFilteredAffiliationName,
+}) {
   return (
-    <div className="wm-ror-badge">
-      <span style={{ backgroundColor: getComputedStyle(document.documentElement).getPropertyValue(`--${rorColor}`) }} />
-      <div>
-        <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"
-        />
-      </div>
-      https://ror.org/
-      <Link href={`https://ror.org/${ror.rorId}`} target="_blank">
-        {` ${ror.rorId}`}
-      </Link>
-      <button
-        type="button"
-        aria-label="filter on this ROR id"
-        className="fr-icon fr-fi-filter-line fr-icon--sm"
-        onClick={() => setFilteredAffiliationName(ror.rorId)}
-      />
-
-      {/* <img
+    <Tag
+      color={rorColor}
+      size="sm"
+    >
+      <img
         alt="ROR logo"
         className="vertical-middle fr-mx-1w"
-        src="https://raw.githubusercontent.com/ror-community/ror-logos/main/ror-icon-rgb.svg"
+        src="https://raw.githubusercontent.com/ror-community/ror-logos/0ef82987ac9bf4c9681dacdb3cb78d2a9d81167b/ror-icon-rgb-transparent.svg"
         height="16"
       />
-      https://ror.org/
-      <Badge
-        className="fr-mr-1w"
-        color={defineRorColor.find((r) => r.ror === ror.rorId)?.color || 'yellow-tournesol'}
-        size="sm"
-      >
-        <Link className="fr-mr-1w" href={`https://ror.org/${ror.rorId}`} target="_blank">
-          {` ${ror.rorId}`}
-        </Link>
-      </Badge>
-      <Button
+      {isRemoved ? (
+        <strike>
+          https://ror.org/
+          <Link href={`https://ror.org/${ror.rorId}`} target="_blank">
+            {` ${ror.rorId}`}
+          </Link>
+        </strike>
+      ) : (
+        <>
+          https://ror.org/
+          <Link href={`https://ror.org/${ror.rorId}`} target="_blank">
+            {` ${ror.rorId}`}
+          </Link>
+        </>
+      )}
+
+      <button
+        disabled={isRemoved}
         aria-label="filter on this ROR id"
-        icon="filter-line"
+        className="fr-icon fr-fi-filter-line fr-icon--sm"
         onClick={() => setFilteredAffiliationName(ror.rorId)}
-        size="sm"
-        variant="text"
-      /> */}
-    </div>
+        type="button"
+      />
+    </Tag>
+
   );
 }
 
 RorBadge.propTypes = {
+  isRemoved: PropTypes.bool.isRequired,
   ror: PropTypes.shape({
     rorId: PropTypes.string.isRequired,
   }).isRequired,
-  setFilteredAffiliationName: PropTypes.func.isRequired,
   rorColor: PropTypes.string.isRequired,
+  setFilteredAffiliationName: PropTypes.func.isRequired,
 };
diff --git a/client/src/pages/openalex-ror/components/ror-badge_old.jsx b/client/src/pages/openalex-ror/components/ror-badge_old.jsx
@@ -0,0 +1,62 @@
+import { Link } from '@dataesr/dsfr-plus';
+import PropTypes from 'prop-types';
+
+export default function RorBadge({ ror, setFilteredAffiliationName, rorColor }) {
+  console.log(rorColor, getComputedStyle(document.documentElement).getPropertyValue(`--${rorColor}`));
+
+  return (
+    <div className="wm-ror-badge">
+      <span style={{ backgroundColor: getComputedStyle(document.documentElement).getPropertyValue(`--${rorColor}`) }} />
+      <div>
+        <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"
+        />
+      </div>
+      https://ror.org/
+      <Link href={`https://ror.org/${ror.rorId}`} target="_blank">
+        {` ${ror.rorId}`}
+      </Link>
+      <button
+        type="button"
+        aria-label="filter on this ROR id"
+        className="fr-icon fr-fi-filter-line fr-icon--sm"
+        onClick={() => setFilteredAffiliationName(ror.rorId)}
+      />
+
+      {/* <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"
+      />
+      https://ror.org/
+      <Badge
+        className="fr-mr-1w"
+        color={defineRorColor.find((r) => r.ror === ror.rorId)?.color || 'yellow-tournesol'}
+        size="sm"
+      >
+        <Link className="fr-mr-1w" href={`https://ror.org/${ror.rorId}`} target="_blank">
+          {` ${ror.rorId}`}
+        </Link>
+      </Badge>
+      <Button
+        aria-label="filter on this ROR id"
+        icon="filter-line"
+        onClick={() => setFilteredAffiliationName(ror.rorId)}
+        size="sm"
+        variant="text"
+      /> */}
+    </div>
+  );
+}
+
+RorBadge.propTypes = {
+  ror: PropTypes.shape({
+    rorId: PropTypes.string.isRequired,
+  }).isRequired,
+  setFilteredAffiliationName: PropTypes.func.isRequired,
+  rorColor: PropTypes.string.isRequired,
+};
diff --git a/client/src/pages/openalex-ror/components/ror-name.jsx b/client/src/pages/openalex-ror/components/ror-name.jsx
@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+
+export default function RorName({ isRemoved, ror }) {
+  return (
+    <div style={{ display: 'inline-flex', justifyContent: 'center', alignItems: 'center' }}>
+      <img
+        alt={`${ror.rorCountry} flag`}
+        src={`https://flagsapi.com/${ror.rorCountry}/flat/16.png`}
+      />
+      <span
+        className="fr-ml-1w"
+        style={{
+          width: '300px',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          display: 'inline-block',
+        }}
+      >
+        {isRemoved ? (
+          <strike>
+            {ror.rorName}
+          </strike>
+        ) : (
+          ror.rorName
+        )}
+      </span>
+    </div>
+  );
+}
+
+RorName.propTypes = {
+  isRemoved: PropTypes.bool.isRequired,
+  ror: PropTypes.shape({
+    rorCountry: PropTypes.string.isRequired,
+    rorName: PropTypes.string.isRequired,
+  }).isRequired,
+};
diff --git a/client/src/pages/openalex-ror/results/list-view.jsx b/client/src/pages/openalex-ror/results/list-view.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import WorksList from '../components/works-list';
 import RorBadge from '../components/ror-badge';
+import RorName from '../components/ror-name';
 
 export default function ListView({
   allAffiliations,
@@ -11,7 +12,8 @@ export default function ListView({
   setSelectedOpenAlex,
 }) {
   const defineRorColor = [];
-  const dsColors = ['ror-1', 'ror-2', 'ror-3', 'ror-4', 'ror-5'];
+  // const dsColors = ['ror-1', 'ror-2', 'ror-3', 'ror-4', 'ror-5'];
+  const dsColors = ['green-archipel', 'purple-glycine', 'pink-tuile', 'green-menthe', 'brown-cafe-creme'];
   const rorCount = {};
   allAffiliations.forEach((affiliation) => {
     affiliation.rors.forEach((ror) => {
@@ -24,7 +26,6 @@ export default function ListView({
   });
   const sortedRor = Object.keys(rorCount).sort((a, b) => rorCount[b] - rorCount[a]);
   defineRorColor.push(...sortedRor.slice(0, 5).map((ror, index) => ({ ror, color: dsColors[index % dsColors.length] })));
-  console.log('defineRorColor', defineRorColor);
 
   return (
     <ul className="wm-list">
@@ -46,46 +47,34 @@ export default function ListView({
                   }}
                 />
               </Col>
-              <Col md={6}>
+              <Col md={5}>
                 <Text as="label" htmlFor={`affiliation-${affiliation.key}`}>
                   <div dangerouslySetInnerHTML={{ __html: affiliation.nameHtml }} />
                 </Text>
                 <WorksList works={affiliation.works} />
               </Col>
-              <Col md={5}>
+              <Col md={6}>
                 <table className="wm-table">
                   {affiliation.rors.map((ror) => (
                     <tr>
                       <td>
                         <RorBadge
+                          // isRemoved
                           ror={ror}
-                          rorColor={defineRorColor.find((item) => item.ror === ror.rorId)?.color || 'ror-x'}
+                          rorColor={defineRorColor.find((item) => item.ror === ror.rorId)?.color || 'beige-gris-galet'}
+                          // rorColor={defineRorColor.find((item) => item.ror === ror.rorId)?.color || 'ror-x'}
+                          setFilteredAffiliationName={setFilteredAffiliationName}
                         />
                       </td>
                       <td>
-                        <div style={{ display: 'inline-flex', justifyContent: 'center', alignItems: 'center' }}>
-                          <img
-                            alt={`${ror.rorCountry} flag`}
-                            src={`https://flagsapi.com/${ror.rorCountry}/flat/16.png`}
-                          />
-                          <span
-                            className="fr-ml-1w"
-                            style={{
-                              width: '300px',
-                              whiteSpace: 'nowrap',
-                              overflow: 'hidden',
-                              textOverflow: 'ellipsis',
-                              display: 'inline-block',
-                            }}
-                          >
-                            {ror.rorName}
-                          </span>
-                        </div>
+                        <RorName
+                          // isRemoved
+                          ror={ror}
+                        />
                       </td>
                     </tr>
                   ))}
                 </table>
-
               </Col>
             </Row>
           </li>