diff --git a/components/VFBMain.js b/components/VFBMain.js index 8c8a2458b..16dd34d7b 100644 --- a/components/VFBMain.js +++ b/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 { @@ -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) @@ -764,7 +765,7 @@ export default class VFBMain extends React.Component { let _width = node.getRect().width; if (_height > 0 || _width > 0) { return (
- - 0) && (this.state.modelLoaded == true) && (this.urlIdsLoaded == false)) { @@ -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); @@ -1093,7 +1128,6 @@ export default class VFBMain extends React.Component { if (this.treeBrowserReference !== undefined && this.treeBrowserReference !== null) { this.treeBrowserReference.updateTree(this.instanceOnFocus); } - } render () { @@ -1180,7 +1214,7 @@ export default class VFBMain extends React.Component { htmlOutputHandler={this.renderHTMLViewer} menuHandler={this.menuHandler}/> - this.focusTermReference = ref} UIUpdateManager={this.UIUpdateManager} queryBuilder={this.refs.querybuilderRef}/> diff --git a/components/configuration/focusTermConfiguration.js b/components/configuration/VFBFocusTerm/focusTermConfiguration.js similarity index 100% rename from components/configuration/focusTermConfiguration.js rename to components/configuration/VFBFocusTerm/focusTermConfiguration.js diff --git a/components/configuration/colours.json b/components/configuration/VFBMain/colours.json similarity index 100% rename from components/configuration/colours.json rename to components/configuration/VFBMain/colours.json diff --git a/components/configuration/controlPanelConfiguration.js b/components/configuration/VFBMain/controlPanelConfiguration.js similarity index 100% rename from components/configuration/controlPanelConfiguration.js rename to components/configuration/VFBMain/controlPanelConfiguration.js diff --git a/components/configuration/layoutModel.js b/components/configuration/VFBMain/layoutModel.js similarity index 100% rename from components/configuration/layoutModel.js rename to components/configuration/VFBMain/layoutModel.js diff --git a/components/configuration/queryBuilderConfiguration.js b/components/configuration/VFBMain/queryBuilderConfiguration.js similarity index 100% rename from components/configuration/queryBuilderConfiguration.js rename to components/configuration/VFBMain/queryBuilderConfiguration.js diff --git a/components/configuration/spotlightConfiguration.js b/components/configuration/VFBMain/spotlightConfiguration.js similarity index 100% rename from components/configuration/spotlightConfiguration.js rename to components/configuration/VFBMain/spotlightConfiguration.js diff --git a/components/configuration/tutorialsList.json b/components/configuration/VFBOverview/tutorialsList.json similarity index 100% rename from components/configuration/tutorialsList.json rename to components/configuration/VFBOverview/tutorialsList.json diff --git a/components/configuration/VFBTermInfo/VFBTermInfoConfiguration.js b/components/configuration/VFBTermInfo/VFBTermInfoConfiguration.js new file mode 100644 index 000000000..3d550df60 --- /dev/null +++ b/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 +}; \ No newline at end of file diff --git a/components/configuration/buttonBarConfiguration.js b/components/configuration/VFBTermInfo/buttonBarConfiguration.js similarity index 100% rename from components/configuration/buttonBarConfiguration.js rename to components/configuration/VFBTermInfo/buttonBarConfiguration.js diff --git a/components/configuration/vfbtoolbarHTML.js b/components/configuration/VFBToolbar/vfbtoolbarHTML.js similarity index 100% rename from components/configuration/vfbtoolbarHTML.js rename to components/configuration/VFBToolbar/vfbtoolbarHTML.js diff --git a/components/configuration/vfbtoolbarMenuConfiguration.js b/components/configuration/VFBToolbar/vfbtoolbarMenuConfiguration.js similarity index 100% rename from components/configuration/vfbtoolbarMenuConfiguration.js rename to components/configuration/VFBToolbar/vfbtoolbarMenuConfiguration.js diff --git a/components/configuration/treeWidgetConfiguration.js b/components/configuration/VFBTree/VFBTreeConfiguration.js similarity index 60% rename from components/configuration/treeWidgetConfiguration.js rename to components/configuration/VFBTree/VFBTreeConfiguration.js index f088829c2..06727d7f6 100644 --- a/components/configuration/treeWidgetConfiguration.js +++ b/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": [ { diff --git a/components/configuration/tabConfiguration.js b/components/configuration/tabConfiguration.js deleted file mode 100644 index 5154795af..000000000 --- a/components/configuration/tabConfiguration.js +++ /dev/null @@ -1,49 +0,0 @@ -var styled = require('react-tabtab').styled; -let { TabListStyle, ActionButtonStyle, TabStyle, PanelStyle } = styled; -TabListStyle = TabListStyle.extend` -background-color: transparent; -color: #ffffff; -box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); -border: 0; -`; -TabStyle = TabStyle.extend` -background-color: transparent; -color: #11bffe; -transition: color .28s ease; -border: 1px solid #11bffe; -${props => props.active && !props.vertical - ? ` - background-color: #ffffff; - color: #11bffe; - border: 2px solid #11bffe; - ` - : null} -&:hover { - background-color: transparent; - color: #00a0db; - border: 2px solid #00a0db; -} -`; -ActionButtonStyle = ActionButtonStyle.extend` -background-color: transparent; -color: #ffffff; -border-radius: 0; -&:hover { background-color: #eee; } -border: 0; -`; -PanelStyle = PanelStyle.extend` -background-color: #009988; -border-left: 1px solid rgba(50,50,50,0.12); -border-right: 1px solid rgba(50,50,50,0.12); -border-bottom: 1px solid rgba(50,50,50,0.12); -padding: 30px 30px; -transition: box-shadow .25s, -webkit-box-shadow .25s; -border-radius: 2px; -`; -// need to follow this object naming -module.exports = { - TabList: TabListStyle, - ActionButton: ActionButtonStyle, - Tab: TabStyle, - Panel: PanelStyle -}; diff --git a/components/interface/FocusTerm.js b/components/interface/VFBFocusTerm/VFBFocusTerm.js similarity index 98% rename from components/interface/FocusTerm.js rename to components/interface/VFBFocusTerm/VFBFocusTerm.js index 465600785..cdfb305d0 100644 --- a/components/interface/FocusTerm.js +++ b/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); diff --git a/components/interface/TutorialWidget.js b/components/interface/VFBOverview/TutorialWidget.js similarity index 88% rename from components/interface/TutorialWidget.js rename to components/interface/VFBOverview/TutorialWidget.js index 4c146a341..bca485db2 100644 --- a/components/interface/TutorialWidget.js +++ b/components/interface/VFBOverview/TutorialWidget.js @@ -2,7 +2,7 @@ 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 { @@ -10,7 +10,7 @@ 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); diff --git a/components/interface/StackViewer.js b/components/interface/VFBStackViewer/VFBStackViewer.js similarity index 99% rename from components/interface/StackViewer.js rename to components/interface/VFBStackViewer/VFBStackViewer.js index 8f6472e95..81caa9b49 100644 --- a/components/interface/StackViewer.js +++ b/components/interface/VFBStackViewer/VFBStackViewer.js @@ -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); diff --git a/components/interface/VFBTermInfo.js b/components/interface/VFBTermInfo/VFBTermInfo.js similarity index 80% rename from components/interface/VFBTermInfo.js rename to components/interface/VFBTermInfo/VFBTermInfo.js index ae60ab826..e2ba5b8f7 100644 --- a/components/interface/VFBTermInfo.js +++ b/components/interface/VFBTermInfo/VFBTermInfo.js @@ -10,11 +10,7 @@ var GEPPETTO = require('geppetto'); var anchorme = require('anchorme'); var Type = require('geppetto-client/js/geppettoModel/model/Type'); -require('../../css/VFBTermInfo.less'); -require('geppetto-client/js/components/widgets/popup/Popup.less'); -require('geppetto-client/js/components/widgets/popup/vendor/slick.less'); -require('geppetto-client/js/components/widgets/popup/vendor/slick-theme.less'); - +require('../../../css/VFBTermInfo.less'); class VFBTermInfo extends React.Component { @@ -460,102 +456,8 @@ export default class VFBTermInfoWidget extends React.Component { this.getTermInfoDefaultWidth = this.getTermInfoDefaultWidth.bind(this); this.getTermInfoDefaultHeight = this.getTermInfoDefaultHeight.bind(this); - this.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" - } - } - }; - - this.buttonBarControls = { - "VisualCapability": ['select', - 'color', - 'visibility_obj', - 'visibility_swc', - 'zoom', - 'delete'] - }; + this.buttonBarConfiguration = require('../../configuration/VFBTermInfo/VFBTermInfoConfiguration').buttonBarConfiguration; + this.buttonBarControls = require('../../configuration/VFBTermInfo/VFBTermInfoConfiguration').buttonBarControls; this.data = []; this.idWidget = "vfbterminfowidget"; diff --git a/components/interface/VFBToolBar.js b/components/interface/VFBToolbar/VFBToolBar.js similarity index 95% rename from components/interface/VFBToolBar.js rename to components/interface/VFBToolbar/VFBToolBar.js index cf236e62c..b5fd3ac2d 100644 --- a/components/interface/VFBToolBar.js +++ b/components/interface/VFBToolbar/VFBToolBar.js @@ -3,7 +3,7 @@ import React from 'react'; import Menu from 'geppetto-client/js/components/interface/menu/Menu'; var Rnd = require('react-rnd').default; -require('../../css/VFBToolBar.less'); +require('../../../css/VFBToolBar.less'); const popperStyles = { root: { @@ -68,10 +68,10 @@ export default class VFBToolBar extends React.Component { htmlChild: undefined } - this.menuConfiguration = require('../configuration/vfbtoolbarMenuConfiguration.js').toolbarMenu; - this.aboutHTML = require('../configuration/vfbtoolbarHTML.js').about; - this.feedbackHTML = require('../configuration/vfbtoolbarHTML.js').feedback; - this.contributeHTML = require('../configuration/vfbtoolbarHTML.js').contribute; + this.menuConfiguration = require('../../configuration/VFBToolbar/vfbtoolbarMenuConfiguration').toolbarMenu; + this.aboutHTML = require('../../configuration/VFBToolbar/vfbtoolbarHTML').about; + this.feedbackHTML = require('../../configuration/VFBToolbar/vfbtoolbarHTML').feedback; + this.contributeHTML = require('../../configuration/VFBToolbar/vfbtoolbarHTML').contribute; this.clickAbout = this.clickAbout.bind(this); diff --git a/components/interface/TreeWidget.js b/components/interface/VFBTree/VFBTree.js similarity index 94% rename from components/interface/TreeWidget.js rename to components/interface/VFBTree/VFBTree.js index 814abbbac..27e3294dc 100644 --- a/components/interface/TreeWidget.js +++ b/components/interface/VFBTree/VFBTree.js @@ -12,10 +12,10 @@ import { import 'react-sortable-tree/style.css'; var $ = require('jquery'); -const restPostConfig = require('../configuration/treeWidgetConfiguration').restPostConfig; -const treeCypherQuery = require('../configuration/treeWidgetConfiguration').treeCypherQuery; +const restPostConfig = require('../../configuration/VFBTree/VFBTreeConfiguration').restPostConfig; +const treeCypherQuery = require('../../configuration/VFBTree/VFBTreeConfiguration').treeCypherQuery; -export default class TreeWidget extends React.Component { +export default class VFBTree extends React.Component { constructor (props) { super(props); @@ -45,15 +45,15 @@ export default class TreeWidget extends React.Component { this.monitorMouseClick = this.monitorMouseClick.bind(this); this.convertDataForTree = this.convertDataForTree.bind(this); - this.isNumber = require('./VFBTree/helper').isNumber; - this.sortData = require('./VFBTree/helper').sortData; - this.findRoot = require('./VFBTree/helper').findRoot; - this.convertEdges = require('./VFBTree/helper').convertEdges; - this.convertNodes = require('./VFBTree/helper').convertNodes; - this.searchChildren = require('./VFBTree/helper').searchChildren; - this.defaultComparator = require('./VFBTree/helper').defaultComparator; - this.parseGraphResultData = require('./VFBTree/helper').parseGraphResultData; - this.buildDictClassToIndividual = require('./VFBTree/helper').buildDictClassToIndividual; + this.isNumber = require('./helper').isNumber; + this.sortData = require('./helper').sortData; + this.findRoot = require('./helper').findRoot; + this.convertEdges = require('./helper').convertEdges; + this.convertNodes = require('./helper').convertNodes; + this.searchChildren = require('./helper').searchChildren; + this.defaultComparator = require('./helper').defaultComparator; + this.parseGraphResultData = require('./helper').parseGraphResultData; + this.buildDictClassToIndividual = require('./helper').buildDictClassToIndividual; this.theme = createMuiTheme({ overrides: { MuiTooltip: { tooltip: { fontSize: "12px" } } } }); this.AUTHORIZATION = "Basic " + btoa("neo4j:vfb"); @@ -476,6 +476,10 @@ export default class TreeWidget extends React.Component { GEPPETTO.on(GEPPETTO.Events.Instances_created, function () { that.setState({ displayColorPicker: false }); }); + + GEPPETTO.on(GEPPETTO.Events.Color_set, function (instance) { + that.forceUpdate(); + }); } render () { diff --git a/css/FocusTerm.less b/css/VFBFocusTerm.less similarity index 100% rename from css/FocusTerm.less rename to css/VFBFocusTerm.less diff --git a/css/VFBTermInfo.less b/css/VFBTermInfo.less index ccfaa0493..d1cd9e6d5 100644 --- a/css/VFBTermInfo.less +++ b/css/VFBTermInfo.less @@ -479,3 +479,419 @@ .Collapsible__contentInner li{ clear: both; } + +// POPUP component style + +.popup { + font-size: 14px; + font-weight: 200; + color: white; + overflow: auto !important; + -webkit-user-select: text; + -khtml-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; +} + +.popup-link{ + color: @primary_color; +} + +.popup-link:hover { + color: @secondary_color; + text-decoration: none; +} +.popup a { + color: @primary_color; +} + +.popup p { + color: @primary_color; +} + +.popup a:hover { + color: @secondary_color; + text-decoration: none; +} + +.popup-image { + margin: 0 auto; + text-align: center; + color: white; + clear: both; + max-width: 100%; + margin-left: 25px; +} + +.invert { + -webkit-filter: invert(22%); + filter: invert(22%); +} + +.popup-slick-image { + margin: 0 auto; + text-align: center; + color: white; +} + +.popup-icon { + color: #7F98FF; + margin-left: 5px; + margin-right: 5px; +} + +.popup-icon-link { + color: #9bafff; + font-size: 15px; + margin-right: 2px; + margin-left: 2px; +} + +.popup-icon-link:hover { + color: #8098f9; +} + +.popup-slick { + clear: both; + margin-top: 40px; +} + +.popup-title { + font-weight: 600; + color: @primary_color; + cursor: pointer; + clear: both; + float: left; + text-transform: capitalize; + margin-bottom: 5px; + margin-top: 5px; + margin-bottom: 5px; +} + +.popup-title:hover { + color: @secondary_color; +} + +.popup-chevron { + margin-left: 10px; + margin-top: 7px; + float: right; + color: #8A7F7F; + cursor: pointer; +} + +.popup-html { + clear: both; +} + +.popup-text { + font-size: 14px; + font-weight: 200; + text-align: justify; + color: white; + clear: both; +} + + +// Slick styling + +/* Slider */ +.slick-slider +{ + position: relative; + + -moz-box-sizing: border-box; + box-sizing: border-box; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + -webkit-touch-callout: none; + -khtml-user-select: none; + -ms-touch-action: pan-y; + touch-action: pan-y; + -webkit-tap-highlight-color: transparent; +} + +.slick-list +{ + position: relative; + + display: block; + overflow: hidden; + + margin: 0; + padding: 0; +} +.slick-list:focus +{ + outline: none; +} +.slick-list.dragging +{ + cursor: pointer; + cursor: hand; +} + +.slick-slider .slick-track, +.slick-slider .slick-list +{ + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +.slick-track +{ + position: relative; + top: 0; + left: 0; + display: block; +} +.slick-track:before, +.slick-track:after +{ + display: table; + + content: ''; +} +.slick-track:after +{ + clear: both; +} +.slick-loading .slick-track +{ + visibility: hidden; +} + +.slick-slide +{ + display: none; + float: left; + + height: 100%; + min-height: 1px; +} +[dir='rtl'] .slick-slide +{ + float: right; +} +.slick-slide img +{ + display: block; +} +.slick-slide.slick-loading img +{ + display: none; +} +.slick-slide.dragging img +{ + pointer-events: none; +} +.slick-initialized .slick-slide +{ + display: block; +} +.slick-loading .slick-slide +{ + visibility: hidden; +} +.slick-vertical .slick-slide +{ + display: block; + + height: auto; + + border: 1px solid transparent; +} +.slick-arrow.slick-hidden { + display: none; +} + +// Slick theme + +/* Slider */ +.slick-loading .slick-list { + background: #fff url('./images/ajax-loader.gif') center center no-repeat; +} + +.slick-next { + right: 6px; +} + +[dir='rtl'] .slick-next { + right: auto; + left: -25px; +} + +.slick-arrow:hover { + color: @secondary_color; +} + +.slick-arrow { + color: @primary_color; + z-index: 2; + cursor: pointer; +} + +/* Arrows */ +.slick-prev, +.slick-next { + font-size: 0; + line-height: 0; + + position: absolute; + top: 50%; + + display: block; + + width: 20px; + height: 20px; + padding: 0; + -webkit-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); + + cursor: pointer; + + border: none; + outline: none; + background: transparent; +} + +.slick-prev:hover, +.slick-prev:focus, +.slick-next:hover, +.slick-next:focus { + outline: none; + background: transparent; +} + +.slick-prev:hover:before, +.slick-prev:focus:before, +.slick-next:hover:before, +.slick-next:focus:before { + opacity: 1; +} + +.slick-prev.slick-disabled:before, +.slick-next.slick-disabled:before { + opacity: .25; +} + +.slick-prev:before, +.slick-next:before { + font-family: 'FontAwesome'; + font-size: 14px; + line-height: 1; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.slick-prev:before { + content: '\f137'; +} + +[dir='rtl'] .slick-prev:before { + content: '\f138'; +} + +.slick-next:before { + content: '\f138'; +} + +[dir='rtl'] .slick-next:before { + content: '\f137'; +} + +/* Dots */ +.slick-slider { + margin-bottom: 30px; +} + +.slick-dots { + position: absolute; + bottom: -45px; + + display: block; + + width: 100%; + padding: 0; + + list-style: none; + + text-align: center; +} + +.slick-dots li { + position: relative; + + display: inline-block; + + width: 20px; + height: 20px; + margin: 0 5px; + padding: 0; + + cursor: pointer; +} + +.slick-dots li button { + font-size: 0; + line-height: 0; + + display: block; + + width: 20px; + height: 20px; + padding: 5px; + + cursor: pointer; + + color: transparent; + border: 0; + outline: none; + background: transparent; +} + +.slick-dots li button:hover, +.slick-dots li button:focus { + outline: none; +} + +.slick-dots li button:hover:before, +.slick-dots li button:focus:before { + color: @secondary_color; +} + +.slick-dots li button:before { + font-family: 'FontAwesome'; + font-size: 6px; + line-height: 14px; + + position: absolute; + top: 0; + left: 0; + + width: 20px; + height: 20px; + + content: '\f111'; + text-align: center; + + color: white; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.slick-dots li.slick-active button:before { + color: @primary_color; + z-index: 2; +} diff --git a/css/images/ajax-loader.gif b/css/images/ajax-loader.gif new file mode 100644 index 000000000..e0e6e9760 Binary files /dev/null and b/css/images/ajax-loader.gif differ