feat(ui): Add a progress bar about the remaining work to do on each t…

…ab, close #25
dataesr · Nov 7, 2023 · 893641d · 893641d
1 parent dc0299b
commit 893641d
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 67 deletions.
diff --git a/client/src/components/button/index.jsx b/client/src/components/button/index.jsx
@@ -3,9 +3,10 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { forwardRef } from 'react';
 
-import './button.scss';
 import Loader from './loader';
 
+import './button.scss';
+
 const iconSize = {
   sm: '1x',
   md: 'lg',
@@ -70,39 +71,39 @@ const Button = forwardRef((props, ref) => {
 });
 
 Button.defaultProps = {
-  size: 'md',
-  isLoading: false,
-  secondary: false,
-  disabled: false,
-  iconPosition: 'left',
-  icon: '',
+  borderless: false,
   children: '',
   className: '',
-  tertiary: false,
-  submit: false,
-  borderless: false,
   color: null,
+  disabled: false,
+  icon: '',
+  iconPosition: 'left',
+  isLoading: false,
   rounded: false,
+  secondary: false,
+  size: 'md',
+  submit: false,
+  tertiary: false,
 };
 
 Button.propTypes = {
-  isLoading: PropTypes.bool,
-  secondary: PropTypes.bool,
   borderless: PropTypes.bool,
-  tertiary: PropTypes.bool,
-  icon: PropTypes.string,
-  disabled: PropTypes.bool,
-  iconPosition: PropTypes.oneOf(['left', 'right']),
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   className: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.object,
     PropTypes.array,
   ]),
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
   color: PropTypes.oneOf(['text', 'error', 'success', 'keep', 'VALIDATED']),
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  submit: PropTypes.bool,
+  disabled: PropTypes.bool,
+  icon: PropTypes.string,
+  iconPosition: PropTypes.oneOf(['left', 'right']),
+  isLoading: PropTypes.bool,
   rounded: PropTypes.bool,
+  secondary: PropTypes.bool,
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  submit: PropTypes.bool,
+  tertiary: PropTypes.bool,
 };
 
 export default Button;
diff --git a/client/src/components/gauge/gauge.scss b/client/src/components/gauge/gauge.scss
@@ -1,24 +1,41 @@
 .gauge-container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  width: 100%;
 
-    .gauge-bar {
-        height: 32px;
-        position: relative;
-        color: white;
-        padding: 3px 8px;
-        font-size: small;
-        margin-bottom: 10px;
+  .gauge-bar {
+    color: white;
+    font-size: small;
+    height: 32px;
+    margin-bottom: 10px;
+    overflow: hidden;
+    padding: 3px 8px;
+    position: relative;
+    text-overflow: ellipsis;
+    white-space: nowrap; 
 
-        &:first-child {
-            border-radius: 15px 0 0 15px;
-        }
+    &:first-child {
+      border-bottom-left-radius: 15px;
+      border-top-left-radius: 15px;
+    }
+    &:last-child {
+      border-bottom-right-radius: 15px;
+      border-top-right-radius: 15px;
+    }
 
-        &:last-child {
-            border-radius: 0 15px 15px 0;
-        }
+    &.excluded {
+      background-color: var(--background-contrast-error);
+      color: var(--text-default-error);
+    }
+    &.tobedecided {
+      background-color: var(--background-contrast-info);
+      color: var(--text-default-info);
+    }
+    &.validated {
+      background-color: var(--background-contrast-success);
+      color: var(--text-default-success);
     }
+  }
 }
diff --git a/client/src/components/gauge/index.jsx b/client/src/components/gauge/index.jsx
@@ -1,18 +1,31 @@
 /* eslint-disable no-mixed-operators */
 import PropTypes from 'prop-types';
