Merge pull request #703 from VirtualFlyBrain/development

Development
VirtualFlyBrain · Oct 19, 2020 · 4900d49 · 4900d49
2 parents d9364e1 + 595bb36
commit 4900d49
Show file tree

Hide file tree

Showing 13 changed files with 429 additions and 210 deletions.
diff --git a/actions/generals.js b/actions/generals.js
@@ -6,8 +6,7 @@ export const VFB_UI_UPDATED = 'VFB_UI_UPDATED';
 export const INSTANCE_ADDED = 'INSTANCE_ADDED';
 export const SHOW_GRAPH = 'SHOW_GRAPH';
 export const UPDATE_GRAPH = 'UPDATE_GRAPH';
-export const LOAD_CIRCUIT_BROWSER = 'LOAD_CIRCUIT_BROWSER';
-export const UPDATE_CIRCUIT_BROWSER = 'UPDATE_CIRCUIT_BROWSER';
+export const UPDATE_CIRCUIT_QUERY = 'UPDATE_CIRCUIT_QUERY';
 export const INSTANCE_SELECTED = 'INSTANCE_SELECTION';
 export const INSTANCE_DELETED = 'INSTANCE_DELETED';
 export const INSTANCE_VISIBILITY_CHANGED = 'INSTANCE_VISIBILITY_CHANGED';
@@ -40,7 +39,7 @@ export const vfbGraph = (type, instance, queryIndex) => ({
 });
 
 export const vfbCircuitBrowser = (type, instance) => ({
-  type: LOAD_CIRCUIT_BROWSER,
+  type: type,
   data: { instance : instance }
 });
 

diff --git a/components/VFBMain.js b/components/VFBMain.js
@@ -17,7 +17,7 @@ import VFBQuickHelp from './interface/VFBOverview/QuickHelp';
 import VFBGraph from './interface/VFBGraph/VFBGraph';
 import VFBCircuitBrowser from './interface/VFBCircuitBrowser/VFBCircuitBrowser';
 import { connect } from "react-redux";
-import { SHOW_GRAPH, LOAD_CIRCUIT_BROWSER, VFB_LOAD_TERM_INFO, SHOW_LIST_VIEWER } from './../actions/generals';
+import { SHOW_GRAPH, UPDATE_CIRCUIT_QUERY, VFB_LOAD_TERM_INFO, SHOW_LIST_VIEWER } from './../actions/generals';
 
 require('../css/base.less');
 require('../css/VFBMain.less');
@@ -1110,7 +1110,7 @@ class VFBMain extends React.Component {
       }
     }
 
