re-organizing components name and folder to be aligned with the same …

components/VFBMain.js

@@ -1,11 +1,11 @@
 /* eslint-disable no-undef */
 import React, { Component } from 'react';
-import VFBToolBar from './interface/VFBToolBar';
-import FocusTerm from './interface/FocusTerm';
-import TreeWidget from './interface/TreeWidget';
-import StackViewer from './interface/StackViewer';
-import TutorialWidget from './interface/TutorialWidget';
-import VFBTermInfoWidget from './interface/VFBTermInfo';
+import VFBToolBar from './interface/VFBToolbar/VFBToolBar';
+import VFBFocusTerm from './interface/VFBFocusTerm/VFBFocusTerm';
+import VFBTree from './interface/VFBTree/VFBTree';
+import VFBStackViewer from './interface/VFBStackViewer/VFBStackViewer';
+import TutorialWidget from './interface/VFBOverview/TutorialWidget';
+import VFBTermInfoWidget from './interface/VFBTermInfo/VFBTermInfo';
 import Logo from 'geppetto-client/js/components/interface/logo/Logo';
 import Canvas from 'geppetto-client/js/components/interface/3dCanvas/Canvas';
 import QueryBuilder from 'geppetto-client/js/components/interface/query/queryBuilder';
@@ -21,7 +21,7 @@ require('../css/VFBMain.less');
 var $ = require('jquery');
 var GEPPETTO = require('geppetto');
 var Rnd = require('react-rnd').default;
