#6214 add UIOptionsWidget, UIOptionsModel, messages and logic

js/notebook/src/tree/BeakerXApi.ts

@@ -27,8 +27,15 @@ export interface IJVMOptions extends IDefaultJVMOptions {
   properties: IPropertiesJVMOptions;
 }
 
+export interface IUIOptions {
+  auto_close: boolean;
+  improve_fonts: boolean;
+  wide_cells: boolean;
+}
+
 export interface IApiSettingsResponse {
   jvm_options: IJVMOptions;
+  ui_options: IUIOptions;
   version: number;
 }
 

js/notebook/src/tree/JVMOptions/Messages.ts

@@ -1,6 +1,6 @@
 import { Message } from "@phosphor/messaging";
 import {
-  IDefaultJVMOptions, IOtherJVMOptions, IPropertiesJVMOptions
+  IDefaultJVMOptions, IOtherJVMOptions, IPropertiesJVMOptions, IUIOptions
 } from "../BeakerXApi";
 
 export namespace Messages {
@@ -64,4 +64,20 @@ export namespace Messages {
       return this._properties;
     }
   }
+
+  export const TYPE_UI_OPTIONS_CHANGED = 'ui-options-changed';
+
+  export class UIOptionsChangedMessage extends Message {
+    private _options: IUIOptions;
+
+    constructor(options: IUIOptions) {
+      super(TYPE_UI_OPTIONS_CHANGED);
+      this._options = options
+    }
+
+    get options(): IUIOptions {
+      return this._options;
+    }
+  }
+
 }

js/notebook/src/tree/JVMOptions/OtherOptionsWidget.ts

@@ -65,6 +65,7 @@ export class OtherOptionsWidget extends Widget {
       .find(this.ADD_BUTTON_SELECTOR)
       .on('click', this.addOptionButtonClickedHandler.bind(this));
   }
+
   private clear() {
     this.$node.find(this.PANEL_SELECTOR).empty();
   }

js/notebook/src/tree/JVMOptions/UIOptionsWidget.ts

