Merge pull request #185 from PAIR-code/p2_merge

Update Facets to Polymer 2
PAIR-code · Jul 1, 2019 · ccf8a2f · ccf8a2f
2 parents 5a42fe3 + a11c63b
commit ccf8a2f
Show file tree

Hide file tree

Showing 47 changed files with 17,210 additions and 3,009 deletions.
diff --git a/WORKSPACE b/WORKSPACE
@@ -19,13 +19,13 @@ versions.check(minimum_bazel_version = "0.22.0")
 
 http_archive(
     name = "io_bazel_rules_closure",
-    sha256 = "0e6de40666f2ebb2b30dc0339745a274d9999334a249b05a3b1f46462e489adf",
-    # The changes that we need for Bazel 0.23 compatibility are not in
-    # any release, so we pin to HEAD as of 2019-02-22.
-    strip_prefix = "rules_closure-87d24b1df8b62405de8dd059cb604fd9d4b1e395",
+    sha256 = "b6936ecc0b5a1ef616b9d7e76694d414aa5605265c11322257a610fb256b1bf7",
+    # The changes that we need for Bazel 0.26 compatibility are not in
+    # any release, so we pin to HEAD as of 2019-06-04.
+    strip_prefix = "rules_closure-7434c41542ca9e1b05166d897b90073d1b8b2cf8",
     urls = [
-        "https://mirror.bazel.build/github.com/bazelbuild/rules_closure/archive/87d24b1df8b62405de8dd059cb604fd9d4b1e395.tar.gz",
-        "https://github.com/bazelbuild/rules_closure/archive/87d24b1df8b62405de8dd059cb604fd9d4b1e395.tar.gz",  # 2019-02-22
+        "http://mirror.tensorflow.org/github.com/bazelbuild/rules_closure/archive/7434c41542ca9e1b05166d897b90073d1b8b2cf8.tar.gz",
+        "https://github.com/bazelbuild/rules_closure/archive/7434c41542ca9e1b05166d897b90073d1b8b2cf8.tar.gz",  # 2019-06-04
     ],
 )
 
@@ -47,14 +47,12 @@ closure_repositories(
     #    omit_com_google_protobuf = True,
     omit_com_google_protobuf_js = True,
 )
-
 http_archive(
     name = "org_tensorflow_tensorboard",
-    sha256 = "5d04f587e4597b555f144dc128ddd5a0d8d1b26065d24dddc2b36ac82d9a85dd",
-    strip_prefix = "tensorboard-8de790143b2cb787a8b0f1168cb0dd8d64eb8dcf",
+    sha256 = "09ced8f421fb9d4e73b3b0f8f44c91ee653251e7c2e2b953a4774a507c348a86",
+    strip_prefix = "tensorboard-b7dd0e369dfe51f6f08dbaf3e85fe0942dbaf64f",
     urls = [
-        "https://mirror.bazel.build/github.com/tensorflow/tensorboard/archive/8de790143b2cb787a8b0f1168cb0dd8d64eb8dcf.tar.gz",
-        "https://github.com/tensorflow/tensorboard/archive/8de790143b2cb787a8b0f1168cb0dd8d64eb8dcf.tar.gz",  # 2019-01-13
+        "https://github.com/stephanwlee/tensorboard/archive/b7dd0e369dfe51f6f08dbaf3e85fe0942dbaf64f.tar.gz",  # 2019-06-28
     ],
 )
 

diff --git a/colab_facets.ipynb b/colab_facets.ipynb
@@ -70,7 +70,7 @@
     "\n",
     "jsonstr = train_data.to_json(orient='records')\n",
     "HTML_TEMPLATE = \"\"\"\n",
-    "        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.js\"></script>\n",
+    "        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.3.3/webcomponents-lite.js\"></script>\n",
     "        <link rel=\"import\" href=\"https://raw.githubusercontent.com/PAIR-code/facets/master/facets-dist/facets-jupyter.html\">\n",
     "        <facets-dive id=\"elem\" height=\"600\"></facets-dive>\n",
     "        <script>\n",
@@ -176,7 +176,7 @@
     "from IPython.core.display import display, HTML\n",
     "\n",
     "HTML_TEMPLATE = \"\"\"\n",
