Skip to content

Commit

Permalink
Merge pull request #471 from VirtualFlyBrain/fix/470
Browse files Browse the repository at this point in the history
Tree browser fixes following buttonbar colorpicker re-alignment
  • Loading branch information
Robbie1977 authored Dec 17, 2019
2 parents 6a65949 + 0f89fb7 commit 82bbf2d
Show file tree
Hide file tree
Showing 23 changed files with 614 additions and 219 deletions.
96 changes: 65 additions & 31 deletions components/VFBMain.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 {

Expand Down Expand Up @@ -73,21 +73,22 @@ export default class VFBMain extends React.Component {
this.idFromURL = undefined;
this.firstLoad = true;
this.idsFromURL = [];
this.urlQueryLoader = undefined;

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)

Expand Down Expand Up @@ -764,7 +765,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}
Expand All @@ -783,7 +784,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 }}
Expand Down Expand Up @@ -914,11 +915,15 @@ export default class VFBMain extends React.Component {
// Loading ids passed through the browser's url
if ((this.props.location.search.indexOf("id=VFB") == -1) && (this.props.location.search.indexOf("i=VFB") == -1)) {
this.idFromURL = "VFB_00017894";
var that = this;
var idList = this.props.location.search;
idList = idList.replace("?","").split("&");
for (let list in idList) {
if (idList[list].indexOf("q=") > -1) {
this.urlQueryLoader = idList[list].replace("q=","").replace("%20", " ").split(",");
}
}
console.log("Loading default Adult Brain VFB_00017894 template.");
GEPPETTO.on(GEPPETTO.Events.Model_loaded, function () {
that.addVfbId(that.idFromURL);
});
this.idsFinalList = this.idFromURL;
} else {
var idsList = "";
var idList = this.props.location.search;
Expand All @@ -935,6 +940,8 @@ export default class VFBMain extends React.Component {
idsList = "," + idsList;
}
idsList = idList[list].replace("i=","") + idsList;
} else if (idList[list].indexOf("q=") > -1) {
this.urlQueryLoader = idList[list].replace("q=","").replace("%20", " ").split(",");
}
}
if ((idsList.length > 0) && (this.state.modelLoaded == true) && (this.urlIdsLoaded == false)) {
Expand All @@ -952,14 +959,42 @@ export default class VFBMain extends React.Component {
}
this.idsFromURL.push(this.idFromURL);
this.idsFromURL = [... new Set(this.idsFromURL)];
var that = this;
this.idsFinalList = this.idsFromURL;
console.log("Loading IDS to add to the scene from url");
GEPPETTO.on(GEPPETTO.Events.Model_loaded, function () {
that.addVfbId(that.idsFromURL);
});
}
}

var that = this;
GEPPETTO.on(GEPPETTO.Events.Model_loaded, function () {
that.addVfbId(that.idsFinalList);

var callback = function () {
// check if any results with count flag
if (that.refs.querybuilderRef.props.model.count > 0) {
// runQuery if any results
that.refs.querybuilderRef.runQuery();
} else {
that.refs.querybuilderRef.switchView(false);
}
// show query component
that.refs.querybuilderRef.open();
$("body").css("cursor", "default");
GEPPETTO.trigger('stop_spin_logo');
};

if (that.urlQueryLoader !== undefined) {
if (window[that.urlQueryLoader[0]] == undefined) {
window.fetchVariableThenRun(that.urlQueryLoader[0], function () {
that.refs.querybuilderRef.addQueryItem({ term: "", id: that.urlQueryLoader[0], queryObj: Model[that.urlQueryLoader[1]] }, callback)
});
} else {
setTimeout(function () {
that.refs.querybuilderRef.addQueryItem({ term: "", id: that.urlQueryLoader[0], queryObj: Model[that.urlQueryLoader[1]] }, callback);
}, 100);
}
}
});

// wipe the history state:
window.history.replaceState({ s:4, n:"", b:"", f:"" }, "", window.location.pathname + window.location.search);

Expand Down Expand Up @@ -1093,7 +1128,6 @@ export default class VFBMain extends React.Component {
if (this.treeBrowserReference !== undefined && this.treeBrowserReference !== null) {
this.treeBrowserReference.updateTree(this.instanceOnFocus);
}

}

render () {
Expand Down Expand Up @@ -1180,7 +1214,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}/>
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
102 changes: 102 additions & 0 deletions components/configuration/VFBTermInfo/VFBTermInfoConfiguration.js
Original file line number Diff line number Diff line change
@@ -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
};
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
{
Expand Down
49 changes: 0 additions & 49 deletions components/configuration/tabConfiguration.js

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ import React, { Component } from 'react';
import Tutorial from 'geppetto-client/js/components/interface/tutorial/Tutorial';
import WidgetCapability from 'geppetto-client/js/components/widgets/WidgetCapability';

var vfbDefaultTutorial = require('../../tutorials/stackTutorial.json');
var vfbDefaultTutorial = require('../../../tutorials/stackTutorial.json');
var GEPPETTO = require('geppetto');

export default class TutorialWidget extends React.Component {

constructor (props) {
super(props);

this.tutorialsList = require('../configuration/tutorialsList.json');
this.tutorialsList = require('../../configuration/VFBOverview/tutorialsList.json');


this.closeHandler = this.closeHandler.bind(this);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ function arrayUnique (array) {
return a;
}

export default class StackViewer extends React.Component {
export default class VFBStackViewer extends React.Component {

constructor (props) {
super(props);
Expand Down
Loading

0 comments on commit 82bbf2d

Please sign in to comment.