1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
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>
|