-var modelJson = require('../components/configuration/layoutModel').modelJson;
+var modelJson = require('./configuration/VFBMain/layoutModel').modelJson;
 
 export default class VFBMain extends React.Component {
 
@@ -76,18 +76,18 @@ export default class VFBMain extends React.Component {
 
     this.UIElementsVisibility = {};
 
-    this.colours = require('./configuration/colours.json');
-    this.spotlightConfig = require('./configuration/spotlightConfiguration').spotlightConfig;
-    this.spotlightDataSourceConfig = require('./configuration/spotlightConfiguration').spotlightDataSourceConfig;
-    this.controlPanelConfig = require('./configuration/controlPanelConfiguration').controlPanelConfig;
-    this.controlPanelColMeta = require('./configuration/controlPanelConfiguration').controlPanelColMeta;
-    this.controlPanelColumns = require('./configuration/controlPanelConfiguration').controlPanelColumns;
-    this.controlPanelControlConfigs = require('./configuration/controlPanelConfiguration').controlPanelControlConfigs;
-    this.queryResultsColMeta = require('./configuration/queryBuilderConfiguration').queryResultsColMeta;
-    this.queryResultsColumns = require('./configuration/queryBuilderConfiguration').queryResultsColumns;
-    this.queryResultsControlConfig = require('./configuration/queryBuilderConfiguration').queryResultsControlConfig;
-    this.queryBuilderDatasourceConfig = require('./configuration/queryBuilderConfiguration').queryBuilderDatasourceConfig;
-    this.sorterColumns = require('./configuration/queryBuilderConfiguration').sorterColumns;
+    this.colours = require('./configuration/VFBMain/colours.json');
+    this.spotlightConfig = require('./configuration/VFBMain/spotlightConfiguration').spotlightConfig;
+    this.spotlightDataSourceConfig = require('./configuration/VFBMain/spotlightConfiguration').spotlightDataSourceConfig;
+    this.controlPanelConfig = require('./configuration/VFBMain/controlPanelConfiguration').controlPanelConfig;
+    this.controlPanelColMeta = require('./configuration/VFBMain/controlPanelConfiguration').controlPanelColMeta;
+    this.controlPanelColumns = require('./configuration/VFBMain/controlPanelConfiguration').controlPanelColumns;
+    this.controlPanelControlConfigs = require('./configuration/VFBMain/controlPanelConfiguration').controlPanelControlConfigs;
+    this.queryResultsColMeta = require('./configuration/VFBMain/queryBuilderConfiguration').queryResultsColMeta;
+    this.queryResultsColumns = require('./configuration/VFBMain/queryBuilderConfiguration').queryResultsColumns;
+    this.queryResultsControlConfig = require('./configuration/VFBMain/queryBuilderConfiguration').queryResultsControlConfig;
+    this.queryBuilderDatasourceConfig = require('./configuration/VFBMain/queryBuilderConfiguration').queryBuilderDatasourceConfig;
+    this.sorterColumns = require('./configuration/VFBMain/queryBuilderConfiguration').sorterColumns;
 
     this.model = FlexLayout.Model.fromJson(modelJson)
 
@@ -764,7 +764,7 @@ export default class VFBMain extends React.Component {
       let _width = node.getRect().width;
       if (_height > 0 || _width > 0) {
         return (<div className="flexChildContainer">
-          <StackViewer
+          <VFBStackViewer
             id="NewStackViewer"
             defHeight={_height}
             defWidth={_width}
@@ -783,7 +783,7 @@ export default class VFBMain extends React.Component {
       let _height = node.getRect().height;
       let _width = node.getRect().width;
       return (<div className="flexChildContainer">
-        <TreeWidget
+        <VFBTree
           id="treeWidget"
           instance={this.instanceOnFocus}
           size={{ height: _height, width: _width }}
@@ -1180,7 +1180,7 @@ export default class VFBMain extends React.Component {
           htmlOutputHandler={this.renderHTMLViewer}
           menuHandler={this.menuHandler}/>
 
-        <FocusTerm
+        <VFBFocusTerm
           ref={ref => this.focusTermReference = ref}
           UIUpdateManager={this.UIUpdateManager}
           queryBuilder={this.refs.querybuilderRef}/>

components/configuration/VFBTermInfo/VFBTermInfoConfiguration.js

@@ -0,0 +1,102 @@
+const buttonBarConfiguration = {
+  "Events": ["color:set", "experiment:selection_changed", "experiment:visibility_changed"],
+  "filter": function filter (instancePath) {
+    if (typeof (instancePath) == "string") {
+      return Instances.getInstance(instancePath).getParent();
+    }
+    return instancePath.getParent();
+  },
+  "VisualCapability": {
+    "select": {
+      "id": "select",
+      "condition": "GEPPETTO.SceneController.isSelected($instance$.$instance$_obj != undefined ? [$instance$.$instance$_obj] : []) ||  GEPPETTO.SceneController.isSelected($instance$.$instance$_swc != undefined ? [$instance$.$instance$_swc] : [])",
+      "false": {
+        "actions": ["$instance$.select()"],
+        "icon": "fa-hand-stop-o",
+        "label": "Unselected",
+        "tooltip": "Select",
+        "id": "select",
+      },
+      "true": {
+        "actions": ["$instance$.deselect()"],
+        "icon": "fa-hand-rock-o",
+        "label": "Selected",
+        "tooltip": "Deselect",
+        "id": "deselect",
+      }
+    },
+    "color": {
+      "id": "color",
+      "actions": ["$instance$.setColor('$param$');"],
+      "icon": "fa-tint",
+      "label": "Color",
+      "tooltip": "Color"
+    },
+    "zoom": {
+      "id": "zoom",
+      "actions": ["GEPPETTO.SceneController.zoomTo($instances$)"],
+      "icon": "fa-search-plus",
+      "label": "Zoom",
+      "tooltip": "Zoom"
+    },
+    "visibility_obj": {
+      "showCondition": "$instance$.getType().hasVariable($instance$.getId() + '_obj')",
+      "condition": "(function() { var visible = false; if ($instance$.getType().$instance$_obj != undefined && $instance$.getType().$instance$_obj.getType().getMetaType() != GEPPETTO.Resources.IMPORT_TYPE && $instance$.$instance$_obj != undefined) { visible = GEPPETTO.SceneController.isVisible([$instance$.$instance$_obj]); } return visible; })()",
+      "false": {
+        "id": "visibility_obj",
+        "actions": ["(function(){var color = $instance$.getColor(); var instance = Instances.getInstance('$instance$.$instance$_obj'); if (instance.getType().getMetaType() == GEPPETTO.Resources.IMPORT_TYPE) { var col = instance.getParent().getColor(); instance.getType().resolve(function() { instance.setColor(col); GEPPETTO.trigger('experiment:visibility_changed', instance); GEPPETTO.ControlPanel.refresh(); }); } else { if(GEPPETTO.SceneController.isInstancePresent(instance)) { GEPPETTO.SceneController.show([instance]); } else { GEPPETTO.SceneController.display(instance); instance.setColor(color);}}})()"],
+        "icon": "gpt-shapehide",
+        "label": "Hidden",
+        "tooltip": "Show 3D Volume"
+      },
+      "true": {
+        "id": "visibility_obj",
+        "actions": ["GEPPETTO.SceneController.hide([$instance$.$instance$_obj])"],
+        "icon": "gpt-shapeshow",
+        "label": "Visible",
+        "tooltip": "Hide 3D Volume"
+      }
+    },
+    "visibility_swc": {
+      "showCondition": "$instance$.getType().hasVariable($instance$.getId() + '_swc')",
+      "condition": "(function() { var visible = false; if ($instance$.getType().$instance$_swc != undefined && $instance$.getType().$instance$_swc.getType().getMetaType() != GEPPETTO.Resources.IMPORT_TYPE && $instance$.$instance$_swc != undefined) { visible = GEPPETTO.SceneController.isVisible([$instance$.$instance$_swc]); } return visible; })()",
+      "false": {
+        "id": "visibility_swc",
+        "actions": ["(function(){var color = $instance$.getColor(); var instance = Instances.getInstance('$instance$.$instance$_swc'); if (instance.getType().getMetaType() == GEPPETTO.Resources.IMPORT_TYPE) { var col = instance.getParent().getColor(); instance.getType().resolve(function() { instance.setColor(col); GEPPETTO.trigger('experiment:visibility_changed', instance); GEPPETTO.ControlPanel.refresh(); }); } else { if(GEPPETTO.SceneController.isInstancePresent(instance)) { GEPPETTO.SceneController.show([instance]); } else { GEPPETTO.SceneController.display(instance); instance.setColor(color);}}})()"],
+        "icon": "gpt-3dhide",
+        "label": "Hidden",
+        "tooltip": "Show 3D Skeleton"
+      },
+      "true": {
+        "id": "visibility_swc",
+        "actions": ["GEPPETTO.SceneController.hide([$instance$.$instance$_swc])"],
+        "icon": "gpt-3dshow",
+        "label": "Visible",
+        "tooltip": "Hide 3D Skeleton"
+      }
+    },
+    "delete": {
+      "showCondition": "$instance$.getId()!=window.templateID",
+      "id": "delete",
+      "actions": ["if($instance$.parent != null){$instance$.parent.deselect();$instance$.parent.delete();}else{$instance$.deselect();$instance$.delete();};setTermInfo(window[window.templateID][window.templateID+'_meta'], window[window.templateID].getId());"],
+      "icon": "fa-trash-o",
+      "label": "Delete",
+      "tooltip": "Delete"
+    }
+  }
+};
+
+const buttonBarControls = {
+  "VisualCapability": ['select',
+                       'color',
+                       'visibility_obj',
+                       'visibility_swc',
+                       'zoom',
+                       'delete']
+};
+
+
+module.exports = {
+  buttonBarConfiguration,
+  buttonBarControls
+};

components/configuration/vfbtoolbarMenuConfiguration.js → components/configuration/VFBToolbar/vfbtoolbarMenuConfiguration.js

@@ -235,6 +235,116 @@ var toolbarMenu = {
             handlerAction: "UIElementHandler",
             parameters: ["treeBrowserVisible"]
           }
+        },
+        {
+          label: "NBLAST",
+          icon: "",
+          action: "",
+          position: "right-start",
+          list: [
+            {
+              label: "What is NBLAST?",
+              icon: "",
+              action: {
+                handlerAction: "openNewTab",
+                parameters: ["http://flybrain.mrc-lmb.cam.ac.uk/si/nblast/www/"]
+              }
+            },
+            {
+              label: "NBLAST against your own data",
+              icon: "",
+              action: {
+                handlerAction: "openNewTab",
+                parameters: ["http://nblast.virtualflybrain.org:8080/NBLAST_on-the-fly/?gal4_n=10&all_use_mean=F&all_query=&tab=One%20against%20all&gal4_query="]
+              }
+            }
+          ]
+        },
+        {
+          label: "CATMAID",
+          icon: "",
+          action: "",
+          position: "right-start",
+          list: [
+            {
+              label: "What is CATMAID?",
+              icon: "",
+              action: {
+                handlerAction: "openNewTab",
+                parameters: ["http://catmaid.readthedocs.io/"]
+              }
+            },
+            {
+              label: "Hosted EM Data",
+              icon: "",
+              position: "right-start",
+              action: {
+                handlerAction: "submenu",
+                parameters: ["undefinedAction"]
+              },
+              list: [
+                {
+                  label: "Adult Brain (FAFB)",
+                  icon: "",
+                  action: {
+                    handlerAction: "openNewTab",
+                    parameters: ["https://fafb.catmaid.virtualflybrain.org/?pid=1&zp=65720&yp=160350.0517811483&xp=487737.6942783438&tool=tracingtool&sid0=1&s0=3.1999999999999993&help=true"]
+                  }
+                },
+                {
+                  label: "Adult VNC (VNC1)",
+                  icon: "",
+                  action: {
+                    handlerAction: "openNewTab",
+                    parameters: ["https://vnc1.catmaid.virtualflybrain.org/?pid=1&zp=65720&yp=160350.0517811483&xp=487737.6942783438&tool=tracingtool&sid0=1&s0=3.1999999999999993&help=true"]
+                  }
+                },
+                {
+                  label: "Larval (L1EM)",
+                  icon: "",
+                  action: {
+                    handlerAction: "openNewTab",
+                    parameters: ["https://l1em.catmaid.virtualflybrain.org/?pid=1&zp=108250&yp=82961.59999999999&xp=54210.799999999996&tool=tracingtool&sid0=1&s0=2.4999999999999996&help=true"]
+                  }
+                }
+              ]
+            },
+            {
+              label: "APIs",
+              icon: "",
+              position: "right-start",
+              action: {
+                handlerAction: "submenu",
+                parameters: ["undefinedAction"]
+              },
+              list: [
+                {
+                  label: "Adult Brain (FAFB)",
+                  icon: "",
+                  action: {
+                    handlerAction: "openNewTab",
+                    parameters: ["https://fafb.catmaid.virtualflybrain.org/apis/"]
+                  }
+                },
+                {
+                  label: "Adult VNC (VNC1)",
+                  icon: "",
+                  action: {
+                    handlerAction: "openNewTab",
+                    parameters: ["https://vnc1.catmaid.virtualflybrain.org/apis/"]
+                  }
+                },
+                {
+                  label: "Larval (L1EM)",
+                  icon: "",
+                  action: {
+                    handlerAction: "openNewTab",
+                    parameters: ["https://l1em.catmaid.virtualflybrain.org/apis/"]
+                  }
+                }
+              ]
+            }
+          ]
         }
       ]
     },

components/configuration/treeWidgetConfiguration.js → components/configuration/VFBTree/VFBTreeConfiguration.js

@@ -3,20 +3,6 @@ var restPostConfig = {
   contentType: "application/json"
 };
 
-/*
- * var treeCypherQuery = instance => ({
- *   "statements": [
- *     {
- *       "statement": "MATCH (root:Class)<-[:INSTANCEOF]-(t:Individual {short_form:'" + instance + "'})"
- *       + "<-[:depicts]-(tc:Individual)<-[ie:in_register_with]-(c:Individual)-[:depicts]->(image:"
- *       + "Individual)-[r:INSTANCEOF]->(anat:Class) WHERE has(ie.index) WITH root, anat,r,image"
- *       + " MATCH p=allShortestPaths((root)<-[:SUBCLASSOF|part_of*..]-(anat:Class)) RETURN p,r,image",
- *       "resultDataContents": ["graph"]
- *     }
- *   ]
- * });
- */
-
 var treeCypherQuery = instance => ({
   "statements": [
     {

components/interface/FocusTerm.js → components/interface/VFBFocusTerm/VFBFocusTerm.js

@@ -10,16 +10,16 @@ import {
 var GEPPETTO = require('geppetto');
 var Rnd = require('react-rnd').default;
 
-require('../../css/FocusTerm.less');
+require('../../../css/VFBFocusTerm.less');
 
-export default class FocusTerm extends React.Component {
+export default class VFBFocusTerm extends React.Component {
 
   constructor (props) {
     super(props);
     this.state = { currentInstance: undefined };
 
-    this.focusTermConfiguration = require('../configuration/focusTermConfiguration.js').focusTermConfiguration;
-    this.labels = require('../configuration/focusTermConfiguration.js').subMenusGrouping;
+    this.focusTermConfiguration = require('../../configuration/VFBFocusTerm/focusTermConfiguration').focusTermConfiguration;
+    this.labels = require('../../configuration/VFBFocusTerm/focusTermConfiguration').subMenusGrouping;
     this.theme = createMuiTheme({ overrides: { MuiTooltip: { tooltip: { fontSize: "12px" } } } });
 
     this.clearAll = this.clearAll.bind(this);