refs #25 Example builder added.

frontend/client/components/SearchPanel/ExampleQueries.jsx

@@ -0,0 +1,77 @@
+import React, {Component} from 'react'
+import SelectField from 'material-ui/SelectField'
+import MenuItem from 'material-ui/MenuItem'
+
+const style = {
+  color: '#777777',
+  width: '90%',
+}
+
+const selectedStyle = {
+  color: '333333',
+  fontWeight: 500,
+  fontSize: '0.8em'
+}
+
+
+const EXAMPLES = {
+  'example0': {
+    label: 'Select an example:',
+    type: '',
+    value: ''
+  },
+  'example1': {
+    label: 'Growth: Delete REV7 and RAD57',
+    type: 'growth',
+    value: 'REV7 RAD57'
+  },
+  'example2': {
+    label: 'Genetic Interaction: Delete CYT1 and COX7',
+    type: 'genetic_interaction',
+    value: 'CYT1 COX7'
+  }
+}
+
+
+class ExampleQueries extends Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      value: 'example0'
+    }
+  }
+
+  handleChange = (event, index, value) => {
+    this.setState({
+      value: value
+    })
+
+    if(value === 'example0') {
+      return
+    } else {
+      this.props.resetSelectionAction()
+      this.props.queryOptionAction(EXAMPLES[value].type)
+      this.props.setQueryAction(EXAMPLES[value].value)
+    }
+  }
+
+  render = () => (
+    <SelectField
+      value={this.state.value}
+      labelStyle={selectedStyle}
+      style={style}
+      onChange={this.handleChange}
+      floatingLabelText="Simulation Examples"
+      floatingLabelStyle={{color: '#999999', fontWeight: 300}}
+    >
+
+      <MenuItem key={1} value='example0' primaryText={EXAMPLES.example0.label}/>
+      <MenuItem key={2} value='example1' primaryText={EXAMPLES.example1.label}/>
+      <MenuItem key={3} value='example2' primaryText={EXAMPLES.example2.label}/>
+
+    </SelectField>
+  )
+}
+
+export default ExampleQueries

frontend/client/components/SearchPanel/ExampleTermSearch.jsx

@@ -0,0 +1,74 @@
+import React, {Component} from 'react'
+import SelectField from 'material-ui/SelectField'
+import MenuItem from 'material-ui/MenuItem'
+
+const style = {
+  color: '#777777',
+  width: '90%',
+}
+
+const selectedStyle = {
+  color: '333333',
+  fontWeight: 500,
+  fontSize: '0.8em'
+}
+
+
+const EXAMPLES = {
+  'example0': {
+    label: 'Select an example:',
+    value: ''
+  },
+  'example1': {
+    label: 'Search terms related to DNA Repair',
+    value: 'DNA Repair'
+  },
+  'example2': {
+    label: 'Find terms associated with COX7',
+    value: 'COX7'
+  }
+}
+
+
+class ExampleTermSearch extends Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      value: 'example0'
+    }
+  }
+
+  handleChange = (event, index, value) => {
+    this.setState({
+      value: value
+    })
+
+    if(value === 'example0') {
+      return
+    } else {
+      const val = EXAMPLES[value].value
+      this.props.setQueryAction(val)
+      this.props.searchAction(val)
+    }
+  }
+
+  render = () => (
+    <SelectField
+      value={this.state.value}
+      labelStyle={selectedStyle}
+      style={style}
+      onChange={this.handleChange}
+      floatingLabelText="Subsystem Search Examples:"
+      floatingLabelStyle={{color: '#999999', fontWeight: 300}}
+    >
+
+      <MenuItem key={1} value='example0' primaryText={EXAMPLES.example0.label}/>
+      <MenuItem key={2} value='example1' primaryText={EXAMPLES.example1.label}/>
+      <MenuItem key={3} value='example2' primaryText={EXAMPLES.example2.label}/>
+
+    </SelectField>
+  )
+}
+
+export default ExampleTermSearch

frontend/client/components/SearchPanel/GeneList.jsx

