Skip to content

Commit

Permalink
7330: advanced settings spark (#7374)
Browse files Browse the repository at this point in the history
* #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".
  • Loading branch information
jaroslawmalekcodete authored and scottdraves committed May 23, 2018
1 parent 8120e57 commit 8a3ffce
Show file tree
Hide file tree
Showing 19 changed files with 495 additions and 119 deletions.
91 changes: 60 additions & 31 deletions js/notebook/src/Foldout.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ class FoldoutView extends widgets.BoxView {
hiddenContainer: HTMLElement;
timeoutId: number;
active: boolean;
hidePreview: boolean;

initialize(parameters) {
this.addLabel();
Expand All @@ -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);
}

Expand All @@ -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');
Expand All @@ -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 {
Expand All @@ -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();
Expand Down
27 changes: 27 additions & 0 deletions js/notebook/src/SparkConfiguration.ts
Original file line number Diff line number Diff line change
@@ -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
};
65 changes: 48 additions & 17 deletions js/notebook/src/SparkUI.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@
* limitations under the License.
*/

import * as $ from "jquery";

const widgets = require('./widgets');

class SparkUIModel extends widgets.VBoxModel {
Expand All @@ -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();
}

Expand All @@ -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;
}
}

Expand Down
1 change: 1 addition & 0 deletions js/notebook/src/embed.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions js/notebook/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
11 changes: 6 additions & 5 deletions js/notebook/src/shared/style/beakerx.scss
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,11 @@ $focusColor: #66bb6a;
}
}

&.collapsed {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}

&.active {
.foldout-label,
.widget-label {
Expand All @@ -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;
Expand Down Expand Up @@ -151,6 +151,7 @@ $focusColor: #66bb6a;
overflow: hidden;
transition: height 0.3s ease-in-out;

&:after,
&:before {
content: '';
height: 10px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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();
Expand Down
Loading

0 comments on commit 8a3ffce

Please sign in to comment.