Store the smoothing and split on underscore settings on URIStorage

The smoothing option on the left menu was also refactored to be easier to use.
Change: 130780164

3 files changed, 57 insertions, 67 deletions

diff --git a/tensorflow/tensorboard/components/tf-categorizer/tf-categorizer.html b/tensorflow/tensorboard/components/tf-categorizer/tf-categorizer.html
index 7ffc1c205a..068ebbda98 100644
--- a/tensorflow/tensorboard/components/tf-categorizer/tf-categorizer.html
+++ b/tensorflow/tensorboard/components/tf-categorizer/tf-categorizer.html
@@ -62,7 +62,10 @@ categories are exclusive.
         },
         splitOnUnderscore: {
           type: Boolean,
-          value: false,
+          notify: true,
+          value: TF.URIStorage.getBooleanInitializer('splitOnUnderscore',
+              false),
+          observer: '_splitOnUnderscoreObserver'
         },
         categorizer: {
           type: Object,
@@ -92,6 +95,8 @@ categories are exclusive.
           return "TopLevelNamespaceCategorizer";
         }
       },
+      _splitOnUnderscoreObserver: TF.URIStorage.getBooleanObserver(
+          'splitOnUnderscore', false)
     });
   </script>
 </dom-module>
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html b/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html
index 89e4d57bad..d575d74883 100644
--- a/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html
+++ b/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html
@@ -53,13 +53,6 @@ The #center div contains tf-line-charts embedded inside tf-collapsable-panes.
             id="download-option"
             checked="{{_showDownloadLinks}}"
           >Data download links</paper-checkbox>
-          <tf-smoothing-input
-            enabled="{{_smoothingEnabled}}"
-            weight="{{_smoothingWeight}}"
-            step="0.001"
-            min="0"
-            max="1"
-            ></tf-smoothing-input>
           <div id="tooltip-sorting">
             <div id="tooltip-sorting-label">Tooltip sorting method:</div>
             <paper-dropdown-menu
@@ -75,6 +68,14 @@ The #center div contains tf-line-charts embedded inside tf-collapsable-panes.
           </div>
         </div>
         <div class="sidebar-section">
+          <tf-smoothing-input
+            weight="{{_smoothingWeight}}"
+            step="0.001"
+            min="0"
+            max="1"
+            ></tf-smoothing-input>
+        </div>
+        <div class="sidebar-section">
           <tf-option-selector
             id="xTypeSelector"
             name="Horizontal Axis"
@@ -115,8 +116,8 @@ The #center div contains tf-line-charts embedded inside tf-collapsable-panes.
                         id="chart"
                         x-type="[[_xType]]"
                         color-scale="[[colorScale]]"
-                        smoothing-weight="[[_smoothingWeight]]"
                         smoothing-enabled="[[_smoothingEnabled]]"
+                        smoothing-weight="[[_smoothingWeight]]"
                         tooltip-sorting-method="[[_tooltipSortingMethod]]"
                         on-keyup="toggleSelected"
                         tabindex="2"
@@ -176,8 +177,16 @@ The #center div contains tf-line-charts embedded inside tf-collapsable-panes.
               false),
           observer: '_showDownloadLinksObserver'
         },
-        _smoothingWeight: Number,
-        _smoothingEnabled: Boolean,
+        _smoothingWeight: {
+          type: Number,
+          notify: true,
+          value: TF.URIStorage.getNumberInitializer('_smoothingWeight', 0.6),
+          observer: '_smoothingWeightObserver'
+        },
+        _smoothingEnabled: {
+          type: Boolean,
+          computed: '_computeSmoothingEnabled(_smoothingWeight)'
+        },
         colorScale: {
           type: Object,
           notify: true,
@@ -202,6 +211,11 @@ The #center div contains tf-line-charts embedded inside tf-collapsable-panes.
       },
       _showDownloadLinksObserver: TF.URIStorage.getBooleanObserver(
           '_showDownloadLinks', false),
