TensorBoard: Ensure the same run always gets the same hue.

Uses the hash of the run name to decide which color. Bumps the saturation/lightness to disambiguate collisions.
Change: 122013114

15 files changed, 154 insertions, 192 deletions

diff --git a/tensorflow/tensorboard/lib/js/colorScale/colorScale.ts b/tensorflow/tensorboard/components/tf-color-scale/colorScale.ts
index d5e91e6019..cff4f0ac9a 100644
--- a/tensorflow/tensorboard/lib/js/colorScale/colorScale.ts
+++ b/tensorflow/tensorboard/components/tf-color-scale/colorScale.ts
@@ -70,18 +70,19 @@ module TF {
         throw new Error('Not enough colors in palette. Must be more than one.');
       }
 
-      var k = (this.numColors - 1) / (palette.length - 1);
-      this.internalColorScale = d3.scale.linear<string>()
-        .domain(d3.range(palette.length).map((i) => i * k))
-        .range(palette);
+      let k = (this.numColors - 1) / (palette.length - 1);
+      this.internalColorScale =
+          d3.scale.linear<string>()
+              .domain(d3.range(palette.length).map((i) => i * k))
+              .range(palette);
     }
 
     private hash(s: string): number {
-     function h(hash, str) {
-       hash = (hash << 5) - hash + str.charCodeAt(0);
-       return hash & hash;
-     }
-     return Math.abs(Array.prototype.reduce.call(s, h, 0)) % this.numColors;
+      function h(hash, str) {
+        hash = (hash << 5) - hash + str.charCodeAt(0);
+        return hash & hash;
+      }
+      return Math.abs(Array.prototype.reduce.call(s, h, 0)) % this.numColors;
     }
 
     /**
@@ -91,22 +92,23 @@ module TF {
      * @param {string[]} strings - An array of strings to use as the domain
      *                             for your scale.
      */
