Merge pull request #839 from CaitlinOCallaghan/inputErrorCheck

Functional Invalid Token Checking Enrichment #813 , #815

Author: jvwong

package-lock.json

@@ -78,6 +78,7 @@
     "react-router-dom": "^4.2.2",
     "react-table": "^6.7.4",
     "react-tabs": "^2.1.1",
+    "react-textarea-autosize": "^6.1.0",
     "rethinkdb": "^2.3.3",
     "sbgnml-to-cytoscape": "^4.0.4",
     "serve-favicon": "^2.4.5",

package.json

@@ -77,6 +77,7 @@ class BaseNetworkView extends React.Component {
     layout.run();
   }
 
+
   changeMenu(menu) {
     let resizeCyImmediate = () => this.state.cy.resize();
     let resizeCyDebounced = _.debounce( resizeCyImmediate, 500 );
@@ -187,7 +188,7 @@ class BaseNetworkView extends React.Component {
     // if 'titleContainer' exists from index file, unique title will render in 'div.title-container'
     // default: metadata pathway name and database
     const displayInfo = [
-      (this.props.titleContainer ?  this.props.titleContainer : metadataTitles)
+      (this.props.titleContainer ?  this.props.titleContainer() : metadataTitles)
     ];
 
 
@@ -203,7 +204,7 @@ class BaseNetworkView extends React.Component {
           ]),
           h('div.title-container', displayInfo)
         ]),