+      _smoothingWeightObserver: TF.URIStorage.getNumberObserver(
+          '_smoothingWeight', 0.6),
+      _computeSmoothingEnabled: function(_smoothingWeight) {
+        return _smoothingWeight > 0;
+      },
       toggleSelected: function(e) {
         var currentTarget = Polymer.dom(e.currentTarget);
         var parentDiv = currentTarget.parentNode.parentNode;
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/tf-smoothing-input.html b/tensorflow/tensorboard/components/tf-event-dashboard/tf-smoothing-input.html
index d24781013f..8885fa36c4 100644
--- a/tensorflow/tensorboard/components/tf-event-dashboard/tf-smoothing-input.html
+++ b/tensorflow/tensorboard/components/tf-event-dashboard/tf-smoothing-input.html
@@ -8,48 +8,41 @@ tf-smoothing-input creates an input component for exponential smoothing.
 -->
 <dom-module id="tf-smoothing-input">
   <template>
-    <div class="smoothing-line">
-      <paper-checkbox
-        checked="{{enabled}}"
-        >Smoothing</paper-checkbox>
-      <div class="smoothing-block">
-        <paper-slider
-          value="{{weight}}"
-          immediate-value="{{_immediateWeightNumberForPaperSlider}}"
-          type="number"
-          step="[[step]]"
-          min="[[min]]"
-          max="[[max]]"
-          disabled="[[!enabled]]"
-          ></paper-slider>
-        <paper-input
-          id="input"
-          label="weight"
-          no-label-float
-          value="{{_inputWeightStringForPaperInput}}"
-          type="number"
-          step="[[step]]"
-          min="[[min]]"
-          max="[[max]]"
-          disabled="[[!enabled]]"
-          ></paper-input>
-      </div>
+    <h3 class="title">Smoothing</h3>
+    <div class="smoothing-block">
+      <paper-slider
+        id="slider"
+        value="{{weight}}"
+        immediate-value="{{_immediateWeightNumberForPaperSlider}}"
+        type="number"
+        step="[[step]]"
+        min="[[min]]"
+        max="[[max]]"
+        ></paper-slider>
+      <paper-input
+        id="input"
+        label="weight"
+        no-label-float
+        value="{{_inputWeightStringForPaperInput}}"
+        type="number"
+        step="[[step]]"
+        min="[[min]]"
+        max="[[max]]"
+        ></paper-input>
     </div>
     <style>
-      .smoothing-line {
-        margin-top: 15px;
+      .title {
+        color: var(--paper-grey-800);
+        margin: 0;
+        font-weight: normal;
+        font-size: 14px;
+        margin-bottom: 5px;
       }
 
       .smoothing-block {
         display: flex;
       }
 
-      paper-checkbox {
-        --paper-checkbox-checked-color: var(--tb-ui-dark-accent);
-        --paper-checkbox-unchecked-color: var(--tb-ui-dark-accent);
-        font-size: 14px;
-      }
-
       paper-slider {
         margin-left: 12px;
         --paper-slider-knob-color: var(--tb-orange-strong);
@@ -74,13 +67,6 @@ tf-smoothing-input creates an input component for exponential smoothing.
       is: "tf-smoothing-input",
 
       properties: {
-        enabled: {
-          type: Boolean,
-          value: false,
-          notify: true,
-          observer: '_enabledChanged'
-        },
-
         step: Number,
         max: Number,
         min: Number,
@@ -110,28 +96,13 @@ tf-smoothing-input creates an input component for exponential smoothing.
         this.weight = val;
       }, 250),
 
-      _enabledChanged: function() {
-        // Workaround for paper-input bug on firefox :(
-        // Element crashes if we change value while it is disabled.
-        if (this.enabled) {
-          this.$.input.label = '';
-          this._immediateWeightNumberForPaperSliderChanged();
-        }
-      },
-
       _immediateWeightNumberForPaperSliderChanged: function() {
-        if(!this.enabled) {
-          return;
-        }
         this._inputWeightStringForPaperInput =
             this._immediateWeightNumberForPaperSlider.toString();
         this._updateWeight.call(this, this._immediateWeightNumberForPaperSlider);
       },
 
       _inputWeightStringForPaperInputChanged: function() {
-        if(!this.enabled) {
-           return;
-        }
         if (+this._inputWeightStringForPaperInput < 0) {
           this._inputWeightStringForPaperInput = '0';
         }