Fixed What-If plugin

Most of the fixes are done by James Wexler.
Note that we are pinning Facets dependency to a specific commit for
Polymer2 compatibility.

Author: stephanwlee

tensorboard/components/vz_bar_chart/vz-bar-chart.html

@@ -45,6 +45,7 @@
       </table>
     </div>
     <div id="chartdiv"></div>
+    <style include="plottable-style"></style>
     <style>
       :host {
         -webkit-user-select: none;

tensorboard/components/vz_bar_chart/vz-bar-chart.ts

@@ -285,7 +285,7 @@ class BarChart {
     tooltipHeaderRow.insert('th', ':first-child');
 
     const plot = this.plot;
-    const pointer = new Plottable.Interactions.Pointer();
+    const pointer = new vz_chart_helpers.PointerInteraction();
     pointer.attachTo(plot);
 
     var hideTooltips = () => {

tensorboard/components/vz_example_viewer/vz-example-viewer.ts

@@ -238,6 +238,9 @@ Polymer({
    * display.
    */
   getFeaturesList: function(features: any, compareFeatures: any) {
+    if (features == null) {
+      return [];
+    }
     const featuresList: NameAndFeature[] = [];
     const featureSet: {[key: string]: boolean} = {};
     let it = features.keys();
@@ -250,6 +253,9 @@ Polymer({
         next = it.next();
       }
     }
+    if (compareFeatures == null) {
+      return featuresList;
+    }
     it = compareFeatures.keys();
     if (it) {
       let next = it.next();
@@ -292,6 +298,9 @@ Polymer({
 
   getFilteredFeaturesList: function(featureList: NameAndFeature[],
       searchValue: string, saliency: SaliencyMap) {
+    if (featureList == null) {
+      return;
+    }
     let filtered = featureList;
     const checkSal = saliency && Object.keys(saliency).length > 0;
     // Create a dict of feature names to the total absolute saliency of all
@@ -1416,7 +1425,7 @@ Polymer({
   },
 
   featureMoreClicked: function(event: Event) {
-    const button = event.srcElement.parentElement;
+    const button = event.srcElement;
     const feature = (button as any).dataFeature;
     const dialog = this.$$('#' + this.sanitizeFeature(feature) + '_dialog');
     dialog.positionTarget = button;

tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/BUILD

@@ -17,7 +17,7 @@ tf_web_library(
         ":tf_inference_viewer",
         "//tensorboard/components/vz_example_viewer",
         "//tensorboard/components/vz_bar_chart",
-        "//tensorboard/components/vz_line_chart",
+        "//tensorboard/components/vz_line_chart2",
         "@ai_google_pair_facets//facets_dive/components/facets_dive",
         "@ai_google_pair_facets//facets_overview/components/facets_overview",
         "@org_polymer_iron_collapse",

tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/demo/tf-interactive-inference-age-demo.html

@@ -30,7 +30,7 @@
         width: 100%;
       }
     </style>
-    <tf-interactive-inference-dashboard id="dash" local="true" model-type="regression" model-name="demo" inference-address="demo">
+    <tf-interactive-inference-dashboard id="dash" local="true" model-type="regression">
     </tf-interactive-inference-dashboard>
   </template>
   <script>
@@ -44,6 +44,8 @@
         categories: Object,
       },
       ready: async function() {
+        this.$.dash.modelName = "demo";
+        this.$.dash.inferenceAddress = "demo";
         this.$.dash.updateNumberOfModels();
         this.means = {
           'age': 38.64358543876172,

tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/demo/tf-interactive-inference-image-demo.html

@@ -35,7 +35,7 @@
       }
     </style>
     <canvas id="spritecanvas"></canvas>
-    <tf-interactive-inference-dashboard id="dash" local="true" label-vocab="[[labelVocab]]" model-name="demo" inference-address="demo">
+    <tf-interactive-inference-dashboard id="dash" local="true" label-vocab="[[labelVocab]]">
     </tf-interactive-inference-dashboard>
   </template>
   <script>
@@ -52,6 +52,8 @@
         images: Array,
       },
       ready: async function() {
+        this.$.dash.modelName = "demo";
+        this.$.dash.inferenceAddress = "demo";
         this.$.dash.updateNumberOfModels();
         this.model = await tf.loadModel(tf.io.browserHTTPRequest(
           'data/images/model.json', {credentials: 'include'}));

tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/demo/tf-interactive-inference-iris-demo.html

@@ -30,7 +30,7 @@
         width: 100%;
       }
     </style>
-    <tf-interactive-inference-dashboard id="dash" local="true" label-vocab="[[labelVocab]]" model-name="demo" inference-address="demo">
+    <tf-interactive-inference-dashboard id="dash" local="true" label-vocab="[[labelVocab]]">
     </tf-interactive-inference-dashboard>
   </template>
   <script>
@@ -45,6 +45,8 @@
                              'Iris-virginica']},
       },
       ready: async function() {
+        this.$.dash.modelName = "demo";
+        this.$.dash.inferenceAddress = "demo";
         this.$.dash.multiClass = true;
         this.$.dash.updateNumberOfModels();
         this.model = await tf.loadModel(tf.io.browserHTTPRequest(

tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/demo/tf-interactive-inference-multi-demo.html

@@ -30,7 +30,7 @@
         width: 100%;
       }
     </style>
-    <tf-interactive-inference-dashboard id="dash" local="true" label-vocab="[[labelVocab]]"  model-name="1, 2" inference-address="demo1, demo2">
+    <tf-interactive-inference-dashboard id="dash" local="true" label-vocab="[[labelVocab]]">
     </tf-interactive-inference-dashboard>
   </template>
   <script>
@@ -45,6 +45,8 @@
         labelVocab: {type: Array, value: ['<=50k', '>50k']},
       },
       ready: async function() {
+	this.$.dash.modelName = "1, 2";
+	this.$.dash.inferenceAddress = "demo1, demo2";
         this.$.dash.updateNumberOfModels();
         this.means = {
           'age': 38.64358543876172,

tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html

@@ -45,7 +45,7 @@
 <link rel="import" href="../tf-tensorboard/plugin-dialog.html">
 <link rel="import" href="../tf-tensorboard/registry.html">
 <link rel="import" href="../vz-bar-chart/vz-bar-chart.html">
-<link rel="import" href="../vz-line-chart/vz-line-chart.html">
+<link rel="import" href="../vz-line-chart2/vz-line-chart2.html">
 <link rel="import" href="./tf-confusion-matrix.html">
 <link rel="import" href="./tf-inference-viewer.html">
 <link rel="import" href="../facets-dive/components/facets-dive/facets-dive.html">
@@ -76,6 +76,10 @@
         --wit-color-gray300: #DADCE0;
       }
 
+      [hidden] {
+        display: none !important;
+      }
+
       #classification {
         width: 40%;
       }
@@ -404,7 +408,7 @@
         background: white;
       }
 
-      :host vz-line-chart {
+      :host vz-line-chart2 {
         margin: 12px 12px 12px 24px;
         height: 180px;
         width: 300px;
@@ -1228,7 +1232,7 @@ <h2>Show similarity to selected datapoint</h2>
         <paper-radio-button class="dist-radio" name="L2">L2</paper-radio-button>
       </paper-radio-group>
       <paper-dropdown-menu label="Apply to datapoints visualization" class="threshold-dropdown distance-vis-dropdown">
-        <paper-listbox class="dropdown-content" selected="{{facetDistSetting}}" attr-for-selected="name">
+        <paper-listbox slot="dropdown-content" selected="{{facetDistSetting}}" attr-for-selected="name">
           <paper-item name="colorBy">Color By</paper-item>
           <paper-item name="horizontalFacet">X-Axis Binning</paper-item>
           <paper-item name="verticalFacet">Y-Axis Binning</paper-item>
@@ -1354,7 +1358,7 @@ <h2>Show similarity to selected datapoint</h2>
                             <paper-input value="{{featureSearchValue}}" label="Search features"
                                 class="datapoint-control-filter-input feature-search-input"
                                 disabled$="[[!hasSelected(selectedExampleAndInference)]]" no-label-float>
-                              <iron-icon icon="icons:search" prefix></iron-icon>
+                              <iron-icon icon="icons:search" slot="prefix"></iron-icon>
                             </paper-input>
                           </div>
                           <div class="datapoint-right-controls-holder">
@@ -1543,7 +1547,7 @@ <h2>Show similarity to selected datapoint</h2>
                         <template is="dom-if" if="[[shouldShowLabelDropdown_(stats)]]">
                           <div class="flex">
                             <paper-dropdown-menu label="Ground Truth Feature" class="threshold-dropdown">
-                              <paper-listbox class="dropdown-content" selected="{{selectedLabelFeature}}" attr-for-selected="name">
+                              <paper-listbox slot="dropdown-content" selected="{{selectedLabelFeature}}" attr-for-selected="name">
                                 <template is="dom-repeat" items="[[getFeatureList_(stats)]]">
                                   <paper-item name="[[item]]">[[getFeatureName_(item)]]</paper-item>
                                 </template>
@@ -1593,7 +1597,7 @@ <h2>Show similarity to selected datapoint</h2>
                           <template is="dom-if" if="[[shouldShowFeatureDropdown_(stats)]]">
                             <div class="flex">
                               <paper-dropdown-menu label="Slice by" class="threshold-dropdown">
-                                <paper-listbox class="dropdown-content" selected="{{selectedBreakdownFeature}}" attr-for-selected="name">
+                                <paper-listbox slot="dropdown-content" selected="{{selectedBreakdownFeature}}" attr-for-selected="name">
                                   <template is="dom-repeat" items="[[getFeatureList_(stats)]]">
                                     <paper-item name="[[item]]">[[getFeatureName_(item)]]</paper-item>
                                   </template>
@@ -1609,7 +1613,7 @@ <h2>Show similarity to selected datapoint</h2>
                             <div class="flex">
                               <template is="dom-if" if="[[shouldShowSecondFeatureDropdown_(selectedBreakdownFeature)]]">
                                 <paper-dropdown-menu label="Slice by (secondary)" class="threshold-dropdown">
-                                  <paper-listbox class="dropdown-content" selected="{{selectedSecondBreakdownFeature}}" attr-for-selected="name">
+                                  <paper-listbox slot="dropdown-content" selected="{{selectedSecondBreakdownFeature}}" attr-for-selected="name">
                                     <template is="dom-repeat" items="[[getFeatureList_(stats)]]">
                                       <paper-item name="[[item]]">[[getFeatureName_(item)]]</paper-item>
                                     </template>
@@ -1738,7 +1742,7 @@ <h2>Show similarity to selected datapoint</h2>
                           </paper-icon-button>
                         </div>
                         <paper-dropdown-menu label="Sort by" class="threshold-dropdown perf-table-sort-menu">
-                          <paper-listbox class="dropdown-content" selected="{{selectedFeatureSort}}" attr-for-selected="name">
+                          <paper-listbox slot="dropdown-content" selected="{{selectedFeatureSort}}" attr-for-selected="name">
                             <template is="dom-repeat" items="[[getFeatureSortBy(modelType, multiClass)]]">
                               <paper-item name="[[item]]">[[item]]</paper-item>
                             </template>
@@ -1788,7 +1792,7 @@ <h2>Show similarity to selected datapoint</h2>
                               <div class="perf-table-threshold">
                                 <template is="dom-repeat" items="{{featureValueThreshold.threshold}}">
                                     <paper-slider class$="[[getSliderClass(index)]]" editable=true min="0" max="1" step="0.01" immediate-value="{{item.threshold}}"
-                                      value="[[item.threshold]]" on-value-changed="refreshInferencesNoRegen_" on-down="resetOptimizationSelected_">
+                                      value="[[item.threshold]]" on-value-changed="refreshInferencesNoRegen_" on-immediate-value-changed="refreshInferencesNoRegen_" on-down="resetOptimizationSelected_">
                                     </paper-slider>
                                 </template>
                               </div>
@@ -1835,10 +1839,10 @@ <h2>Show similarity to selected datapoint</h2>
                                 </div>
                                 <div class="roc-x-label">False positive rate</div>
                                 <div class="roc-y-label">True positive rate</div>
-                                <vz-line-chart id="[[getPrChartId(index)]]" class="pr-line-chart"
+                                <vz-line-chart2 id="[[getPrChartId(index)]]" class="pr-line-chart"
                                     x-axis-formatter="[[getSimpleAxisFormatter(axisPrecision)]]"
                                     y-axis-formatter="[[getSimpleAxisFormatter(axisPrecision)]]">
-                                </vz-line-chart>
+                                </vz-line-chart2>
                               </div>
                             </template>
                           </div>
@@ -1860,7 +1864,7 @@ <h2>Show similarity to selected datapoint</h2>
                             <div class="perf-table-threshold">
                               <template is="dom-repeat" items="{{overallThresholds}}">
                                   <paper-slider class$="[[getSliderClass(index)]]" editable=true min="0" max="1" step="0.01" immediate-value="{{item.threshold}}"
-                                    value="[[item.threshold]]" on-value-changed="refreshInferencesNoRegen_" on-down="resetOptimizationSelected_">
+                                    value="[[item.threshold]]" on-value-changed="refreshInferencesNoRegen_" on-immediate-value-changed="refreshInferencesNoRegen_" on-down="resetOptimizationSelected_">
                                   </paper-slider>
                               </template>
                             </div>
@@ -1906,10 +1910,10 @@ <h2>Show similarity to selected datapoint</h2>
                               </div>
                               <div class="roc-x-label">False positive rate</div>
                               <div class="roc-y-label">True positive rate</div>
-                              <vz-line-chart id="prchart" class="pr-line-chart"
+                              <vz-line-chart2 id="prchart" class="pr-line-chart"
                                   x-axis-formatter="[[getSimpleAxisFormatter(axisPrecision)]]"
                                   y-axis-formatter="[[getSimpleAxisFormatter(axisPrecision)]]">
-                              </vz-line-chart>
+                              </vz-line-chart2>
                             </div>
                           </template>
                         </div>
@@ -3474,6 +3478,7 @@ <h2>Show similarity to selected datapoint</h2>
         else if (selection == 'equalopp') {
           this.equalOppoClicked_();
         }
+        this.updateInferenceStats_(true);
       },
 
       costRatioChanged_: function() {
@@ -4965,7 +4970,7 @@ <h2>Show similarity to selected datapoint</h2>
 
         const holder = document.createElement('div');
         holder.classList.add('pd-holder');
-        const chart = document.createElement('vz-line-chart');
+        const chart = document.createElement('vz-line-chart2');
         const colorScale = [];
         const thresholdSeries = [];
         const valueFormatter = vz_chart_helpers.multiscaleFormatter(

third_party/js.bzl

@@ -317,11 +317,10 @@ def tensorboard_js_workspace():
 
   http_archive(
       name = "ai_google_pair_facets",
-      sha256 = "e3f7b7b3c194c1772d16bdc8b348716c0da59a51daa03ef4503cf06c073caafc",
-      strip_prefix = "facets-0.2.1",
+      sha256 = "03010e520ba7f01c596e092805dc9331b13831cccb1926b9659cc2d01d1e1a22",
+      strip_prefix = "facets-p2",
       urls = [
-          "http://mirror.bazel.build/github.com/pair-code/facets/archive/0.2.1.tar.gz",
-          "https://github.com/pair-code/facets/archive/0.2.1.tar.gz",
+          "https://github.com/pair-code/facets/archive/p2.tar.gz",
       ],
   )
   web_library_external(
@@ -340,7 +339,7 @@ def tensorboard_js_workspace():
       strip_prefix = "vaadin-split-layout-1.1.0",
       path = "/vaadin-split-layout",
   )
-  
+
   web_library_external(
       name = "vaadin_vaadin_grid",
       licenses = ["notice"],  # Apache License 2.0