From a0104f49bd2d2e73a10684cbc146deccc5d72eed Mon Sep 17 00:00:00 2001 From: jrmartin Date: Mon, 10 May 2021 16:56:23 -0700 Subject: [PATCH 1/2] #1123 Layout styling issues in circuit browser configuration panel. #1120 Implement circuit browser clear button #1121 Adds flip button to flip 2 neurons. --- .../interface/VFBCircuitBrowser/Controls.js | 123 +++++++++++++----- .../VFBCircuitBrowser/VFBCircuitBrowser.js | 30 ++++- 2 files changed, 113 insertions(+), 40 deletions(-) diff --git a/components/interface/VFBCircuitBrowser/Controls.js b/components/interface/VFBCircuitBrowser/Controls.js index 0e497a07e..6eb154c34 100644 --- a/components/interface/VFBCircuitBrowser/Controls.js +++ b/components/interface/VFBCircuitBrowser/Controls.js @@ -22,6 +22,7 @@ import MoreVertIcon from '@material-ui/icons/MoreVert'; import Button from '@material-ui/core/Button'; import IconButton from '@material-ui/core/IconButton'; import DeleteIcon from '@material-ui/icons/Delete'; +import SwapVertIcon from '@material-ui/icons/SwapVert'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; import { connect } from "react-redux"; @@ -70,7 +71,8 @@ const styles = theme => ({ }, expanded: { minHeight : "15px !important", margin : "0px !important" }, // Override default padding in Add Neuron button - addNeuron : { padding : "2vh 2vh 0px 2px" }, + addNeuron : { padding : "0px" }, + reverseNeurons : { padding : "0 !important" }, // Override default padding in Delete Neuron button deleteNeuron : { padding : "2vh 0px 0px 4px" }, dottedIcon : { margin : "1rem 0 1rem 0 " }, @@ -91,7 +93,14 @@ const styles = theme => ({ height : "2vh", width : "2vh" }, - weightInput : { color : "white !important", height : "20px", border : "none !important", backgroundColor: "#80808040 !important", paddingLeft : "10px !important" } + weightInput : { + color : "white !important", + height : "20px", + border : "none !important", + backgroundColor: "#80808040 !important", + paddingLeft : "10px !important" + }, + weightInputDiv : { width : "100% !important" } }); /** @@ -190,11 +199,13 @@ class Controls extends Component { super(props); this.state = { typingTimeout: 0, - expanded : true + expanded : true, + key : 1 }; this.weight = this.props.weight; this.hops = this.props.hops; this.addNeuron = this.addNeuron.bind(this); + this.reverseNeurons = this.reverseNeurons.bind(this); this.neuronTextfieldModified = this.neuronTextfieldModified.bind(this); this.typingTimeout = this.typingTimeout.bind(this); this.sliderChange = this.sliderChange.bind(this); @@ -203,6 +214,7 @@ class Controls extends Component { this.deleteNeuronField = this.deleteNeuronField.bind(this); this.getUpdatedNeuronFields = this.getUpdatedNeuronFields.bind(this); this.resultSelectedChanged = this.resultSelectedChanged.bind(this); + this.setNeurons = this.setNeurons.bind(this); this.circuitQuerySelected = this.props.circuitQuerySelected; this.autoCompleteInput = React.createRef(); this.neuronFields = [{ id : "", label : "" } , { id : "", label : "" }]; @@ -257,6 +269,18 @@ class Controls extends Component { this.autocompleteRef[(neuronFields.length - 1).toString()] = React.createRef(); this.forceUpdate(); } + + /** + * Reverse neurons textfield + */ + reverseNeurons () { + let neuronFields = this.neuronFields; + [neuronFields[0], neuronFields[neuronFields.length - 1]] = [neuronFields[neuronFields.length - 1], neuronFields[0]] + // User has added the maximum number of neurons allowed in query search + this.neuronFields = neuronFields; + this.autocompleteRef[(neuronFields.length - 1).toString()] = React.createRef(); + this.forceUpdate(); + } /** * Validates neurons ID's are valid, checks there's at least 8 numbers in it @@ -341,6 +365,13 @@ class Controls extends Component { this.weight = event.target.value; } + setNeurons () { + this.neuronFields = [{ id : "", label : "" } , { id : "", label : "" }]; + while (this?.props?.circuitQuerySelected.length > 0) { + this?.props?.circuitQuerySelected.pop(); + } + this.setState({ key: Math.random() }); + } /** * Update neuron fields if there's a query preselected. */ @@ -394,10 +425,10 @@ class Controls extends Component { return (
-
+
- +
{ this.props.resultsAvailable() ?
    @@ -408,7 +439,7 @@ class Controls extends Component {
: null } - + } onClick={() => self.setState({ expanded : !expanded })} @@ -420,15 +451,15 @@ class Controls extends Component {
- - + +
- + { neuronFields.map((field, index) => ( @@ -455,35 +486,46 @@ class Controls extends Component { ))} - - { addNeuronDisabled - ? null - : - - - } - - - { addNeuronDisabled - ? null - : Add Neuron - } + + + + + { addNeuronDisabled + ? null + : + + + + + + + Add Neuron + + + } - + - + # Paths - + - - + + Min Weight - - + + + >Refresh + + + diff --git a/components/interface/VFBCircuitBrowser/VFBCircuitBrowser.js b/components/interface/VFBCircuitBrowser/VFBCircuitBrowser.js index a9f7c3ce1..55b3f4ca2 100644 --- a/components/interface/VFBCircuitBrowser/VFBCircuitBrowser.js +++ b/components/interface/VFBCircuitBrowser/VFBCircuitBrowser.js @@ -67,6 +67,7 @@ class VFBCircuitBrowser extends Component { this.resetCamera = this.resetCamera.bind(this); this.zoomIn = this.zoomIn.bind(this); this.zoomOut = this.zoomOut.bind(this); + this.clearGraph = this.clearGraph.bind(this); this.queriesUpdated = this.queriesUpdated.bind(this); this.updateHops = this.updateHops.bind(this); this.updateWeight = this.updateWeight.bind(this); @@ -77,6 +78,7 @@ class VFBCircuitBrowser extends Component { this.hoverNode = null; this.graphRef = React.createRef(); + this.controlsRef = React.createRef(); this.__isMounted = false; this.objectsLoaded = 0; this.focused = false; @@ -170,6 +172,11 @@ class VFBCircuitBrowser extends Component { } this.graphRef.current.ggv.current.zoom(zoom - out , 100); } + + clearGraph () { + this.setState({ neurons : [{ id : "", label : "" } , { id : "", label : "" }], graph : { nodes : [], links : [] } }); + this.controlsRef.current.setNeurons() + } /** * Handle Left click on Nodes @@ -238,8 +245,15 @@ class VFBCircuitBrowser extends Component { } }; + let params = { + results: response.data, + configuration : configuration, + styling : stylingConfiguration, + NODE_WIDTH : NODE_WIDTH, NODE_HEIGHT : NODE_HEIGHT + } + // Invoke web worker to perform conversion of graph data into format - worker.postMessage({ message: "refine", params: { results: response.data, configuration : configuration, styling : stylingConfiguration, NODE_WIDTH : NODE_WIDTH, NODE_HEIGHT : NODE_HEIGHT } }); + worker.postMessage({ message: "refine", params: params }); }) .catch( function (error) { self.setState( { loading : false } ); @@ -309,6 +323,8 @@ class VFBCircuitBrowser extends Component { circuitQuerySelected={this.circuitQuerySelected} datasource="SOLR" legend = {self.state.legend} + ref={self.controlsRef} + clearGraph={self.clearGraph} />
: link.label} // Width of links, log(weight) linkWidth={link => link.weight ? Math.log(link.weight) : 1 } - linkCurvature='curvature' - linkDirectionalArrowLength={link => link.weight ? Math.log(link.weight) * 3 : .5} + linkCurvature={.075} + linkDirectionalArrowLength={link => link.weight ? Math.log(link.weight) * 5 : 4} linkDirectionalArrowRelPos={.75} linkCanvasObject={(link, ctx) => { const MAX_FONT_SIZE = 5; @@ -501,7 +517,11 @@ class VFBCircuitBrowser extends Component { nodeCanvasObjectMode={node => 'replace'} // bu = Bottom Up, creates Graph with root at bottom dagMode="lr" - dagLevelDistance = {100} + nodeVal = { node => { + node.fx = node.level == 0 ? node.positionX : node.fx ? node.fx : 0 ; + node.fy = node.level > 0 ? -100 * node.level : node.fy ? node.fy : 0 ; + }} + dagLevelDistance = {25} onDagError={loopNodeIds => {}} // Handles clicking event on an individual node onNodeClick = { (node,event) => this.handleNodeLeftClick(node,event) } @@ -525,8 +545,10 @@ class VFBCircuitBrowser extends Component { resetCamera={self.resetCamera} zoomIn={self.zoomIn} zoomOut={self.zoomOut} + clearGraph={self.clearGraph} circuitQuerySelected={this.circuitQuerySelected} legend = {self.state.legend} + ref={self.controlsRef} /> } // Function triggered when hovering over a nodeoptions From 0bf4ed3697f97e41792d38f30ad2f16b878fb823 Mon Sep 17 00:00:00 2001 From: jrmartin Date: Tue, 11 May 2021 13:50:01 -0700 Subject: [PATCH 2/2] #1123 revert arrow length change --- components/interface/VFBCircuitBrowser/VFBCircuitBrowser.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/interface/VFBCircuitBrowser/VFBCircuitBrowser.js b/components/interface/VFBCircuitBrowser/VFBCircuitBrowser.js index 55b3f4ca2..9c3579a7d 100644 --- a/components/interface/VFBCircuitBrowser/VFBCircuitBrowser.js +++ b/components/interface/VFBCircuitBrowser/VFBCircuitBrowser.js @@ -339,7 +339,7 @@ class VFBCircuitBrowser extends Component { // Width of links, log(weight) linkWidth={link => link.weight ? Math.log(link.weight) : 1 } linkCurvature={.075} - linkDirectionalArrowLength={link => link.weight ? Math.log(link.weight) * 5 : 4} + linkDirectionalArrowLength={link => link.weight ? Math.log(link.weight) * 5 : 2} linkDirectionalArrowRelPos={.75} linkCanvasObject={(link, ctx) => { const MAX_FONT_SIZE = 5;