-    public domain(strings: string[]) {
+    public domain(strings: string[]): this {
       this.buckets = d3.range(this.numColors).map(() => []);
-      var sortedUniqueKeys = d3.set(strings).values().sort(function(a, b) {
+      let sortedUniqueKeys = d3.set(strings).values().sort(function(a, b) {
         return a.localeCompare(b);
       });
       sortedUniqueKeys.forEach((s) => this.addToDomain(s));
+      return this;
     }
 
     private getBucketForString(s: string) {
-      var bucketIdx = this.hash(s);
+      let bucketIdx = this.hash(s);
       return this.buckets[bucketIdx];
     }
 
     private addToDomain(s: string) {
-      var bucketIdx = this.hash(s);
-      var bucket = this.buckets[bucketIdx];
+      let bucketIdx = this.hash(s);
+      let bucket = this.buckets[bucketIdx];
       if (bucket.indexOf(s) === -1) {
         bucket.push(s);
       }
@@ -117,11 +119,12 @@ module TF {
       if (amount === 0) {
         return color;
 
-      // For first tick, nudge lighter...
+        // For first tick, nudge lighter...
       } else if (amount === 1) {
         return d3.hcl(color).brighter(0.6);
 
-      // ..otherwise nudge darker. Darker will approach black, which is visible.
+        // ..otherwise nudge darker. Darker will approach black, which is
+        // visible.
       } else {
         return d3.hcl(color).darker((amount - 1) / 2);
       }
@@ -136,15 +139,14 @@ module TF {
      * @throws Will error if input string is not in the scale's domain.
      */
 
-    public getColor(s: string): string {
-      var bucket = this.getBucketForString(s);
-      var idx = bucket.indexOf(s);
+    public scale(s: string): string {
+      let bucket = this.getBucketForString(s);
+      let idx = bucket.indexOf(s);
       if (idx === -1) {
         throw new Error('String was not in the domain.');
       }
-      var color = this.internalColorScale(this.hash(s));
+      let color = this.internalColorScale(this.hash(s));
       return this.nudge(color, idx).toString();
     }
-
   }
 }
diff --git a/tensorflow/tensorboard/lib/js/colorScale/demo/index.html b/tensorflow/tensorboard/components/tf-color-scale/demo/index.html
index c3d94da539..4d4676aac2 100644
--- a/tensorflow/tensorboard/lib/js/colorScale/demo/index.html
+++ b/tensorflow/tensorboard/components/tf-color-scale/demo/index.html
@@ -159,7 +159,7 @@ function ping() {
   colorEnter.append("div")
       .attr("class", "swatch");
 
-  color.select(".swatch").style("background-color", (d) => ccs.getColor(d));
+  color.select(".swatch").style("background-color", (d) => ccs.scale(d));
 
   colorEnter.append("div")
       .attr("class", "label")
diff --git a/tensorflow/tensorboard/lib/js/colorScale/demo/style.css b/tensorflow/tensorboard/components/tf-color-scale/demo/style.css
index d2fe1dc294..d2fe1dc294 100644
--- a/tensorflow/tensorboard/lib/js/colorScale/demo/style.css
+++ b/tensorflow/tensorboard/components/tf-color-scale/demo/style.css
diff --git a/tensorflow/tensorboard/components/tf-color-scale/palettes.ts b/tensorflow/tensorboard/components/tf-color-scale/palettes.ts
new file mode 100644
index 0000000000..c0c20afe79
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-color-scale/palettes.ts
@@ -0,0 +1,47 @@
+module TF {
+  export const palettes = {
+    googleStandard: [
+      '#db4437',  // google red 500
+      '#ff7043',  // deep orange 400
+      '#f4b400',  // google yellow 500
+      '#0f9d58',  // google green 500
+      '#00796b',  // teal 700
+      '#00acc1',  // cyan 600
+      '#4285f4',  // google blue 500
+      '#5c6bc0',  // indigo 400
+      '#ab47bc'   // purple 400
+    ],
+    googleCool: [
+      '#9e9d24',  // lime 800
+      '#0f9d58',  // google green 500
+      '#00796b',  // teal 700
+      '#00acc1',  // cyan 600
+      '#4285f4',  // google blue 500
+      '#5c6bc0',  // indigo 400
+      '#607d8b'   // blue gray 500
+    ],
+    googleWarm: [
+      '#795548',  // brown 500
+      '#ab47bc',  // purple 400
+      '#f06292',  // pink 300
+      '#c2185b',  // pink 700
+      '#db4437',  // google red 500
+      '#ff7043',  // deep orange 400
+      '#f4b400'   // google yellow 700
+    ],
+    googleColorBlind: [
+      '#c53929',  // google red 700
+      '#ff7043',  // deep orange 400
+      '#f7cb4d',  // google yellow 300
+      '#0b8043',  // google green 700
+      '#80deea',  // cyan 200
+      '#4285f4',  // google blue 500
+      '#5e35b1'   // deep purple 600
+    ],
+    // This rainbow palette attempts to keep a constant brightness across hues.
+    constantValue: [
+      '#f44336', '#ffa216', '#c2d22d', '#51b455', '#1ca091', '#505ec4',
+      '#a633ba'
+    ]
+  };
+}
diff --git a/tensorflow/tensorboard/lib/js/colorScale/test/colorScaleTests.ts b/tensorflow/tensorboard/components/tf-color-scale/test/colorScaleTests.ts
index ffe3868ffd..2d811e950d 100644
--- a/tensorflow/tensorboard/lib/js/colorScale/test/colorScaleTests.ts
+++ b/tensorflow/tensorboard/components/tf-color-scale/test/colorScaleTests.ts
@@ -19,38 +19,36 @@ module TF {
   describe('ColorScale', function() {
     let ccs: ColorScale;
 
-    beforeEach(function() {
-      ccs = new ColorScale();
-    });
+    beforeEach(function() { ccs = new ColorScale(); });
 
     it('No collisions with train, eval and test', function() {
       ccs.domain(['train']);
-      var trainColor = ccs.getColor('train');
+      let trainColor = ccs.scale('train');
       ccs.domain(['eval']);
-      var evalColor = ccs.getColor('eval');
+      let evalColor = ccs.scale('eval');
       ccs.domain(['test']);
-      var testColor = ccs.getColor('test');
+      let testColor = ccs.scale('test');
       assert.notEqual(trainColor, evalColor, testColor);
     });
 
     it('Returns consistent colors, given no hash collisions', function() {
       // These three colors don't have hash collisions
       ccs.domain(['red', 'yellow']);
-      var firstRedColor = ccs.getColor('red');
+      let firstRedColor = ccs.scale('red');
       ccs.domain(['red', 'yellow', 'blue']);
-      var secondRedColor = ccs.getColor('red');
+      let secondRedColor = ccs.scale('red');
       assert.deepEqual(firstRedColor, secondRedColor);
     });
 
     it('A 2-color scale returns the first and last colors of the palette',
        function() {
-         var twoColorScale = new ColorScale(2, TF.palettes.googleStandard);
+         let twoColorScale = new ColorScale(2, TF.palettes.googleStandard);
          // No hash collisions with these.
          twoColorScale.domain(['red', 'blue']);
          assert.deepEqual(
-             twoColorScale.getColor('blue'), TF.palettes.googleStandard[0]);
+             twoColorScale.scale('blue'), TF.palettes.googleStandard[0]);
          assert.deepEqual(
-             twoColorScale.getColor('red'),
+             twoColorScale.scale('red'),
              TF.palettes.googleStandard[TF.palettes.googleStandard.length - 1]);
        });
 
@@ -62,32 +60,32 @@ module TF {
     it('Colors don\'t nudge away from colors from an old domain.', function() {
       // at 12 breaks, 'orange' and 'blue' collide.
       ccs.domain(['red', 'blue']);
-      var firstBlue = ccs.getColor('blue');
+      let firstBlue = ccs.scale('blue');
       ccs.domain(['red', 'orange']);
-      var firstOrange = ccs.getColor('orange');
+      let firstOrange = ccs.scale('orange');
       assert.deepEqual(firstBlue, firstOrange);
     });
 
     it('Nudges all colors, given only one base color', function() {
-      var ccsWithOneColor = new ColorScale(1);
+      let ccsWithOneColor = new ColorScale(1);
       ccsWithOneColor.domain(['one', 'two', 'three']);
       assert.notEqual(
-          ccsWithOneColor.getColor('one'), ccsWithOneColor.getColor('two'));
+          ccsWithOneColor.scale('one'), ccsWithOneColor.scale('two'));
       assert.notEqual(
-          ccsWithOneColor.getColor('two'), ccsWithOneColor.getColor('three'));
+          ccsWithOneColor.scale('two'), ccsWithOneColor.scale('three'));
       assert.notEqual(
-          ccsWithOneColor.getColor('one'), ccsWithOneColor.getColor('three'));
+          ccsWithOneColor.scale('one'), ccsWithOneColor.scale('three'));
     });
 
     it('Nudges a color if it has a hash collision', function() {
       // at 12 breaks, 'orange' and 'blue' collide.
       ccs.domain(['red', 'blue']);
-      var firstBlue = ccs.getColor('blue');
+      let firstBlue = ccs.scale('blue');
       ccs.domain(['red', 'orange']);
-      var firstOrange = ccs.getColor('orange');
+      let firstOrange = ccs.scale('orange');
       ccs.domain(['red', 'blue', 'orange']);
-      var secondBlue = ccs.getColor('blue');
-      var secondOrange = ccs.getColor('orange');
+      let secondBlue = ccs.scale('blue');
+      let secondOrange = ccs.scale('orange');
       assert.deepEqual(firstBlue, secondBlue);
       assert.deepEqual(firstBlue, firstOrange);
       assert.notEqual(secondBlue, secondOrange);
@@ -96,7 +94,7 @@ module TF {
     it('Throws an error if string is not in the domain', function() {
       ccs.domain(['red', 'yellow', 'green']);
       assert.throws(function() {
-        ccs.getColor('not in domain');
+        ccs.scale('not in domain');
       }, 'String was not in the domain.');
     });
   });
diff --git a/tensorflow/tensorboard/lib/js/colorScale/test/index.html b/tensorflow/tensorboard/components/tf-color-scale/test/index.html
index a6c3c04aa6..a6c3c04aa6 100644
--- a/tensorflow/tensorboard/lib/js/colorScale/test/index.html
+++ b/tensorflow/tensorboard/components/tf-color-scale/test/index.html
diff --git a/tensorflow/tensorboard/components/tf-color-scale/tf-color-scale.html b/tensorflow/tensorboard/components/tf-color-scale/tf-color-scale.html
new file mode 100644
index 0000000000..b830013021
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-color-scale/tf-color-scale.html
@@ -0,0 +1,29 @@
+<link rel="import" href="../polymer/polymer.html">
+
+<!--
+tf-color-scale is a plumbing component that takes in an array of runs, and produces
+an upward-bindable outColorScale, which is a color scale mapping from those runs to
+a set of colors.
+-->
+<dom-module id="tf-color-scale">
+  <script src="palettes.js"></script>
+  <script src="colorScale.js"></script>
+  <script>
+    (function() {
+      Polymer({
+        is: "tf-color-scale",
+        properties: {
+          runs: Array,
+          outColorScale: {
+            type: Object,
+            computed: "makeColorScale(runs.*)",
+            notify: true,
+          },
+        },
+        makeColorScale: function(runs) {
+          return new TF.ColorScale().domain(this.runs);
+        },
+      });
+    })();
+  </script>
+</dom-module>
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/tf-chart.ts b/tensorflow/tensorboard/components/tf-event-dashboard/tf-chart.ts
index 7e29628ef7..4213b562e9 100644
--- a/tensorflow/tensorboard/components/tf-event-dashboard/tf-chart.ts
+++ b/tensorflow/tensorboard/components/tf-event-dashboard/tf-chart.ts
@@ -154,8 +154,7 @@ module TF {
       plot.y(this.yAccessor, yScale);
       plot.attr(
           'stroke', (d: Backend.Datum, i: number, dataset: Plottable.Dataset) =>
-                        dataset.metadata().run,
-          this.colorScale);
+                        this.colorScale.scale(dataset.metadata().run));
       this.plot = plot;
       let group = this.setupTooltips(plot);
       return group;
@@ -318,12 +317,10 @@ module TF {
         p.y0(y0);
         p.attr(
             'fill', (d: any, i: number, dataset: Plottable.Dataset) =>
-                        dataset.metadata().run,
-            this.colorScale);
+                        this.colorScale.scale(dataset.metadata().run));
         p.attr(
             'stroke', (d: any, i: number, dataset: Plottable.Dataset) =>
-                          dataset.metadata().run,
-            this.colorScale);
+                          this.colorScale.scale(dataset.metadata().run));
         p.attr('stroke-weight', (d: any, i: number, m: any) => '0.5px');
         p.attr('stroke-opacity', () => opacities[i]);
         p.attr('fill-opacity', () => opacities[i]);
@@ -334,7 +331,8 @@ module TF {
       medianPlot.x(xAccessor, xScale);
       medianPlot.y(medianAccessor, yScale);
       medianPlot.attr(
-          'stroke', (d: any, i: number, m: any) => m.run, this.colorScale);
+          'stroke',
+          (d: any, i: number, m: any) => this.colorScale.scale(m.run));
 
       this.plots = plots;
       return new Plottable.Components.Group(plots);
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/tf-color-scale.html b/tensorflow/tensorboard/components/tf-event-dashboard/tf-color-scale.html
deleted file mode 100644
index 0e4b5de017..0000000000
--- a/tensorflow/tensorboard/components/tf-event-dashboard/tf-color-scale.html
+++ /dev/null
@@ -1,69 +0,0 @@
-<link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../tf-imports/lodash.html">
-<link rel="import" href="../tf-imports/plottable.html">
-
-<!--
-tf-color-scale is a plumbing component that takes in an array of runs, and produces
-an upward-bindable outColorScale, which is a color scale mapping from those runs to
-a set of colors.
-
-Right now, the colors are hard-coded and must be manually synchronized with the colors expected in
-tf-run-selector. TODO(danmane): we should enshrine the mapping elsewhere.
--->
-<dom-module id="tf-color-scale">
-  <script>
-    (function() {
-      // TODO(danmane) - get Plottable team to make an API point for this
-      Plottable.Scales.Color._LOOP_LIGHTEN_FACTOR = 0;
-      var classColorPairs = [
-        ["light-blue", "#03A9F4"],
-        ["red"       , "#f44366"],
-        ["green"     , "#4CAF50"],
-        ["purple"    , "#9c27b0"],
-        ["teal"      , "#009688"],
-        ["pink"      , "#e91e63"],
-        ["orange"    , "#ff9800"],
-        ["brown"     , "#795548"],
-        ["indigo"    , "#3f51b5"],
-      ];
-      var classes = _.pluck(classColorPairs, 0);
-      var colors = _.pluck(classColorPairs, 1);
-      Polymer({
-        is: "tf-color-scale",
-        properties: {
-          runs: Array,
-          outClassScale: {
-            type: Object,
-            notify: true,
-            readOnly: true,
-            value: function() {
-              return new d3.scale.ordinal().range(classes);
-            },
-            // TODO(danmane): the class scale will not update if the domain changes.
-            // this behavior is inconsistent with the ColorScale.
-            // in practice we don't change runs after initial load so it's not currently an issue
-          },
-          outColorScale: {
-            type: Object,
-            notify: true,
-            readOnly: true,
-            value: function() {
-              var scale = new Plottable.Scales.Color().range(colors);
-              scale.onUpdate(this._notifyColorScaleDomainChange.bind(this));
-              return scale;
-            },
-          },
-        },
-        observers: ["_changeRuns(runs.*)"],
-        _changeRuns: function(runs) {
-          this.outClassScale.domain(this.runs);
-          this.outColorScale.domain(this.runs);
-        },
-        _notifyColorScaleDomainChange: function() {
-          this.notifyPath("outColorScale.domain_path", this.outColorScale.domain());
-          this.outColorScale.domain_path = null;
-        },
-      });
-    })();
-  </script>
-</dom-module>
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html b/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html
index a1474cefe1..b90744d519 100644
--- a/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html
+++ b/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html
@@ -1,7 +1,7 @@
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="tf-run-selector.html">
 <link rel="import" href="tf-x-type-selector.html">
-<link rel="import" href="tf-color-scale.html">
+<link rel="import" href="../tf-color-scale/tf-color-scale.html">
 <link rel="import" href="../tf-categorizer/tf-categorizer.html">
 <link rel="import" href="tf-chart.html">
 <link rel="import" href="../tf-collapsable-pane/tf-collapsable-pane.html">
@@ -33,7 +33,6 @@ The #center div contains tf-charts embedded inside tf-collapsable-panes.
         id="colorScale"
         runs="[[runs]]"
         out-color-scale="{{colorScale}}"
-        out-class-scale="{{classScale}}"
       ></tf-color-scale>
     </div>
 
@@ -60,7 +59,7 @@ The #center div contains tf-charts embedded inside tf-collapsable-panes.
           <tf-run-selector
             id="runSelector"
             runs="[[runs]]"
-            class-scale="[[classScale]]"
+            color-scale="[[colorScale]]"
             out-selected="{{selectedRuns}}"
           ></tf-run-selector>
         </div>
@@ -137,6 +136,10 @@ The #center div contains tf-charts embedded inside tf-collapsable-panes.
           computed: "_getVisibleTags(selectedRuns.*, run2tag.*)"
         },
         _show_download_links: Boolean,
+        colorScale: {
+          type: Object,
+          notify: true,
+        },
       },
       attached: function() {
         this.async(function() {
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/tf-run-selector.html b/tensorflow/tensorboard/components/tf-event-dashboard/tf-run-selector.html
index dfd7ec6733..6bb538ff25 100644
--- a/tensorflow/tensorboard/components/tf-event-dashboard/tf-run-selector.html
+++ b/tensorflow/tensorboard/components/tf-event-dashboard/tf-run-selector.html
@@ -11,15 +11,7 @@ It also displays tooltips.
 
 Properties in:
 - runs: Array of strings representing the runs that may be selected
-- tooltips: An object that maps from a run to the associated tooltip string.
-When tooltips are available, runs that have no associated tooltip will be
-hidden. When tooltips are available, the runs will be sorted by their tooltip.
-- closestRun: The name of the run that is closest to the cursor (present when
-tooltips are active). It will be highlighted
-- classScale: An object (generated by tf-dashboard-common/tf-color-scale) that
-maps from a run name to a class name, which will be used to color the run.
-- xValue: The string that represents the x-value associated with the tooltips.
-- xType: The string that describes what kind of data is displayed on the x axis.
+- colorScale: a TF.ColorScale mapping run names to colors
 
 Properties out:
 - outSelected: The array of run names that are currently checked by the user.
@@ -33,9 +25,10 @@ Properties out:
       </h3>
     </div>
     <tf-multi-checkbox
+      id="multiCheckbox"
       names="[[runs]]"
       out-selected="{{outSelected}}"
-      class-scale="[[classScale]]"
+      color-scale="[[colorScale]]"
     ></tf-multi-checkbox>
     <paper-button
       class="x-button"
@@ -90,7 +83,7 @@ Properties out:
       outSelected: {type: Array, notify: true},
       // runs: an array of strings, representing the run names that may be chosen
       runs: Array,
-      classScale: Object, // map from run name to color class (css)
+      colorScale: Object, // TF.ColorScale
     },
     _toggleAll: function() {
       if (this.outSelected.length > 0) {
diff --git a/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-histogram-dashboard.html b/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-histogram-dashboard.html
index 7bf246744b..3b6373b52a 100644
--- a/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-histogram-dashboard.html
+++ b/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-histogram-dashboard.html
@@ -1,7 +1,7 @@
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../tf-event-dashboard/tf-run-selector.html">
 <link rel="import" href="../tf-event-dashboard/tf-x-type-selector.html">
-<link rel="import" href="../tf-event-dashboard/tf-color-scale.html">
+<link rel="import" href="../tf-color-scale/tf-color-scale.html">
 <link rel="import" href="../tf-dashboard-common/tf-dashboard.html">
 <link rel="import" href="../tf-categorizer/tf-categorizer.html">
 <link rel="import" href="../tf-event-dashboard/tf-chart.html">
@@ -33,7 +33,6 @@ The #center div contains tf-charts embedded inside tf-collapsable-panes.
         id="colorScale"
         runs="[[runs]]"
         out-color-scale="{{colorScale}}"
-        out-class-scale="{{classScale}}"
       ></tf-color-scale>
     </div>
 
@@ -56,7 +55,7 @@ The #center div contains tf-charts embedded inside tf-collapsable-panes.
           <tf-run-selector
             id="runSelector"
             runs="[[runs]]"
-            class-scale="[[classScale]]"
+            color-scale="[[colorScale]]"
             out-selected="{{selectedRuns}}"
           ></tf-run-selector>
           </div>
diff --git a/tensorflow/tensorboard/components/tf-multi-checkbox/demo/index.html b/tensorflow/tensorboard/components/tf-multi-checkbox/demo/index.html
index 6f4d7839f7..723b90f7df 100644
--- a/tensorflow/tensorboard/components/tf-multi-checkbox/demo/index.html
+++ b/tensorflow/tensorboard/components/tf-multi-checkbox/demo/index.html
@@ -4,7 +4,7 @@
 <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
 <script src="../../d3/d3.js"></script>
 <link rel="import" href="../tf-multi-checkbox.html">
-<link rel="import" href="../../tf-event-dashboard/tf-color-scale.html">
+<link rel="import" href="../../tf-color-scale/tf-color-scale.html">
 <link rel="stylesheet" type="text/css" href="../../../lib/css/global.css">
 
 </head>
diff --git a/tensorflow/tensorboard/components/tf-multi-checkbox/tf-multi-checkbox.html b/tensorflow/tensorboard/components/tf-multi-checkbox/tf-multi-checkbox.html
index 5afaf15ad0..08c431e757 100644
--- a/tensorflow/tensorboard/components/tf-multi-checkbox/tf-multi-checkbox.html
+++ b/tensorflow/tensorboard/components/tf-multi-checkbox/tf-multi-checkbox.html
@@ -47,7 +47,6 @@ If the user does not interact, everything will be checked.
       >
         <div
           class="run-row"
-          color-class$="[[_applyColorClass(item, classScale)]]"
         >
           <div class="checkbox-container vertical-align-container">
             <paper-checkbox
@@ -130,7 +129,10 @@ If the user does not interact, everything will be checked.
           return [];
         },
       },
-      classScale: Function, // map from run name to css class
+      colorScale: Object, // map from run name to css class
+    },
+    listeners: {
+      'dom-change': 'onDomChange',
     },
     observers: [
       "_initializeOutSelected(names.*)",
@@ -138,6 +140,18 @@ If the user does not interact, everything will be checked.
     _initializeOutSelected: function(change) {
       this.outSelected = change.base.slice();
     },
+    onDomChange: function(e) {
+      var checkboxes = Array.prototype.slice.call(this.querySelectorAll("paper-checkbox"));
+      var scale = this.colorScale;
+      checkboxes.forEach(function(p) {
+        var color = scale.scale(p.name);
+        p.customStyle['--paper-checkbox-checked-color'] = color;
+        p.customStyle['--paper-checkbox-checked-ink-color'] = color;
+        p.customStyle['--paper-checkbox-unchecked-color'] = color;
+        p.customStyle['--paper-checkbox-unchecked-ink-color'] = color;
+      });
+      this.updateStyles();
+    },
     _checkboxChange: function(e) {
       var name = e.srcElement.name;
       var idx = this.outSelected.indexOf(name);
diff --git a/tensorflow/tensorboard/lib/js/colorScale/palettes.ts b/tensorflow/tensorboard/lib/js/colorScale/palettes.ts
deleted file mode 100644
index 0c63c1de74..0000000000
--- a/tensorflow/tensorboard/lib/js/colorScale/palettes.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-module TF {
-  export const palettes = {
-    googleStandard: [
-      "#db4437", // google red 500
-      "#ff7043", // deep orange 400
-      "#f4b400", // google yellow 500
-      "#0f9d58", // google green 500
-      "#00796b", // teal 700
-      "#00acc1", // cyan 600
-      "#4285f4", // google blue 500
-      "#5c6bc0", // indigo 400
-      "#ab47bc"  // purple 400
-    ],
-    googleCool: [
-      "#9e9d24", // lime 800
-      "#0f9d58", // google green 500
-      "#00796b", // teal 700
-      "#00acc1", // cyan 600
-      "#4285f4", // google blue 500
-      "#5c6bc0", // indigo 400
-      "#607d8b"  // blue gray 500
-    ],
-    googleWarm: [
-      "#795548", // brown 500
-      "#ab47bc", // purple 400
-      "#f06292", // pink 300
-      "#c2185b", // pink 700
-      "#db4437", // google red 500
-      "#ff7043", // deep orange 400
-      "#f4b400"  // google yellow 700
-    ],
-    googleColorBlind: [
-      "#c53929", // google red 700
-      "#ff7043", // deep orange 400
-      "#f7cb4d", // google yellow 300
-      "#0b8043", // google green 700
-      "#80deea", // cyan 200
-      "#4285f4", // google blue 500
-      "#5e35b1"  // deep purple 600
-    ],
-    // This rainbow palette attempts to keep a constant brightness across hues.
-    constantValue: [
-      "#f44336",
-      "#ffa216",
-      "#c2d22d",
-      "#51b455",
-      "#1ca091",
-      "#505ec4",
-      "#a633ba"
-    ]
-  };
-}