Introduce tf-per-run-steps-selector

tensorboard/components/tf_per_run_steps_selector/BUILD

@@ -0,0 +1,33 @@
+# Copyright 2017 The TensorFlow Authors. All Rights Reserved.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+package(default_visibility = ["//tensorboard:internal"])
+
+load("//tensorboard/defs:web.bzl", "ts_web_library")
+
+licenses(["notice"])  # Apache 2.0
+
+ts_web_library(
+    name = "tf_per_run_steps_selector",
+    srcs = [
+        "tf-per-run-steps-selector.html",
+    ],
+    path = "/tf-per-run-steps-selector",
+    deps = [
+        "//tensorboard/components/tf_color_scale",
+        "//tensorboard/components/tf_imports:lodash",
+        "//tensorboard/components/tf_imports:polymer",
+        "@org_polymer_paper_slider",
+    ],
+)

tensorboard/plugins/pr_curve/tf_pr_curve_dashboard/tf-pr-curve-steps-selector.html → tensorboard/components/tf_per_run_steps_selector/tf-per-run-steps-selector.html

@@ -14,14 +14,15 @@
 
 <link rel="import" href="../paper-slider/paper-slider.html">
 <link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../tf-card-heading/tf-card-heading.html">
 <link rel="import" href="../tf-color-scale/tf-color-scale.html">
 <link rel="import" href="../tf-imports/lodash.html">
 
 <!--
-  Renders a UI for selecting a step.
+  Renders a UI for selecting a step for each run. A slider will be shown for
+  each run. This component might be desired in cases in which a user would like
+  to select the same step across all tags for a given run.
 -->
-<dom-module id="tf-pr-curve-steps-selector">
+<dom-module id="tf-per-run-steps-selector">
   <template>
     <template is="dom-repeat" items="[[runs]]" as="run">
       <div class="run-widget">
@@ -69,17 +70,43 @@
   <script>
   import {runsColorScale} from "../tf-color-scale/colorScale.js";
 
+  /**
+   * Denotes an available time entry (specific to a step) that a user can select
+   * for a run.
+   * 
+   * This type has 3 properties.
+   * step: The step of the event.
+   * wall_time: The wall time in seconds since the epoch.
+   * relative: The time elapsed in seconds since the first event.
+   * 
+   * @typedef {{
+   *   step: number,
+   *   wall_time: number,
+   *   relative: number
+   * }}
+   */
+  let TimeEntry;
+
   Polymer({
-    is: "tf-pr-curve-steps-selector",
+    is: "tf-per-run-steps-selector",
     properties: {
-      // A list of runs to create sliders for.
+      /**
+       * A list of runs to create sliders for.
+       * @type {Array<string>}
+       */
       runs: Array,
-      // A mapping between run and list of steps to use for the slider for that
-      // run. This component indexes into this object to retrieve the steps.
+      /**
+       * A mapping between run and list of time entries to use for the slider for
+       * that run. This component indexes into this object to retrieve steps.
+       * @type {Array<TimeEntry>}
+       */
       runToAvailableTimeEntries: Object,
-      // The object mapping run to step. This object is updated by this
-      // component when the selected step for the run changes, so this property
-      // should be upward bound.
+      /**
+       * The object mapping run to step. This object is updated by this
+       * component when the selected step for the run changes, so this property
+       * should be upward bound.
+       * @type {Object<string, number>}
+       */
       runToStep: {
         type: Object,
         notify: true,
@@ -109,7 +136,7 @@
 
       const entries = runToAvailableTimeEntries[run];
       if (!entries) {
-        // No PR curve data has been received from the server yet.
+        // No data for visualization has been received from the server yet.
         return '';
       }
 

tensorboard/plugins/pr_curve/tf_pr_curve_dashboard/BUILD

@@ -23,18 +23,18 @@ ts_web_library(
     srcs = [
         "tf-pr-curve-card.html",
         "tf-pr-curve-dashboard.html",
-        "tf-pr-curve-steps-selector.html",
     ],
     path = "/tf-pr-curve-dashboard",
     deps = [
         "//tensorboard/components/tf_backend",
         "//tensorboard/components/tf_dashboard_common",
         "//tensorboard/components/tf_color_scale",
         "//tensorboard/components/tf_card_heading",
-        "//tensorboard/components/tf_paginated_view",
         "//tensorboard/components/tf_categorization_utils",
+        "//tensorboard/components/tf_per_run_steps_selector",
         "//tensorboard/components/tf_imports:polymer",
         "//tensorboard/components/tf_imports:lodash",
+        "//tensorboard/components/tf_paginated_view",
         "//tensorboard/components/tf_runs_selector",
         "//tensorboard/components/tf_utils",
         "//tensorboard/components/vz_line_chart",

tensorboard/plugins/pr_curve/tf_pr_curve_dashboard/tf-pr-curve-dashboard.html

@@ -19,14 +19,13 @@
 <link rel="import" href="../tf-backend/tf-backend.html">
 <link rel="import" href="../tf-categorization-utils/tf-categorization-utils.html">
 <link rel="import" href="../tf-categorization-utils/tf-category-pane.html">
-<link rel="import" href="../tf-color-scale/tf-color-scale.html">
 <link rel="import" href="../tf-dashboard-common/dashboard-style.html">
 <link rel="import" href="../tf-dashboard-common/tf-dashboard-layout.html">
 <link rel="import" href="../tf-dashboard-common/tf-option-selector.html">
+<link rel="import" href="../tf-per-run-steps-selector/tf-per-run-steps-selector.html">
 <link rel="import" href="../tf-runs-selector/tf-runs-selector.html">
 <link rel="import" href="../tf-utils/tf-utils.html">
 <link rel="import" href="tf-pr-curve-card.html">
-<link rel="import" href="tf-pr-curve-steps-selector.html">
 
 <!--
   A frontend that displays a set of precision–recall curves. Each PR curve is
@@ -49,11 +48,11 @@
         </div>
         <template is="dom-if" if="[[_runToAvailableTimeEntries]]">
           <div class="sidebar-section" id="steps-selector-container">
-            <tf-pr-curve-steps-selector
+            <tf-per-run-steps-selector
                   runs="[[_relevantSelectedRuns]]"
                   run-to-step="{{_runToStep}}"
                   run-to-available-time-entries="[[_runToAvailableTimeEntries]]"
-                  time-display-type="[[_timeDisplayType]]"></tf-pr-curve-steps-selector>
+                  time-display-type="[[_timeDisplayType]]"></tf-per-run-steps-selector>
           </div>
         </template>
         <div class="sidebar-section">
@@ -144,7 +143,6 @@ <h3>No precision–recall curve data was found.</h3>
   import {getRouter} from '../tf-backend/router.js';
   import {getTags} from '../tf-backend/backend.js';
   import {RequestManager} from '../tf-backend/requestManager.js';
-  import {runsColorScale} from "../tf-color-scale/colorScale.js";
 
   Polymer({
     is: 'tf-pr-curve-dashboard',
@@ -245,9 +243,6 @@ <h3>No precision–recall curve data was found.</h3>
       const runToTag = _.mapValues(runToTagInfo, x => Object.keys(x));
       return categorizeTags(runToTag, selectedRuns, tagFilter);
     },
-    _computeColorForRun(run) {
-      return runsColorScale(run);
-    },
     _computeRelevantSelectedRuns(selectedRuns, runToTagInfo) {
       return selectedRuns.filter(run => runToTagInfo[run]);
     },