Fixed tagFilterer to correctly bootstrap and work (#1510)

stephanwlee · web-flow · commit a24efd5789b3 · 2018-10-10T16:35:53.000-07:00
tf-tag-filterer, correctly, defined its property `tag-filter` as readOnly and this broke the data connection between `paper-input`. Between the paper-input and the filterer, there should be a two-way binding of its value whereas all the consumers of the tf-tag-filterer should only read from the component. Now, using the private property, `_tagFilter`, we establish the two-way binding while the public property is only used to publish the change. Note: bug was introduced over #1483, #1475, and #1493.
diff --git a/tensorboard/components/tf_categorization_utils/tf-tag-filterer.html b/tensorboard/components/tf_categorization_utils/tf-tag-filterer.html
@@ -29,7 +29,7 @@
   <template>
     <paper-input no-label-float
                  label="Filter tags (regular expressions supported)"
-                 value="{{tagFilter}}"
+                 value="{{_tagFilter}}"
                  class="search-input">
       <iron-icon prefix icon="search" slot="prefix"></iron-icon>
     </paper-input>
@@ -48,15 +48,28 @@
         tagFilter: {
           type: String,
           notify: true,
-          readOnly: true,
-          value: tf_storage.getStringInitializer('tagFilter',
-              {defaultValue: '', useLocalStorage: false}),
+          computed: '_computeTagFilter(_tagFilter)',
+        },
+        _tagFilter: {
+          type: String,
+          value: tf_storage.getStringInitializer('tagFilter', {
+            defaultValue: '',
+            useLocalStorage: false,
+            polymerProperty: '_tagFilter',
+          }),
           observer: '_tagFilterObserver',
         },
       },
 
-      _tagFilterObserver: tf_storage.getStringObserver(
-          'tagFilter', {defaultValue: '', useLocalStorage: false}),
+      _tagFilterObserver: tf_storage.getStringObserver('tagFilter', {
+        defaultValue: '',
+        useLocalStorage: false,
+        polymerProperty: '_tagFilter',
+      }),
+
+      _computeTagFilter() {
+        return this._tagFilter;
+      },
     });
   </script>
 </dom-module>