@@ -0,0 +1,109 @@
+/*
+ *  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";
+import { Widget } from "@phosphor/widgets";
+import { IUIOptions } from "../BeakerXApi";
+import {MessageLoop} from "@phosphor/messaging";
+import {Messages} from "./Messages";
+
+export class UIOptionsWidget extends Widget {
+
+  public readonly AUTO_CLOSE_SELECTOR = '#auto_close';
+  public readonly WIDE_CELLS_SELECTOR = '#wide_cells';
+  public readonly IMPROVE_FONTS_SELECTOR = '#improve_fonts';
+
+  public readonly HTML_ELEMENT_TEMPLATE = `
+<fieldset id="ui_options">
+  <legend>UI Options:</legend>
+  <div class="form-inline form-group">
+    <label class="control-label" for="auto_close">Auto close brackets</label>
+    <input id="auto_close" name="auto_close" type="checkbox" class="form-control mb-2 mr-sm-2 mb-sm-0">
+  </div>
+  <div class="form-inline form-group">
+    <label class="control-label" for="wide_cells">Wide code cells</label>
+    <input id="wide_cells" name="wide_cells" type="checkbox" class="form-control mb-2 mr-sm-2 mb-sm-0">
+  </div>
+  <div class="form-inline form-group">
+    <label class="control-label" for="improve_fonts">Improve fonts</label>
+    <input id="improve_fonts" name="improve_fonts" type="checkbox" class="form-control mb-2 mr-sm-2 mb-sm-0">
+  </div>
+</fieldset>
+`;
+
+  public get $node(): JQuery<HTMLElement> {
+    return $(this.node);
+  }
+
+  constructor() {
+    super();
+
+    $(this.HTML_ELEMENT_TEMPLATE).appendTo(this.node);
+
+    this.$node
+      .find(`${ this.AUTO_CLOSE_SELECTOR },${ this.IMPROVE_FONTS_SELECTOR },${ this.WIDE_CELLS_SELECTOR }`)
+      .on('change', this.optionsChangedHandler.bind(this));
+  }
+
+  public onLoad(options: IUIOptions) {
+    this._options = options;
+
+    this.setWideCells(options.wide_cells);
+    this.setAutoClose(options.auto_close);
+    this.setImproveFonts(options.improve_fonts);
+  }
+
+  private optionsChangedHandler(evt): void {
+    this._options[evt.currentTarget.id] = evt.currentTarget.checked;
+
+    MessageLoop.sendMessage(
+      this.parent,
+      new Messages.UIOptionsChangedMessage(this._options)
+    );
+  }
+
+  private setWideCells(checked: boolean) {
+    this.$node
+      .find(this.WIDE_CELLS_SELECTOR)
+      .prop('checked', checked);
+  }
+
+  private setAutoClose(checked: boolean) {
+    this.$node
+      .find(this.AUTO_CLOSE_SELECTOR)
+      .prop('checked', checked);
+  }
+
+  private setImproveFonts(checked: boolean) {
+    this.$node
+      .find(this.IMPROVE_FONTS_SELECTOR)
+      .prop('checked', checked);
+  }
+
+  private _options: IUIOptions;
+}
+
+export class UIOptionsModel {
+
+  constructor(private widget: UIOptionsWidget) {
+
+  }
+
+  public update(options: IUIOptions) {
+    console.log(options);
+    this.widget.onLoad(options);
+  }
+}

js/notebook/src/tree/JVMOptionsWidget.ts

@@ -21,9 +21,10 @@ import { DefaultOptionsModel, DefaultOptionsWidget } from "./JVMOptions/DefaultO
 import { OtherOptionsModel, OtherOptionsWidget } from "./JVMOptions/OtherOptionsWidget";
 import { PropertiesModel, PropertiesWidget } from "./JVMOptions/PropertiesWidget";
 import { SyncIndicatorWidget } from "./JVMOptions/SyncIndicatorWidget";
+import { UIOptionsWidget, UIOptionsModel } from "./JVMOptions/UIOptionsWidget";
 import BeakerXApi, {
   IApiSettingsResponse, IDefaultJVMOptions, IJVMOptions, IOtherJVMOptions,
-  IPropertiesJVMOptions
+  IPropertiesJVMOptions, IUIOptions
 } from "./BeakerXApi";
 import { Messages } from "./JVMOptions/Messages";
 
@@ -44,19 +45,22 @@ export default class JVMOptionsWidget extends Panel {
 
     this.addClass('beakerx_container');
 
+    let uiOptionsWidget  = new UIOptionsWidget();
     let defaultOptionsWidget  = new DefaultOptionsWidget();
     let syncIndicatorWidget = new SyncIndicatorWidget();
     let otherOptionsWidget = new OtherOptionsWidget();
     let propertiesWidget = new PropertiesWidget();
 
     this._model = new JvmOptionsModel(
       api,
+      new UIOptionsModel(uiOptionsWidget),
       new DefaultOptionsModel(defaultOptionsWidget),
       new PropertiesModel(propertiesWidget),
       new OtherOptionsModel(otherOptionsWidget),
       syncIndicatorWidget
     );
 
+    this.addWidget(uiOptionsWidget);
     this.addWidget(defaultOptionsWidget);
     this.addWidget(propertiesWidget);
     this.addWidget(otherOptionsWidget);
@@ -75,6 +79,11 @@ export default class JVMOptionsWidget extends Panel {
 
   public processMessage(msg: Message): void {
     switch (msg.type) {
+      case Messages.TYPE_UI_OPTIONS_CHANGED:
+        this.model.clearErrors();
+        this.model.setUIOptions((msg as Messages.UIOptionsChangedMessage).options);
+        this.model.save();
+        break;
       case Messages.TYPE_DEFAULT_JVM_OPTIONS_CHANGED:
         this.model.clearErrors();
         this.model.setDefaultOptions((msg as Messages.DefaultOptionsChangedMessage).values);
@@ -111,6 +120,7 @@ class JvmOptionsModel {
 
   constructor(
     private api: BeakerXApi,
+    private uiOptionsModel: UIOptionsModel,
     private defaultOptionsModel: DefaultOptionsModel,
     private propertiesOptionsModel: PropertiesModel,
     private otherOptionsModel: OtherOptionsModel,
@@ -129,12 +139,22 @@ class JvmOptionsModel {
   public setPropertiesOptions(options: IPropertiesJVMOptions): void {
     this._options.jvm_options.properties = options;
   }
+  public setUIOptions(options: IUIOptions) {
+    this._options.ui_options = options;
+  }
 
   public load() {
     this.syncWidget.onSyncStart();
 
     this.api.loadSettings()
       .then((data: IApiSettingsResponse) => {
+        if (!data.ui_options) {
+          data.ui_options = {
+            auto_close: false,
+            improve_fonts: true,
+            wide_cells: true,
+          }
+        }
         this._options = data;
 
         this.defaultOptionsModel
@@ -143,6 +163,8 @@ class JvmOptionsModel {
           .update(data.jvm_options.properties);
         this.otherOptionsModel
           .update(data.jvm_options.other);
+        this.uiOptionsModel
+          .update(data.ui_options);
 
         this.syncWidget.showResult(this.buildResult(data.jvm_options));
 
@@ -155,19 +177,28 @@ class JvmOptionsModel {
   public save() {
     this.syncWidget.onSyncStart();
 
-    let payload = {
+    let payload: IApiSettingsResponse = {
       "jvm_options": {
         "heap_GB": null,
         "other": [],
         "properties": []
       },
+      "ui_options": {
+        "auto_close": false,
+        "improve_fonts": true,
+        "wide_cells": true,
+      },
       "version": 2
     };
 
     payload.jvm_options.heap_GB = this._options.jvm_options.heap_GB;
     payload.jvm_options.other = this._options.jvm_options.other;
     payload.jvm_options.properties = this._options.jvm_options.properties;
 
+    payload.ui_options.auto_close = this._options.ui_options.auto_close;
+    payload.ui_options.improve_fonts = this._options.ui_options.improve_fonts;
+    payload.ui_options.wide_cells = this._options.ui_options.wide_cells;
+
     this.syncWidget.showResult(this.buildResult(payload.jvm_options));
 
     this.api.saveSettings({ beakerx:  payload })