#6809 sections of options should use tabs (#6883)

* #6809 add tab-pane wrapper in notebook * #6809 keep styles in css file not in Widgets * #6809 DOMUtils helper * #6809 Remove style from Widget, notify parent when size changed * #6809 remove style from widget * #6809 SizeChangedMessage * #6809 update size when needed * #6809 OptionsWidget with tabs * #6809 import styles from css, remove styles from widget, use OptionsWidget with tabs * #6809 cleanup css * #6809 CS * #6809 fix lab * #6809 fix * #6809 remove duplicated "JVM Options" and "UI Options" * #6855 adjust layout in our options tab (#6890) * #6855 adjust banner layout * #6809 fix truncated labels on tabs * #6809 hide sync widget on tab change
twosigma · Feb 26, 2018 · cc152cd · cc152cd
1 parent 53fad60
commit cc152cd
Show file tree

Hide file tree

Showing 15 changed files with 475 additions and 220 deletions.
diff --git a/js/notebook/src/tree.js b/js/notebook/src/tree.js
@@ -28,13 +28,19 @@ define([
 
   function load() {
     var TreeWidget = require('./tree/TreeWidget').default;
-    var options = {
+    var bxTabPane = $('<div>', {
+      class: 'tab-pane',
+      id: 'beakerx-tree'
+    }).appendTo($('.tab-content')).get(0);
+
+    var widgetOptions = {
       baseUrl: (Jupyter.notebook_list || Jupyter.notebook).base_url,
       isLab: false
     };
-    var bxWidget = new TreeWidget(options);
+    var bxWidget = new TreeWidget(widgetOptions);
+
+    Widget.attach(bxWidget, bxTabPane);
 
-    Widget.attach(bxWidget, $('.tab-content').get(0));
     $('#tabs').append(
       $('<li>').append(
         $('<a>', {
@@ -43,15 +49,20 @@ define([
           'data-toggle': 'tab',
           text: 'BeakerX'
         }).on('click', function (e) {
+          if (false === $(e.currentTarget).parents('li').hasClass('active')) {
+            bxWidget.update();
+          }
           if (window.location.hash === '#beakerx-tree') {
             return;
           }
-
           window.history.pushState(null, '', '#beakerx-tree');
-          bxWidget.update();
         })
       )
     );
+
+    $(window).on('resize', function() {
+      bxWidget.update();
+    });
   }
 
   return {

diff --git a/js/notebook/src/tree/Messages.ts b/js/notebook/src/tree/Messages.ts
@@ -110,4 +110,14 @@ export namespace Messages {
     }
   }
 
+  export const TYPE_SIZE_CHANGED = 'size-changed';
+
+  export class SizeChangedMessage extends Message {
+
+    constructor() {
+      super(TYPE_SIZE_CHANGED);
+    }
+
+  }
+
 }
diff --git a/js/notebook/src/tree/Models/TreeWidgetModel.ts b/js/notebook/src/tree/Models/TreeWidgetModel.ts
@@ -50,7 +50,7 @@ export default class TreeWidgetModel {
             .update(data.ui_options);
         }
 
-        this.showResult(data.jvm_options);
+        this.setResult(data.jvm_options);
 
         setTimeout(() => {
           this.syncEnd()
@@ -64,7 +64,7 @@ export default class TreeWidgetModel {
 
     let payload: IApiSettingsResponse = this.api.mergeWithDefaults(this._options);
 
-    this.showResult(payload.jvm_options);
+    this.setResult(payload.jvm_options);
 
     this.api.saveSettings({ beakerx:  payload })
       .then(() => {
@@ -90,6 +90,19 @@ export default class TreeWidgetModel {
     this._options.jvm_options = options;
   }
 
+  public showResult() {
+    if (this._options) {
+      this.jvmOptionsModel
+        .update(this._options.jvm_options);
+    }
+
+    this.syncWidget.show();
+  }
+
+  public hideResult() {
+    this.syncWidget.hide();
+  }
+
   private syncStart(): void {
     this.syncWidget.onSyncStart();
   }
@@ -98,8 +111,8 @@ export default class TreeWidgetModel {
     this.syncWidget.onSyncEnd();
   }
 
-  private showResult(options: IJVMOptions) {
-    this.syncWidget.showResult(this.buildResult(options));
+  private setResult(options: IJVMOptions) {
+    this.syncWidget.setResult(this.buildResult(options));
   }
 
   private buildResult(options: IJVMOptions): string {

diff --git a/js/notebook/src/tree/TreeWidget.ts b/js/notebook/src/tree/TreeWidget.ts
@@ -14,9 +14,7 @@
  *  limitations under the License.
  */
 
-import * as $ from "jquery";
-
-import { Panel, Widget } from "@phosphor/widgets";
+import { Panel } from "@phosphor/widgets";
 import { Message } from "@phosphor/messaging";
 
 import BeakerXApi from "./Utils/BeakerXApi";
@@ -25,22 +23,11 @@ import { Messages } from "./Messages";
 import ITreeWidgetOptions from "./Types/ITreeWidgetOptions";
 import TreeWidgetModel from "./Models/TreeWidgetModel";
 import SyncIndicatorWidget from "./Widgets/SyncIndicatorWidget";
-import JVMOptionsWidget from "./Widgets/JVMOptionsWidget";
-import {UIOptionsWidget} from "./Widgets/UIOptions/UIOptionsWidget";
-import UIOptionsModel from "./Models/UIOptionsModel";
+import OptionsWidget from "./Widgets/OptionsWidget";
 
-export default class TreeWidget extends Panel {
+import "./styles/tree.css";
 
-  public readonly HTML_ELEMENT_TEMPLATE = `
-<style>
-  #beakerx-tree { 
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    box-sizing: border-box;
-  }
-</style>
-`;
+export default class TreeWidget extends Panel {
 
   private _model: TreeWidgetModel;
 
@@ -49,45 +36,43 @@ export default class TreeWidget extends Panel {
 
     let api = new BeakerXApi(this.options.baseUrl);
 
-    this.id = 'beakerx-tree';
-    this.title.label = 'BeakerX';
-    this.title.closable = true;
-    this.addClass('tab-pane');
+    this.id = 'beakerx-tree-widget';
 
-    this.createWidgetContent(api);
-  }
+    if (this.options.isLab) {
+      this.addClass('isLab');
+    } else {
+      require("./styles/tree-notebook.css");
+    }
 
-  private createWidgetContent(api: BeakerXApi) {
+    this.title.label = 'BeakerX';
+    this.title.closable = true;
 
+    let bannerWidget = new BannerWidget(api);
+    let optionsWidget = new OptionsWidget(this.options.isLab);
     let syncIndicatorWidget = new SyncIndicatorWidget();
-    let jvmOptionsWidget = new JVMOptionsWidget();
-    let uiOptionsWidget;
-    let uiOptionsModel;
-    if (false === this.options.isLab) {
-      uiOptionsWidget = new UIOptionsWidget();
-      uiOptionsModel = new UIOptionsModel(uiOptionsWidget);
-    }
 
     this._model = new TreeWidgetModel(
       api,
-      jvmOptionsWidget.model,
-      uiOptionsModel,
+      optionsWidget.jvmOptionsModel,
+      optionsWidget.uiOptionsModel,
       syncIndicatorWidget
     );
 
-    this.addWidget(new BannerWidget(api));
-    this.addWidget(new Widget({ node: document.createElement('br') }));
-
-    if (false === this.options.isLab) {
-      this.addWidget(uiOptionsWidget);
-    }
-
-    this.addWidget(jvmOptionsWidget);
+    this.addWidget(bannerWidget);
+    this.addWidget(optionsWidget);
     this.addWidget(syncIndicatorWidget);
   }
 
   public processMessage(msg: Message): void {
     switch (msg.type) {
+      case 'show-result':
+        this._model.clearErrors();
+        this._model.showResult();
+        break;
+      case 'hide-result':
+        this._model.clearErrors();
+        this._model.hideResult();
+        break;
       case Messages.TYPE_UI_OPTIONS_CHANGED:
         this._model.clearErrors();
         this._model.setUIOptions((msg as Messages.UIOptionsChangedMessage).options);
@@ -108,13 +93,8 @@ export default class TreeWidget extends Panel {
     }
   }
 
-  public onBeforeAttach(msg: Message): void {
-    this.createWidgetStylesElement();
+  protected onBeforeAttach(msg: Message): void {
     this._model.load();
   }
 
-  private createWidgetStylesElement(): void {
-    $(this.HTML_ELEMENT_TEMPLATE)
-      .insertBefore(this.node);
-  }
 }
diff --git a/js/notebook/src/tree/Utils/DOMUtils.ts b/js/notebook/src/tree/Utils/DOMUtils.ts
@@ -0,0 +1,34 @@
+/*
+ *  Copyright 2017 TWO SIGMA OPEN SOURCE, LLC
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import * as $ from "jquery";
+
+export default class DOMUtils {
+
+  public static getRealElementHeight(el: HTMLElement): number {
+    let copyEl = $(el).clone()
+      .attr("id", null)
+      .css({
+        visibility:"hidden",
+        display:"block",
+        position:"absolute"
+      });
+    $('body').append(copyEl);
+    let h = copyEl.outerHeight();
+    copyEl.remove();
+    return h;
+  }
+}
diff --git a/js/notebook/src/tree/Widgets/BannerWidget.ts b/js/notebook/src/tree/Widgets/BannerWidget.ts
@@ -15,11 +15,11 @@
  */
 
 import * as $ from 'jquery';
+
 import { Widget } from "@phosphor/widgets";
 
 import BeakerXApi from "../Utils/BeakerXApi";
 
-
 export default class BannerWidget extends Widget {
 
   static readonly GITHUB_RELEASE_TAG_BASE_URL = 'https://github.com/twosigma/beakerx/releases/tag/';
@@ -41,90 +41,51 @@ export default class BannerWidget extends Widget {
         <path style="fill:#0000000;" d="M 65.480469 13.867188 L 64.949219 13.125 L 64.835938 12.964844 L 64.304688 12.222656 L 61.160156 7.824219 L 62.21875 7.824219 L 64.832031 11.484375 L 67.449219 7.824219 L 68.507812 7.824219 L 65.363281 12.222656 L 65.480469 12.386719 L 68.742188 7.824219 L 69.800781 7.824219 L 66.007812 13.125 L 69.824219 18.464844 L 68.765625 18.464844 Z M 65.480469 13.867188 "/>
     </g>
 </svg>  
-`;
-
-  static readonly BASIC_HTML_ELEMENT_TEMPLATE = `
-<style>
-  #beakerx_env_toolbar {
-    margin: 0 15px;
-  }
-  #beakerx_info .beakerx_site_link {
-    display: inline-block;
-    margin: 5px 0;
-  }
-
-  #beakerx_info .beakerx_site_link svg {
-    height: 35px;
-  }
-</style>
-<div id="beakerx_env_toolbar" class="list_toolbar">
-    <span id="beakerx_info" class="toolbar_info"></span>
-</div>
 `;
 
   constructor(api: BeakerXApi) {
     super();
+
+    this.addClass('bx-banner-widget');
+
     api
       .getVersion()
       .then((version) => {
-          this.buildWidget(version);
+          this.createBanner(version);
       });
   }
 
-  private buildWidget(version: string) {
-    this.createBaseElement();
-    this.createBanner(version);
-  }
-
-  private createBaseElement(): void {
-    $(BannerWidget.BASIC_HTML_ELEMENT_TEMPLATE)
-      .appendTo(this.node);
-  }
-
   private createBanner(version: string): void {
     $(this.node)
-      .find('#beakerx_info')
       .empty()
       .append(
         this.createLinkedBannerElementRow(),
-        this.createLinkedVersionElementRow(version),
-        this.createLinkedFromElementRow()
-      );
-  }
+        document.createTextNode(' version '),
 
-  private createLinkedFromElementRow() {
-    return $('<div>', {
-      text: 'from '
-    }).append(
-      $('<a>', {
-        target: '_blank',
-        href: 'http://opensource.twosigma.com/',
-        text: 'Two Sigma Open Source',
-      })
-    );
-  }
+        $('<a>', {
+          target: '_blank',
+          href: `${BannerWidget.GITHUB_RELEASE_TAG_BASE_URL}${version}`,
+          text: version
+        }),
 
-  private createLinkedBannerElementRow() {
-    return $('<div>').append(
-      $('<a>', {
-        class: 'beakerx_site_link',
-        target: '_blank',
-        href: 'http://BeakerX.com',
-      }).append(
-        $(`${BannerWidget.SVG_LOGO}`)
-      )
-    );
+        document.createTextNode(', from '),
+
+        $('<a>', {
+          target: '_blank',
+          href: 'http://opensource.twosigma.com/',
+          text: 'Two Sigma Open Source',
+        }),
+
+      );
   }
 
-  private createLinkedVersionElementRow(version: string) {
-    return $('<div>', {
-      text: 'version '
+  private createLinkedBannerElementRow() {
+    return $('<a>', {
+      class: 'beakerx_site_link',
+      target: '_blank',
+      href: 'http://BeakerX.com',
     }).append(
-      $('<a>', {
-        target: '_blank',
-        href: `${BannerWidget.GITHUB_RELEASE_TAG_BASE_URL}${version}`,
-        text: version
-      })
+      $(`${BannerWidget.SVG_LOGO}`)
     );
   }