Added legacy target to tf-hparams-backend and fixed <style> tags to b…

…e inside <template> tags in hparams elements. (#2008)
tensorflow · Mar 13, 2019 · 25dc3e8 · 25dc3e8
1 parent e53958f
commit 25dc3e8
Show file tree

Hide file tree

Showing 7 changed files with 236 additions and 220 deletions.
diff --git a/tensorboard/plugins/hparams/tf_hparams_backend/BUILD b/tensorboard/plugins/hparams/tf_hparams_backend/BUILD
@@ -1,6 +1,7 @@
 package(default_visibility = ["//visibility:public"])
 
 load("//tensorboard/defs:web.bzl", "tf_web_library")
+load("//tensorboard/defs:defs.bzl", "tensorboard_webcomponent_library")
 
 licenses(["notice"])  # Apache 2.0
 
@@ -15,3 +16,13 @@ tf_web_library(
         "//tensorboard/components/tf_backend",
     ],
 )
+
+tensorboard_webcomponent_library(
+    name = "legacy",
+    srcs = [":tf_hparams_backend"],
+    visibility = ["//visibility:public"],
+    destdir = "tf-hparams-backend",
+    deps = [
+        "//third_party/tensorboard/components/tf_backend:legacy",
+    ],
+)
diff --git a/tensorboard/plugins/hparams/tf_hparams_main/tf-hparams-main.html b/tensorboard/plugins/hparams/tf_hparams_main/tf-hparams-main.html
@@ -62,36 +62,38 @@
                                          tracking-id="[[trackingId]]"
                                          name="tf_hparams">
     </tf-hparams-google-analytics-tracker>
+
+    <style>
+      vaadin-split-layout {
+        width: 100%;
+      }
+
+      .sidebar {
+        width: 20%;
+        height: 100%;
+        overflow: auto;
+        flex-grow: 0;
+        flex-shrink: 0;
+        min-width: 10%;
+      }
+
+      .center {
+        height: 100%;
+        overflow-y: auto;
+        flex-grow: 1;
+        flex-shrink: 1;
+        width: 80%;
+      }
+
+      :host {
+        display: flex;
+        flex-direction: row;
+        height: 100%;
+        width: 100%;
+      }
+    </style>
   </template>
-  <style>
-    vaadin-split-layout {
-      width: 100%;
-    }
-
-    .sidebar {
-      width: 20%;
-      height: 100%;
-      overflow: auto;
-      flex-grow: 0;
-      flex-shrink: 0;
-      min-width: 10%;
-    }
-
-    .center {
-      height: 100%;
-      overflow-y: auto;
-      flex-grow: 1;
-      flex-shrink: 1;
-      width: 80%;
-    }
-
-    :host {
-      display: flex;
-      flex-direction: row;
-      height: 100%;
-      width: 100%;
-    }
-  </style>
+
   <script>
     'use strict';
     Polymer({

diff --git a/...oard/plugins/hparams/tf_hparams_parallel_coords_view/tf-hparams-parallel-coords-view.html b/...oard/plugins/hparams/tf_hparams_parallel_coords_view/tf-hparams-parallel-coords-view.html
@@ -80,52 +80,52 @@
         </vaadin-split-layout>
       </vaadin-split-layout>
     </div>
-  </template>
 
-  <style>
-    .pane {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-    .section {
-      margin: 10px;
-    }
-    #controls {
-      flex-grow: 0;
-      flex-shrink: 0;
-      flex-basis: auto;
-      height: auto;
-      overflow-y:auto;
-      max-height: fit-content;
-    }
-    #plot {
-      flex-grow: 1;
-      flex-shrink: 1;
-      flex-basis: auto;
-      height: 100%;
-      overflow-y:auto;
-    }
-    #values {
-      flex-grow: 0;
-      flex-shrink: 0;
-      flex-basis: auto;
-      height: 95px;
-      overflow-y:auto;
-      max-height: fit-content;
-    }
-    #details {
-      flex-grow: 0;
-      flex-shrink: 1;
-      flex-basis: auto;
-      height: auto;
-      overflow-y: auto;
-      max-height: fit-content;
-    }
-    vaadin-split-layout {
-      height: 100%;
-    }
-  </style>
+    <style>
+      .pane {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+      .section {
+        margin: 10px;
+      }
+      #controls {
+        flex-grow: 0;
+        flex-shrink: 0;
+        flex-basis: auto;
+        height: auto;
+        overflow-y:auto;
+        max-height: fit-content;
+      }
+      #plot {
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: auto;
+        height: 100%;
+        overflow-y:auto;
+      }
+      #values {
+        flex-grow: 0;
+        flex-shrink: 0;
+        flex-basis: auto;
+        height: 95px;
+        overflow-y:auto;
+        max-height: fit-content;
+      }
+      #details {
+        flex-grow: 0;
+        flex-shrink: 1;
+        flex-basis: auto;
+        height: auto;
+        overflow-y: auto;
+        max-height: fit-content;
+      }
+      vaadin-split-layout {
+        height: 100%;
+      }
+    </style>
+  </template>
 
   <script>
     'use strict';

