feat(perf): Add Stepp Progress bar

client/src/components/gauge/index.jsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 import { Tooltip } from 'react-tooltip';
 
-import './gauge.scss';
+import './index.scss';
 
 export default function Gauge({ data }) {
   const dataWithPercent = data.map((item) => (

client/src/components/step-progress/index.jsx

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+
+import './index.scss';
+
+export default function StepProgress({ current }) {
+  return (
+    <div className="arrow-steps clearfix">
+      <div className={`step ${ current === 1 ? 'current' : null } ${ current > 1 ? 'done' : null } `}>
+        <span>1. Requests</span>
+      </div>
+      <div className={`step ${ current === 2 ? 'current' : null } ${ current > 2 ? 'done' : null } `}>
+        <span>2. Concat</span>
+      </div>
+      <div className={`step ${ current === 3 ? 'current' : null } ${ current > 3 ? 'done' : null } `}>
+        <span>3. Dedup</span>
+      </div>
+      <div className={`step ${ current === 4 ? 'current' : null } ${ current > 4 ? 'done' : null } `}>
+        <span>4. GroupBy</span>
+      </div>
+      <div className={`step ${ current === 5 ? 'current' : null } ${ current > 5 ? 'done' : null } `}>
+        <span>5. Sort</span>
+      </div>
+      <div className={`step ${ current === 6 ? 'current' : null } ${ current > 6 ? 'done' : null } `}>
+        <span>6. Facet</span>
+      </div>
+      <div className={`step ${ current === 7 ? 'current' : null } ${ current > 7 ? 'done' : null } `}>
+        <span>7. Serialization</span>
+      </div>
+    </div>
+  );
+}
+
+StepProgress.propTypes = {
+  current: PropTypes.number.isRequired,
+};

client/src/components/step-progress/index.scss

@@ -0,0 +1,98 @@
+// https://codepen.io/wongmingto/pen/eLGYxy
+
+.clearfix:after {
+  clear: both;
+  content: "";
+  display: block;
+  height: 0;
+}
+
+.arrow-steps {
+  margin-top: 20px;
+}
+
+.arrow-steps .step {
+  font-size: 14px;
+  text-align: center;
+  color: #777;
+  cursor: default;
+  margin: 0;
+  padding: 10px 0px 10px 0px;
+  width: 14%;
+  float: left;
+  position: relative;
+  background-color: #ddd;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.arrow-steps .step:after,
+.arrow-steps .step:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -15px;
+  width: 0;
+  height: 0;
+  border-top: 19px solid transparent;
+  border-bottom: 17px solid transparent;
+  border-left: 17px solid #ddd;
+  z-index: 2;
+}
+
+.arrow-steps .step:before {
+  right: auto;
+  left: 0;
+  border-left: 17px solid #fff;
+  z-index: 0;
+}
+
+.arrow-steps .step:first-child:before {
+  border: none;
+}
+
+.arrow-steps .step:first-child {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.arrow-steps .step:last-child {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.arrow-steps .step span {
+  display: block;
+  height: 16px;
+  position: relative;
+}
+
+*.arrow-steps .step.done span:before {
+  opacity: 1;
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: -10px;
+  font-size: 11px;
+  line-height: 21px;
+}
+
+.arrow-steps .step.current {
+  color: #fff;
+  background-color: #5599e5;
+}
+
+.arrow-steps .step.current:after {
+  border-left: 17px solid #5599e5;
+}
+
+.arrow-steps .step.done {
+  color: #173352;
+  background-color: #2f69aa;
+}
+
+.arrow-steps .step.done:after {
+  border-left: 17px solid #2f69aa;
+}

client/src/pages/index.jsx

@@ -15,7 +15,7 @@ import useWebSocket from 'react-use-websocket';
 
 import Actions from './actions';
 import AffiliationsTab from './affiliationsTab';
-import { PageSpinner } from '../components/spinner';
+import StepProgress from '../components/step-progress';
 import DatasetsTab from './datasetsTab';
 import Filters from './filters';
 import PublicationsTab from './publicationsTab';
@@ -33,6 +33,7 @@ export default function Home() {
   const [allDatasets, setAllDatasets] = useState([]);
   const [allPublications, setAllPublications] = useState([]);
   const [options, setOptions] = useState({});
+  const [current, setCurrent] = useState(1);
   const [regexp, setRegexp] = useState();
   const [selectedAffiliations, setSelectedAffiliations] = useState([]);
   const [selectedDatasets, setSelectedDatasets] = useState([]);
@@ -47,7 +48,7 @@ export default function Home() {
   });
 
   useWebSocket(VITE_WS_HOST, {
-    onMessage: (message) => console.log(message.data),
+    onMessage: (message) => setCurrent(Number(message.data) + 1),
     share: true,
   });
 
@@ -158,7 +159,7 @@ export default function Home() {
           tagAffiliations={tagAffiliations}
         />
         {isFetching && (
-          <PageSpinner />
+          <StepProgress current={current} />
         )}
         {!isFetching && (allAffiliations.length > 0 || allDatasets.length > 0 || allPublications.length > 0) && (
           <Tabs defaultActiveTab={0}>

server/src/routes/works.routes.js

@@ -14,35 +14,35 @@ router.route('/works')
         res.status(400).json({ message: 'You must provide at least one affiliation.' });
       } else {
         webSocketServer.broadcast('start');
-        console.time(`0. Requests ${options.affiliations}`);
+        console.time(`1. Requests ${options.affiliations}`);
         options.affiliations = options.affiliations.split(',');
         options.datasets = options.datasets === 'true';
         options.years = range(options.startYear, options.endYear);
         const responses = await Promise.all([
           getFosmWorks({ options }),
           getOpenAlexPublications({ options }),
         ]);
-        console.timeEnd(`0. Requests ${options.affiliations}`);
-        webSocketServer.broadcast('step_0');
-        console.time(`1. Concat ${options.affiliations}`);
+        console.timeEnd(`1. Requests ${options.affiliations}`);
+        webSocketServer.broadcast(1);
+        console.time(`2. Concat ${options.affiliations}`);
         const works = [
           ...responses[0],
           ...responses[1],
         ];
-        console.timeEnd(`1. Concat ${options.affiliations}`);
-        webSocketServer.broadcast('step_1');
-        console.time(`2. Dedup ${options.affiliations}`);
+        console.timeEnd(`2. Concat ${options.affiliations}`);
+        webSocketServer.broadcast(2);
+        console.time(`3. Dedup ${options.affiliations}`);
         // Deduplicate publications by ids
         const deduplicatedWorks = deduplicateWorks(works);
-        console.timeEnd(`2. Dedup ${options.affiliations}`);
-        webSocketServer.broadcast('step_2');
+        console.timeEnd(`3. Dedup ${options.affiliations}`);
+        webSocketServer.broadcast(3);
         // Compute distinct affiliations of works
-        console.time(`3. GroupBy ${options.affiliations}`);
+        console.time(`4. GroupBy ${options.affiliations}`);
         const uniqueAffiliations = groupByAffiliations({ options, works: deduplicatedWorks });
-        console.timeEnd(`3. GroupBy ${options.affiliations}`);
-        webSocketServer.broadcast('step_3');
+        console.timeEnd(`4. GroupBy ${options.affiliations}`);
+        webSocketServer.broadcast(4);
         // Sort between publications and datasets
-        console.time(`4. Sort works ${options.affiliations}`);
+        console.time(`5. Sort works ${options.affiliations}`);
         const publications = [];
         let datasets = [];
         const deduplicatedWorksLength = deduplicatedWorks.length;
@@ -58,20 +58,20 @@ router.route('/works')
             }
           }
         }
-        console.timeEnd(`4. Sort works ${options.affiliations}`);
-        webSocketServer.broadcast('step_4');
+        console.timeEnd(`5. Sort works ${options.affiliations}`);
+        webSocketServer.broadcast(5);
         // Compute distinct types & years for facet
-        console.time(`5. Facet ${options.affiliations}`);
+        console.time(`6. Facet ${options.affiliations}`);
         const publicationsYears = countUniqueValues({ data: publications, field: 'year' });
         const datasetsYears = countUniqueValues({ data: datasets, field: 'year' });
         const publicationsTypes = countUniqueValues({ data: publications, field: 'type' });
         const datasetsTypes = countUniqueValues({ data: datasets, field: 'type' });
         const publicationsPublishers = countUniqueValues({ data: publications, field: 'publisher' });
         const datasetsPublishers = countUniqueValues({ data: datasets, field: 'publisher' });
-        console.timeEnd(`5. Facet ${options.affiliations}`);
-        webSocketServer.broadcast('step_5');
+        console.timeEnd(`6. Facet ${options.affiliations}`);
+        webSocketServer.broadcast(6);
         // Build and serialize response
-        console.time(`6. Serialization ${options.affiliations}`);
+        console.time(`7. Serialization ${options.affiliations}`);
         res.status(200).json({
           affiliations: uniqueAffiliations,
           datasets: {
@@ -87,8 +87,8 @@ router.route('/works')
             years: publicationsYears,
           },
         });
-        console.timeEnd(`6. Serialization ${options.affiliations}`);
-        webSocketServer.broadcast('step_6');
+        console.timeEnd(`7. Serialization ${options.affiliations}`);
+        webSocketServer.broadcast(7);
       }
     } catch (err) {
       console.error(err);