#7461 fix EasyForm in tabbed output container

twosigma · Jul 18, 2018 · c592806 · c592806
1 parent b376cbd
commit c592806
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 10 deletions.
diff --git a/js/notebook/src/EasyForm.ts b/js/notebook/src/EasyForm.ts
@@ -33,6 +33,7 @@ import 'flatpickr/dist/flatpickr.css';
 import 'jquery-ui/themes/base/all.css';
 import 'jquery-ui/ui/widgets/button';
 import 'jquery-ui/ui/widgets/autocomplete';
+import BeakerXThemeHelper from "./BeakerXThemeHelper";
 
 export class EasyFormModel extends widgets.DOMWidgetModel {
   defaults() {
@@ -60,18 +61,19 @@ export class EasyFormView extends widgets.BoxView {
 
     this.$el
       .addClass('beaker-easyform-container')
-      .addClass('widget-vbox');
+      .addClass('widget-vbox')
+      .addClass('beaker-fieldset');
 
     const formTitle = this.model.get('easyFormName');
 
-    this.$fieldset = $('<fieldset></fieldset>').addClass('beaker-fieldset');
     this.$legend = $('<legend>'+formTitle+'</legend>');
-
     this.displayed.then(() => {
-      this.$el.wrap(this.$fieldset);
+      if (BeakerXThemeHelper.isDark) {
+        this.$legend.css('background-color', '#636363');
+      }
 
       if (formTitle) {
-        this.$el.before(this.$legend);
+        this.$el.prepend(this.$legend);
       }
     });
   }

diff --git a/js/notebook/src/Plot.ts b/js/notebook/src/Plot.ts
@@ -122,7 +122,7 @@ export class PlotView extends widgets.DOMWidgetView {
 
   handleModellUpdate() {
     const newModel = this.model.get('model');
-    this._currentScope.updateModelData(newModel);
+    this._currentScope.updateModelData && this._currentScope.updateModelData(newModel);
     this._currentScope.updatePlot();
   }
 

diff --git a/js/notebook/src/easyForm/css/jupyter-easyform.scss b/js/notebook/src/easyForm/css/jupyter-easyform.scss
@@ -97,14 +97,24 @@ $beakerxFont: "Lato", Helvetica, sans-serif;
   border: 1px solid #cfcfcf;
   padding: 10px;
   font-family: $beakerxFont;
+  overflow: visible;
+  position: relative;
+  margin-top: 10px;
 
   legend {
     border-bottom: none;
-    width: auto;
-    display: inline;
-    padding: 0 5px;
-    font-size: 17px;
     margin-bottom: 0;
+    font-size: 17px;
+    position: absolute;
+    top: -0.7em;
+    background: white;
+    width: auto;
+    display: inline-block;
+    padding: 0 4px;
+  }
+
+  .widget-inline-hbox {
+    align-items: center;
   }
 }
 

diff --git a/js/notebook/src/plot/plotScope.js b/js/notebook/src/plot/plotScope.js
@@ -2086,6 +2086,13 @@ define([
     }
   };
 
+  // update model with partial model data
+  PlotScope.prototype.updateModelData = function(data) {
+    if (this.model && this.model.model && data) {
+      this.model.model = _.extend(this.model.model, data);
+    }
+  };
+
   PlotScope.prototype.setElement = function(el) {
     this.element = el;
   };