PXP-2464 fix/homepage chart REST API

.eslintrc.js

@@ -59,6 +59,7 @@ module.exports = {
         "data/getTexts.js",
         "data/gqlSetup.js",
         "src/SessionMonitor/index.js",
+        "src/Index/utils.js",
       ],
       "rules": {
         "no-console": "off" // for logging errors

data/config/default.json

@@ -71,7 +71,22 @@
           "link": "/submission",
           "label": "Submit data"
         }
-      ]
+      ],
+      "homepageChartNodes": [
+        {
+          "node": "case",
+          "name": "Cases"
+        },
+        {
+          "node": "experiment",
+          "name": "Experiments"
+        },
+        {
+          "node": "aliquot",
+          "name": "Aliquots"
+        }
+      ],
+      "public": true
     },
     "navigation": {
       "title": "Generic Data Commons",

data/config/ndh.json

@@ -121,7 +121,24 @@
       "text": "The website combines government datasets from 3 divisions of NIAID to create clean, easy to navigate visualizations for data-driven discovery within Allergy and Infectious Diseases.",
       "contact": "If you have any questions about access or the registration process, please contact ",
       "email": "[email protected]"
-    }
+    },
+    "footerLogos": [
+      {
+        "src": "/src/img/gen3.png",
+        "href": "https://ctds.uchicago.edu/gen3",
+        "alt": "Gen3 Data Commons"
+      },
+      {
+        "src": "/src/img/createdby.png",
+        "href": "https://ctds.uchicago.edu/",
+        "alt": "Center for Translational Data Science at the University of Chicago"
+      },
+      {
+        "src": "/src/img/sponsors/niaid.png",
+        "href": "https://niaid.bionimbus.org",
+        "alt": "NIAID Data Hub"
+      }
+    ]
   },
   "featureFlags": {
     "explorer": true

src/Homepage/page.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { ReduxProjectDashboard, ReduxTransaction } from './reduxer';
-import getProjectsList from '../Index/relayer';
+import getProjectNodeCounts from '../Index/utils';
 import getTransactionList from './relayer';
 
 class HomePage extends React.Component {
   constructor(props) {
     super(props);
-    getProjectsList();
+    getProjectNodeCounts();
     getTransactionList();
   }
 

src/Homepage/reducers.js

@@ -1,3 +1,5 @@
+import { components } from '../params';
+
 const homepage = (state = {}, action) => {
   switch (action.type) {
   case 'RECEIVE_PROJECT_LIST': {
@@ -15,7 +17,13 @@ const homepage = (state = {}, action) => {
     );
     const lastestListUpdating = Date.now();
     // const { error, ...state } = state;
-    return { ...state, projectsByName, summaryCounts, lastestListUpdating };
+    return {
+      ...state,
+      projectsByName,
+      summaryCounts,
+      lastestListUpdating,
+      countNames: components.charts.indexChartNames,
+    };
   }
   case 'RECEIVE_PROJECT_DETAIL': {
     const projectsByName = Object.assign({}, state.projectsByName || {});
@@ -29,6 +37,72 @@ const homepage = (state = {}, action) => {
   case 'RECEIVE_RELAY_FAIL': {
     return { ...state, error: action.data };
   }
+  case 'RECEIVE_PROJECT_NODE_DATASETS': {
+    const { projectNodeCounts, homepageChartNodes, fileNodes } = action;
+    const nodesForIndexChart = homepageChartNodes.map(item => item.node);
+
+    // adding counts by node
+    const summaryCounts = nodesForIndexChart.reduce((acc, curNode, index) => {
+      Object.keys(projectNodeCounts).forEach((proj) => {
+        if (typeof projectNodeCounts[proj][curNode] !== 'undefined') {
+          acc[index] += projectNodeCounts[proj][curNode];
+        }
+      });
+      return acc;
+    }, nodesForIndexChart.map(() => 0));
+
+    // keep previous design: if less than 4 nodes, calculate all files number
+    if (nodesForIndexChart.length < 4) {
+      // add counts for all file type nodes, as the last count
+      const fileCount = fileNodes.reduce((acc, fileNode) => {
+        let newAcc = acc;
+        Object.keys(projectNodeCounts).forEach((proj) => {
+          if (typeof projectNodeCounts[proj][fileNode] !== 'undefined') {
+            newAcc += projectNodeCounts[proj][fileNode];
+          }
+        });
+        return newAcc;
+      }, 0);
+      summaryCounts.push(fileCount);
+    }
+
+    // constructing projct counts for index bar chart
+    const projectsByName = {};
+    Object.keys(projectNodeCounts).forEach((proj) => {
+      let code = proj;
+      const projCodeIndex = proj.indexOf('-');
+      if (projCodeIndex !== -1) {
+        code = proj.substring(projCodeIndex + 1);
+      }
+      let counts = 0;
+      if (typeof projectNodeCounts[proj] !== 'undefined') {
+        counts = nodesForIndexChart.map(node => projectNodeCounts[proj][node]);
+      }
+
+      if (nodesForIndexChart.length < 4) {
+        const fileCountsForProj = fileNodes.reduce((acc, fileNode) => {
+          let newAcc = acc;
+          if (typeof projectNodeCounts[proj][fileNode] !== 'undefined') {
+            newAcc += projectNodeCounts[proj][fileNode];
+          }
+          return newAcc;
+        }, 0);
+        counts.push(fileCountsForProj);
+      }
+
+      projectsByName[proj] = {
+        code,
+        counts,
+        name: proj,
+      };
+    });
+
+    const countNames = homepageChartNodes.map(item => item.name);
+    if (countNames.length < 4) {
+      countNames.push('Files');
+    }
+    return { ...state, projectsByName, summaryCounts, countNames };
+  }
   default:
     return state;
   }

src/Index/page.jsx

@@ -3,13 +3,13 @@ import Introduction from '../components/Introduction';
 import { ReduxIndexButtonBar, ReduxIndexBarChart } from './reduxer';
 import dictIcons from '../img/icons';
 import { components } from '../params';
-import getProjectsList from './relayer';
+import getProjectNodeCounts from './utils';
 import './page.less';
 
 class IndexPageComponent extends React.Component {
   constructor(props) {
     super(props);
-    getProjectsList();
+    getProjectNodeCounts();
   }
 
   render() {

src/Index/reduxer.jsx

@@ -12,7 +12,10 @@ export const ReduxIndexBarChart = (() => {
       const projectList = Object.values(
         state.homepage.projectsByName,
       ).sort(sortCompare);
-      return { projectList, countNames: components.charts.indexChartNames };
+      return {
+        projectList,
+        countNames: state.homepage.countNames,
+      };
     }
     return {};
   };

src/Index/utils.js

@@ -0,0 +1,49 @@
+import _ from 'underscore';
+import { fetchWithCreds } from '../actions';
+import { homepageChartNodes, datasetUrl } from '../localconf';
+import getReduxStore from '../reduxStore';
+import getProjectsList from './relayer';
+
+const updateRedux = async projectNodeCounts => getReduxStore().then(
+  (store) => {
+    store.dispatch({
+      type: 'RECEIVE_PROJECT_NODE_DATASETS',
+      projectNodeCounts,
+      homepageChartNodes,
+      fileNodes: store.getState().submission.file_nodes,
+    });
+  },
+  (err) => {
+    console.error('WARNING: failed to load redux store', err);
+    return 'ERR';
+  },
+);
+
+const getProjectNodeCounts = async () => {
+  if (typeof homepageChartNodes === 'undefined') {
+    getProjectsList();
+    return;
+  }
+
+  const store = await getReduxStore();
+  const fileNodes = store.getState().submission.file_nodes;
+  const nodesForIndexChart = homepageChartNodes.map(item => item.node);
+  const nodesToRequest = _.union(fileNodes, nodesForIndexChart);
+  const url = `${datasetUrl}?nodes=${nodesToRequest.join(',')}`;
+
+  fetchWithCreds({
+    path: url,
+  }).then((res) => {
+    if (res.status === 200) {
+      updateRedux(res.data);
+    } else if (res.status === 404) {
+      console.error(`REST endpoint ${datasetUrl} not enabled in Peregrine yet.`);
+      getProjectsList();
+    }
+  })
+    .catch((err) => {
+      console.log(err);
+    });
+};
+
+export default getProjectNodeCounts;

src/Login/Login.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import querystring from 'querystring';
 import PropTypes from 'prop-types'; // see https://github.com/facebook/prop-types#prop-types
 
-import { basename } from '../localconf';
+import { basename, loginPath } from '../localconf';
 import SlidingWindow from '../components/SlidingWindow';
 import './Login.less';
 
@@ -12,12 +12,22 @@ class Login extends React.Component {
   static propTypes = {
     providers: PropTypes.arrayOf(
       PropTypes.objectOf(PropTypes.any),
-    ).isRequired,
+    ),
     location: PropTypes.object.isRequired,
     dictIcons: PropTypes.object.isRequired,
     data: PropTypes.object.isRequired,
   };
 
+  static defaultProps = {
+    providers: [
+      {
+        id: 'google',
+        name: 'Google OAuth',
+        url: `${loginPath}google/`,
+      },
+    ],
+  };
+
   constructor(props) {
     super(props);
     this.state = getInitialState(window.innerHeight - 221);
@@ -68,7 +78,7 @@ class Login extends React.Component {
           <hr className='login-page__separator' />
           <div className='body-typo'>{this.props.data.text}</div>
           {
-            this.props.providers.map(
+            this.props.providers && this.props.providers.map(
               p => (
                 <div key={p.id} className='login-page__entries'>
                   <a href={`${p.url}?redirect=${window.location.origin}${next}`}>

src/Login/ProtectedContent.jsx

@@ -71,37 +71,36 @@ class ProtectedContent extends React.Component {
    * in the various ways we want it to be.
    */
   componentDidMount() {
-    if (!this.props.public) {
-      getReduxStore().then(
-        store =>
-          Promise.all(
-            [
-              store.dispatch({ type: 'CLEAR_COUNTS' }), // clear some counters
-              store.dispatch({ type: 'CLEAR_QUERY_NODES' }),
-            ],
-          ).then(
-            () => this.checkLoginStatus(store, this.state)
-              .then(newState => this.checkQuizStatus(newState))
-              .then(newState => this.checkApiToken(store, newState)),
-          ).then(
-            (newState) => {
-              const filterPromise = (newState.authenticated
-                && typeof this.props.filter === 'function')
-                ? this.props.filter()
-                : Promise.resolve('ok');
-              // finally update the component state
-              const finish = () => {
-                const latestState = Object.assign({}, newState);
-                latestState.dataLoaded = true;
-                this.setState(latestState);
-              };
-              return filterPromise.then(
-                finish, finish,
-              );
-            },
-          ),
-      );
-    } else {
+    getReduxStore().then(
+      store =>
+        Promise.all(
+          [
+            store.dispatch({ type: 'CLEAR_COUNTS' }), // clear some counters
+            store.dispatch({ type: 'CLEAR_QUERY_NODES' }),
+          ],
+        ).then(
+          () => this.checkLoginStatus(store, this.state)
+            .then(newState => this.props.public || this.checkQuizStatus(newState))
+            .then(newState => this.props.public || this.checkApiToken(store, newState)),
+        ).then(
+          (newState) => {
+            const filterPromise = (!this.props.public && newState.authenticated
+              && typeof this.props.filter === 'function')
+              ? this.props.filter()
+              : Promise.resolve('ok');
+            // finally update the component state
+            const finish = () => {
+              const latestState = Object.assign({}, newState);
+              latestState.dataLoaded = true;
+              this.setState(latestState);
+            };
+            return filterPromise.then(
+              finish, finish,
+            );
+          },
+        ),
+    );
+    if (this.props.public) {
       getReduxStore().then(
         (store) => {
           const filterPromise = (