1 files changed, 103 insertions, 0 deletions
diff --git a/tensorflow/tensorboard/components/tf-categorizer/tf-categorizer.html b/tensorflow/tensorboard/components/tf-categorizer/tf-categorizer.html
new file mode 100644
index 0000000000..3672db38a2
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-categorizer/tf-categorizer.html
@@ -0,0 +1,103 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/paper-toggle-button/paper-toggle-button.html">
+
+<link rel="import" href="../tf-regex-group/tf-regex-group.html">
+<link rel="import" href="../tf-dashboard-common/tensorboard-color.html">
+
+<!--
+`tf-categorizer` turns an array of tags into an array of categories
+
+The transformation from tags to categories is controlled by the user, through
+interacting with the categorizer widget.
+
+(See type signatures in categorizer.ts)
+
+Example:
+  <tf-categorizer tags="[[tags]]" categories="{{categories}}"></tf-categorizer>
+
+Public Properties:
+`tags` - Array of strings that are the tags to categorize. Should be one-way bound downward.
+`categories` - Array of Categorizer.Category objects that are generated by the Categorizer.
+  Are readOnly and notify: True. Expected to be one-way bound upward.
+
+The categorizer provides inputs for adding regular expression rules and toggling whether
+categories are exclusive.
+-->
+<dom-module id="tf-categorizer">
+  <template>
+    <div class="inputs">
+      <tf-regex-group id="regex-group" regexes="{{regexes}}"></tf-regex-group>
+    </div>
+    <div id="underscore-categorization">
+      <span>Split On Underscores:</span>
+      <paper-toggle-button checked="{{splitOnUnderscore}}"></paper-toggle-button>
+    </div>
+    <style>
+      :host {
+        display: block;
+        padding-bottom: 5px;
+        padding-top: 5px;
+      }
+
+      .inputs {
+        padding-left: 5px;
+      }
+
+      paper-toggle-button {
+        --paper-toggle-button-checked-button-color: var(--tb-orange-strong);
+        --paper-toggle-button-checked-bar-color: var(--tb-orange-weak);
+      }
+      #underscore-categorization {
+        padding-left: 94px;
+        color: var(--paper-grey-700);
+        font-size: 14px;
+      }
+    </style>
+  </template>
+  <script src="categorizer.js"></script>
+  <script>
+    Polymer({
+      is: "tf-categorizer",
+      properties: {
+        regexes: {type: Array},
+        tags: {type: Array},
+        categoriesAreExclusive: {type: Boolean, value: true},
+        fallbackCategorizer: {
+          type: String,
+          computed: "chooseFallbackCategorizer(splitOnUnderscore)"
+        },
+        splitOnUnderscore: {
+          type: Boolean,
+          value: false,
+        },
+        categorizer: {
+          type: Object,
+          computed: "computeCategorization(regexes.*, categoriesAreExclusive, fallbackCategorizer)",
+        },
+        categories: {type: Array, value: function() {return [];}, notify: true, readOnly: true},
+      },
+      observers: ['recategorize(tags.*, categorizer)'],
+      computeCategorization: function(regexes, categoriesAreExclusive, fallbackCategorizer) {
+        var categorizationStrategy = {
+          categoryDefinitions: regexes.base,
+          categoriesAreExclusive: categoriesAreExclusive,
+          fallbackCategorizer: fallbackCategorizer,
+        };
+        return Categorizer.categorizer(categorizationStrategy);
+      },
+      recategorize: function() {
+        this.debounce("tf-categorizer-recategorize", function (){
+          var categories = this.categorizer(this.tags);
+          this._setCategories(categories);
+        })
+      },
+      chooseFallbackCategorizer: function(splitOnUnderscore) {
+        if (splitOnUnderscore) {
+          return "LegacyUnderscoreCategorizer";
+        } else {
+          return "TopLevelNamespaceCategorizer";
+        }
+      },
+    });
+  </script>
+</dom-module>