migrate: projector

package.json

@@ -35,7 +35,7 @@
     "@bazel/bazel": "2.1",
     "@bazel/ibazel": "^0.12.4",
     "@bazel/jasmine": "^1.6.0",
-    "@bazel/karma": "^1.6.0",
+    "@bazel/karma": "1.6.0",
     "@bazel/protractor": "^1.6.0",
     "@bazel/rollup": "^1.6.0",
     "@bazel/terser": "^1.6.0",
@@ -51,7 +51,7 @@
     "@types/sinon": "^7.5.2",
     "chai": "^4.2.0",
     "jasmine-core": "^3.5.0",
-    "karma": "^5.0.2",
+    "karma": "5.0.2",
     "karma-chrome-launcher": "^3.1.0",
     "karma-firefox-launcher": "^1.3.0",
     "karma-jasmine": "^3.1.0",
@@ -88,10 +88,10 @@
     "@polymer/paper-checkbox": "^3.1.0",
     "@polymer/paper-dialog": "^3.0.1",
     "@polymer/paper-dialog-scrollable": "^3.0.1",
-    "@polymer/paper-dropdown-menu": "^3.0.1",
+    "@polymer/paper-dropdown-menu": "^3.1.0",
     "@polymer/paper-header-panel": "^3.0.1",
     "@polymer/paper-icon-button": "^3.0.2",
-    "@polymer/paper-input": "^3.1.0",
+    "@polymer/paper-input": "^3.2.1",
     "@polymer/paper-item": "^3.0.1",
     "@polymer/paper-listbox": "^3.0.1",
     "@polymer/paper-material": "^3.0.1",
@@ -100,16 +100,22 @@
     "@polymer/paper-spinner": "^3.0.2",
     "@polymer/paper-styles": "^3.0.1",
     "@polymer/paper-tabs": "^3.1.0",
+    "@polymer/paper-toast": "^3.0.1",
     "@polymer/paper-toggle-button": "^3.0.1",
     "@polymer/paper-toolbar": "^3.0.1",
+    "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "^3.4.1",
     "d3": "5.7.0",
     "lodash": "^4.17.19",
     "monaco-editor-core": "^0.20.0",
     "monaco-languages": "^1.10.0",
     "plottable": "^3.9.0",
+    "numericjs": "^1.2.6",
     "requirejs": "^2.3.6",
     "rxjs": "^6.5.5",
+    "three": "~0.108.0",
+    "umap-js": "^1.3.2",
+    "weblas": "^0.9.1",
     "zone.js": "^0.10.2"
   }
 }

tensorboard/components_polymer3/BUILD

@@ -70,10 +70,13 @@ tf_ts_library(
     ],
 )
 
-tf_web_library(
+tf_ts_library(
     name = "security",
     srcs = [
-        "security.html",
+        "security.ts",
+    ],
+    strict_checks = False,
+    deps = [
+        "@npm//@polymer/polymer",
     ],
-    path = "/",
 )

tensorboard/components_polymer3/security.ts

@@ -0,0 +1,21 @@
+/* Copyright 2020 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.
+==============================================================================*/
+/**
+ * @fileoverview Security configration for Polymer. Note that this module has
+ * to be imported the first in a bundle.
+ */
+import {setStrictTemplatePolicy} from '@polymer/polymer/lib/utils/settings';
+
+setStrictTemplatePolicy(true);

tensorboard/plugins/projector/polymer3/tf_projector_plugin/BUILD

@@ -18,12 +18,13 @@ tf_web_library(
 
 tensorboard_html_binary(
     name = "projector_binary",
-    compile = True,
+    compile = False,
     input_path = "/tf-projector/tf-projector-plugin.html",
     js_path = "/projector_binary.js",
     output_path = "/tf-projector/projector_binary.html",
     deps = [
         ":tf_projector_plugin",
+        "//tensorboard/plugins/projector/polymer3/vz_projector:standalone_lib",
     ],
 )
 
@@ -34,9 +35,7 @@ tf_web_library(
     ],
     path = "/tf-projector",
     deps = [
-        "//tensorboard/components:security",
-        "//tensorboard/components/tf_imports:polymer",
-        "//tensorboard/plugins/projector/vz_projector",
+        "//tensorboard/plugins/projector/polymer3/vz_projector:standalone_lib",
         "@com_google_fonts_roboto",
     ],
 )

tensorboard/plugins/projector/polymer3/tf_projector_plugin/tf-projector-plugin.html

@@ -15,10 +15,7 @@
 limitations under the License.
 -->
 <!-- Configures polymer and requires to be loaded at the top. -->
-<link rel="import" href="../security.html" />
-<link rel="import" href="../tf-imports/polymer.html" />
 <link rel="import" href="../font-roboto/roboto.html" />
-<link rel="import" href="../vz-projector/vz-projector-dashboard.html" />
 
 <style>
   html,
@@ -29,6 +26,7 @@
     font-family: Roboto, sans-serif;
   }
 </style>