-    "        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.js\"></script>\n",
+    "        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.3.3/webcomponents-lite.js\"></script>\n",
     "        <link rel=\"import\" href=\"https://raw.githubusercontent.com/PAIR-code/facets/master/facets-dist/facets-jupyter.html\" >\n",
     "        <facets-overview id=\"elem\"></facets-overview>\n",
     "        <script>\n",

diff --git a/facets-dist/facets-jupyter.html b/facets-dist/facets-jupyter.html
diff --git a/facets/BUILD b/facets/BUILD
@@ -14,6 +14,7 @@ tf_web_library(
     deps = [
         "//facets_dive/components/facets_dive",
         "//facets_overview/components/facets_overview",
+        "@org_tensorflow_tensorboard//tensorboard/components:polymer",
     ],
 )
 

diff --git a/facets/visualizations.html b/facets/visualizations.html
@@ -1,2 +1,3 @@
+<link rel="import" href="../../polymer.html">
 <link rel="import" href="../facets-overview/components/facets-overview/facets-overview.html">
 <link rel="import" href="../facets-dive/components/facets-dive/facets-dive.html">
diff --git a/facets_dive/Dive_demo.ipynb b/facets_dive/Dive_demo.ipynb
@@ -58,7 +58,7 @@
     "\n",
     "# Create Facets template  \n",
     "HTML_TEMPLATE = \"\"\"\n",
-    "        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.js\"></script>\n",
+    "        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.3.3/webcomponents-lite.js\"></script>\n",
     "        <link rel=\"import\" href=\"/nbextensions/facets-dist/facets-jupyter.html\">\n",
     "        <facets-dive sprite-image-width=\"{sprite_size}\" sprite-image-height=\"{sprite_size}\" id=\"elem\" height=\"600\"></facets-dive>\n",
     "        <script>\n",

diff --git a/facets_dive/components/facets_dive/facets-dive.html b/facets_dive/components/facets_dive/facets-dive.html
@@ -32,7 +32,7 @@
        * This CSS rule forces the containing element to have the correct height
        * in either case.
        */
