7330: advanced settings spark (#7374)

* #7267 SparkProgress and foldout js part * #7267 SparkProgress and Foldout java part * #7267 fix Foldout paddings * #7330: add spark configuration widget * #7330: add foldout to spark option * #7330: add hide preview option * #7330: show all jobs in opened spark progress * #7330 Foldout without preview js * #7330: add header label for foldout * #7330 fix SparkUI labels width * #7330: add header label for foldout * #7330: fix tests * #7330 use headerLabel property from Foldout widget * #7330: show only one progress * #7330: ignore spark conf when name is null * #7330 add missing catch statement in SparkUI view promise * #7330: fix test and NullPointerException * #7330: move the "connect" button to the top, remove the fold out, rename "connect" to "start".
twosigma · May 23, 2018 · 8a3ffce · 8a3ffce
1 parent 8120e57
commit 8a3ffce
Show file tree

Hide file tree

Showing 19 changed files with 495 additions and 119 deletions.
diff --git a/js/notebook/src/Foldout.ts b/js/notebook/src/Foldout.ts
@@ -45,6 +45,7 @@ class FoldoutView extends widgets.BoxView {
   hiddenContainer: HTMLElement;
   timeoutId: number;
   active: boolean;
+  hidePreview: boolean;
 
   initialize(parameters) {
     this.addLabel();
@@ -53,26 +54,27 @@ class FoldoutView extends widgets.BoxView {
     this.addHiddenContainer();
 
     super.initialize(parameters);
+
+    this.hidePreview = this.model.get('hidePreview');
   }
 
   add_child_model(model) {
     return this.create_child_view(model).then((view: widgets.DOMWidgetView) => {
-      if (view instanceof widgets.LabelView) {
-        this.label.insertWidget(0, view.pWidget);
-        view.pWidget.node.classList.add('foldout-label-content');
-      } else {
-        this.content.layout && this.content.addWidget(view.pWidget);
-      }
+      this.content.layout && this.content.addWidget(view.pWidget);
 
       return view;
     }).catch(widgets.reject('Could not add child view to box', true));
   }
 
   addLabel() {
     this.label = new Panel();
+    let labelContent = new Widget();
 
+    labelContent.node.innerText = `${this.model.get('headerLabel') || DEFAULT_LABEL_TEXT}`;
+    labelContent.node.classList.add('foldout-label-content');
     this.label.node.classList.add('foldout-label');
     this.label.node.addEventListener('click', this.headerClickCallback.bind(this));
+    this.label.insertWidget(0, labelContent);
     this.pWidget.insertWidget(0, this.label);
   }
 
@@ -86,6 +88,10 @@ class FoldoutView extends widgets.BoxView {
   }
 
   addPreviewContent() {
+    if (this.hidePreview) {
+      return;
+    }
+
     this.previewContainer = new Widget();
     this.previewContent = document.createElement('div');
     this.previewContainer.node.classList.add('foldout-preview');
@@ -107,37 +113,54 @@ class FoldoutView extends widgets.BoxView {
     this.active = !this.active;
     this.el.classList.toggle('active', this.active);
 
-    if (this.active) {
-      this.hiddenContainer.style.width = `${this.el.clientWidth}px`;
+    this.active ? this.activateFoldout() : this.deactivateFoldout();
+  }
+
+  activateFoldout() {
+    this.hiddenContainer.style.width = `${this.el.clientWidth}px`;
+
+    if (!this.hidePreview) {
       this.previewContainer.node.style.opacity = '0';
-      this.timeoutId = setTimeout(
-        this.activateFoldoutCallback.bind(this),
-        100
-      );
-    } else {
+    }
+
+    this.timeoutId = setTimeout(
+      this.activateFoldoutCallback.bind(this),
+      100
+    );
+  }
+
+  deactivateFoldout() {
+    this.content.node.style.height = `${this.content.node.clientHeight}px`;
+
+    setTimeout(() => {
       this.content.node.style.height = `0px`;
       this.timeoutId = setTimeout(
         this.deactivateFoldoutCallback.bind(this),
         ANIMATION_DURATION
       );
-    }
+    });
   }
 
   activateFoldoutCallback() {
+    if (!this.hidePreview) {
+      this.previewContentParent.appendChild(this.previewContent);
+    }
+
+    this.hiddenContainer.innerHTML = this.content.node.innerHTML;
     this.el.classList.remove('collapsed');
-    this.previewContainer.node.style.opacity = '0';
     this.content.node.style.display = 'block';
-    this.previewContentParent.appendChild(this.previewContent);
-    this.content.node.style.height = `${
-      this.hiddenContainer.clientHeight + DEFAULT_ADDED_SPACE / 2
-    }px`;
+    this.content.node.style.height = `${this.hiddenContainer.clientHeight}px`;
+    this.timeoutId = setTimeout(() => { this.content.node.style.height = 'auto' }, ANIMATION_DURATION);
   }
 
   deactivateFoldoutCallback() {
-    this.el.classList.add('collapsed');
+    if (!this.hidePreview) {
+      this.previewContainer.node.appendChild(this.previewContent);
+      this.previewContainer.node.style.opacity = '1';
+    }
+
     this.content.node.style.display = 'none';
-    this.previewContainer.node.appendChild(this.previewContent);
-    this.previewContainer.node.style.opacity = '1';
+    this.hidePreview && this.el.classList.add('collapsed');
   }
 
   getPreviewContent(): HTMLElement {
@@ -155,18 +178,24 @@ class FoldoutView extends widgets.BoxView {
       }
 
       this.hiddenContainer.innerHTML = this.content.node.innerHTML;
-      this.previewContent = this.getPreviewContent();
-      let textLabelNode = this.label.node.firstChild as HTMLElement;
-      this.previewContainer.node.style.width = `${this.el.clientWidth - (textLabelNode.clientWidth + 40)}px`;
-
-      if (this.previewContent) {
-        this.previewContentParent = this.previewContent.parentNode as HTMLElement;
-        this.previewContainer.node.appendChild(this.previewContent);
-        this.previewContainer.node.style.opacity = '1';
-      }
+      !this.hidePreview && this.renderPreview();
     });
   }
 
+  renderPreview() {
+    this.previewContent = this.getPreviewContent();
+
+    if (!this.previewContent) {
+      return;
+    }
+
+    let textLabelNode = this.label.node.firstChild as HTMLElement;
+    this.previewContainer.node.style.width = `${this.el.clientWidth - (textLabelNode.clientWidth + 40)}px`;
+    this.previewContentParent = this.previewContent.parentNode as HTMLElement;
+    this.previewContainer.node.appendChild(this.previewContent);
+    this.previewContainer.node.style.opacity = '1';
+  }
+
   dispose() {
     super.dispose();
     this.content.dispose();

diff --git a/js/notebook/src/SparkConfiguration.ts b/js/notebook/src/SparkConfiguration.ts
@@ -0,0 +1,27 @@
+
+const widgets = require('./widgets');
+
+
+class SparkConfigurationModel extends widgets.VBoxModel {
+
+    defaults() {
+        return {
+            ...super.defaults(),
+            _view_name: "SparkConfigurationView",
+            _model_name: "SparkConfigurationModel",
+            _model_module: 'beakerx',
+            _view_module: 'beakerx',
+            _model_module_version: BEAKERX_MODULE_VERSION,
+            _view_module_version: BEAKERX_MODULE_VERSION,
+        };
+    }
+}
+
+class SparkConfigurationView extends widgets.VBoxView {
+
+}
+
+export default {
+    SparkConfigurationModel,
+    SparkConfigurationView
+};
diff --git a/js/notebook/src/SparkUI.ts b/js/notebook/src/SparkUI.ts
@@ -14,8 +14,6 @@
  *  limitations under the License.
  */
 
-import * as $ from "jquery";
-
 const widgets = require('./widgets');
 
 class SparkUIModel extends widgets.VBoxModel {
@@ -35,6 +33,7 @@ class SparkUIModel extends widgets.VBoxModel {
 class SparkUIView extends widgets.VBoxView {
   public render() {
     super.render();
+    this.el.classList.add('widget-spark-ui');
     this.updateLabels();
   }
 
@@ -44,30 +43,62 @@ class SparkUIView extends widgets.VBoxView {
   }
 
   private updateLabels() {
-    setTimeout(() => {
-      let labels = this.$el.find('label');
-      let maxW = this.calculateLabelsWidth(labels);
+    const lengths = [];
+    const labels = [];
+    const noop = () => {};
+    const promise = new Promise((resolve, reject) => {
+      this.resolveChildren(this).then((views) => {
+        views.forEach((view) => {
+          this.resolveChildren(view).then((views) => {
+            views.forEach((view) => {
+              this.resolveChildren(view)
+                .then((views) => {
+                  this.collectLabels(views, lengths, labels, resolve);
+                })
+                .catch(reject);
+            });
+          }, noop);
+        });
+      }, noop);
+    });
+
+    promise.then(() => {
+      const maxWidth = Math.max.apply(null, lengths);
+
+      labels.forEach((label) => { label.style.width = `${maxWidth}px`; });
+    }).catch(noop);
+  }
 
-      for(let l of labels) {
-        $(l).outerWidth(maxW);
+  private resolveChildren(view) {
+    return new Promise((resolve, reject) => {
+      if (!view || !view.children_views) {
+        reject();
       }
-    }, 100);
+
+      view.children_views.update(view.model.get('children'))
+        .then(views => resolve(views));
+    });
   }
 
-  private calculateLabelsWidth(labels): number {
-    let maxW = 0;
-    for(let label of labels) {
-      maxW = Math.max(maxW, this.getLabelWidth(label));
-    }
+  private collectLabels(views, lengths, labels, resolve) {
+    views.forEach((view) => {
+      const label = view.el.querySelector('.widget-label');
+
+      if (!label) {
+        return true;
+      }
 
-    return Math.ceil(maxW);
+      lengths.push(this.getLabelWidth(label));
+      labels.push(label);
+    });
 
+    resolve();
   }
 
   private getLabelWidth(labelEl): number {
-    return $(labelEl).css({
-      width: 'auto',
-    }).outerWidth();
+    labelEl.style.width = 'auto';
+
+    return labelEl.clientWidth;
   }
 }
 

diff --git a/js/notebook/src/embed.js b/js/notebook/src/embed.js
@@ -22,6 +22,7 @@ var loadedModules = [
   require("./CyclingDisplayBox"),
   require("./SparkUI").default,
   require("./SparkStateProgress").default,
+  require("./SparkConfiguration").default,
   require("./HTMLPre").default,
   require("./BxHTML").default,
   require("./Foldout").default,

diff --git a/js/notebook/src/index.js b/js/notebook/src/index.js
@@ -35,6 +35,7 @@ var loadedModules = [
   require("./CyclingDisplayBox"),
   require("./SparkUI").default,
   require("./SparkStateProgress").default,
+  require("./SparkConfiguration").default,
   require("./HTMLPre").default,
   require("./BxHTML").default,
   require("./Foldout").default,

diff --git a/js/notebook/src/shared/style/beakerx.scss b/js/notebook/src/shared/style/beakerx.scss
@@ -106,6 +106,11 @@ $focusColor: #66bb6a;
     }
   }
 
+  &.collapsed {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+
   &.active {
     .foldout-label,
     .widget-label {
@@ -115,11 +120,6 @@ $focusColor: #66bb6a;
     }
   }
 
-  &.collapsed {
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
-  }
-
   .foldout-preview {
     font-size: 14px;
     line-height: 1.3em;
@@ -151,6 +151,7 @@ $focusColor: #66bb6a;
     overflow: hidden;
     transition: height 0.3s ease-in-out;
 
+    &:after,
     &:before {
       content: '';
       height: 10px;

diff --git a/...ain/java/com/twosigma/beakerx/kernel/magic/command/outcome/MagicCommandOutputFoldout.java b/...ain/java/com/twosigma/beakerx/kernel/magic/command/outcome/MagicCommandOutputFoldout.java
@@ -73,13 +73,11 @@ public void sendRepliesWithStatus(KernelFunctionality kernel, Message message, i
   }
 
   private void sendHTML(Message message) {
-    Foldout value = new Foldout(message);
-    Label label = new Label(message);
+    Foldout.FoldoutOption foldoutOption = new Foldout.FoldoutOption();
+    foldoutOption.headerLabel = this.header;
+    Foldout value = new Foldout(message, foldoutOption);
     BxHTML content = new BxHTML(message);
-
     content.setValue(getMIMEContainer().get().getData());
-    label.setValue(this.header);
-    value.add(label);
     value.add(content);
     value.display();
   }

diff --git a/kernel/base/src/main/java/com/twosigma/beakerx/widget/Box.java b/kernel/base/src/main/java/com/twosigma/beakerx/widget/Box.java
@@ -33,7 +33,7 @@ public abstract class Box extends ValueWidget<String> {
   public static final String VIEW_NAME_VALUE = "BoxView";
   public static final String MODEL_NAME_VALUE = "BoxModel";
 
-  List<Widget> children;
+  private List<Widget> children;
 
   public Box(List<Widget> children) {
     super();
@@ -45,6 +45,10 @@ public Box(List<Widget> children, Message parent) {
     this.children = children;
   }
 
+  public List<Widget> getChildren() {
+    return children;
+  }
+
   @Override
   protected HashMap<String, Serializable> content(HashMap<String, Serializable> content) {
     List<String> commIds = comIds();