Bring back night mode in the projector via filter: invert() css rules.

Change: 134070499

tensorflow/tensorboard/components/vz-projector/scatterPlot.ts

@@ -86,6 +86,8 @@ export interface ScatterPlot {
   highlightPoints(
       pointIndexes: number[], highlightStroke?: (index: number) => string,
       favorLabels?: (index: number) => boolean): void;
+  /** Toggle between day and night modes. */
+  setDayNightMode(isNight: boolean): void;
   /** Show/hide tick labels. */
   showTickLabels(show: boolean): void;
   /** Whether to show axes or not. */

tensorflow/tensorboard/components/vz-projector/scatterPlotWebGL.ts

@@ -649,6 +649,12 @@ export class ScatterPlotWebGL implements ScatterPlot {
 
   getHighlightedPoints(): number[] { return this.highlightedPoints; }
 
+  setDayNightMode(isNight: boolean) {
+    d3.select(this.containerNode)
+        .selectAll('canvas')
+        .style('filter', isNight ? 'invert(100%)' : null);
+  }
+
   showAxes(show: boolean) {}
   showTickLabels(show: boolean) {}
   setAxisLabels(xLabel: string, yLabel: string) {}

tensorflow/tensorboard/components/vz-projector/vz-projector.html

@@ -565,6 +565,10 @@ paper-listbox .pca-item {
         <i class="material-icons">photo_size_select_small</i>
         Select
       </button>
+      <button class="menu-button nightDayMode" title="Toggle between night and day mode">
+        <i class="material-icons">brightness_2</i>
+        Night Mode
+      </button>
       <div class="ink-fabs">
         <div class="ink-fab reset-zoom" title="Zoom to fit all">
           <i class="material-icons resetZoom">home</i>

tensorflow/tensorboard/components/vz-projector/vz-projector.ts

@@ -410,6 +410,14 @@ export class Projector extends ProjectorPolymer {
       this.updateMenuButtons();
     });
 
+    let dayNightModeButton = this.dom.select('.nightDayMode');
+    let modeIsNight = dayNightModeButton.classed('selected');
+    dayNightModeButton.on('click', () => {
+      modeIsNight = !modeIsNight;
+      dayNightModeButton.classed('selected', modeIsNight);
+      this.scatterPlot.setDayNightMode(modeIsNight);
+    });
+
     // Resize
     window.addEventListener('resize', () => {
       this.scatterPlot.resize();