From 04bc7128499c7404fb6136bc8980495e032e6b06 Mon Sep 17 00:00:00 2001
From: Gabriel Rovina <gabriel.rovina@gmail.com>
Date: Wed, 11 Sep 2019 17:44:27 +0100
Subject: [PATCH 01/10] Move inference class comparison to a method

When computing closest counterfactuals, we need to evaluate if two
datapoints are in the same class or not.
For regression, this is more than ordinary comparison. Let's move this
evaluation to a separate method to be able to keep the logics clear.
---
 .../tf-interactive-inference-dashboard.html          | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html b/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
index ef42aa3a7e..bd0c64a9dc 100644
--- a/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
+++ b/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
@@ -3784,6 +3784,12 @@ <h2>Show similarity to selected datapoint</h2>
           }
         },
 
+        isSameInferenceClass_: function(val1, val2) {
+          return this.isRegression_(this.modelType)
+            ? Math.abs(val1 - val2) == 0  // TODO: use interactive threshold
+            : val1 == val2;           
+        },
+
         findClosestCounterfactual_: function() {
           const selected = this.selected[0];
           const modelInferenceValueStr = this.strWithModelName_(
@@ -3795,10 +3801,10 @@ <h2>Show similarity to selected datapoint</h2>
           for (let i = 0; i < this.visdata.length; i++) {
             // Skip examples with the same inference class as the selected
             // examples.
-            if (
-              this.visdata[selected][modelInferenceValueStr] ==
+            if (this.isSameInferenceClass_(
+              this.visdata[selected][modelInferenceValueStr],
               this.visdata[i][modelInferenceValueStr]
-            ) {
+            )) {
               continue;
             }
             let dist = this.getDist(

From d54dd47bd714380389bfb505939003448c1a8d30 Mon Sep 17 00:00:00 2001
From: Gabriel Rovina <gabriel.rovina@gmail.com>
Date: Wed, 11 Sep 2019 18:14:45 +0100
Subject: [PATCH 02/10] Add slider to control counterfactual threshold

For regression, we add a way to specify the distance in inferred value
above which the points can be considered counterfactual.
Also adding a small explanation in the information dialog.
---
 .../tf-interactive-inference-dashboard.html   | 145 ++++++++++--------
 1 file changed, 83 insertions(+), 62 deletions(-)

diff --git a/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html b/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
index bd0c64a9dc..3fd0522949 100644
--- a/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
+++ b/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
@@ -1189,6 +1189,11 @@
         margin: 4px 4px 4px 6px;
         --paper-toggle-button-checked-bar-color: #81c995;
       }
+      .counterfactual-delta label {
+        font-size: 12px;
+        color: #3c4043;
+        margin-left: 10px;
+      }
       .datapoint-button {
         color: #202124;
         background: #fde293;
@@ -1407,70 +1412,85 @@ <h2>Show similarity to selected datapoint</h2>
                           >Partial dependence plots</paper-radio-button
                         >
                       </paper-radio-group>
-                      <template is="dom-if" if="[[!isRegression_(modelType)]]">
-                        <div class="flex">
-                          <div title="Select a datapoint to use this feature">
-                            <paper-toggle-button
-                              class="counterfactual-toggle"
-                              checked="{{showNearestCounterfactual}}"
-                              disabled$="[[!hasSelected(selectedExampleAndInference)]]"
-                            >
-                              Show nearest counterfactual datapoint
-                            </paper-toggle-button>
-                          </div>
-                          <paper-radio-group
-                            selected="{{nearestCounterfactualDist}}"
+                      <div class="flex">
+                        <div title="Select a datapoint to use this feature">
+                          <paper-toggle-button
+                            class="counterfactual-toggle"
+                            checked="{{showNearestCounterfactual}}"
+                            disabled$="[[!hasSelected(selectedExampleAndInference)]]"
                           >
-                            <paper-radio-button name="L1"
-                              >L1</paper-radio-button
-                            >
-                            <paper-radio-button name="L2"
-                              >L2</paper-radio-button
-                            >
-                          </paper-radio-group>
-                          <paper-dropdown-menu
-                            label="Model:"
-                            no-label-float
-                            class="counterfactual-dropdown"
-                            hidden$="[[shouldHideCounterfactualModelSelector_(parsedModelNames)]]"
+                            Show nearest counterfactual datapoint
+                          </paper-toggle-button>
+                        </div>
+                        <paper-radio-group
+                          selected="{{nearestCounterfactualDist}}"
+                        >
+                          <paper-radio-button name="L1"
+                            >L1</paper-radio-button
                           >
-                            <paper-listbox
-                              class="dropdown-content"
-                              selected="{{nearestCounterfactualModelIndex}}"
-                            >
-                              <template
-                                is="dom-repeat"
-                                items="[[parsedModelNames]]"
-                              >
-                                <paper-item
-                                  >[[getCounterfactualModelName_(item)]]</paper-item
-                                >
-                              </template>
-                            </paper-listbox>
-                          </paper-dropdown-menu>
-                          <paper-icon-button
-                            icon="info-outline"
-                            class="info-icon cf-info-icon no-padding"
-                            on-tap="openDialog"
+                          <paper-radio-button name="L2"
+                            >L2</paper-radio-button
                           >
-                          </paper-icon-button>
-                          <paper-dialog
-                            class="dialog-text"
-                            horizontal-align="auto"
-                            vertical-align="auto"
+                        </paper-radio-group>
+                        <template is="dom-if" if="[[isRegression_(modelType)]]">
+                          <div title="Minimum distance in inferred value to consider counterfactual"
+                            class="counterfactual-delta">
+                            <label>Delta</label>
+                            <paper-slider pin
+                              value="{{minCounterfactualValueDist}}"
+                              max="{{maxCounterfactualValueDist}}"
+                            ></paper-slider>
+                          </div>
+                        </template>
+                        <paper-dropdown-menu
+                          label="Model:"
+                          no-label-float
+                          class="counterfactual-dropdown"
+                          hidden$="[[shouldHideCounterfactualModelSelector_(parsedModelNames)]]"
+                        >
+                          <paper-listbox
+                            class="dropdown-content"
+                            selected="{{nearestCounterfactualModelIndex}}"
                           >
-                            <div class="dialog-title">
-                              Nearest counterfactual (neighbor of different
-                              classification)
-                            </div>
-                            <div>
-                              Compares the selected datapoint with its nearest
-                              neighbor from a different classification using L1
-                              or L2 distance.
-                            </div>
-                          </paper-dialog>
-                        </div>
-                      </template>
+                            <template
+                              is="dom-repeat"
+                              items="[[parsedModelNames]]"
+                            >
+                              <paper-item
+                                >[[getCounterfactualModelName_(item)]]</paper-item
+                              >
+                            </template>
+                          </paper-listbox>
+                        </paper-dropdown-menu>
+                        <paper-icon-button
+                          icon="info-outline"
+                          class="info-icon cf-info-icon no-padding"
+                          on-tap="openDialog"
+                        >
+                        </paper-icon-button>
+                        <paper-dialog
+                          class="dialog-text"
+                          horizontal-align="auto"
+                          vertical-align="auto"
+                        >
+                          <div class="dialog-title">
+                            Nearest counterfactual (neighbor of different
+                            classification)
+                          </div>
+                          <div>
+                            Compares the selected datapoint with its nearest
+                            neighbor from a different classification using L1
+                            or L2 distance.
+                          </div>
+                          <div>
+                            <template is="dom-if" if="[[isRegression_(modelType)]]" restamp>
+                                For regression, a neighbor point is considered as
+                                a different classification if the difference in infered
+                                value is equal or greater than selected threshold.
+                            </template>
+                          </div>
+                        </paper-dialog>
+                      </div>
                       <div title="Select a datapoint to use this feature">
                         <div class="flex">
                           <paper-button
@@ -3534,6 +3554,7 @@ <h2>Show similarity to selected datapoint</h2>
             type: String,
             value: 'L1',
           },
+          minCounterfactualValueDist: Number,
           visMode: {
             type: String,
             value: 'dive',
@@ -3647,7 +3668,7 @@ <h2>Show similarity to selected datapoint</h2>
 
         observers: [
           'setFacetDistFeatureName(facetDistSwitch, selected)',
-          'nearestCounterfactualStatusChanged_(showNearestCounterfactual, nearestCounterfactualModelIndex, nearestCounterfactualDist)',
+          'nearestCounterfactualStatusChanged_(showNearestCounterfactual, nearestCounterfactualModelIndex, nearestCounterfactualDist, minCounterfactualValueDist)',
         ],
 
         // Required function.
@@ -3786,7 +3807,7 @@ <h2>Show similarity to selected datapoint</h2>
 
         isSameInferenceClass_: function(val1, val2) {
           return this.isRegression_(this.modelType)
-            ? Math.abs(val1 - val2) == 0  // TODO: use interactive threshold
+            ? Math.abs(val1 - val2) < this.minCounterfactualValueDist
             : val1 == val2;           
         },
 

From edcb203a9a49505967d94a270e998cfc62ffee00 Mon Sep 17 00:00:00 2001
From: Gabriel Rovina <gabriel.rovina@gmail.com>
Date: Wed, 11 Sep 2019 18:29:53 +0100
Subject: [PATCH 03/10] Adjust counterfactual delta maximum value

Set the maximum slider value for the datapoint when calculating
nearest counterfactuals.
Since the counterfactual threshold is based on the distance between
inferred values, we calculate the maximum value distance between
the selected point and the others.
---
 .../tf-interactive-inference-dashboard.html    | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html b/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
index 3fd0522949..b2d42bf835 100644
--- a/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
+++ b/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
@@ -3555,6 +3555,7 @@ <h2>Show similarity to selected datapoint</h2>
             value: 'L1',
           },
           minCounterfactualValueDist: Number,
+          maxCounterfactualValueDist: Number,
           visMode: {
             type: String,
             value: 'dive',
@@ -3811,12 +3812,20 @@ <h2>Show similarity to selected datapoint</h2>
             : val1 == val2;           
         },
 
+        adjustCounterfactualValueDistRange_: function(selected, valueStr) {
+          this.maxCounterfactualValueDist = Math.max(
+            this.distanceStats_[valueStr].max - this.visdata[selected][valueStr],
+            this.visdata[selected][valueStr] - this.distanceStats_[valueStr].min
+          );
+        },
+
         findClosestCounterfactual_: function() {
           const selected = this.selected[0];
           const modelInferenceValueStr = this.strWithModelName_(
             inferenceValueStr,
             this.nearestCounterfactualModelIndex
           );
+          this.adjustCounterfactualValueDistRange_(selected, modelInferenceValueStr)
           let closestDist = Number.POSITIVE_INFINITY;
           let closest = -1;
           for (let i = 0; i < this.visdata.length; i++) {
@@ -6110,9 +6119,12 @@ <h2>Show similarity to selected datapoint</h2>
             const feature = featureStats.name;
             this.distanceStats_[feature] = {};
             if (featureStats.numStats) {
-              // For numeric features, store standard deviation.
-              this.distanceStats_[feature].stdDev =
-                featureStats.numStats.stdDev;
+              // For numeric features, store standard deviation, min and max.
+              this.distanceStats_[feature] = {
+                stdDev: featureStats.numStats.stdDev,
+                min: featureStats.numStats.min,
+                max: featureStats.numStats.max,
+              };
             } else {
               // For categorical features, calculate and store  the probability
               // that any two feature values across all examples are the same.

From 59502f91968bed37dce905201daf10effdbf7be4 Mon Sep 17 00:00:00 2001
From: Gabriel Rovina <gabriel.rovina@gmail.com>
Date: Wed, 11 Sep 2019 18:39:24 +0100
Subject: [PATCH 04/10] Skip selected example when finding counterfactuals

Ignore the example itself when looking for counterfactuals, since a 0
threshold in regression would mean that the closest counterfactual is
always the example itself, which gives no information.
By skipping the example, the 0 threshold means looking for the closest
[different] example, regardless of the difference in inferred values.
---
 .../tf-interactive-inference-dashboard.html                  | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html b/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
index b2d42bf835..92527f3305 100644
--- a/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
+++ b/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
@@ -3829,9 +3829,8 @@ <h2>Show similarity to selected datapoint</h2>
           let closestDist = Number.POSITIVE_INFINITY;
           let closest = -1;
           for (let i = 0; i < this.visdata.length; i++) {
-            // Skip examples with the same inference class as the selected
-            // examples.
-            if (this.isSameInferenceClass_(
+            // Skip the selected example itself and examples with the same inference class.
+            if (i == selected || this.isSameInferenceClass_(
               this.visdata[selected][modelInferenceValueStr],
               this.visdata[i][modelInferenceValueStr]
             )) {

From e5ed88eed54a19cc87ad10ce99a0b9f30e947f54 Mon Sep 17 00:00:00 2001
From: Gabriel Rovina <gabriel.rovina@gmail.com>
Date: Thu, 12 Sep 2019 11:41:42 +0100
Subject: [PATCH 05/10] Fix lint warnings

---
 .../tf-interactive-inference-dashboard.html   | 55 +++++++++++--------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html b/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
index 92527f3305..f4feb4621d 100644
--- a/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
+++ b/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
@@ -1425,18 +1425,17 @@ <h2>Show similarity to selected datapoint</h2>
                         <paper-radio-group
                           selected="{{nearestCounterfactualDist}}"
                         >
-                          <paper-radio-button name="L1"
-                            >L1</paper-radio-button
-                          >
-                          <paper-radio-button name="L2"
-                            >L2</paper-radio-button
-                          >
+                          <paper-radio-button name="L1">L1</paper-radio-button>
+                          <paper-radio-button name="L2">L2</paper-radio-button>
                         </paper-radio-group>
                         <template is="dom-if" if="[[isRegression_(modelType)]]">
-                          <div title="Minimum distance in inferred value to consider counterfactual"
-                            class="counterfactual-delta">
+                          <div
+                            title="Minimum distance in inferred value to consider counterfactual"
+                            class="counterfactual-delta"
+                          >
                             <label>Delta</label>
-                            <paper-slider pin
+                            <paper-slider
+                              pin
                               value="{{minCounterfactualValueDist}}"
                               max="{{maxCounterfactualValueDist}}"
                             ></paper-slider>
@@ -1479,14 +1478,19 @@ <h2>Show similarity to selected datapoint</h2>
                           </div>
                           <div>
                             Compares the selected datapoint with its nearest
-                            neighbor from a different classification using L1
-                            or L2 distance.
+                            neighbor from a different classification using L1 or
+                            L2 distance.
                           </div>
                           <div>
-                            <template is="dom-if" if="[[isRegression_(modelType)]]" restamp>
-                                For regression, a neighbor point is considered as
-                                a different classification if the difference in infered
-                                value is equal or greater than selected threshold.
+                            <template
+                              is="dom-if"
+                              if="[[isRegression_(modelType)]]"
+                              restamp
+                            >
+                              For regression, a neighbor point is considered as
+                              a different classification if the difference in
+                              infered value is equal or greater than selected
+                              threshold.
                             </template>
                           </div>
                         </paper-dialog>
@@ -3809,12 +3813,13 @@ <h2>Show similarity to selected datapoint</h2>
         isSameInferenceClass_: function(val1, val2) {
           return this.isRegression_(this.modelType)
             ? Math.abs(val1 - val2) < this.minCounterfactualValueDist
-            : val1 == val2;           
+            : val1 == val2;
         },
 
         adjustCounterfactualValueDistRange_: function(selected, valueStr) {
           this.maxCounterfactualValueDist = Math.max(
-            this.distanceStats_[valueStr].max - this.visdata[selected][valueStr],
+            this.distanceStats_[valueStr].max -
+              this.visdata[selected][valueStr],
             this.visdata[selected][valueStr] - this.distanceStats_[valueStr].min
           );
         },
@@ -3825,15 +3830,21 @@ <h2>Show similarity to selected datapoint</h2>
             inferenceValueStr,
             this.nearestCounterfactualModelIndex
           );
-          this.adjustCounterfactualValueDistRange_(selected, modelInferenceValueStr)
+          this.adjustCounterfactualValueDistRange_(
+            selected,
+            modelInferenceValueStr
+          );
           let closestDist = Number.POSITIVE_INFINITY;
           let closest = -1;
           for (let i = 0; i < this.visdata.length; i++) {
             // Skip the selected example itself and examples with the same inference class.
-            if (i == selected || this.isSameInferenceClass_(
-              this.visdata[selected][modelInferenceValueStr],
-              this.visdata[i][modelInferenceValueStr]
-            )) {
+            if (
+              i == selected ||
+              this.isSameInferenceClass_(
+                this.visdata[selected][modelInferenceValueStr],
+                this.visdata[i][modelInferenceValueStr]
+              )
+            ) {
               continue;
             }
             let dist = this.getDist(

From 7de7f027e422f369e69bba43a72127ff180e36ec Mon Sep 17 00:00:00 2001
From: Gabriel Rovina <gabriel.rovina@gmail.com>
Date: Fri, 13 Sep 2019 14:58:45 +0100
Subject: [PATCH 06/10] Initialize counterfactual delta to std. deviation

Instead of 0, use the standard deviation of the inferred values as the
initial value for the counterfactual delta.
---
 .../tf-interactive-inference-dashboard.html   | 31 ++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html b/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
index f4feb4621d..e2f138bab7 100644
--- a/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
+++ b/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
@@ -1489,8 +1489,10 @@ <h2>Show similarity to selected datapoint</h2>
                             >
                               For regression, a neighbor point is considered as
                               a different classification if the difference in
-                              infered value is equal or greater than selected
-                              threshold.
+                              inferred value is equal or greater than the
+                              selected delta.<br />
+                              Delta is initialized to the standard deviation of
+                              the inferred values.
                             </template>
                           </div>
                         </paper-dialog>
@@ -3816,7 +3818,7 @@ <h2>Show similarity to selected datapoint</h2>
             : val1 == val2;
         },
 
-        adjustCounterfactualValueDistRange_: function(selected, valueStr) {
+        adjustMaxCounterfactualValueDist_: function(selected, valueStr) {
           this.maxCounterfactualValueDist = Math.max(
             this.distanceStats_[valueStr].max -
               this.visdata[selected][valueStr],
@@ -3824,16 +3826,28 @@ <h2>Show similarity to selected datapoint</h2>
           );
         },
 
+        adjustMinCounterfactualValueDist_: function() {
+          const valueStr = this.strWithModelName_(
+            inferenceValueStr,
+            this.nearestCounterfactualModelIndex
+          );
+          this.minCounterfactualValueDist = this.distanceStats_[
+            valueStr
+          ].stdDev;
+        },
+
         findClosestCounterfactual_: function() {
           const selected = this.selected[0];
           const modelInferenceValueStr = this.strWithModelName_(
             inferenceValueStr,
             this.nearestCounterfactualModelIndex
           );
-          this.adjustCounterfactualValueDistRange_(
-            selected,
-            modelInferenceValueStr
-          );
+          if (this.isRegression_(this.modelType)) {
+            this.adjustMaxCounterfactualValueDist_(
+              selected,
+              modelInferenceValueStr
+            );
+          }
           let closestDist = Number.POSITIVE_INFINITY;
           let closest = -1;
           for (let i = 0; i < this.visdata.length; i++) {
@@ -6098,6 +6112,9 @@ <h2>Show similarity to selected datapoint</h2>
             {name: '', data: temp},
           ]);
           this.calculateDistanceStats_(this.$.overview.protoInput.toObject());
+          if (this.isRegression_(this.modelType)) {
+            this.adjustMinCounterfactualValueDist_();
+          }
           const tempSelected = this.$.dive.selectedData;
           this.$.dive.selectedData = [];
           this.$.dive.selectedData = tempSelected;

From 6d1b1cbb500da4acd46635c8faff57cefc2e59be Mon Sep 17 00:00:00 2001
From: Gabriel Rovina <gabriel.rovina@gmail.com>
Date: Fri, 13 Sep 2019 16:34:37 +0100
Subject: [PATCH 07/10] Adjust display of counterfactual parameters

Fixed vertical alignment.
---
 .../tf-interactive-inference-dashboard.html         | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html b/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
index e2f138bab7..90151dbed9 100644
--- a/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
+++ b/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
@@ -1187,12 +1187,15 @@
       }
       .counterfactual-toggle {
         margin: 4px 4px 4px 6px;
+        padding-top: 4px;
         --paper-toggle-button-checked-bar-color: #81c995;
       }
+      .counterfactual-delta {
+        display: flex;
+        margin-right: 6px;
+      }
       .counterfactual-delta label {
-        font-size: 12px;
-        color: #3c4043;
-        margin-left: 10px;
+        padding-top: 10px;
       }
       .datapoint-button {
         color: #202124;
@@ -1433,12 +1436,12 @@ <h2>Show similarity to selected datapoint</h2>
                             title="Minimum distance in inferred value to consider counterfactual"
                             class="counterfactual-delta"
                           >
-                            <label>Delta</label>
                             <paper-slider
                               pin
                               value="{{minCounterfactualValueDist}}"
                               max="{{maxCounterfactualValueDist}}"
                             ></paper-slider>
+                            <label>Delta</label>
                           </div>
                         </template>
                         <paper-dropdown-menu
@@ -1463,7 +1466,7 @@ <h2>Show similarity to selected datapoint</h2>
                         </paper-dropdown-menu>
                         <paper-icon-button
                           icon="info-outline"
-                          class="info-icon cf-info-icon no-padding"
+                          class="info-icon no-padding"
                           on-tap="openDialog"
                         >
                         </paper-icon-button>

From 009fd5ac609750177bdb57f5b001d1a7d518e55c Mon Sep 17 00:00:00 2001
From: Gabriel Rovina <gabriel.rovina@gmail.com>
Date: Mon, 16 Sep 2019 10:56:11 +0100
Subject: [PATCH 08/10] Adjust naming, style and comments.

Addressing PR conversations.
---
 .../tf-interactive-inference-dashboard.html   | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html b/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
index 90151dbed9..68ba1d53bf 100644
--- a/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
+++ b/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
@@ -1197,6 +1197,9 @@
       .counterfactual-delta label {
         padding-top: 10px;
       }
+      .counterfactual-delta paper-slider {
+        height: 40px;
+      }
       .datapoint-button {
         color: #202124;
         background: #fde293;
@@ -3818,24 +3821,25 @@ <h2>Show similarity to selected datapoint</h2>
         isSameInferenceClass_: function(val1, val2) {
           return this.isRegression_(this.modelType)
             ? Math.abs(val1 - val2) < this.minCounterfactualValueDist
-            : val1 == val2;
+            : val1 === val2;
         },
 
-        adjustMaxCounterfactualValueDist_: function(selected, valueStr) {
+        adjustMaxCounterfactualValueDist_: function(selected, valueName) {
           this.maxCounterfactualValueDist = Math.max(
-            this.distanceStats_[valueStr].max -
-              this.visdata[selected][valueStr],
-            this.visdata[selected][valueStr] - this.distanceStats_[valueStr].min
+            this.distanceStats_[valueName].max -
+              this.visdata[selected][valueName],
+            this.visdata[selected][valueName] -
+              this.distanceStats_[valueName].min
           );
         },
 
         adjustMinCounterfactualValueDist_: function() {
-          const valueStr = this.strWithModelName_(
+          const valueName = this.strWithModelName_(
             inferenceValueStr,
             this.nearestCounterfactualModelIndex
           );
           this.minCounterfactualValueDist = this.distanceStats_[
-            valueStr
+            valueName
           ].stdDev;
         },
 
@@ -3856,7 +3860,7 @@ <h2>Show similarity to selected datapoint</h2>
           for (let i = 0; i < this.visdata.length; i++) {
             // Skip the selected example itself and examples with the same inference class.
             if (
-              i == selected ||
+              i === selected ||
               this.isSameInferenceClass_(
                 this.visdata[selected][modelInferenceValueStr],
                 this.visdata[i][modelInferenceValueStr]
@@ -6149,14 +6153,14 @@ <h2>Show similarity to selected datapoint</h2>
             const feature = featureStats.name;
             this.distanceStats_[feature] = {};
             if (featureStats.numStats) {
-              // For numeric features, store standard deviation, min and max.
+              // Numeric features:
               this.distanceStats_[feature] = {
                 stdDev: featureStats.numStats.stdDev,
                 min: featureStats.numStats.min,
                 max: featureStats.numStats.max,
               };
             } else {
-              // For categorical features, calculate and store  the probability
+              // Categorical features: calculate and store the probability
               // that any two feature values across all examples are the same.
               let probSameValue = 0;
               const buckets =

From 2a3c3cf70bf2e971aa7f9169edee4ec67e66e38d Mon Sep 17 00:00:00 2001
From: Gabriel Rovina <gabriel.rovina@gmail.com>
Date: Tue, 17 Sep 2019 16:48:02 +0100
Subject: [PATCH 09/10] Change max value binding in counterfactual delta

One-way binding is enough.
---
 .../tf-interactive-inference-dashboard.html                     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html b/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
index 68ba1d53bf..97df139fbb 100644
--- a/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
+++ b/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
@@ -1442,7 +1442,7 @@ <h2>Show similarity to selected datapoint</h2>
                             <paper-slider
                               pin
                               value="{{minCounterfactualValueDist}}"
-                              max="{{maxCounterfactualValueDist}}"
+                              max="[[maxCounterfactualValueDist]]"
                             ></paper-slider>
                             <label>Delta</label>
                           </div>

From 8ad428c20b2af577ba2b38b1f919d83f62e14d0e Mon Sep 17 00:00:00 2001
From: Gabriel Rovina <gabriel.rovina@gmail.com>
Date: Fri, 20 Sep 2019 14:44:35 +0100
Subject: [PATCH 10/10] Fix lint

`yarn fix-lint`
---
 .../tf-interactive-inference-dashboard.html                 | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html b/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
index 1e673195c0..11185303ce 100644
--- a/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
+++ b/tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard/tf-interactive-inference-dashboard.html
@@ -1527,9 +1527,9 @@ <h2>Show similarity to selected datapoint</h2>
                           </div>
                           <div>
                             Compares the selected datapoint with its nearest
-                            neighbor from a different classification using L1
-                            or L2 distance. If a custom distance function is
-                            set, it uses that function instead.
+                            neighbor from a different classification using L1 or
+                            L2 distance. If a custom distance function is set,
+                            it uses that function instead.
                           </div>
                           <div>
                             <template