TensorBoard stores regex groups in url bar.

This also causes the regex groups to persist across tab switches.

I also cleaned the code and UI a little; I removed the activation toggle for
the individual regex groups, which is redundant because it
duplicates the existing system for opening/closing tag groups.

Also found and fixed a bug in the TF.URIStorage module.
Change: 136070622

tensorflow/tensorboard/components/tf-dashboard-common/tf-categorizer.html

@@ -44,7 +44,7 @@ categories are exclusive.
 <dom-module id="tf-categorizer">
   <template>
     <div class="inputs">
-      <tf-regex-group id="regex-group" regexes="{{regexes}}"></tf-regex-group>
+      <tf-regex-group id="regexGroup" regexes="{{regexes}}"></tf-regex-group>
     </div>
     <div id="underscore-categorization">
       <paper-checkbox

tensorflow/tensorboard/components/tf-dashboard-common/tf-regex-group.html

@@ -28,12 +28,11 @@ Example:
   <tf-regex-group regexes="{{regexes}}"></tf-regex-group>
 
 It contains a series of regular expression input fields. From this, it computes
-`regexes', an array in which every element is either a string representing an
-active, valid, nonempty regular expression, or the value `null`
+`regexes', an array in which every element is either a string representing a
+valid, nonempty regular expression, or the value `null`
 
 Public Properties:
-`regexes` a readonly, notifying array of strings, where each string is an
-  active, valid, nonempty regex
+`regexes` a readonly, notifying array of strings, where each string is a regex
 
 It maintains an invariant that the final regex should always be an empty string,
 so the user can easily add more regular expressions. It does this by adding
@@ -47,17 +46,12 @@ more regexes).
     <div class="regex-list">
       <template is="dom-repeat" items="{{rawRegexes}}">
         <div class="regex-line">
-          <paper-checkbox
-            class="active-button"
-            checked="{{item.active}}"
-            disabled="[[!item.valid]]"
-          ></paper-checkbox>
           <paper-input
             id="text-input"
             class="regex-input"
             label="Write a regex to create a tag group"
             no-label-float
-            bind-value="{{item.regex}}"
+            value="{{item.regex}}"
             invalid="[[!item.valid]]"
             on-keyup="moveFocus"
           ></paper-input>
@@ -71,16 +65,11 @@ more regexes).
         </div>
         <style>
           .regex-input {
-            width: 230px;
+            width: 250px;
             display: inline-block;
             margin-left: -3px;
           }
 
-          paper-checkbox {
-            --paper-checkbox-checked-color: var(--tb-ui-dark-accent);
-            --paper-checkbox-unchecked-color: var(--tb-ui-dark-accent);
-          }
-
           .delete-button {
             color: var(--paper-grey-700);
             width: 40px;
@@ -111,16 +100,16 @@ more regexes).
       properties: {
         rawRegexes: {
           type: Array,
-          value: function() {
-            return [{regex: "", active: true, valid: true}];
-          }
+          value: TF.URIStorage.getObjectInitializer('rawRegexes', [{regex: "", valid: true}]),
         },
         regexes: {type: Array, computed: "usableRegexes(rawRegexes.*)", notify: true},
       },
       observers: [
         "addNewRegexIfNeeded(rawRegexes.*)",
         "checkValidity(rawRegexes.*)",
+        "_uriStoreRegexes(rawRegexes.*)",
       ],
+      _uriStoreRegexes: TF.URIStorage.getObjectObserver('rawRegexes', [{regex: "", valid: true}]),
       checkValidity: function(x) {
         var match = x.path.match(/rawRegexes\.(\d+)\.regex/);
         if (match) {
@@ -142,7 +131,7 @@ more regexes).
           // Checking validity here (rather than using the data property)
           // is necessary because otherwise we might send invalid regexes due
           // to the fact that this function can call before the observer does
-          return r.regex !== "" && r.active && isValid(r.regex);
+          return r.regex !== "" && isValid(r.regex);
         }).map(function(r) {
           return r.regex;
         });
@@ -150,7 +139,7 @@ more regexes).
       addNewRegexIfNeeded: function() {
         var last = this.rawRegexes[this.rawRegexes.length - 1];
         if (last.regex !== "") {
-          this.push("rawRegexes", {regex: "", active: true, valid: true});
+          this.push("rawRegexes", {regex: "", valid: true});
         }
       },
       deleteRegex: function(e) {

tensorflow/tensorboard/components/tf-storage/storage.ts

@@ -178,8 +178,7 @@ module TF.URIStorage {
    */
   export function getObjectInitializer(
       propertyName: string, defaultVal: Object): Function {
-    let clone = _.cloneDeep(defaultVal);
-    return _getInitializer(getObject, propertyName, clone);
+    return _getInitializer(getObject, propertyName, defaultVal);
   }
 
   /**
@@ -297,8 +296,11 @@ module TF.URIStorage {
     return function() {
       let URIStorageName = getURIStorageName(this, propertyName);
       let setComponentValue = () => {
+        // Clone, in case the caller will mutuate this object, we
+        // don't want to mutate our default instance
+        let v = _.clone(defaultVal);
         let uriValue = get(URIStorageName);
-        this[propertyName] = uriValue !== undefined ? uriValue : defaultVal;
+        this[propertyName] = uriValue !== undefined ? uriValue : v;
       };
       // Set the value on the property.
       setComponentValue();