Skip to content

Commit

Permalink
refs #27 label added for output node
Browse files Browse the repository at this point in the history
  • Loading branch information
@keiono
keiono committed Aug 22, 2017
1 parent a7b5ae2 commit dd276c2
Show file tree
Hide file tree
Showing 8 changed files with 923 additions and 857 deletions.
1,590 changes: 813 additions & 777 deletions backend/webserver/static/app/bundle.js
View file

Large diffs are not rendered by default.

12 changes: 7 additions & 5 deletions frontend/client/actions/query-genes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,24 @@ const client = new Client({

export const RUN_SIMULATION = 'RUN_SIMULATION'

const runSimulation = (serviceUrl, genesMap) => {
const runSimulation = (serviceUrl, queryType, genesMap) => {

return {
type: RUN_SIMULATION,
serviceUrl,
queryType,
genes: genesMap
}
}


export const RECEIVE_SIMULATION_RESULT = 'RECEIVE_SIMULATION_RESULT'
const receiveSimulationResult = (serviceUrl, genesMap, json) => {
const receiveSimulationResult = (serviceUrl, queryType, genesMap, json) => {

return {
type: RECEIVE_SIMULATION_RESULT,
serviceUrl,
queryType,
genes: genesMap,
result: json
}
Expand Down Expand Up @@ -114,10 +116,10 @@ export const pivot = (currentDag, serviceUrl, termId) => {

}

export const runDeletion = (serviceUrl, genesMap, geneMap) => {
export const runDeletion = (serviceUrl, queryType, genesMap, geneMap) => {

return dispatch => {
dispatch(runSimulation(serviceUrl, genesMap))
dispatch(runSimulation(serviceUrl, queryType, genesMap))

return fetchResult(serviceUrl, genesMap)
.then(response => {
Expand Down Expand Up @@ -148,7 +150,7 @@ export const runDeletion = (serviceUrl, genesMap, geneMap) => {
.then(json2 => {
console.log(json2)

return dispatch(receiveSimulationResult(serviceUrl, genesMap, json))
return dispatch(receiveSimulationResult(serviceUrl, queryType, genesMap, json))
})
})
}
Expand Down
90 changes: 25 additions & 65 deletions frontend/client/components/NetworkPanel/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@ class NetworkPanel extends Component {
}, {
"selector": "node:selected",
"css": {
"background-color": "red",
"background-color": "#FF6666",
"font-size": '3em',
"color": "red",
"text-opacity": 0.7,
Expand All @@ -232,9 +232,9 @@ class NetworkPanel extends Component {
}, {
"selector": "edge",
"css": {
"width": 10.0,
'opacity': 0.6,
"line-color": "#555555",
"width": 20.0,
'opacity': 1,
"line-color": "#111111",
}
}, {
"selector": "edge:selected",
Expand All @@ -254,17 +254,17 @@ class NetworkPanel extends Component {
"text-valign": "center",
"text-halign": "right",
"shape": "ellipse",
"color": "#000000",
"color": "#66666a",
"background-color": "rgb(200,200,206)",
"height": 'mapData(geneCount, 1, 6000, 120, 2500)',
"width": 'mapData(geneCount, 1, 6000, 120, 2500)',
"height": 'mapData(geneCount, 1, 6000, 140, 2000)',
"width": 'mapData(geneCount, 1, 6000, 140, 2000)',
"content": "data(name)",
"min-zoomed-font-size": '0.4em',
"font-size": 'mapData(geneCount, 1, 6000, 70, 1200)',
"text-opacity": 1,
'text-wrap': 'wrap',
'text-max-width': '30000',
// 'text-margin-x': '20',
'text-margin-x': '20',
'z-index': 1
}
}, {
Expand All @@ -283,60 +283,35 @@ class NetworkPanel extends Component {
'font-size': ele => (3200 / (ele.data('pLen'))),
}
}, {
// "selector": "node[namespace = 'biological_process']",
// "css": {
// "background-color": "rgb(0,153,204)",
// }
// }, {
// "selector": "node[namespace = 'cellular_component']",
// "css": {
// "background-color": "rgb(255,102,0)",
// }
// }, {
// "selector": "node[namespace = 'molecular_function']",
// "css": {
// "background-color": "rgb(0,204,153)",
// }
// }, {
// "selector": "node[name = 'biological_process']",
// "css": {
// "color": "rgb(0,153,204)",
// "label": "Biological Process"
// }
// }, {
// "selector": "node[name = 'cellular_component']",
// "css": {
// "color": "rgb(255,102,0)",
// "label": "Cellular Component"
// }
// }, {
// "selector": "node[name = 'molecular_function']",
// "css": {
// "color": "rgb(0,204,153)",
// "label": "Molecular Function"
// }
// }, {
"selector": "node[type = 'r']",
"css": {
'font-size': '520em',
'label': 'Root'
'font-size': '300em',
'width': 10000,
'height': 10000,
"text-valign": "center",
"text-halign": "center",
'label': 'Cell',
'border-width': 400,
'border-color': '#555555',
'background-color': '#FFFFFF'
}
}, {
"selector":
"node[id = 'GO:0008150'], " +
"node[id = 'GO:0003674'], " +
"node[id = 'GO:0005575']",
"css": {
'font-size': '300em',
'font-size': '200em',
"text-valign": "top",
'text-opacity': '0.6'
}
}, {
"selector": "node:selected",
"css": {
"background-color": "red",
"font-size": '60em',
"font-size": '50em',
"color": "red",
"text-opacity": 0.8,
"text-opacity": 0.9,
'z-index': 999,
"min-zoomed-font-size": 0,
'width': 325,
Expand All @@ -345,30 +320,15 @@ class NetworkPanel extends Component {
}, {
"selector": "edge",
"css": {
"width": 20.0,
'opacity': 0.7,
"line-color": "rgb(100,100,100)",
"width": 50.0,
'opacity': 1,
"line-color": "#000000",
}
}, {
// "selector": "edge[branch = 'CC']",
// "css": {
// "line-color": "rgb(255,102,0)"
// }
// }, {
// "selector": "edge[branch = 'MF']",
// "css": {
// "line-color": "rgb(0,204,102)"
// }
// }, {
// "selector": "edge[branch = 'BP']",
// "css": {
// "line-color": "rgb(0,153,204)"
// }
// }, {
"selector": "edge:selected",
"css": {
"line-color": "red",
"width": 180,
"width": 200,
'opacity': 1
}
}, {
Expand Down
6 changes: 3 additions & 3 deletions frontend/client/components/SearchPanel/ExampleTermSearch.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import SelectField from 'material-ui/SelectField'
import MenuItem from 'material-ui/MenuItem'

const style = {
color: '#777777',
width: '90%',
color: '#555555',
width: '90%'
}

const selectedStyle = {
Expand Down Expand Up @@ -60,7 +60,7 @@ class ExampleTermSearch extends Component {
style={style}
onChange={this.handleChange}
floatingLabelText="Subsystem Search Examples:"
floatingLabelStyle={{color: '#999999', fontWeight: 300}}
floatingLabelStyle={{color: 'teal', fontWeight: 500}}
>

<MenuItem key={1} value='example0' primaryText={EXAMPLES.example0.label}/>
Expand Down
21 changes: 15 additions & 6 deletions frontend/client/components/SearchPanel/SearchTab.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,12 +78,21 @@ class SearchTab extends Component {
return
}

this.state.runDisabled = (selectedGeneCount < 2)

if (this.state.runDisabled == false) {
this.state.enabledButton = style.blinkbutton
if(selectedGeneCount >= 1 && this.state.queryOption === 'growth') {
this.setState({
runDisabled: false,
enabledButton: style.blinkbutton
})
} else if(selectedGeneCount < 2) {
this.setState({
runDisabled: true,
enabledButton: ''
})
} else {
this.state.enabledButton = ''
this.setState({
runDisabled: false,
enabledButton: style.blinkbutton
})
}
}

Expand Down Expand Up @@ -293,7 +302,7 @@ class SearchTab extends Component {

console.log(url)

this.props.queryGenesActions.runDeletion(url, genesMap, geneMap)
this.props.queryGenesActions.runDeletion(url, this.state.queryOption, genesMap, geneMap)

this.setState({
explainDisabled: false
Expand Down
48 changes: 48 additions & 0 deletions frontend/client/components/SubTreePanel/LegendColor.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React from 'react'


const LegendColor = props => {

return(
<canvas
width={props.width}
height={props.height}
style={props.style}
>

</canvas>
)
}

const paint = color => {

return function(d) {
var context = this.getContext("2d"),
image = context.createImageData(width, 1);
for (var i = 0, j = -1, c; i < width; ++i) {
c = d3.rgb(color.call(this, d.color(i / width)));
image.data[++j] = c.r;
image.data[++j] = c.g;
image.data[++j] = c.b;
image.data[++j] = 255;
}
context.putImageData(image, 0, 0);
};
}


LegendColor.defaultProps = {

style: {
fill: 'teal',
stroke: '#777777',
strokeWidth: 2,
zIndex: 1500
},

width: 500,
height: 100
}


export default LegendColor
11 changes: 10 additions & 1 deletion frontend/client/components/SubTreePanel/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,12 @@ import {Card, CardActions, CardHeader} from 'material-ui/Card';
import RaisedButton from 'material-ui/RaisedButton';


import LegendColor from './LegendColor'


import style from './style.css'

import {TreeViewer, DAGViewer} from 'tree-viewer'
import {DAGViewer} from 'tree-viewer'
import Loading from '../Loading'
const loaderStyle = {
height: '100%',
Expand Down Expand Up @@ -112,6 +115,8 @@ class SubTreePanel extends Component {
{"Deleted Genes: " + genotype}
</div>

<LegendColor />

<Card
style={cardStyle}
>
Expand All @@ -120,6 +125,7 @@ class SubTreePanel extends Component {
<CardActions
style={actionStyle}
>

<RaisedButton
icon={this.state.isMax ? <CollapseIcon /> : <ExpandIcon />}
onClick={this.toggleWindow}
Expand Down Expand Up @@ -186,8 +192,11 @@ class SubTreePanel extends Component {
// dag = this.filter(dag, this.state.filterDag.source, this.state.filterDag.target)
// }

const queryType = this.props.queryGenes.get('queryType')

return (
<DAGViewer
queryType={queryType}
data={dag}
label="long_name"
style={treeStyle}
Expand Down
2 changes: 2 additions & 0 deletions frontend/client/reducers/query-genes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const SERVICE_URL = 'http://localhost:8888'
const defState = Map({
serviceURL: SERVICE_URL,
genes: Map(),
queryType: 'genetic_interaction',
running: false,
result: null,
pivot: null
Expand Down Expand Up @@ -55,6 +56,7 @@ export default function queryGeneState(state = defState, action) {
.set(RUNNING, true)
.set('serviceURL', action.serviceUrl)
.set('genes', action.genes)
.set('queryType', action.queryType)

case RECEIVE_SIMULATION_RESULT:
console.log('+++++++++++++++ Simulation finished ++++++++++++++')
Expand Down

0 comments on commit dd276c2

Please sign in to comment.