@@ -26,7 +26,7 @@ class GeneList extends Component {
   render() {
     return (
       <List style={listStyle}>
-        <Subheader>Search Result</Subheader>
+        <Subheader>Search Result (Click to select genotype)</Subheader>
         {this.getGene(this.props.hits)}
       </List>
     )

frontend/client/components/SearchPanel/SearchTab.jsx

@@ -13,6 +13,8 @@ import GenotypePanel from './GenotypePanel'
 import GeneList from './GeneList'
 
 import SimulationTypeSelector from './SimulationTypeSelector'
+import ExampleQueries from './ExampleQueries'
+
 
 const searchUiStyle = {
   display: 'flex',
@@ -83,8 +85,6 @@ class SearchTab extends Component {
     } else {
       this.state.enabledButton = ''
     }
-
-
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -97,14 +97,17 @@ class SearchTab extends Component {
     }
   }
 
+  search = (q) => {
 
-  search = () => {
+    let query = this.state.query
+    if(q !== undefined) {
+      query = q
+    }
 
     this.setState({
       noSearchYet: false
     })
 
-    const query = this.state.query
     const options = {
       index: 'genes',
       type: 'gene'
@@ -129,6 +132,13 @@ class SearchTab extends Component {
     });
   }
 
+  setQuery = (query) => {
+    this.setState({
+      query: query
+    });
+    this.search(query)
+  }
+
   handleKey = event => {
     if (event.key === 'Enter') {
       this.search()
@@ -155,8 +165,14 @@ class SearchTab extends Component {
     return (
       <div style={this.props.style}>
 
+        <ExampleQueries
+          setQueryAction={this.setQuery}
+          queryOptionAction={this.setQueryOption}
+          resetSelectionAction={this.resetSelection}
+        />
 
         <SimulationTypeSelector
+          queryOption={this.state.queryOption}
           queryOptionAction={this.setQueryOption}
         />
 

frontend/client/components/SearchPanel/SimulationTypeSelector.jsx

@@ -16,23 +16,13 @@ const selectedStyle = {
 class SimulationTypeSelector extends Component {
 
 
-  constructor(props) {
-    super(props)
-    this.state = {
-      value: 'genetic_interaction'
-    }
-  }
-
   handleChange = (event, index, value) => {
-    this.setState({
-      value: value
-    })
     this.props.queryOptionAction(value)
   }
 
   render = () => (
     <SelectField
-      value={this.state.value}
+      value={this.props.queryOption}
       labelStyle={selectedStyle}
       style={style}
       onChange={this.handleChange}

frontend/client/components/SearchPanel/TermSearchPanel.jsx

@@ -18,6 +18,7 @@ import TextField from 'material-ui/TextField';
 import style from './style.css'
 
 import StructureSelectorPanel from './StructureSelectorPanel'
+import ExampleTermSearch from './ExampleTermSearch'
 
 import Avatar from 'material-ui/Avatar';
 
@@ -61,7 +62,7 @@ class TermSearchPanel extends Component {
   }
 
 
-  search = () => {
+  search = q => {
 
     const options = this.props.trees[this.props.currentNetwork.id].searchOptions
 
@@ -71,6 +72,9 @@ class TermSearchPanel extends Component {
     })
 
     let query = this.state.query
+    if(q !== undefined) {
+      query = q
+    }
 
     // Special case: exact match for CLIXO
     if(query !== undefined && query !== null && query != '') {
@@ -101,6 +105,12 @@ class TermSearchPanel extends Component {
     });
   }
 
+  setQuery = query => {
+    this.setState({
+      query: query
+    });
+  }
+
   handleKey = event => {
     if (event.key === 'Enter') {
       this.search()
@@ -150,6 +160,11 @@ class TermSearchPanel extends Component {
     return (
       <div style={this.props.style}>
 
+        <ExampleTermSearch
+          setQueryAction={this.setQuery}
+          searchAction={this.search}
+        />
+
         <StructureSelectorPanel
           trees={this.props.trees}
           currentNetwork={this.props.currentNetwork}

frontend/client/components/SubTreePanel/index.jsx

@@ -2,6 +2,9 @@ import React, {Component} from 'react';
 import {Card, CardActions, CardHeader} from 'material-ui/Card';
 import RaisedButton from 'material-ui/RaisedButton';
 
+
+import style from './style.css'
+
 import {TreeViewer, DAGViewer} from 'tree-viewer'
 import Loading from '../Loading'
 const loaderStyle = {
@@ -104,7 +107,7 @@ class SubTreePanel extends Component {
     }
 
     return (
-      <div>
+      <div className={style.container}>
         <div style={titleStyle}>
           {"Deleted Genes: " + genotype}
         </div>

frontend/client/components/SubTreePanel/style.css

@@ -0,0 +1,8 @@
+.container {
+    animation: fadeIn 1s ease 0s 1 normal;
+}
+
+@keyframes fadeIn {
+    0% {opacity: 0}
+    100% {opacity: 1}
+}