-        h('div.view-toolbar', toolBar)
+        h('div.view-toolbar', {style: {display: this.props.closeToolBar == true ? 'none': 'inherit'}}, toolBar)
       ]),
       h(Loader, {
         loaded: !this.state.networkLoading,

src/client/common/components/base-network-view/base-network-view.js

@@ -1,15 +1,16 @@
 const React = require('react');
 const h = require('react-hyperscript');
-//const queryString = require('query-string');
 const _ = require('lodash');
 //const Loader = require('react-loader');
+//const queryString = require('query-string');
 
 // const hideTooltips = require('../../common/cy/events/click').hideTooltips;
 // const removeStyle= require('../../common/cy/manage-style').removeStyle;
-// const make_cytoscape = require('../../common/cy/');
+const make_cytoscape = require('../../common/cy/');
 // const interactionsStylesheet= require('../../common/cy/interactions-stylesheet');
+const TokenInput = require('./token-input');
 const { BaseNetworkView } = require('../../common/components');
-//const { getLayoutConfig } = require('../../common/cy/layout');
+const { getLayoutConfig } = require('../../common/cy/layout');
 //const downloadTypes = require('../../common/config').downloadTypes;
 
 const enrichmentConfig={
@@ -20,61 +21,81 @@ const enrichmentConfig={
   useSearchBar: true
 };
 
+//temporary empty network for development purposes
+const emptyNetwork = {
+  graph: {
+    edges: [],
+    nodes: [],
+    pathwayMetadata: {
+      title: [],
+      datasource: [],
+      comments: []
+    },
+    layout: null
+  }
+};
+const network = emptyNetwork;
+const layoutConfig = getLayoutConfig();
+
 class Enrichment extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      cy: make_cytoscape({headless: true}),
       componentConfig: enrichmentConfig,
-      networkMetadata: {
-        name: '',
-        datasource: '',
-        comments: []
-      },
-      query: '',
-      titleContainer: []
+      layoutConfig: layoutConfig,
+      networkJSON: network.graph,
+      networkMetadata: network.graph.pathwayMetadata,
+
+      //temporarily set to false so loading spinner is disabled
+      networkLoading: false,
+
+      closeToolBar: true,
+      //all submitted tokens, includes valid and invalid tokens
+      genes: [],
+      unrecognized: [],
+      inputs: ""
     };
+
+    this.handleInputs = this.handleInputs.bind(this);
+    this.handleUnrecognized = this.handleUnrecognized.bind(this);
+    this.handleGenes = this.handleGenes.bind(this);
+  }
+
+  handleInputs( inputs ) {
+    this.setState({ inputs });
   }
 
-  geneInputChange(e) {
-    this.setState( {query: e.target.value});
+  handleUnrecognized( unrecognized ) {
+    this.setState({ unrecognized });
   }
 
-  geneInputSubmission(input){
-    const geneArray = input.split(/\n/g);
-    const inputObject = {genes: _.pull(geneArray,"")};
-    //console.log(geneArray);
-    //console.log(inputObject.genes);
-    //console.log(ServerAPI.geneQuery(inputObject));
-    return inputObject.genes;
+  handleGenes( genes ) {
+    this.setState( { genes } );console.log(genes);
   }
 
   render() {
-    const state = this.state;
-    const baseView = h(BaseNetworkView.component, {
-      componentConfig: state.componentConfig,
-      //titles at top of toolbar
-      networkMetadata: {},
-      titleContainer: [
-        h('h4', [
-          h('span', 'Pathway Enrichment   '),]),
-          h('img', {
-            src: '/img/humanIcon.png'
-            }),
-          h('textarea.gene-input', {
-             placeholder: 'Enter one gene per line',
-             onChange: e => this.geneInputChange(e),
-             onKeyPress: e => this.geneInputChange(e)
-          }),
-          h('submit-container', {onClick: () => this.geneInputSubmission(this.state.query) },[
-          h('button.submit', 'Submit'),
-          ])
-      ]
+    let { cy, componentConfig, layoutConfig, networkJSON, networkMetadata, networkLoading } = this.state;
+    let retrieveTokenInput = () => h(TokenInput,{
+      inputs: this.state.inputs,
+      handleInputs: this.handleInputs,
+      handleUnrecognized: this.handleUnrecognized,
+      unrecognized: this.state.unrecognized,
+      handleGenes: this.handleGenes
+    });
+
+    return h(BaseNetworkView.component, {
+      cy,
+      componentConfig,
+      layoutConfig,
+      networkJSON,
+      networkMetadata,
+      networkLoading,
+      titleContainer: () => h(retrieveTokenInput),
+      //will use state to set to false to render the toolbar once analysis is run and graph is displayed
+      closeToolBar: true
     });
-    //console.log(this.state.query);
-    return h('div.main', [baseView]);
   }
 }
-module.exports = Enrichment;
 
-//NOTE: CURRENTLY ONLY RENDERS ON PAGE WHEN base-network-view.js function 'componentDidMount(){}'
-//      IS COMMENTED OUT
+module.exports = Enrichment;

src/client/features/enrichment/index.js

@@ -0,0 +1,80 @@
+const React = require('react');
+const h = require('react-hyperscript');
+const _ = require('lodash');
+const { ServerAPI } = require('../../services/');
+let Textarea = require('react-textarea-autosize').default;
+
+class TokenInput extends React.Component {
+
+  constructor(props) {
+    super(props);
+    // Note on input contents: Set the initial value here from parent
+    // in order to maintain contents on re-render.
+    this.state = {
+      inputBoxContents: this.props.inputs
+    };
+  }
+  //store 'gene-input-box' contents on state
+  handleChange(e) {
+    this.setState({inputBoxContents: e.target.value});
+  }
+
+  //call validation service API to retrieve validation result in the form of []
+  retrieveValidationAPIResult(){
+    let tokenList = _.pull(this.state.inputBoxContents.split(/\s/g), "");
+     ServerAPI.enrichmentAPI({
+       genes: tokenList,
+       targetDb: "HGNCSYMBOL"
+      }, "validation")
+    .then( result => {
+      const aliases = result.geneInfo.map( value => {
+        return value.convertedAlias;
+      });
+      this.props.handleGenes( aliases );
+      this.props.handleUnrecognized( result.unrecognized );
+      this.props.handleInputs( this.state.inputBoxContents );
+    })
+    .catch(
+      error => error
+    );
+  }
+
+  render() {
+
+    const unrecognized = this.props.unrecognized;
+
+    return h('div.enrichmentInput', [
+        h('h4', [
+          h('span', 'Pathway Enrichment   ')
+        ]),
+        h('img', {
+          src: '/img/humanIcon.png'
+        }),
+        h('div.gene-input-container', [
+          h(Textarea, {
+            className: 'gene-input-box',
+            placeholder: 'Enter one gene per line',
+            value: this.state.inputBoxContents,
+            onChange: (e) => this.handleChange(e)
+          })
+        ]),
+        h('submit-container', {
+          onClick: () => { this.retrieveValidationAPIResult();} },
+          [h('button.submit', 'Submit')]
+        ),
+        h('div.unrecognized-token-container',[
+          h(Textarea, {
+            className:'unrecognized-tokens-feedback',
+            value: "Unrecognized Tokens: \n" + unrecognized.join("\n"),
+            readOnly: true,
+            //if unrecognizedTokens is its default value (ie no tokens have been added), feedback box not displayed
+            style: {display: _.isEmpty( unrecognized ) ? 'none' : 'block' }
+          })
+        ])
+    ]);
+  }
+}
+
+module.exports = TokenInput;
+
+

src/client/features/enrichment/token-input.js

@@ -55,12 +55,16 @@
     margin: 0;
     margin-top: 5px;
   }
-    /* css for human icon */
-    & img {
-      margin-top: 2px;
-      height: var(--icon-size);
-      width: auto;
-    }
+  /* css for human icon */
+  & img {
+  margin-top: 2px;
+  height: var(--icon-size);
+  width: auto;
+  }
+}
+
+.enrichmentInput {
+  display: flex;
 }
 
 .sidebar-tool-button-container {
@@ -148,18 +152,60 @@ _::-webkit-full-page-media, _:future, :root .view-toolbar{
   padding: 0 0 1px 0 !important;
   border-width: 0px !important;
 }
-
-.gene-input{
+.gene-input-container{
   height: 1.85em;
   width: 200px;
+}
+
+.gene-input-box{
+  min-height: 1.85em;
+  max-height: 80%;
+  width: 200px;
   background-color: white;
   padding: 0em 0.5em;
   box-sizing: border-box;
   border: 1px solid var(--light-base-colour-dark);
-  border-right: none;
-  vertical-align: middle;
+  border-radius: 0 !important;
   font-weight: normal;
+  position: fixed;
+  vertical-align: middle;
+  z-index: 1;
+  overflow-y:scroll;
+  line-height: 1.8;
+  resize: none;
+}
+
+.gene-input-box:empty:not(:focus):before {
+  content: attr(placeholder);
+}
+
+.unrecognized-token-container{
+  @extend %flex-center;
+
+  min-width: 200px;
+  position: absolute;
+  top: 100%;
+  left: -1px;
+}
+
+.unrecognized-tokens-feedback{
+  min-height: 1.85em;
+  max-height: 628px;
+  width: 200px;
+  background-color: white;
+  padding: 0em 0.5em;
+  border: 1px solid var(--light-base-colour-dark);
   border-radius: 0 !important;
+  font-weight: normal;
+  vertical-align: middle;
+  z-index: 1;
+  overflow-y:scroll;
+  line-height: 1.8;
+  resize: none;
+}
+
+.unrecognized-tokens-feedback:empty{
+  display:none;
 }
 
 /* submit button for gene input */