-    if ( this.props.generals.type == LOAD_CIRCUIT_BROWSER ) {
+    if ( this.props.generals.type == UPDATE_CIRCUIT_QUERY ) {
       if ( !this.state.circuitBrowserVisible ) {
         this.setState({
           UIUpdated: true,

diff --git a/components/configuration/VFBGraph/graphConfiguration.js b/components/configuration/VFBGraph/graphConfiguration.js
@@ -1,4 +1,4 @@
-var locationCypherQuery = instance => ({
+var whatIsCypherQuery = instance => ({
   "statements": [
     {
       "statement": "MATCH p=(n:Entity {short_form:'" + instance + "'})-[r:INSTANCEOF|part_of|has_synaptic_terminal_in|has_presynaptic_terminal_in|"

diff --git a/components/configuration/VFBListViewer/controlsMenuConfiguration.js b/components/configuration/VFBListViewer/controlsMenuConfiguration.js
@@ -1,5 +1,20 @@
 import React from "react";
 
+var ACTIONS = {
+  COLOR : 'color',
+  INFO : 'info',
+  DELETE : 'delete',
+  SELECT : 'select',
+  DESELECT : 'deselect',
+  SHOW : 'hide',
+  HIDE : 'show',
+  ZOOM_TO : 'zoom_to',
+  SHOW_VOLUME : 'show_volume',
+  HIDE_VOLUME : 'hide_volume',
+  SHOW_SKELETON : 'show_skeleton',
+  HIDE_SKELETON : 'hide_skeleton',
+};
+
 const controlsMenuConf = {
   itemOptions: { customArrow: <i style={ { float : "right" } } className="fa fa-caret-right" /> },
   // Global configuration for Menu buttons and drop down
@@ -51,6 +66,7 @@ const controlsMenuConf = {
       }
     }
   },
+  actions : ACTIONS,
   // Buttons to display inside the Menu
   buttons: [
     {
@@ -70,21 +86,22 @@ const controlsMenuConf = {
         {
           label: "Show Info",
           icon: "fa fa-info",
-          action: "info"
+          action: { handlerAction: ACTIONS.INFO }
         },
         {
           toggle : {
             condition : entity => entity.isSelected(),
+            isVisible : entity => entity.isVisible(),
             options : {
               false : {
                 label: "Select",
                 icon: "fa fa-check-circle-o",
-                action: entity => entity.select() 
+                action: { handlerAction: ACTIONS.SELECT, }
               },
               true : {
                 label: "Unselect",
                 icon: "fa fa-check-circle",
-                action: entity => entity.deselect() 
+                action: { handlerAction: ACTIONS.DESELECT, }
               }
             }
           }
@@ -96,12 +113,12 @@ const controlsMenuConf = {
               false : {
                 label: "Show",
                 icon: "fa fa-eye",
-                action: entity => entity.show() 
+                action: { handlerAction: ACTIONS.SHOW, }
               },
               true : {
                 label: "Hide",
                 icon: "fa fa-eye-slash",
-                action: entity => entity.hide() 
+                action: { handlerAction: ACTIONS.HIDE, }
               }
             }
           }
@@ -110,36 +127,73 @@ const controlsMenuConf = {
           label: "Delete",
           icon: "fa fa-trash",
           isVisible : entity => entity.getId() != window.templateID,
-          action: 'delete'
+          action: { handlerAction: ACTIONS.DELETE },
         },
         {
           label: "Zoom To",
           icon: "fa fa-search-plus",
-          action: entity => GEPPETTO.SceneController.zoomTo([entity])
+          action: { handlerAction: ACTIONS.ZOOM_TO },
+          isVisible : entity => entity.isVisible()
         },
         {
-          label: "Show As",
+          label: "Show Volume",
           icon: "",
-          action: "",
+          action: {},
           position: "right-start",
           list: [
             {
               toggle : {
-                condition : entity => entity.isVisible(),
+                condition : entity => {
+                  var visible = false;
+                  if (entity.getType()[entity.getId() + "_obj"] != undefined && entity[entity.getId() + "_obj"] != undefined) { 
+                    visible = GEPPETTO.SceneController.isVisible([entity[entity.getId() + "_obj"]]);
+                  }
+                  return visible;
+                },
+                isVisible : entity => entity.getType().hasVariable(entity.getId() + '_obj'),
                 options : {
                   false : {
-                    label: "Show 3D Volume",
+                    label: "Enable 3D Volume",
                     icon: "gpt-shapeshow",
-                    action: entity => {
-                      entity.show()
-                    }
+                    action: { handlerAction: ACTIONS.SHOW_VOLUME }
                   },
                   true : {
-                    label: "Hide 3D Volume",
+                    label: "Disable 3D Volume",
                     icon: "gpt-shapehide",
-                    action: entity => {
-                      entity.hide()
-                    }
+                    action: { handlerAction: ACTIONS.HIDE_VOLUME }
+                  }
+                }
+              }
+            },
+          ]
+        },
+        {
+          label: "Show Skeleton",
+          icon: "",
+          action: {},
+          position: "right-start",
+          list: [
+            {
+              toggle : {
+                condition : entity => {
+                  var visible = false;
+                  if (entity.getType()[entity.getId() + "_swc"] != undefined && entity.getType()[entity.getId() + "_swc"].getType().getMetaType() != GEPPETTO.Resources.IMPORT_TYPE && entity[entity.getId() + "_swc"] != undefined) { 
+                    visible = GEPPETTO.SceneController.isVisible([entity[entity.getId() + "_swc"]]);
+                  }
+                  return visible;
+                },
+                isVisible : entity => entity.getType().hasVariable(entity.getId() + '_swc'),
+                options : {
+                  false : {
+                    label: "Enable 3D Skeleton",
+                    icon: "gpt-3dhide",
+                    tooltip : "Show 3D Skeleton",
+                    action: { handlerAction: ACTIONS.SHOW_SKELETON }
+                  },
+                  true : {
+                    label: "Disable 3D Skeleton",
+                    icon: "gpt-3dshow",
+                    action: { handlerAction: ACTIONS.HIDE_SKELETON }
                   }
                 }
               }
@@ -149,7 +203,8 @@ const controlsMenuConf = {
         {
           label: "Color",
           icon: "fa fa-tint",
-          action: 'color'
+          action: { handlerAction: ACTIONS.COLOR },
+          isVisible : entity => entity.isVisible()
         },
       ]
     }

diff --git a/components/configuration/VFBToolbar/vfbtoolbarHTML.js b/components/configuration/VFBToolbar/vfbtoolbarHTML.js
@@ -12,8 +12,8 @@ var feedback
   + "you can engage directly with our developer community on GitHub "
   + "[<a href='https://github.com/VirtualFlyBrain/VFB2' target='_blank'>VirtualFlyBrain/VFB2</a>].</p>"
   + "<p>If you have a GitHub account you can easily raise a new issue: "
-  + "<form id='GitHubIssue' method='get' action='https://github.com/VirtualFlyBrain/VFB2/issues/new' target='_blank'>"
-  + "<input type='hidden' name='body' value=%0A%0A%0A%0A%0A%0ASupport%20info%3A%0A$DATE$%0A$BROWSER$%20$VERSION$%20%5B$SCREEN$%5D%0A$URL$%0A%0A%60%60%60diff%0A$LOG$%0A%60%60%60%0A' />"
+  + "<form id='GitHubIssue' method='GET' action='https://github.com/VirtualFlyBrain/VFB2/issues/new' target='_blank'>"
+  + "<input type='hidden' name='body' value='\n\n\n\n\nSupport info:\n$DATE$\n$BROWSER$\n$VERSION$ ($SCREEN$)\n$URL$\n\n\n```diff\n$LOG$\n```\n' />"
   + "<input type='submit' value='Create GitHub Issue'></form>"
   + "</p>"
   + "<p> This could simply be a question or a new feature request, but if you have found a bug we missed please copy in "

diff --git a/components/interface/VFBCircuitBrowser/Controls.js b/components/interface/VFBCircuitBrowser/Controls.js
@@ -22,6 +22,8 @@ import IconButton from '@material-ui/core/IconButton';
 import DeleteIcon from '@material-ui/icons/Delete';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import { connect } from "react-redux";
+import { UPDATE_CIRCUIT_QUERY } from './../../../actions/generals';
 
 /**
  * Create a local theme to override some default values in material-ui components
@@ -122,7 +124,7 @@ class Controls extends Component {
     this.state = {
       typingTimeout: 0,
       expanded : true,
-      neuronFields : this.props.neurons
+      neuronFields : ["", ""]
     };
     this.addNeuron = this.addNeuron.bind(this);
     this.neuronTextfieldModified = this.neuronTextfieldModified.bind(this);
@@ -135,8 +137,12 @@ class Controls extends Component {
   }
 
   componentDidMount () {
-    this.setState( { expanded : !this.props.resultsAvailable() } );
+    let neurons = [...this.props.neurons];
+    this.setState( { expanded : !this.props.resultsAvailable(), neuronFields : neurons } );
+    this.circuitQuerySelected = this.props.circuitQuerySelected;
   }
+
+  componentDidUpdate () {}
 
   /**
    * Deletes neuron field, updates control component right after
@@ -146,12 +152,17 @@ class Controls extends Component {
     if ( event.target.id === "" ) {
       id = parseInt(event.target.parentElement.id);
     }
+
     // remove neuron textfield
     let neurons = this.state.neuronFields;
     neurons.splice(id,1);
+
+    this.props.vfbCircuitBrowser(UPDATE_CIRCUIT_QUERY, neurons);
+
     // Update state with one less neuron textfield
     this.setState( { neuronFields : neurons } );
 
+    // If neuron fields are validated, let the VFBCircuitBrowser component know, it will do a graph update
     if ( this.fieldsValidated(neurons) ) {
       this.props.queriesUpdated(neurons);
     }
@@ -176,7 +187,7 @@ class Controls extends Component {
    * Validates neurons ID's are valid, checks there's at least 8 numbers in it
    */
   fieldsValidated (neurons) {
-    var pattern = /\d{8}/;
+    var pattern = /^[a-zA-Z0-9].*_[a-zA-Z0-9]{8}$/;
     for ( var i = 0 ; i < neurons.length ; i++ ){
       if ( neurons[i] === "" ) {
         return false;
@@ -195,6 +206,8 @@ class Controls extends Component {
   typingTimeout (target) {
     let neurons = this.state.neuronFields;
     neurons[target.id] = target.value;
+    this.circuitQuerySelected = neurons;
+    this.props.vfbCircuitBrowser(UPDATE_CIRCUIT_QUERY, neurons);
     if ( this.fieldsValidated(neurons) ) {
       this.setState( { neuronFields : neurons } );
       this.props.queriesUpdated(neurons);
@@ -230,40 +243,36 @@ class Controls extends Component {
    */
   getUpdatedNeuronFields () {
     let neuronFields = this.state.neuronFields;
-    let neuronMatch = false;
-    // Query preselected
-    let queriesPassed = Object.keys(this.circuitQuerySelected).length > 0;
-
-    if ( queriesPassed) {
-      // If query is preselected and is not on the list already
-      if ( !this.state.neuronFields.includes(this.circuitQuerySelected) ) {
-        for ( var i = 0 ; i < neuronFields.length ; i++ ) {
-          if ( this.state.neuronFields[i] === "" ) {
-            neuronFields[i] = this.circuitQuerySelected;
-            neuronMatch = true;
+    let added = false;
+    for ( var i = 0; i < this.props.circuitQuerySelected.length; i++ ){
+      if ( !this.state.neuronFields.includes(this.props.circuitQuerySelected[i])) { 
+        for ( var j = 0 ; j < neuronFields.length ; j++ ) {
+          if ( this.state.neuronFields[j] === "" ) {
+            neuronFields[j] = this.props.circuitQuerySelected[i];
+            added = true;
             break;
           }
         }
-      } else if ( queriesPassed && neuronFields.includes(this.circuitQuerySelected) ) {
-        neuronMatch = true;
-      }
-    }
-
-    // If preselected query is not on list of existing queries
-    if ( !neuronMatch ) {
-      if ( queriesPassed ) {
-        if ( neuronFields.length < configuration.maxNeurons ) {
-          neuronFields.push(this.circuitQuerySelected);
+
+        if ( this.props.circuitQuerySelected.length > neuronFields.length && !this.state.neuronFields.includes(this.circuitQuerySelected[i])) {
+          if ( neuronFields.length < configuration.maxNeurons && this.props.circuitQuerySelected !== "" ) {
+            neuronFields.push(this.props.circuitQuerySelected[i]);
+          } 
         }
       }
     }
 
+    if ( this.fieldsValidated(neuronFields) ) {
+      this.props.queriesUpdated(neuronFields);
+    } 
+
     return neuronFields;
   }
 
   render () {
     let self = this;
     const { classes } = this.props;
+    this.circuitQuerySelected = this.props.circuitQuerySelected;
     let neuronFields = this.getUpdatedNeuronFields()
 
     let expanded = this.state.expanded;
@@ -390,4 +399,12 @@ class Controls extends Component {
 
 Controls.propTypes = { classes: PropTypes.object.isRequired };
 
-export default withStyles(styles)(Controls);
+function mapStateToProps (state) {
+  return { ...state }
+}
+
+function mapDispatchToProps (dispatch) {
+  return { vfbCircuitBrowser: (type, path) => dispatch ( { type : type, data : { instance : path } }), }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef : true } )(withStyles(styles)(Controls));