Merge branch 'master' of https://github.com/bento-platform/bento_web

bento-platform · Feb 24, 2021 · adcb89d · adcb89d
2 parents 35b7ec7 + e8a0768
commit adcb89d
Show file tree

Hide file tree

Showing 10 changed files with 186 additions and 37 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -68,6 +68,8 @@ module.exports = {
         "no-trailing-spaces": ["error"],
         "space-before-blocks": ["error", "always"],
         "eol-last": ["error", "always"],
+        "no-restricted-globals": ["error", "event"],
+        "brace-style": ["error", "1tbs"],
     },
     "settings": {
         "react": {

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -0,0 +1,23 @@
+name: CI
+on: 
+  push:
+    branches:
+      - master
+  pull_request:
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install modules
+        run: npm install
+      - name: Build
+        run: npm run build
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install modules
+        run: npm install
+      - name: Run linter
+        run: npm run lint
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Bento Web
 
-![Build Status](https://api.travis-ci.org/c3g/chord_web.svg?branch=master)
+![Build Status](https://github.com/bento-platform/bento_web/workflows/CI/badge.svg)
 
 Front end for a single Bento platform node. Written in React using Ant Design 
 components.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "query-string": "^6.13.7",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
+    "react-json-view": "^1.21.1",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-router-prop-types": "^1.0.5",

diff --git a/src/components/OverviewContent.js b/src/components/OverviewContent.js
@@ -158,12 +158,10 @@ class OverviewContent extends Component {
 
         let age = today_year - birth_year;
 
-        if ( today_month < (birth_month - 1))
-        {
+        if ( today_month < (birth_month - 1)) {
             age--;
         }
-        if (((birth_month - 1) === today_month) && (today_day < birth_date))
-        {
+        if (((birth_month - 1) === today_month) && (today_day < birth_date)) {
             age--;
         }
 
@@ -263,6 +261,7 @@ class OverviewContent extends Component {
                                     <h2>{overviewSummaryFetching ? "" : "Sexes"}</h2>
                                     <Spin spinning={overviewSummaryFetching}>
                                         <CustomPieChartWithRouter
+                                          style={{cursor: "pointer"}}
                                           data={sexLabels}
                                           chartWidthHeight={this.state.chartWidthHeight}
                                           fieldLabel={"[dataset item].subject.sex"}
@@ -458,7 +457,11 @@ class CustomPieChart extends React.Component {
         this.setState({ activeIndex: index });
     }
 
-    onLeave = (_data, _index) => {
+    onHover = (_data, _index, e) => {
+        e.target.style.cursor = "pointer";
+    }
+
+    onLeave = () => {
         this.setState({ activeIndex: undefined });
     }
 
@@ -495,28 +498,29 @@ class CustomPieChart extends React.Component {
         const { data, chartWidthHeight } = this.props;
 
         return (
-        <PieChart width={chartWidthHeight} height={chartWidthHeight/2}>
-          <Pie data={data}
-               dataKey='value'
-               cx='50%'
-               cy='50%'
-               innerRadius={40}
-               outerRadius={80}
-               label={this.renderLabel.bind(this, this.state)}
-               labelLine={true}
-               isAnimationActive={false}
-               onClick={this.onClick}
-               onMouseEnter={this.onEnter}
-               onMouseLeave={this.onLeave}
-               activeIndex={this.state.activeIndex}
-               activeShape={this.renderActiveLabel.bind(this, this.state)}
-          >
-            {
-              data.map((entry, index) =>
-              <Cell key={index} fill={COLORS[index % COLORS.length]}/>)
-            }
-          </Pie>
-        </PieChart>
+          <PieChart width={chartWidthHeight} height={chartWidthHeight/2}>
+              <Pie data={data}
+                   dataKey="value"
+                   cx="50%"
+                   cy="50%"
+                   innerRadius={40}
+                   outerRadius={80}
+                   label={this.renderLabel.bind(this, this.state)}
+                   labelLine={true}
+                   isAnimationActive={false}
+                   onClick={this.onClick}
+                   onMouseEnter={this.onEnter}
+                   onMouseLeave={this.onLeave}
+                   onMouseOver={this.onHover}
+                   activeIndex={this.state.activeIndex}
+                   activeShape={this.renderActiveLabel.bind(this, this.state)}
+              >
+                {
+                  data.map((entry, index) =>
+                  <Cell key={index} fill={COLORS[index % COLORS.length]}/>)
+                }
+              </Pie>
+          </PieChart>
         );
     }
 

diff --git a/src/components/explorer/ExplorerDatasetSearch.js b/src/components/explorer/ExplorerDatasetSearch.js
@@ -99,6 +99,11 @@ class ExplorerDatasetSearch extends Component {
 
         const numResults = (this.props.searchResults || {searchFormattedResults: []}).searchFormattedResults.length;
 
+        const tableStyle = {
+            opacity: (this.props.fetchingSearch ? 0.5 : 1),
+            pointerEvents: (this.props.fetchingSearch ? "none" : "auto")
+        };
+
         // Calculate page numbers and range
         const showingResults = numResults > 0
             ? (this.state.currentPage * this.state.pageSize) - this.state.pageSize + 1
@@ -117,6 +122,8 @@ class ExplorerDatasetSearch extends Component {
                 <Typography.Title level={4}>
                     Showing results {showingResults}-{Math.min(this.state.currentPage * this.state.pageSize,
                     numResults)} of {numResults}
+                    <Spin style={{marginLeft: "35px"}} spinning={this.props.fetchingSearch}>
+                    </Spin>
                     <div style={{float: "right", verticalAlign: "top"}}>
                         <Button icon="profile"
                                 style={{marginRight: "8px"}}
@@ -140,8 +147,7 @@ class ExplorerDatasetSearch extends Component {
                 <SearchTracksModal searchResults={this.props.searchResults}
                                    visible={this.state.tracksModalVisible}
                                    onCancel={() => this.setState({tracksModalVisible: false})} />
-                <Spin spinning={this.props.fetchingSearch}>
-                    <div style={{opacity: (this.props.fetchingSearch ? 0.5 : 1)}}>
+                    <div style={tableStyle}>
                         <Table bordered
                                disabled={this.props.fetchingSearch}
                                size="middle"
@@ -172,7 +178,6 @@ class ExplorerDatasetSearch extends Component {
                                    ],
                                }} />
                     </div>
-                </Spin>
             </> : null}
         </>;
     }

diff --git a/src/components/explorer/IndividualGenes.js b/src/components/explorer/IndividualGenes.js
@@ -8,8 +8,7 @@ import {individualPropTypesShape} from "../../propTypes";
 // TODO: Only show genes from the relevant dataset, if specified;
 //  highlight those found in search results, if specified
 
-const IndividualGenes = ({individual}) =>
-{
+const IndividualGenes = ({individual}) => {
     const genes = (individual || {}).phenopackets.flatMap(p => p.genes);
     const genesFlat = genes.flatMap(g => g.symbol);
     const ids = [{

diff --git a/src/components/explorer/IndividualOverview.js b/src/components/explorer/IndividualOverview.js
@@ -1,4 +1,5 @@
 import React from "react";
+import ReactJson from "react-json-view";
 
 import {Descriptions} from "antd";
 import "antd/es/descriptions/style/css";
@@ -8,9 +9,11 @@ import {renderOntologyTerm} from "./ontologies";
 import {individualPropTypesShape} from "../../propTypes";
 
 const IndividualOverview = ({individual}) => individual ?
-    <Descriptions bordered={true} size="middle">
+    <Descriptions layout="vertical" bordered={true} size="middle">
         <Descriptions.Item label="Date of Birth">{individual.date_of_birth || EM_DASH}</Descriptions.Item>
         <Descriptions.Item label="Sex">{individual.sex || "UNKNOWN_SEX"}</Descriptions.Item>
+        <Descriptions.Item label="Age">{individual.age || "UNKNOWN_AGE"}</Descriptions.Item>
+        <Descriptions.Item label="Ethnicity">{individual.ethnicity || "UNKNOWN_ETHNICITY"}</Descriptions.Item>
         <Descriptions.Item label="Karyotypic Sex">{individual.karyotypic_sex || "UNKNOWN_KARYOTYPE"}</Descriptions.Item>
         {/* TODO: Link to ontology term */}
         <Descriptions.Item label="Taxonomy">
@@ -20,7 +23,16 @@ const IndividualOverview = ({individual}) => individual ?
         </Descriptions.Item>
         <Descriptions.Item label="Extra Properties">{
             (individual.hasOwnProperty("extra_properties") && Object.keys(individual.extra_properties).length)
-                ?  <div><pre>{JSON.stringify(individual.extra_properties, null, 2)}</pre></div>
+                ?  <div>
+                    <pre>
+                          <ReactJson src={individual.extra_properties}
+                                     displayDataTypes={false}
+                                     name={"Properties"}
+                                     collapsed={1}
+                                     enableClipboard={false}
+                          />
+                    </pre>
+                   </div>
                 : EM_DASH
         }</Descriptions.Item>
     </Descriptions> : <div />;