refactor(demo): visualize enrichment results - EUBFR-267 (#227)

* Add documentation working with demo dashboard locally without deployments

* Basic display

* Mark enriched projects

* Add pager

* Move to projects

* Add file-level stats regarding enriched project locations

* Add file-level stats regarding enriched budget items

* Add pie charts

* Add loading message

* Increase size charts

* Listing improvements

* Per field

* Split code

* Correction

* Correction

* Consolidate reports

* Refactoring

* Refactoring

Author: kalinchernev

demo/dashboard/client/package.json

@@ -19,6 +19,8 @@
     "react": "16.8.6",
     "react-collapsible": "2.6.0",
     "react-dom": "16.8.6",
+    "react-json-view": "1.19.1",
+    "react-pager-component": "1.0.0",
     "react-router": "5.0.0",
     "react-router-dom": "5.0.0",
     "react-s3-uploader": "4.8.0",

demo/dashboard/client/src/App.css

@@ -69,12 +69,8 @@
 
 /* Collapsible assumes structure and does not get ECL too well */
 
-.Collapsible {
-  background-color: white;
-}
 .Collapsible__contentInner {
-  border: 1px solid #ebebeb;
-  border-top: 0;
+  padding: 0 0 20px 0;
 }
 .Collapsible__contentInner p {
   margin-bottom: 10px;
@@ -89,23 +85,69 @@
   font-weight: 400;
   text-decoration: none;
   position: relative;
-  border: 1px solid white;
-  padding: 10px;
-  background: #f3f3f3;
+  padding: 10px 30px 10px 0;
   color: black;
 }
 .Collapsible__trigger:hover {
   cursor: pointer;
 }
-
+.Collapsible__trigger:after {
+  font-family: 'EuropaIcons';
+  content: '\e81f';
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  display: block;
+  transition: transform 300ms;
+}
+.Collapsible__trigger.is-open:after {
+  transform: rotateZ(180deg);
+}
 .Collapsible__trigger.is-disabled {
   opacity: 0.5;
   background-color: grey;
 }
-.CustomTriggerCSS {
-  background-color: lightcoral;
-  transition: background-color 200ms ease;
+
+/* Pager */
+.Pager {
+  border-top: 2px solid #000;
+  color: #004494;
+  font: normal normal 400 1rem/1.25rem Arial, sans-serif;
+  margin: 0;
+  padding-bottom: 1rem;
+  padding-top: 1rem;
+  justify-content: center;
+}
+
+.Pager .PagerButton {
+  display: flex;
+  flex-grow: 0;
+  margin-right: 1.5rem;
+}
+
+.Pager .PagerButton--Prev {
+  flex-basis: auto;
+}
+
+.PagerButton.is-active {
+  display: flex;
+  flex-grow: 0;
+  margin-right: 1.5rem;
+  border: 2px solid #000;
+  border-radius: 10rem;
+  justify-content: center;
+  min-width: 1.3rem;
+}
+
+.Pager .PagerButton--Next {
+  flex-basis: auto;
+  margin-right: 0;
+}
+
+.Pager .PagerButton--GoLast {
+  margin-left: 1.5rem;
 }
-.CustomTriggerCSS--open {
-  background-color: darkslateblue;
+
+.Pager .PagerButton.is-disabled {
+  display: none;
 }

demo/dashboard/client/src/lib/enrichmentDecorator.js

@@ -0,0 +1,32 @@
+/* eslint camelcase: "off" */
+
+/**
+ * Adds a new property to {Project} accumulating results of the enrichment loop.
+ * @param {Array<Project>} projects
+ * @returns {Array<Object>} The original {Array<Project>} with a new property "enrichmentResults".
+ */
+const enrichmentDecorator = projects =>
+  projects.map(project => {
+    // Focus on potentially enriched fields.
+    const { budget, project_locations } = project._source;
+    const { eu_contrib, total_cost } = budget;
+
+    // Different fields have different means of marking information as enriched.
+    const hasEnrichedLocation = project_locations.find(l => l.enriched);
+    const hasEnrichedEuContrib = eu_contrib._original;
+    const hasEnrichedTotalCost = total_cost._original;
+
+    if (hasEnrichedLocation || hasEnrichedEuContrib || hasEnrichedTotalCost) {
+      return {
+        enrichmentResults: {
+          project_locations,
+          budget,
+        },
+        ...project,
+      };
+    }
+
+    return project;
+  });
+
+export default enrichmentDecorator;

demo/dashboard/client/src/lib/formatQualityReport.js

@@ -1,4 +1,14 @@
-export default report => {
+/**
+ * Takes an object containing per-field coverage report about project records.
+ *
+ * @see resources/elasticsearch/mappings/quality-report.js
+ * @see resources/elasticsearch/mappings/project.js
+ * @see demo/dashboard/client/src/clientFactory/esIndices.js
+ *
+ * @param {Object} report
+ * @returns {Array} Formatted report containing information about a selected list of properties.
+ */
+const formatQualityReport = report => {
   const formattedReport = [];
 
   // As requested here https://webgate.ec.europa.eu/CITnet/jira/browse/EUBFR-175?focusedCommentId=2739406&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-2739406
@@ -34,3 +44,5 @@ export default report => {
 
   return formattedReport;
 };
+
+export default formatQualityReport;

demo/dashboard/client/src/pages/files/File.js

@@ -12,8 +12,8 @@ import Spinner from '../../components/Spinner';
 import FormUpload from '../../components/FormUpload';
 
 import LogsTab from './file/Logs';
-import ProjectsTab from './file/Projects';
-import ReportsTab from './file/Reports';
+import ProjectsTab from './file/Projects/index';
+import ReportsTab from './file/Reports/index';
 
 import './File.css';
 
@@ -239,7 +239,6 @@ class File extends React.Component {
           <span className="ecl-icon ecl-icon--left" />
           Go Back to My Files
         </Link>
-
         <div className="ecl-row ecl-u-mv-m">
           <div className="ecl-col-md-4 ecl-u-d-flex ecl-u-justify-content-center ecl-u-align-items-baseline">
             <span className="ecl-u-fs-xxl">
@@ -259,7 +258,6 @@ class File extends React.Component {
             </span>
           </div>
         </div>
-
         <nav className="ecl-navigation-list-wrapper">
           <h2 className="ecl-u-sr-only">Navigation Menu</h2>
           <ul className="ecl-navigation-list ecl-navigation-list--tabs">
@@ -284,25 +282,24 @@ class File extends React.Component {
             </li>
             <li className="ecl-navigation-list__item">
               <NavLink
-                to={`${match.url}/logs`}
+                to={`${match.url}/reports`}
                 className="ecl-navigation-list__link ecl-link"
                 activeClassName="ecl-navigation-list__link--active"
               >
-                Logs
+                Reports
               </NavLink>
             </li>
             <li className="ecl-navigation-list__item">
               <NavLink
-                to={`${match.url}/reports`}
+                to={`${match.url}/logs`}
                 className="ecl-navigation-list__link ecl-link"
                 activeClassName="ecl-navigation-list__link--active"
               >
-                Reports
+                Logs
               </NavLink>
             </li>
           </ul>
         </nav>
-
         <Route
           exact
           path={`${match.url}`}

demo/dashboard/client/src/pages/files/file/Logs.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-underscore-dangle */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import Spinner from '../../../components/Spinner';

demo/dashboard/client/src/pages/files/file/Projects.js

@@ -0,0 +1,71 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import Collapsible from 'react-collapsible';
+import Pager from 'react-pager-component';
+import JsonView from 'react-json-view';
+
+const Listing = ({
+  current,
+  enrichmentResults,
+  onHandlePageChange,
+  pagerLength,
+  projectsEnriched,
+}) => (
+  <Fragment>
+    <p>Enriched on this page: {projectsEnriched}</p>
+    <ul className="ecl-listing">
+      {enrichmentResults.map((project, key) => {
+        const { _source: doc } = project;
+        const { title, description } = doc;
+
+        return (
+          <li className="ecl-list-item" key={key} tabIndex={key}>
+            <Collapsible trigger={title}>
+              <Fragment>
+                <p
+                  className="ecl-paragraph"
+                  dangerouslySetInnerHTML={{
+                    __html: description,
+                  }}
+                />
+                {project.enrichmentResults
+                  ? Object.keys(project.enrichmentResults).map(
+                      (enrichedProperty, i) => (
+                        <Fragment key={i}>
+                          <h3>
+                            Enrichment in <code>{enrichedProperty}</code>
+                          </h3>
+                          <JsonView
+                            collapsed={true}
+                            displayObjectSize={false}
+                            name={enrichedProperty}
+                            src={project.enrichmentResults[enrichedProperty]}
+                          />
+                        </Fragment>
+                      )
+                    )
+                  : ''}
+              </Fragment>
+            </Collapsible>
+          </li>
+        );
+      })}
+    </ul>
+    <Pager
+      length={pagerLength}
+      current={current}
+      onChange={onHandlePageChange}
+    />
+  </Fragment>
+);
+
+Listing.propTypes = {
+  current: PropTypes.number,
+  enrichmentResults: PropTypes.array,
+  onHandlePageChange: PropTypes.func,
+  pagerLength: PropTypes.number,
+  projects: PropTypes.array,
+  projectsEnriched: PropTypes.number,
+};
+
+export default Listing;