Add editor to existing session; Show loading status. Close #1885

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 () {

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();

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 = '<div class="lds-ripple"><div></div><div></div></div>';
     class InteractiveEditorWidget {
         constructor(container) {
-            this.showComputeShield(container);
+            this.$el = container;
         }
 
-        showComputeShield(container) {
+        showComputeShield() {
             const overlay = $('<div>', {class: 'compute-shield'});
-            container.append(overlay);
+            this.$el.append(overlay);
             overlay.append($('<div>', {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*/) {

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 {

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;
     }