diff --git a/src/visualizers/panels/InteractiveEditor/InteractiveEditorControl.js b/src/visualizers/panels/InteractiveEditor/InteractiveEditorControl.js index 923a63bc3..49afd58e4 100644 --- a/src/visualizers/panels/InteractiveEditor/InteractiveEditorControl.js +++ b/src/visualizers/panels/InteractiveEditor/InteractiveEditorControl.js @@ -1,10 +1,12 @@ /*globals define, WebGMEGlobal*/ define([ + 'deepforge/compute/interactive/session-with-queue', 'deepforge/viz/ConfigDialog', 'js/Constants', 'q', ], function ( + Session, ConfigDialog, CONSTANTS, Q, @@ -16,23 +18,45 @@ define([ constructor(options) { this._logger = options.logger.fork('Control'); this.client = options.client; + this.session = options.session; this._embedded = options.embedded; this._widget = options.widget; this.initializeWidgetHandlers(this._widget); this.territoryEventFilters = []; - this._currentNodeId = null; - + if (this.session) { + this.onComputeInitialized(this.session); + } else { + this._widget.showComputeShield(); + } this._logger.debug('ctor finished'); } initializeWidgetHandlers (widget) { - const features = widget.getCapabilities(); - if (features.save) { - widget.save = () => this.save(); - } + const self = this; + widget.save = function() {return self.save(...arguments);}; widget.getConfigDialog = () => new ConfigDialog(this.client); widget.getInitializationCode = () => this.getInitializationCode(); + widget.createInteractiveSession = + (computeId, config) => this.createInteractiveSession(computeId, config); + } + + async createInteractiveSession(computeId, config) { + const createSession = Session.new(computeId, config); + this._widget.showComputeLoadingStatus(status); + this._widget.updateComputeLoadingStatus('Connecting'); + createSession.on( + 'update', + status => this._widget.updateComputeLoadingStatus(status) + ); + const session = await createSession; + this.onComputeInitialized(session); + } + + async onComputeInitialized(session) { + this.session = session; + this._widget.session = session; // HACK + this._widget.onComputeInitialized(session); // HACK } async getInitializationCode () { @@ -218,6 +242,9 @@ define([ destroy () { this._detachClientEventListeners(); this._widget.destroy(); + if (this.session) { + this.session.close(); + } } _attachClientEventListeners () { diff --git a/src/visualizers/panels/InteractiveEditor/InteractiveEditorPanel.js b/src/visualizers/panels/InteractiveEditor/InteractiveEditorPanel.js index b7b4d7e65..104529aef 100644 --- a/src/visualizers/panels/InteractiveEditor/InteractiveEditorPanel.js +++ b/src/visualizers/panels/InteractiveEditor/InteractiveEditorPanel.js @@ -3,29 +3,25 @@ define([ 'js/PanelBase/PanelBaseWithHeader', 'js/PanelManager/IActivePanel', - 'widgets/InteractiveEditor/InteractiveEditorWidget', - './InteractiveEditorControl' ], function ( PanelBaseWithHeader, IActivePanel, - InteractiveEditorWidget, - InteractiveEditorControl ) { 'use strict'; - function InteractiveEditorPanel(layoutManager, params) { - var options = {}; + function InteractiveEditorPanel(options, params) { + const panelOptions = {}; //set properties from options - options[PanelBaseWithHeader.OPTIONS.LOGGER_INSTANCE_NAME] = 'InteractiveEditorPanel'; - options[PanelBaseWithHeader.OPTIONS.FLOATING_TITLE] = true; + panelOptions[PanelBaseWithHeader.OPTIONS.LOGGER_INSTANCE_NAME] = name + 'Panel'; //call parent's constructor - PanelBaseWithHeader.apply(this, [options, layoutManager]); + PanelBaseWithHeader.call(this, panelOptions); this._client = params.client; this._embedded = params.embedded; + this.session = params.session; - this.initialize(); + this.initialize(options); this.logger.debug('ctor finished'); } @@ -34,23 +30,25 @@ define([ _.extend(InteractiveEditorPanel.prototype, PanelBaseWithHeader.prototype); _.extend(InteractiveEditorPanel.prototype, IActivePanel.prototype); - InteractiveEditorPanel.prototype.initialize = function () { + InteractiveEditorPanel.prototype.initialize = function (options) { + const {Control, Widget} = options; var self = this; //set Widget title this.setTitle(''); - this.widget = new InteractiveEditorWidget(this.logger, this.$el); + this.widget = new Widget(this.logger, this.$el); this.widget.setTitle = function (title) { self.setTitle(title); }; - this.control = new InteractiveEditorControl({ + this.control = new Control({ logger: this.logger, client: this._client, embedded: this._embedded, - widget: this.widget + widget: this.widget, + session: this.session, }); this.onActivate(); diff --git a/src/visualizers/widgets/InteractiveEditor/InteractiveEditorWidget.js b/src/visualizers/widgets/InteractiveEditor/InteractiveEditorWidget.js index ec8b6cb57..f162183d5 100644 --- a/src/visualizers/widgets/InteractiveEditor/InteractiveEditorWidget.js +++ b/src/visualizers/widgets/InteractiveEditor/InteractiveEditorWidget.js @@ -1,13 +1,11 @@ /* globals define, $ */ define([ - 'deepforge/compute/interactive/session-with-queue', 'deepforge/viz/ConfigDialog', 'deepforge/viz/InformDialog', 'deepforge/compute/index', 'deepforge/globals', 'css!./styles/InteractiveEditorWidget.css', ], function( - Session, ConfigDialog, InformDialog, Compute, @@ -18,12 +16,12 @@ define([ const LoaderHTML = '
'; class InteractiveEditorWidget { constructor(container) { - this.showComputeShield(container); + this.$el = container; } - showComputeShield(container) { + showComputeShield() { const overlay = $('
', {class: 'compute-shield'}); - container.append(overlay); + this.$el.append(overlay); overlay.append($('
', {class: 'filler'})); const loader = $(LoaderHTML); overlay.append(loader); @@ -38,13 +36,12 @@ define([ overlay.on('click', async () => { const {id, config} = await this.promptComputeConfig(); try { - this.session = await this.createInteractiveSession(id, config, overlay); + await this.createInteractiveSession(id, config); const features = this.getCapabilities(); if (features.save) { DeepForge.registerAction('Save', 'save', 10, () => this.save()); } overlay.remove(); - this.onComputeInitialized(this.session); } catch (err) { const title = 'Compute Creation Error'; const body = 'Unable to create compute. Please verify the credentials are correct.'; @@ -108,7 +105,9 @@ define([ return {id, config}; } - showComputeLoadingStatus(status, overlay) { + showComputeLoadingStatus() { + const overlay = this.$el.find('.compute-shield'); + this.$el.append(overlay); const msg = overlay.find('.subtitle'); const loader = overlay.find('.lds-ripple'); const title = overlay.find('.title'); @@ -119,32 +118,19 @@ define([ return msg; } - updateComputeLoadingStatus(status, subtitle) { + updateComputeLoadingStatus(status) { + const subtitle = this.$el.find('.subtitle'); const displayText = status === 'running' ? 'Configuring environment' : status.substring(0, 1).toUpperCase() + status.substring(1); subtitle.text(`${displayText}...`); } - async createInteractiveSession(computeId, config, overlay) { - const createSession = Session.new(computeId, config); - - const msg = this.showComputeLoadingStatus(status, overlay); - this.updateComputeLoadingStatus('Connecting', msg); - createSession.on( - 'update', - status => this.updateComputeLoadingStatus(status, msg) - ); - const session = await createSession; - return session; - } - destroy() { const features = this.getCapabilities(); if (features.save) { DeepForge.unregisterAction('Save'); } - this.session.close(); } updateNode(/*desc*/) { diff --git a/src/visualizers/widgets/InteractiveEditor/styles/InteractiveEditorWidget.css b/src/visualizers/widgets/InteractiveEditor/styles/InteractiveEditorWidget.css index 85adc98d7..27cbb0f43 100644 --- a/src/visualizers/widgets/InteractiveEditor/styles/InteractiveEditorWidget.css +++ b/src/visualizers/widgets/InteractiveEditor/styles/InteractiveEditorWidget.css @@ -13,8 +13,8 @@ top: 0; z-index: 100; } -.compute-shield .invisible { - visibility: hidden; } +.compute-shield .hidden { + display: none; } .compute-shield .filler { margin-top: 25%; } .compute-shield .title { @@ -24,9 +24,9 @@ margin: auto; text-align: center; } .compute-shield .subtitle { - color: whitesmoke; + font-style: italic; display: block; - font-size: 1.5em; + font-size: 1.3em; margin: auto; text-align: center; } .compute-shield .lds-ripple { diff --git a/src/visualizers/widgets/InteractiveEditor/styles/InteractiveEditorWidget.scss b/src/visualizers/widgets/InteractiveEditor/styles/InteractiveEditorWidget.scss index a43eee1a6..4e5acba95 100644 --- a/src/visualizers/widgets/InteractiveEditor/styles/InteractiveEditorWidget.scss +++ b/src/visualizers/widgets/InteractiveEditor/styles/InteractiveEditorWidget.scss @@ -35,8 +35,9 @@ .subtitle { color: whitesmoke; + font-style: italic; display: block; - font-size: 1.5em; + font-size: 1.3em; margin: auto; text-align: center; }