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
104
|
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../imports/lodash.html">
<link rel="import" href="../tf-dashboard-common/scrollbar-style.html">
<link rel="import" href="../tf-multi-checkbox/tf-multi-checkbox.html">
<!--
tf-run-selector creates a set of checkboxes to display which runs are selected.
It also displays tooltips.
Properties in:
- runs: Array of strings representing the runs that may be selected
- tooltips: An object that maps from a run to the associated tooltip string.
When tooltips are available, runs that have no associated tooltip will be
hidden. When tooltips are available, the runs will be sorted by their tooltip.
- closestRun: The name of the run that is closest to the cursor (present when
tooltips are active). It will be highlighted
- classScale: An object (generated by tf-dashboard-common/tf-color-scale) that
maps from a run name to a class name, which will be used to color the run.
- xValue: The string that represents the x-value associated with the tooltips.
- xType: The string that describes what kind of data is displayed on the x axis.
Properties out:
- outSelected: The array of run names that are currently checked by the user.
-->
<dom-module id="tf-run-selector">
<template>
<div id="top-text">
<template is="dom-if" if="[[xValue]]">
<div class="x-tooltip tooltip-container">
<div class="x-tooltip-label">[[xType]]</div>
<div class="x-tooltip-value">[[xValue]]</div>
</div>
</template>
<template is="dom-if" if="[[!xValue]]">
<div id="tooltip-help" class="tooltip-container">
Selected Runs:
</div>
</template>
</div>
<tf-multi-checkbox
names="[[runs]]"
tooltips="[[tooltips]]"
highlights="[[_arrayify(closestRun)]]"
out-selected="{{outSelected}}"
class-scale="[[classScale]]"
hide-missing-tooltips
></tf-multi-checkbox>
<style>
:host {
display: flex;
flex-direction: column;
padding-bottom: 10px;
box-sizing: border-box;
}
#top-text {
width: 100%;
flex-grow: 0;
flex-shrink: 0;
padding-left: 35px;
padding-right: 16px;
padding-bottom: 6px;
box-sizing: border-box;
color: var(--paper-grey-800);
}
tf-multi-checkbox {
display: flex;
flex-grow: 1;
flex-shrink: 1;
height: 0px; /* hackhack So the flex-grow takes over and gives it space */
}
.x-tooltip {
display: flex;
flex-direction: row;
}
.x-tooltip-label {
flex-grow: 1;
align-self: flex-start;
}
.x-tooltip-value {
align-self: flex-end;
}
</style>
</template>
<script>
Polymer({
is: "tf-run-selector",
properties: {
outSelected: {type: Array, notify: true},
// runs: an array of strings, representing the run names that may be chosen
runs: Array,
tooltips: {type: Object, value: null}, // {[run: string]: string}
xValue: {type: String, value: null}, // the string representing run's x val
xType: String, // string: relative, stpe, wall_time
classScale: Object, // map from run name to color class (css)
closestRun: {type: String, value: null}, // which run has a value closest to mouse coordinate
},
_arrayify: function(item) {
return [item];
},
});
</script>
</dom-module>
|
