Development to pipline2

components/configuration/VFBCircuitBrowser/circuitBrowserConfiguration.js

@@ -5,8 +5,8 @@ var locationCypherQuery = ( instances, hops, weight ) => ({
       + " WITH neurons[0] as a, neurons[1] AS b"
       + " MATCH (source:has_neuron_connectivity {short_form: a}), (target:Neuron {short_form: b})"
       + " CALL gds.beta.shortestPath.yens.stream({"
-      + "  nodeQuery: 'MATCH (n:has_neuron_connectivity) RETURN id(n) AS id',"
-      + "  relationshipQuery: 'MATCH (a:has_neuron_connectivity)-[r:synapsed_to]->(b:has_neuron_connectivity) WHERE exists(r.weight) AND r.weight[0] >= "
+      + "  nodeQuery: 'MATCH (n:Neuron) RETURN id(n) AS id',"
+      + "  relationshipQuery: 'MATCH (a:Neuron:has_neuron_connectivity)-[r:synapsed_to]->(b:Neuron) WHERE exists(r.weight) AND r.weight[0] >= "
       + weight.toString() + " RETURN id(a) AS source, id(b) AS target, type(r) as type, 5000-r.weight[0] as weight_p',"
       + "  sourceNode: id(source),"
       + "  targetNode: id(target),"

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,9 +71,10 @@ const styles = theme => ({
   },
   expanded: { minHeight : "15px !important", margin : "0px !important" },
   // Override default padding in Add Neuron button
-  addNeuron : { padding : "8px 5px 0px 2px" },
+  addNeuron : { padding : "0px" },
+  reverseNeurons : { padding : "0 !important" },
   // Override default padding in Delete Neuron button
-  deleteNeuron : { padding : "4px 0px 0px 4px" },
+  deleteNeuron : { padding : "2vh 0px 0px 4px" },
   dottedIcon : { margin : "1rem 0 1rem 0 " },
   legend : {
     padding: "2vh",
@@ -91,7 +93,14 @@ const styles = theme => ({
     height : "2vh",
     width : "2vh"
   },
-  weightInput : { color : "white !important" }
+  weightInput : { 
+    color : "white !important",
+    height : "20px",
+    border : "none !important",
+    backgroundColor: "#80808040 !important",
+    paddingLeft : "10px !important"
+  },
+  weightInputDiv : { width : "100% !important" }
 });
 
 /**
@@ -152,6 +161,7 @@ class AutocompleteResults extends Component {
 
   render () {
     const label = "Neuron " + (this.props.index + 1) .toString();
+
     return (
       <Autocomplete
         fullWidth
@@ -171,7 +181,7 @@ class AutocompleteResults extends Component {
             key={this.props.field.id}
             className={label.replace(/ +/g, "").toLowerCase()}
             onChange={this.props.neuronTextfieldModified}
-            inputProps={{ ...params.inputProps, id: this.props.index, style: { color: "white" , paddingLeft : "10px" } }}
+            inputProps={{ ...params.inputProps, id: this.props.index, style: { height : "20px", color: "white" ,paddingLeft : "10px", border : "none", backgroundColor: "#80808040" } }}
             InputLabelProps={{ ...params.inputProps,style: { color: "white", paddingLeft : "10px" } }}
           />
         )}
@@ -189,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);
@@ -202,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 : "" }];
@@ -256,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
@@ -340,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.
    */
@@ -393,10 +425,10 @@ class Controls extends Component {
     return (
       <ThemeProvider theme={theme}>
         <div>
-          <div style={ { position: "absolute", width: "2vh", height: "100px",zIndex: "100" } }>
+          <div style={ { position: "absolute", width: ".75vh", height: "10vh",zIndex: "100" } }>
             <i style={ { zIndex : "1000" , cursor : "pointer", top : "10px", left : "10px" } } className={stylingConfiguration.controlIcons.home} onClick={self.props.resetCamera }></i>
             <i style={ { zIndex : "1000" , cursor : "pointer", marginTop : "20px", left : "10px" } } className={stylingConfiguration.controlIcons.zoomIn} onClick={self.props.zoomIn }></i>
-            <i style={ { zIndex : "1000" , cursor : "pointer", marginTop : "5px", left : "10px" } } className={stylingConfiguration.controlIcons.zoomOut} onClick={self.props.zoomOut }></i>
+            <i style={ { zIndex : "1000" , cursor : "pointer", marginTop : "5px", left : "10px" } } className={stylingConfiguration.controlIcons.zoomOut} onClick={self.props.clear }></i>
           </div>
           { this.props.resultsAvailable()
             ? <ul className={classes.legend} id="circuitBrowserLegend">
@@ -407,7 +439,7 @@ class Controls extends Component {
             </ul>
             : null
           }
-          <Accordion className={classes.root} defaultExpanded={expanded} >
+          <Accordion key={this.state.key} className={classes.root} defaultExpanded={expanded} >
             <AccordionSummary
               expandIcon={<ExpandMoreIcon fontSize="large" />}
               onClick={() => self.setState({ expanded : !expanded })}
@@ -419,15 +451,15 @@ class Controls extends Component {
               </div>
             </AccordionSummary>
             <AccordionDetails classes={{ root : classes.details }}>
-              <Grid container justify="center" alignItems="center" >
-                <Grid item sm={1} >
+              <Grid container justify="space-between" alignItems="center">
+                <Grid item sm={1} justify="center" alignItems="center">
                   <div>
                     <AdjustIcon />
                     <MoreVertIcon classes={{ root : classes.dottedIcon }}/>
                     <RoomIcon />
                   </div>
                 </Grid>
-                <Grid id="neuronFieldsGrid" item sm={11}>
+                <Grid style={ { marginRight : "1vh !important" } } id="neuronFieldsGrid" item sm={9}>
                   { neuronFields.map((field, index) => (
                     <Grid container alignItems="center" justify="center" key={"TextFieldContainer" + index}>
                       <Grid item sm={neuronColumnSize} key={"TextFieldItem" + index}>
@@ -454,31 +486,46 @@ class Controls extends Component {
                     </Grid>
                   ))}
                 </Grid>
-                <Grid item sm={12}>
-                  { addNeuronDisabled 
-                    ? null
-                    : <Button
-                      id="addNeuron"
-                      color="inherit"
-                      classes={{ root : classes.addNeuron }}
-                      size="small"
-                      onClick={this.addNeuron}
-                      startIcon={<AddCircleOutlineIcon />}
-                    >
-                  Add Neuron
-                    </Button>
-                  }
+                <Grid item justify="space-between" alignItems="center" sm={1}>
+                  <IconButton
+                    id="reverseNeurons"
+                    color="inherit"
+                    size="medium"
+                    className={classes.reverseNeurons}
+                    onClick={this.reverseNeurons}
+                    style={ { paddingLeft : "1vh" } }
+                  >
+                    <SwapVertIcon fontSize="large" />
+                  </IconButton>
                 </Grid>
+                { addNeuronDisabled 
+                  ? null
+                  : <Grid container style={ { marginTop : "1vh" } } justify="space-between" alignItems="center">
+                    <Grid item sm={2} classes={{ root : classes.addNeuron }}>
+                      <IconButton
+                        id="addNeuron"
+                        color="inherit"
+                        size="small"
+                        onClick={this.addNeuron}
+                      >
+                        <AddCircleOutlineIcon />
+                      </IconButton>
+                    </Grid>
+                    <Grid item sm={10} classes={{ root : classes.addNeuron }}>
+                      <Typography>Add Neuron</Typography>
+                    </Grid>
+                  </Grid>
+                }
               </Grid>
             </AccordionDetails>
             <Divider />
             <AccordionActions>
-              <Grid container justify="center" alignItems="center" >
+              <Grid container justify="space-between" alignItems="center" >
                 <Grid container spacing={1}>
-                  <Grid item sm={2}>
-                    <Typography>Hops</Typography>
+                  <Grid item sm={3}>
+                    <Typography># Paths</Typography>
                   </Grid>
-                  <Grid item sm={10}>
+                  <Grid item sm={9}>
                     <Slider
                       aria-labelledby="discrete-slider-always"
                       defaultValue={this.hops}
@@ -491,21 +538,30 @@ class Controls extends Component {
                     />  
                   </Grid>
                 </Grid>
-                <Grid container alignItems="flex-end">
-                  <Grid item sm={2}>
-                    <Typography>Weight</Typography>
+                <Grid container spacing={1} alignItems="flex-end">
+                  <Grid item sm={3}>
+                    <Typography>Min Weight</Typography>
                   </Grid>
-                  <Grid item sm={4}>
-                    <Input label="Graph weight" defaultValue={this.weight} onChange={this.weightChange} inputProps={{ 'aria-label': 'description', id : "weightField", className : classes.weightInput }} />
+                  <Grid item sm={9}>
+                    <Input className={classes.weightInputDiv} label="Graph weight" defaultValue={this.weight} onChange={this.weightChange} inputProps={{ 'aria-label': 'description', id : "weightField", className : classes.weightInput }} />
                   </Grid>
                   <Grid item container justify="flex-end" sm={6}>
                     <Button
                       color="primary"
                       variant="contained"
-                      size="small"
+                      className="MuiGrid-grid-sm-12"
                       id="refreshCircuitBrowser"
                       onClick={() => this.props.updateGraph(this.neuronFields, this.hops, this.weight)}
-                    >Refresh Graph</Button>  
+                    >Refresh</Button>  
+                  </Grid>
+                  <Grid item container justify="flex-end" sm={6}>
+                    <Button
+                      color="secondary"
+                      variant="contained"
+                      className="MuiGrid-grid-sm-12"
+                      id="clearCircuitBrowser"
+                      onClick={() => this.props.clearGraph()}
+                    >Clear</Button>  
                   </Grid>
                 </Grid>
               </Grid>

components/interface/VFBCircuitBrowser/VFBCircuitBrowser.js

@@ -58,7 +58,7 @@ class VFBCircuitBrowser extends Component {
       dropDownAnchorEl : null,
       neurons : [{ id : "", label : "" } , { id : "", label : "" }],
       hops : Math.ceil((configuration.maxHops - configuration.minHops) / 2),
-      weight : 70,
+      weight : 0,
       reload : false
     }
     this.updateGraph = this.updateGraph.bind(this);
@@ -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}
             />
           </div>
           : <GeppettoGraphVisualization
@@ -322,8 +338,8 @@ class VFBCircuitBrowser extends Component {
             linkLabel={link => 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 : 2}
             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