PXD-1221 Hooked up filters, table, charts to Arranger (#320)

* WIP

* WIP

* reusable arranger wrapper

* charts on the page:

* PXD-1221 chart and arranger config in params

* updated README for Arranger, added font awesome, moved charts to helper funcs

* helper tests

* Code clean up

* linting

* fix Data Explorer table in storybook

* refactored css

* linting

* fixed proptypes

* Codacy

* Travis testSchema

* Codacy again

* Travis/Dockerfile changes - node 10

* Renamed some things

* see if this makes travis pass

* cmon Travis

* removed table buttons, made explorer protected content

* one last try

* font awesome import fix

* typo

* Update README.md

* more detailed story, skip tests with Arranger for Travis

* PR comment -updated gen3-arranger steps

* Docs about ArrangerWrapper

.storybook/config.js

@@ -5,8 +5,9 @@ function loadStories() {
   require('../src/stories/buttons.jsx');
   require('../src/stories/charts.jsx');
   require('../src/stories/tables.jsx');
+  require('../src/stories/cards.jsx')
+  require('../src/stories/explorer.jsx');
   require('../src/stories/filters.jsx');
-  require('../src/stories/cards.jsx');
 }
 
 configure(loadStories, module);

.storybook/webpack.config.js

@@ -1,5 +1,11 @@
 const path = require('path');
 const basename = process.env.BASENAME || '/';
+const webpack = require('webpack');
+
+const plugins = [
+  new webpack.EnvironmentPlugin(['STORYBOOK_PROJECT_ID']),
+  new webpack.EnvironmentPlugin(['STORYBOOK_ARRANGER_API']),
+];
 
 module.exports = {
   entry: ['babel-polyfill', '../src/index.jsx'],
@@ -44,6 +50,7 @@ module.exports = {
       { test: /\.flow$/, loader: 'ignore-loader' },
     ]
   },
+  plugins,
   resolve: {
     alias: {
       graphql:  path.resolve('./node_modules/graphql'),

.travis.yml

@@ -2,7 +2,7 @@ language: node_js
 git:
   depth: 1
 node_js:
-  - "8"
+  - "10"
 
 cache:
   directories:

Dockerfile

@@ -1,4 +1,4 @@
-# To run: docker run -d --name=dataportal -p 80:80 quay.io/cdis/data-portal 
+# To run: docker run -d --name=dataportal -p 80:80 quay.io/cdis/data-portal
 # To check running container: docker exec -it dataportal /bin/bash
 
 FROM ubuntu:16.04
@@ -13,30 +13,31 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
     nginx \
     python \
     vim \
-    && curl -sL https://deb.nodesource.com/setup_8.x | bash - \ 
+    && curl -sL https://deb.nodesource.com/setup_10.x | bash - \
     && apt-get install -y --no-install-recommends nodejs \
+    && rm -rf /var/lib/apt/lists/* \
     && ln -sf /dev/stdout /var/log/nginx/access.log \
     && ln -sf /dev/stderr /var/log/nginx/error.log
 
 ARG APP=dev
 ARG BASENAME
 
-RUN mkdir -p /data-portal 
+RUN mkdir -p /data-portal
 COPY . /data-portal
 WORKDIR /data-portal
 RUN COMMIT=`git rev-parse HEAD` && echo "export const portalCommit = \"${COMMIT}\";" >src/versions.js \
     && VERSION=`git describe --always --tags` && echo "export const portalVersion =\"${VERSION}\";" >>src/versions.js \
     && /bin/rm -rf .git \
     && /bin/rm -rf node_modules \
-    && npm install \
+    && npm ci \
     && npm run relay \
     && npm run params \
     && NODE_ENV=production ./node_modules/.bin/webpack --bail \
     && cp nginx.conf /etc/nginx/conf.d/nginx.conf \
     && rm /etc/nginx/sites-enabled/default
 
 # In standard prod these will be overwritten by volume mounts
-# Provided here for ease of use in development and 
+# Provided here for ease of use in development and
 # non-standard deployment environments
 
 RUN mkdir /mnt/ssl \

README.md

@@ -32,6 +32,32 @@ npm run relay
 ```
 Then browse to http://localhost:8080/webpack-dev-server/ . Since we are running it without APIs, this will only render static pages but any submission actions to APIs will fail.
 
+To run Storybook:
+`npm run storybook`
+
+To run with Arranger components:
+1. Set local environment variables:
+  - $STORYBOOK_ARRANGER_API: localhost:3000
+  - $STORYBOOK_PROJECT_ID: search
+  - $REACT_APP_ARRANGER_API: /api/v0/flat-search
+  - $REACT_APP_PROJECT_ID: search
+2. Run ElasticSearch at localhost:9200
+3. Clone and `cd` into `gen3-arranger`. Run:
+```cd Docker/Stacks
+docker-compose -f esearch.yml up -d
+export ESHOST=localhost:9200
+source esearch/indexSetup.sh
+es_indices
+es_delete_all
+es_setup_index
+es_gen_data 0 20
+```
+4. Follow the [Arranger](https://github.com/overture-stack/arranger) setup steps - run the server and the dashboard.
+5. At the Arranger Dashboard (localhost:6060), add a new version called 'dev'.
+6. Click on 'dev' and add a new index. Name: subject, Index: gen3-dev-subject, ES Type: subject.
+7. Go back to Versions and hit the lightning bolt. The endpoint should go from a red arrow to a green arrow.
+8. At this point, running the Data Portal from our Storybook should work.
+
 ### Docker Build for Local Development
 Build the container image first
 ```

data/parameters.js

@@ -1384,69 +1384,45 @@ const params = {
         contact: 'If you have any questions about access or the registration process, please contact ',
         email: 'support@datacommons.io',
       },
-      dataExplorerTableProperties: {
-        tableConfig: {
-          timestamp: '2018-01-12T16:42:07.495Z',
-          type: 'subjects',
-          keyField: 'name',
-          defaultSorted: [{ id: 'name', desc: false }],
-          columns: [
-            {
-              show: true,
-              Header: 'Case.ID',
-              type: 'string',
-              sortable: true,
-              canChangeShow: true,
-              accessor: 'name',
-            },
-            {
-              show: true,
-              Header: 'Project',
-              type: 'string',
-              sortable: true,
-              canChangeShow: true,
-              accessor: 'project',
-            },
-            {
-              show: true,
-              Header: 'Study',
-              type: 'string',
-              sortable: true,
-              canChangeShow: true,
-              accessor: 'study',
-            },
-            {
-              show: true,
-              Header: 'Gender',
-              type: 'string',
-              sortable: true,
-              canChangeShow: true,
-              accessor: 'gender',
-            },
-            {
-              show: true,
-              Header: 'Ethnicity',
-              type: 'string',
-              sortable: true,
-              canChangeShow: true,
-              accessor: 'ethnicity',
-            },
-            {
-              show: true,
-              Header: 'Race',
-              type: 'string',
-              sortable: true,
-              canChangeShow: true,
-              accessor: 'race',
-            },
-          ],
-        },
-        graphqlQuery: '{ subject { hits { edges { node { name, project, study, gender, ethnicity, race, file_type }}}}}',
-      },
     },
     featureFlags: {
       explorer: true,
     },
+    arrangerConfig: {
+      charts: {
+        project: {
+          chartType: 'count',
+          title: 'Projects',
+        },
+        study: {
+          chartType: 'count',
+          title: 'Studies',
+        },
+        file_type: {
+          chartType: 'count',
+          title: 'File Types',
+        },
+        ethnicity: {
+          chartType: 'stackedBar',
+          title: 'Ethnicity',
+        },
+        gender: {
+          chartType: 'pie',
+          title: 'Gender',
+        },
+        race: {
+          chartType: 'pie',
+          title: 'Race',
+        },
+        vital_status: {
+          chartType: 'bar',
+          title: 'Vital Status',
+        },
+      },
+      projectId: 'search',
+      graphqlField: 'subject',
+      index: '',
+    },
   },
 };