diff --git a/...gins/hparams/tf_hparams_scale_and_color_controls/tf-hparams-scale-and-color-controls.html b/...gins/hparams/tf_hparams_scale_and_color_controls/tf-hparams-scale-and-color-controls.html
@@ -85,39 +85,39 @@
         </template>
       </div>
     </div>
-  </template>
 
-  <style>
-    :host {
-      display: block;
-    }
-    .control-panel {
-      overflow: auto;
-    }
-    .column {
-      flex-grow:1;
-      flex-shrink:1;
-      margin-right: 5px;
-      border: solid 1px darkgray;
-      padding: 3px;
-    }
-    .column-title {
-      /* Fit every title in one line so the radio boxes align vertically. */
-      white-space: nowrap;
-      text-decoration: underline;
-    }
-    .columns-container {
-      display: flex;
-      flex-direction: row;
-    }
-    .scale-radio-group paper-radio-button {
-      padding: 2px;
-      display: block;
-    }
-    paper-listbox {
-      max-height: 15em;
-    }
-  </style>
+    <style>
+      :host {
+        display: block;
+      }
+      .control-panel {
+        overflow: auto;
+      }
+      .column {
+        flex-grow:1;
+        flex-shrink:1;
+        margin-right: 5px;
+        border: solid 1px darkgray;
+        padding: 3px;
+      }
+      .column-title {
+        /* Fit every title in one line so the radio boxes align vertically. */
+        white-space: nowrap;
+        text-decoration: underline;
+      }
+      .columns-container {
+        display: flex;
+        flex-direction: row;
+      }
+      .scale-radio-group paper-radio-button {
+        padding: 2px;
+        display: block;
+      }
+      paper-listbox {
+        max-height: 15em;
+      }
+    </style>
+  </template>
 
   <script>
     Polymer({

diff --git a/...gins/hparams/tf_hparams_scatter_plot_matrix_view/tf-hparams-scatter-plot-matrix-view.html b/...gins/hparams/tf_hparams_scatter_plot_matrix_view/tf-hparams-scatter-plot-matrix-view.html
@@ -84,54 +84,53 @@
         </vaadin-split-layout>
       </vaadin-split-layout>
     </div>
+    <style>
+      .pane {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+      .section {
+        margin: 10px;
+      }
+      #controls {
+        flex-grow: 0;
+        flex-shrink: 0;
+        flex-basis: auto;
+        height: auto;
+        overflow-y:auto;
+        max-height: fit-content;
+      }
+      #plot {
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: auto;
+        height: auto;
+        overflow-y:auto;
+        max-height: fit-content;
+      }
+      #values {
+        flex-grow: 0;
+        flex-shrink: 0;
+        flex-basis: auto;
+        height: 95px;
+        overflow-y:auto;
+        max-height: fit-content;
+      }
+      #details {
+        flex-grow: 0;
+        flex-shrink: 1;
+        flex-basis: auto;
+        height: auto;
+        overflow-y: auto;
+        max-height: fit-content;
+      }
+      vaadin-split-layout {
+        height: 100%;
+      }
+    </style>
   </template>
 
-  <style>
-    .pane {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-    .section {
-      margin: 10px;
-    }
-    #controls {
-      flex-grow: 0;
-      flex-shrink: 0;
-      flex-basis: auto;
-      height: auto;
-      overflow-y:auto;
-      max-height: fit-content;
-    }
-    #plot {
-      flex-grow: 1;
-      flex-shrink: 1;
-      flex-basis: auto;
-      height: auto;
-      overflow-y:auto;
-      max-height: fit-content;
-    }
-    #values {
-      flex-grow: 0;
-      flex-shrink: 0;
-      flex-basis: auto;
-      height: 95px;
-      overflow-y:auto;
-      max-height: fit-content;
-    }
-    #details {
-      flex-grow: 0;
-      flex-shrink: 1;
-      flex-basis: auto;
-      height: auto;
-      overflow-y: auto;
-      max-height: fit-content;
-    }
-    vaadin-split-layout {
-      height: 100%;
-    }
-  </style>
-
   <script>
     'use strict';
     Polymer({