Fix Query Debug checkbox so it falls under properly
Rohan Vazarkar
parent
5f366ac9f6
commit
85f1491f27
|
|
@ -1,138 +1,139 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
|
||||||
export default class Settings extends Component {
|
export default class Settings extends Component {
|
||||||
constructor(){
|
constructor(){
|
||||||
super();
|
super();
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
emitter.on('openSettings', function(){
|
emitter.on('openSettings', function(){
|
||||||
this.openSettings()
|
this.openSettings()
|
||||||
}.bind(this))
|
}.bind(this))
|
||||||
|
|
||||||
$(this.refs.edge).simpleSlider({
|
$(this.refs.edge).simpleSlider({
|
||||||
range: [0,20],
|
range: [0,20],
|
||||||
step: 1,
|
step: 1,
|
||||||
theme: 'volume slideinline'
|
theme: 'volume slideinline'
|
||||||
})
|
})
|
||||||
|
|
||||||
$(this.refs.sibling).simpleSlider({
|
$(this.refs.sibling).simpleSlider({
|
||||||
range: [0,20],
|
range: [0,20],
|
||||||
step: 1,
|
step: 1,
|
||||||
theme: 'volume slideinline'
|
theme: 'volume slideinline'
|
||||||
})
|
})
|
||||||
|
|
||||||
$(this.refs.edge).bind('slider:changed', this.edgeChange.bind(this))
|
$(this.refs.edge).bind('slider:changed', this.edgeChange.bind(this))
|
||||||
$(this.refs.sibling).bind('slider:changed', this.siblingChange.bind(this))
|
$(this.refs.sibling).bind('slider:changed', this.siblingChange.bind(this))
|
||||||
|
|
||||||
$(this.refs.edge).simpleSlider('setValue', appStore.performance.edge)
|
$(this.refs.edge).simpleSlider('setValue', appStore.performance.edge)
|
||||||
$(this.refs.sibling).simpleSlider('setValue', appStore.performance.sibling)
|
$(this.refs.sibling).simpleSlider('setValue', appStore.performance.sibling)
|
||||||
|
|
||||||
$(this.refs.check).prop('checked', appStore.performance.lowGraphics)
|
$(this.refs.check).prop('checked', appStore.performance.lowGraphics)
|
||||||
$(this.refs.debug).prop('checked', appStore.performance.debug)
|
$(this.refs.debug).prop('checked', appStore.performance.debug)
|
||||||
|
|
||||||
$(this.refs.outer).fadeToggle(0)
|
$(this.refs.outer).fadeToggle(0)
|
||||||
$(this.refs.outer).draggable()
|
$(this.refs.outer).draggable()
|
||||||
}
|
}
|
||||||
|
|
||||||
edgeChange(event, data){
|
edgeChange(event, data){
|
||||||
appStore.performance.edge = data.value;
|
appStore.performance.edge = data.value;
|
||||||
$(this.refs.edgeinput).val(data.value)
|
$(this.refs.edgeinput).val(data.value)
|
||||||
conf.set('performance', appStore.performance)
|
conf.set('performance', appStore.performance)
|
||||||
}
|
}
|
||||||
|
|
||||||
siblingChange(event, data){
|
siblingChange(event, data){
|
||||||
appStore.performance.sibling = data.value;
|
appStore.performance.sibling = data.value;
|
||||||
$(this.refs.siblinginput).val(data.value)
|
$(this.refs.siblinginput).val(data.value)
|
||||||
conf.set('performance', appStore.performance)
|
conf.set('performance', appStore.performance)
|
||||||
}
|
}
|
||||||
|
|
||||||
onGfxChange(event){
|
onGfxChange(event){
|
||||||
$(this.refs.check).prop('checked', event.target.checked)
|
$(this.refs.check).prop('checked', event.target.checked)
|
||||||
appStore.performance.lowGraphics = event.target.checked
|
appStore.performance.lowGraphics = event.target.checked
|
||||||
conf.set('performance', appStore.performance)
|
conf.set('performance', appStore.performance)
|
||||||
emitter.emit('changeGraphicsMode')
|
emitter.emit('changeGraphicsMode')
|
||||||
}
|
}
|
||||||
|
|
||||||
onDebugChange(event){
|
onDebugChange(event){
|
||||||
$(this.refs.debug).prop('checked', event.target.checked)
|
$(this.refs.debug).prop('checked', event.target.checked)
|
||||||
appStore.performance.debug = event.target.checked
|
appStore.performance.debug = event.target.checked
|
||||||
conf.set('performance', appStore.performance)
|
conf.set('performance', appStore.performance)
|
||||||
}
|
}
|
||||||
|
|
||||||
closeSettings(){
|
closeSettings(){
|
||||||
$(this.refs.outer).fadeToggle(false)
|
$(this.refs.outer).fadeToggle(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
openSettings(){
|
openSettings(){
|
||||||
$(this.refs.outer).fadeToggle(false)
|
$(this.refs.outer).fadeToggle(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
updateSibling(event){
|
updateSibling(event){
|
||||||
$(this.refs.sibling).simpleSlider('setValue', event.target.value)
|
$(this.refs.sibling).simpleSlider('setValue', event.target.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
updateEdge(event){
|
updateEdge(event){
|
||||||
$(this.refs.edge).simpleSlider('setValue', event.target.value)
|
$(this.refs.edge).simpleSlider('setValue', event.target.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div ref="outer" className="settingsDiv panel panel-default">
|
<div ref="outer" className="settingsDiv panel panel-default">
|
||||||
<div className="panel-heading">
|
<div className="panel-heading">
|
||||||
Settings
|
Settings
|
||||||
<button type="button" className="close" onClick={this.closeSettings.bind(this)} aria-label="Close">
|
<button type="button" className="close" onClick={this.closeSettings.bind(this)} aria-label="Close">
|
||||||
<span aria-hidden="true">×</span>
|
<span aria-hidden="true">×</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="panel-body sliderfix">
|
<div className="panel-body sliderfix">
|
||||||
<div>
|
<div>
|
||||||
<strong>Sibling Collapse Threshold</strong>
|
<strong>Sibling Collapse Threshold</strong>
|
||||||
<i data-toggle="tooltip"
|
<i data-toggle="tooltip"
|
||||||
data-placement="right"
|
data-placement="right"
|
||||||
title="Merge nodes that have the same parent. 0 to Disable, Default 10"
|
title="Merge nodes that have the same parent. 0 to Disable, Default 10"
|
||||||
className="glyphicon glyphicon-question-sign"></i>
|
className="glyphicon glyphicon-question-sign"></i>
|
||||||
<br/>
|
<br/>
|
||||||
<input type="text" ref="sibling" />
|
<input type="text" ref="sibling" />
|
||||||
<span>
|
<span>
|
||||||
<input onChange={this.updateSibling.bind(this)} type="number" min="0" max="20" className="sliderinput" ref="siblinginput" />
|
<input onChange={this.updateSibling.bind(this)} type="number" min="0" max="20" className="sliderinput" ref="siblinginput" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<strong>Node Collapse Threshold</strong>
|
<strong>Node Collapse Threshold</strong>
|
||||||
<i data-toggle="tooltip"
|
<i data-toggle="tooltip"
|
||||||
data-placement="right"
|
data-placement="right"
|
||||||
title="Collapse nodes at the end of paths that only have one relationship. 0 to Disable, Default 5"
|
title="Collapse nodes at the end of paths that only have one relationship. 0 to Disable, Default 5"
|
||||||
className="glyphicon glyphicon-question-sign"></i>
|
className="glyphicon glyphicon-question-sign"></i>
|
||||||
<br />
|
<br />
|
||||||
<input type="text" ref="edge" />
|
<input type="text" ref="edge" />
|
||||||
<span>
|
<span>
|
||||||
<input type="number" min="0" max="20" className="sliderinput" ref="edgeinput" />
|
<input type="number" min="0" max="20" className="sliderinput" ref="edgeinput" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="checkbox-inline">
|
<br />
|
||||||
<label>
|
<div className="checkbox-inline">
|
||||||
<input ref="debug" type="checkbox" onChange={this.onDebugChange.bind(this)}/> Query Debug Mode
|
<label>
|
||||||
</label>
|
<input ref="debug" type="checkbox" onChange={this.onDebugChange.bind(this)}/> Query Debug Mode
|
||||||
</div>
|
</label>
|
||||||
<i data-toggle="tooltip"
|
</div>
|
||||||
data-placement="right"
|
<i data-toggle="tooltip"
|
||||||
title="Dump queries run into the Raw Query Box"
|
data-placement="right"
|
||||||
className="glyphicon glyphicon-question-sign"></i>
|
title="Dump queries run into the Raw Query Box"
|
||||||
<br />
|
className="glyphicon glyphicon-question-sign"></i>
|
||||||
<div className="checkbox-inline">
|
<br />
|
||||||
<label>
|
<div className="checkbox-inline">
|
||||||
<input ref="check" type="checkbox" onChange={this.onGfxChange.bind(this)}/> Low Detail Mode
|
<label>
|
||||||
</label>
|
<input ref="check" type="checkbox" onChange={this.onGfxChange.bind(this)}/> Low Detail Mode
|
||||||
</div>
|
</label>
|
||||||
<i data-toggle="tooltip"
|
</div>
|
||||||
data-placement="right"
|
<i data-toggle="tooltip"
|
||||||
title="Lower detail of graph to improve performance"
|
data-placement="right"
|
||||||
className="glyphicon glyphicon-question-sign"></i>
|
title="Lower detail of graph to improve performance"
|
||||||
</div>
|
className="glyphicon glyphicon-question-sign"></i>
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
}
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue