Merge pull request #185 from PAIR-code/p2_merge

Update Facets to Polymer 2

Author: jameswex

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
     ],
 )
 

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",

facets-dist/facets-jupyter.html

@@ -14,6 +14,7 @@ tf_web_library(
     deps = [
         "//facets_dive/components/facets_dive",
         "//facets_overview/components/facets_overview",
+        "@org_tensorflow_tensorboard//tensorboard/components:polymer",
     ],
 )
 

facets/BUILD

@@ -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">

facets/visualizations.html

@@ -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",

facets_dive/Dive_demo.ipynb

@@ -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;
       }
 

facets_dive/components/facets_dive/facets-dive.html

@@ -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;

facets_dive/components/facets_dive/facets-dive.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;
   },

facets_dive/components/facets_dive_controls/facets-dive-controls.ts

@@ -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>