+<script jscomp-ignore src="../standalone_bundle.js"></script>
 
 <body>
   <vz-projector-dashboard></vz-projector-dashboard>

tensorboard/plugins/projector/polymer3/vz_projector/BUILD

@@ -1,15 +1,16 @@
+load("//tensorboard/defs:defs.bzl", "tf_js_binary", "tf_ts_library")
 load("//tensorboard/defs:web.bzl", "tf_web_library")
 load("//tensorboard/defs:vulcanize.bzl", "tensorboard_html_binary")
 
 package(default_visibility = ["//tensorboard:internal"])
 
 licenses(["notice"])  # Apache 2.0
 
-tf_web_library(
+tf_ts_library(
     name = "vz_projector",
     srcs = [
         "analyticsLogger.ts",
-        "bundle.html",
+        "bundle.ts",
         "data.ts",
         "data-provider.ts",
         "data-provider-demo.ts",
@@ -29,104 +30,112 @@ tf_web_library(
         "scatterPlotVisualizerCanvasLabels.ts",
         "scatterPlotVisualizerPolylines.ts",
         "scatterPlotVisualizerSprites.ts",
-        "styles.html",
+        "styles.ts",
         "umap.d.ts",
         "util.ts",
         "vector.ts",
-        "vz-projector.html",
+        "vz-projector.html.ts",
         "vz-projector.ts",
-        "vz-projector-app.html",
-        "vz-projector-bookmark-panel.html",
+        "vz-projector-app.ts",
+        "vz-projector-bookmark-panel.html.ts",
         "vz-projector-bookmark-panel.ts",
-        "vz-projector-dashboard.html",
-        "vz-projector-data-panel.html",
+        "vz-projector-dashboard.ts",
+        "vz-projector-data-panel.html.ts",
         "vz-projector-data-panel.ts",
-        "vz-projector-input.html",
         "vz-projector-input.ts",
-        "vz-projector-inspector-panel.html",
+        "vz-projector-inspector-panel.html.ts",
         "vz-projector-inspector-panel.ts",
-        "vz-projector-legend.html",
         "vz-projector-legend.ts",
-        "vz-projector-metadata-card.html",
         "vz-projector-metadata-card.ts",
-        "vz-projector-projections-panel.html",
+        "vz-projector-projections-panel.html.ts",
         "vz-projector-projections-panel.ts",
-        "vz-projector-util.ts",
     ],
-    path = "/vz-projector",
+    strict_checks = False,
     deps = [
         ":bh_tsne",
         ":heap",
         ":sptree",
-        "//tensorboard/components/tf_backend",
-        "//tensorboard/components/tf_dashboard_common",
-        "//tensorboard/components/tf_imports:d3",
-        "//tensorboard/components/tf_imports:numericjs",
-        "//tensorboard/components/tf_imports:polymer",
-        "//tensorboard/components/tf_imports:threejs",
-        "//tensorboard/components/tf_imports:umap-js",
-        "//tensorboard/components/tf_imports:weblas",
-        "//tensorboard/components/tf_tensorboard:registry",
-        "@org_polymer_iron_collapse",
-        "@org_polymer_iron_icons",
-        "@org_polymer_paper_button",
-        "@org_polymer_paper_checkbox",
-        "@org_polymer_paper_dialog",
-        "@org_polymer_paper_dialog_scrollable",
-        "@org_polymer_paper_dropdown_menu",
-        "@org_polymer_paper_icon_button",
-        "@org_polymer_paper_input",
-        "@org_polymer_paper_item",
-        "@org_polymer_paper_listbox",
-        "@org_polymer_paper_slider",
-        "@org_polymer_paper_spinner",
-        "@org_polymer_paper_styles",
-        "@org_polymer_paper_toast",
-        "@org_polymer_paper_toggle_button",
-        "@org_polymer_paper_tooltip",
+        "//tensorboard/components_polymer3:security",
+        "//tensorboard/components_polymer3/polymer:register_style_dom_module",
+        "@npm//@polymer/decorators",
+        "@npm//@polymer/iron-collapse",
+        "@npm//@polymer/iron-icons",
+        "@npm//@polymer/iron-iconset-svg",
+        "@npm//@polymer/paper-button",
+        "@npm//@polymer/paper-checkbox",
+        "@npm//@polymer/paper-dialog",
+        "@npm//@polymer/paper-dialog-scrollable",
+        "@npm//@polymer/paper-dropdown-menu",
+        "@npm//@polymer/paper-icon-button",
+        "@npm//@polymer/paper-input",
+        "@npm//@polymer/paper-item",
+        "@npm//@polymer/paper-listbox",
+        "@npm//@polymer/paper-slider",
+        "@npm//@polymer/paper-spinner",
+        "@npm//@polymer/paper-styles",
+        "@npm//@polymer/paper-toast",
+        "@npm//@polymer/paper-toggle-button",
+        "@npm//@polymer/paper-tooltip",
+        "@npm//@polymer/polymer",
+        "@npm//d3",
+        "@npm//numericjs",
+        "@npm//three",
+        "@npm//umap-js",
+        "@npm//weblas",
     ],
 )
 
-tf_web_library(
+tf_ts_library(
     name = "heap",
     srcs = ["heap.ts"],
-    path = "/vz-projector",
+    strict_checks = False,
 )
 
-tf_web_library(
+tf_ts_library(
     name = "sptree",
     srcs = ["sptree.ts"],
-    path = "/vz-projector",
+    strict_checks = False,
 )
 
-tf_web_library(
+tf_ts_library(
     name = "bh_tsne",
     srcs = ["bh_tsne.ts"],
-    path = "/vz-projector",
+    strict_checks = False,
     deps = [":sptree"],
 )
 
+tf_js_binary(
+    name = "standalone_bundle",
+    compile = 1,
+    entry_point = "bundle.ts",
+    deps = [
+        ":vz_projector",
+    ],
+)
+
 ################# Standalone development #################
 
 tf_web_library(
     name = "standalone_lib",
     srcs = [
-        "standalone.html",
+        "standalone_lib.html",
         "standalone_projector_config.json",
+        ":standalone_bundle.js",
     ],
     path = "/",
     deps = [
-        ":vz_projector",
-        "//tensorboard/components/tf_imports:polymer",
-        "@org_polymer_iron_icons",
-        "@org_polymer_paper_icon_button",
-        "@org_polymer_paper_tooltip",
+        "//tensorboard/components_polymer3:analytics_html",
+        "@com_google_fonts_roboto",
     ],
 )
 
 tensorboard_html_binary(
-    name = "devserver",
-    input_path = "/standalone.html",
-    output_path = "/index.html",
-    deps = [":standalone_lib"],
+    name = "standalone",
+    compile = False,
+    input_path = "/standalone_lib.html",
+    js_path = "/standalone.js",
+    output_path = "/standalone.html",
+    deps = [
+        ":standalone_lib",
+    ],
 )