1 files changed, 104 insertions, 0 deletions
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/tf-run-selector.html b/tensorflow/tensorboard/components/tf-event-dashboard/tf-run-selector.html
new file mode 100644
index 0000000000..92cecb2e5a
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-event-dashboard/tf-run-selector.html
@@ -0,0 +1,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>