+
+import { Tooltip } from 'react-tooltip';
+
 import './gauge.scss';
 
 export default function Gauge({ data }) {
   const gaugeValuesInPercent = data.map((item) => (
-    { ...item, valuePercentage: item.value / data.reduce((acc, curr) => acc + curr.value, 0) * 100 }
+    { ...item, valuePercentage: (item.value / data.reduce((acc, curr) => acc + curr.value, 0) * 100).toFixed(0) }
   ));
 
   return (
     <div className="gauge-container">
-      {gaugeValuesInPercent.map((item) => (
-        <div className="gauge-bar" style={{ width: `${item.valuePercentage}%`, backgroundColor: item.color }} key={item.label}>
-          {`${item.label} (${item.value} ie. ${item.valuePercentage.toFixed(1)} %)`}
-        </div>
+      {gaugeValuesInPercent.filter((item) => item.value > 0).map((item) => (
+        <>
+          <div
+            className={item?.className ? `gauge-bar ${item.className}` : 'gauge-bar'}
+            data-tooltip-id={`gauge-bar-${item.id}`}
+            key={item.label}
+            style={item?.color ? { width: `${item.valuePercentage}%`, backgroundColor: item.color } : { width: `${item.valuePercentage}%` }}
+          >
+            {`${item.label} (${item.value} ie. ${item.valuePercentage} %)`}
+          </div>
+          <Tooltip id={`gauge-bar-${item.id}`}>
+            {`${item.label} (${item.value} ie. ${item.valuePercentage} %)`}
+          </Tooltip>
+        </>
       ))}
     </div>
   );

diff --git a/client/src/pages/home/filters.jsx b/client/src/pages/home/filters.jsx
@@ -86,7 +86,6 @@ export default function Filters({ sendQuery }) {
         <Button
           icon="ri-search-line"
           onClick={checkAndSendQuery}
-          size="sm"
         >
           Search works
         </Button>

diff --git a/client/src/pages/home/index.jsx b/client/src/pages/home/index.jsx
@@ -355,17 +355,18 @@ export default function Home() {
     <>
       <Container className="fr-my-5w" as="section" fluid>
         <Row className="fr-px-5w">
-          <Col n="9">
+          <Col>
             <Filters
               sendQuery={sendQuery}
             />
           </Col>
-          <Col n="3">
-            {data && (<Metrics data={data} />)}
-          </Col>
+          {/*
+            <Col n="3">
+              {data && (<Metrics data={data} />)}
+            </Col>
+          */}
         </Row>
       </Container>
-
       <Container className="fr-mx-5w" as="section" fluid>
         <Actions
           allAffiliations={allAffiliations}
@@ -375,7 +376,7 @@ export default function Home() {
           setAllPublications={setAllPublications}
         />
         <Tabs defaultActiveTab={0}>
-          <Tab label={`Affiliations (${allAffiliations.filter((affiliation) => !!affiliation.matches).length})`}>
+          <Tab label="Affiliations">
             {affiliationsNotice && (
               <Row>
                 <Col n="12">
@@ -388,9 +389,18 @@ export default function Home() {
               </Row>
             )}
             <Row>
-              <Col>
+              <Col n="4">
                 {renderAffiliationsButtons()}
               </Col>
+              <Col>
+                <Gauge
+                  data={[
+                    { className: 'tobedecided', id: 'tobedecided', label: 'To be decided', value: allAffiliations.filter((affiliation) => affiliation.status === STATUS_TO_BE_DECIDED).length },
+                    { className: 'validated', id: 'validated', label: 'Validated', value: allAffiliations.filter((affiliation) => affiliation.status === STATUS_VALIDATED).length },
+                    { className: 'excluded', id: 'excluded', label: 'Excluded', value: allAffiliations.filter((affiliation) => affiliation.status === STATUS_EXCLUDED).length },
+                  ]}
+                />
+              </Col>
             </Row>
             <Row>
               <Col>
@@ -410,17 +420,17 @@ export default function Home() {
               </Col>
             </Row>
           </Tab>
-          <Tab label={`Publications (${allPublications.filter((publication) => publication.status === STATUS_VALIDATED).length} / ${allPublications.length})`}>
+          <Tab label="Publications">
             <Row>
-              <Col>
+              <Col n="4">
                 {renderWorksButtons(selectedPublications)}
               </Col>
               <Col>
                 <Gauge
                   data={[
-                    { label: 'French OSM', color: '#334476', value: allPublications.filter((publication) => publication.datasource === 'bso').length },
-                    { label: 'OpenAlex', color: '#22a498', value: allPublications.filter((publication) => publication.datasource === 'openalex').length },
-                    { label: 'Both', color: '#2faf41a4', value: allPublications.filter((publication) => publication.datasource === 'bso, openalex').length },
+                    { className: 'tobedecided', id: 'tobedecided', label: 'To be decided', value: allPublications.filter((publication) => publication.status === STATUS_TO_BE_DECIDED).length },
+                    { className: 'validated', id: 'validated', label: 'Validated', value: allPublications.filter((publication) => publication.status === STATUS_VALIDATED).length },
+                    { className: 'excluded', id: 'excluded', label: 'Excluded', value: allPublications.filter((publication) => publication.status === STATUS_EXCLUDED).length },
                   ]}
                 />
               </Col>
@@ -496,22 +506,22 @@ export default function Home() {
               </Row>
             )}
             <Row>
-              <Col>
+              <Col n="4">
                 {renderWorksButtons(selectedPublications)}
               </Col>
             </Row>
           </Tab>
-          <Tab label={`Datasets (${allDatasets.filter((dataset) => dataset.status === STATUS_VALIDATED).length} / ${allDatasets.length})`}>
+          <Tab label="Datasets">
             <Row>
               <Col>
                 {renderWorksButtons(selectedDatasets)}
               </Col>
               <Col>
                 <Gauge
                   data={[
-                    { label: 'French OSM', color: '#334476', value: allDatasets.filter((dataset) => dataset.datasource === 'bso').length },
-                    { label: 'OpenAlex', color: '#22a498', value: allDatasets.filter((dataset) => dataset.datasource === 'openalex').length },
-                    { label: 'Both', color: '#2faf41a4', value: allDatasets.filter((dataset) => dataset.datasource === 'bso, openalex').length },
+                    { className: 'tobedecided', id: 'tobedecided', label: 'To be decided', value: allDatasets.filter((dataset) => dataset.status === STATUS_TO_BE_DECIDED).length },
+                    { className: 'validated', id: 'validated', label: 'Validated', value: allDatasets.filter((dataset) => dataset.status === STATUS_VALIDATED).length },
+                    { className: 'excluded', id: 'excluded', label: 'Excluded', value: allDatasets.filter((dataset) => dataset.status === STATUS_EXCLUDED).length },
                   ]}
                 />
               </Col>

diff --git a/client/src/styles/index.scss b/client/src/styles/index.scss
@@ -1,19 +1,14 @@
-.text-right {
-    text-align: right;
-}
-
 .jauges {
     border: 1px solid #e0e0e0;
     border-radius: 10px;
-    padding: 10px;
     margin: 25px;
+    padding: 10px;
 }
 
 .jauge {
-    // width: 100%;
-    height: 10px;
     background-color: #e0e0e0;
     border-radius: 10px;
+    height: 10px;
     margin-bottom: 10px;
 }
 
@@ -35,4 +30,8 @@
 
 .jauge-deduplicated {
     background-color: #2faf41a4;
+}
+
+.text-right {
+    text-align: right;
 }