-      ::content paper-input-container > .floated-label-placeholder {
+      :host paper-input-container > .floated-label-placeholder {
         min-height: 20px;
       }
 

diff --git a/facets_dive/components/facets_dive/facets-dive.ts b/facets_dive/components/facets_dive/facets-dive.ts
@@ -412,7 +412,7 @@ Polymer({
     this._updateHeight();
   },
 
-  _updateHeight(this: any, height: number) {
+  _updateHeight: function(this: any, height: number) {
     if (this.height !== null) {
       this.style.height =
           typeof this.height === 'number' ? this.height + 'px' : this.height;

diff --git a/facets_dive/components/facets_dive_controls/facets-dive-controls.ts b/facets_dive/components/facets_dive_controls/facets-dive-controls.ts
@@ -231,24 +231,21 @@ Polymer({
     return positionMode === 'scatter';
   },
 
-  _isKeyNumeric(this: any, key: string): boolean {
+  _isKeyNumeric: function(this: any, key: string): boolean {
     return this.stats && (key in this.stats) && this.stats[key].isNumeric();
   },
 
-  _isKeyCategorical(this: any, key: string): boolean {
+  _isKeyCategorical: function(this: any, key: string): boolean {
     return this.stats && (key in this.stats) && !this.stats[key].isNumeric();
   },
 
   _updateCSSVars(this: any) {
-    this.customStyle['--grid-faceting-vertical-label-color'] =
-        this.gridFacetingVerticalLabelColor;
-    this.customStyle['--grid-faceting-horizontal-label-color'] =
-        this.gridFacetingHorizontalLabelColor;
-    this.customStyle['--item-positioning-vertical-label-color'] =
-        this.itemPositioningVerticalLabelColor;
-    this.customStyle['--item-positioning-horizontal-label-color'] =
-        this.itemPositioningHorizontalLabelColor;
-    this.updateStyles();
+    this.updateStyles({
+      '--grid-faceting-vertical-label-color': this.gridFacetingVerticalLabelColor,
+      '--grid-faceting-horizontal-label-color': this.gridFacetingHorizontalLabelColor,
+      '--item-positioning-vertical-label-color': this.itemPositioningVerticalLabelColor,
+      '--item-positioning-horizontal-label-color': this.itemPositioningHorizontalLabelColor
+    });
   },
 
   /**
@@ -263,7 +260,7 @@ Polymer({
    */
   _maxBuckets(this: any, fieldName: string, bagOfWords: boolean): number {
     const defaultMax = 100;
-    const fieldStats: FieldStats = this.stats[fieldName];
+    const fieldStats: FieldStats = this.stats ? this.stats[fieldName] : null;
     if (!fieldStats) {
       return defaultMax;
     }
@@ -276,8 +273,8 @@ Polymer({
   /**
    * Return whether the chosen field has a usable word tree.
    */
-  _hasWordTree(this: any, fieldName: string): boolean {
-    const fieldStats: FieldStats = this.stats[fieldName];
+  _hasWordTree: function(this: any, fieldName: string): boolean {
+    const fieldStats: FieldStats = this.stats ? this.stats[fieldName] : null;
     return !!fieldStats && !!fieldStats.wordTree &&
         fieldStats.wordTree.highestLevel > 1;
   },

diff --git a/facets_dive/components/facets_dive_info_card/facets-dive-info-card.html b/facets_dive/components/facets_dive_info_card/facets-dive-info-card.html
@@ -30,16 +30,17 @@
         overflow: auto;
         padding: 8px;
       }
-      ::content dt {
+      dt {
         color: #9e7c65;
         font-size: 14px;
       }
-      ::content dd {
+      dd {
         @apply --paper-font-common-code;
         color: #513726;
         margin: 0 0 16px 0;
       }
     </style>
+    <div id="holder"></div>
     <!-- Additional content filled in dynamically. -->
   </template>
 </dom-module>

diff --git a/facets_dive/components/facets_dive_info_card/facets-dive-info-card.ts b/facets_dive/components/facets_dive_info_card/facets-dive-info-card.ts
@@ -41,9 +41,11 @@ Polymer({
       observer: '_updateSelected',
     },
   },
+  ready(this: any) {
+    this.scopeSubtree(this.$.holder, true);
+  },
   _updateSelected(this: any, selectedData: Object[]) {
-    const root = Polymer.dom(this.root);
-    root.innerHTML = '';
+    this.$.holder.innerHTML = '';
 
     if (!selectedData) {
       return;
@@ -56,7 +58,7 @@ Polymer({
 
       const div = document.createElement('div');
       div.style.width = '100%';
-      root.appendChild(div);
+      this.$.holder.appendChild(div);
 
       infoRenderer(selectedObject, div);
     }

diff --git a/facets_dive/components/facets_dive_vis/facets-dive-vis.html b/facets_dive/components/facets_dive_vis/facets-dive-vis.html
@@ -38,11 +38,11 @@
         height: 100%;
         width: 100%;
       }
-      ::content .labels {
+      .labels {
         @apply --paper-font-common-base;
         @apply --paper-font-headline;
       }
-      ::content .rotate {
+      .rotate {
         stroke-dasharray: 1.5, 0.5;
         animation: rotate 1s linear infinite;
       }
@@ -55,7 +55,9 @@
         }
       }
     </style>
-    <!-- Additional content filled in dynamically. -->
+    <div id="holder">
+      <!-- Additional content filled in dynamically. -->
+    </div>
   </template>
 </dom-module>
 

diff --git a/facets_dive/components/facets_dive_vis/facets-dive-vis.ts b/facets_dive/components/facets_dive_vis/facets-dive-vis.ts
@@ -834,6 +834,11 @@ class FacetsDiveVizInternal {
    */
   ignoreChange: boolean;
 
+  /**
+   * Div holding all dynamically created content in this element.
+   */
+  holder: HTMLElement;
+
   /**
    * Capture Polymer element instance and prep internal state.
    */
@@ -853,9 +858,11 @@ class FacetsDiveVizInternal {
     // Layout object will be used for computing camera position and frustum to
     // to fit within the viewport.
     this.layout = new Layout();
+    this.holder = (this.elem as any).$.holder;
+    (this.elem as any).scopeSubtree(this.holder, true);
 
     // Insert background SVG used for cell backgrounds.
-    this.cellBackgroundSVG = d3.select(this.elem)
+    this.cellBackgroundSVG = d3.select(this.holder)
                                  .append<SVGSVGElement>('svg')
                                  .style('left', 0)
                                  .style('position', 'absolute')
@@ -881,7 +888,7 @@ class FacetsDiveVizInternal {
           .style('pointer-events', 'none')
           .style('position', 'absolute')
           .style('top', 0);
-      this.elem.appendChild(this.renderer.domElement);
+      this.holder.appendChild(this.renderer.domElement);
     } catch (err) {
       // An error will be displayed below.
     }
@@ -892,7 +899,7 @@ class FacetsDiveVizInternal {
     d3.select(this.elem).call(this.zoom);
 
     // Insert background SVG used for labels and axes.
-    this.labelsAndAxesSVG = d3.select(this.elem)
+    this.labelsAndAxesSVG = d3.select(this.holder)
                                 .append<SVGSVGElement>('svg')
                                 .style('left', 0)
                                 .style('position', 'absolute')
@@ -919,7 +926,7 @@ class FacetsDiveVizInternal {
     if (!this.renderer) {
       this.labelsAndAxesSVG.style('display', 'none');
       this.cellBackgroundSVG.style('display', 'none');
-      d3.select(this.elem)
+      d3.select(this.holder)
           .append('p')
           .attr('class', 'error')
           .style('color', 'darkred')
@@ -1890,7 +1897,7 @@ class FacetsDiveVizInternal {
 
     // ENTER + UPDATE.
     const updating =
-        labelElementsEnter.merge(labelElements)
+        labelElementsEnter.merge(labelElements as any)
             .transition()
             .duration(this.elem.tweenDuration)
             .attr(

diff --git a/facets_dive/demo/BUILD b/facets_dive/demo/BUILD
@@ -16,6 +16,7 @@ tf_web_library(
     deps = [
         "//facets_dive/components/facets_dive",
         "//facets_dive/lib/test:externs",
+        "@org_tensorflow_tensorboard//tensorboard/components:polymer",
         "@org_tensorflow_tensorboard//tensorboard/components/tf_imports:d3",
     ],
 )

diff --git a/facets_dive/demo/quickdraw.html b/facets_dive/demo/quickdraw.html
@@ -18,6 +18,7 @@
 <html>
 <head>
   <meta charset="utf-8">
+  <link rel="import" href="../../../../polymer.html">
   <link rel="import" href=".././components/facets-dive/facets-dive.html">
   <link rel="import" href="../../../../tf-imports/d3.html">
 <style>

diff --git a/facets_dive/demo/quickdraw.ts b/facets_dive/demo/quickdraw.ts
@@ -19,7 +19,7 @@ import {FacetsDive} from '../components/facets-dive/facets-dive';
 const ss = document.querySelector('facets-dive') as FacetsDive;
 
 const loadDataset = (url: string) => {
-  (d3.json(`${url}.json`) as any).then((data: Array<{}>) => {
+  ((d3 as any).json(`${url}.json`) as any).then((data: Array<{}>) => {
     ss.data = data;
     ss.atlasUrl = `${url}.png`;
   });

diff --git a/facets_overview/Overview_demo.ipynb b/facets_overview/Overview_demo.ipynb
@@ -65,7 +65,7 @@
     "from IPython.core.display import display, HTML\n",
     "\n",
     "HTML_TEMPLATE = \"\"\"\n",
-    "        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.js\"></script>\n",
+    "        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.3.3/webcomponents-lite.js\"></script>\n",
     "        <link rel=\"import\" href=\"https://raw.githubusercontent.com/PAIR-code/facets/master/facets-dist/facets-jupyter.html\" >\n",
     "        <facets-overview id=\"elem\"></facets-overview>\n",
     "        <script>\n",

diff --git a/facets_overview/common/BUILD b/facets_overview/common/BUILD
@@ -10,6 +10,8 @@ tf_web_library(
         "common_bundle.html",
         "feature_statistics_generator.ts",
         "overview_data_model.ts",
+        "plottable_helpers.d.ts",
+        "plottable_helpers.js",
         "utils.ts",
     ],
     clutz_entry_points = [

diff --git a/facets_overview/common/common_bundle.html b/facets_overview/common/common_bundle.html
@@ -19,3 +19,4 @@
 <script src="feature_statistics_generator.js"></script>
 <script src="utils.js"></script>
 <script src="overview_data_model.js"></script>
+<script src="plottable_helpers.js"></script>
diff --git a/facets_overview/common/plottable_helpers.d.ts b/facets_overview/common/plottable_helpers.d.ts
@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2017 Google Inc.
+ *
+ * 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.
+ */
+
+declare namespace plottable_helpers {
+  export class PointerInteraction extends Plottable.Interactions.Pointer {}
+}  // namespace plottable_helpers