Color neighbor point set label text according to nearest neighbor gra…

…dient color. Render a "background card" behind each label text, to increase visibility. Change: 141230421
trangtv57 · Dec 7, 2016 · dd7a39c · dd7a39c
1 parent 945331a
commit dd7a39c
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 7 deletions.
diff --git a/tensorflow/tensorboard/components/vz_projector/projectorScatterPlotAdapter.ts b/tensorflow/tensorboard/components/vz_projector/projectorScatterPlotAdapter.ts
@@ -25,11 +25,10 @@ import {ScatterPlotVisualizerTraces} from './scatterPlotVisualizerTraces';
 import * as vector from './vector';
 
 const LABEL_FONT_SIZE = 10;
-const LABEL_SCALE_DEFAULT = 1.0;
 const LABEL_SCALE_LARGE = 2;
+const LABEL_SCALE_DEFAULT = 1.0;
 const LABEL_FILL_COLOR_SELECTED = 0x000000;
 const LABEL_FILL_COLOR_HOVER = 0x000000;
-const LABEL_FILL_COLOR_NEIGHBOR = 0x000000;
 const LABEL_STROKE_COLOR_SELECTED = 0xFFFFFF;
 const LABEL_STROKE_COLOR_HOVER = 0xFFFFFF;
 const LABEL_STROKE_COLOR_NEIGHBOR = 0xFFFFFF;
@@ -221,7 +220,7 @@ export class ProjectorScatterPlotAdapter {
     const pointScaleFactors = this.generatePointScaleFactorArray(
         dataSet, selectedSet, neighbors, hoverIndex);
     const labels = this.generateVisibleLabelRenderParams(
-        dataSet, selectedSet, neighbors, hoverIndex);
+        dataSet, selectedSet, neighbors, hoverIndex, this.distanceMetric);
     const traceColors = this.generateLineSegmentColorMap(dataSet, pointColorer);
     const traceOpacities =
         this.generateLineSegmentOpacityArray(dataSet, selectedSet);
@@ -298,8 +297,8 @@ export class ProjectorScatterPlotAdapter {
 
   generateVisibleLabelRenderParams(
       ds: DataSet, selectedPointIndices: number[],
-      neighborsOfFirstPoint: NearestEntry[],
-      hoverPointIndex: number): LabelRenderParams {
+      neighborsOfFirstPoint: NearestEntry[], hoverPointIndex: number,
+      distFunc: DistanceFunction): LabelRenderParams {
     if (ds == null) {
       return null;
     }
@@ -361,13 +360,15 @@ export class ProjectorScatterPlotAdapter {
     // Neighbors
     {
       const n = neighborCount;
-      const fillRgb = styleRgbFromHexColor(LABEL_FILL_COLOR_NEIGHBOR);
+      const minDist = n > 0 ? neighborsOfFirstPoint[0].dist : 0;
       const strokeRgb = styleRgbFromHexColor(LABEL_STROKE_COLOR_NEIGHBOR);
       for (let i = 0; i < n; ++i) {
         const labelIndex = neighborsOfFirstPoint[i].index;
         labelStrings.push(
             this.getLabelText(ds, labelIndex, this.labelPointAccessor));
         visibleLabels[dst] = labelIndex;
+        const fillRgb = styleRgbFromDistance(
+            distFunc, neighborsOfFirstPoint[i].dist, minDist);
         packRgbIntoUint8Array(
             fillColors, dst, fillRgb[0], fillRgb[1], fillRgb[2]);
         packRgbIntoUint8Array(
@@ -688,6 +689,13 @@ function styleRgbFromHexColor(hex: number): [number, number, number] {
   return [(c.r * 255) | 0, (c.g * 255) | 0, (c.b * 255) | 0];
 }
 
+function styleRgbFromDistance(
+    distFunc: DistanceFunction, d: number,
+    minDist: number): [number, number, number] {
+  const c = new THREE.Color(dist2color(distFunc, d, minDist));
+  return [(c.r * 255) | 0, (c.g * 255) | 0, (c.b * 255) | 0];
+}
+
 function getDefaultPointInTraceColor(
     index: number, totalPoints: number): THREE.Color {
   let hue =

diff --git a/tensorflow/tensorboard/components/vz_projector/scatterPlotVisualizerCanvasLabels.ts b/tensorflow/tensorboard/components/vz_projector/scatterPlotVisualizerCanvasLabels.ts
@@ -21,6 +21,8 @@ import * as util from './util';
 const MAX_LABELS_ON_SCREEN = 10000;
 const LABEL_STROKE_WIDTH = 3;
 const LABEL_FILL_WIDTH = 6;
+const LABEL_BACKGROUND_CARD_COLOR = 0xFFFFFF;
+const LABEL_BACKGROUND_CARD_OPACITY = 0.4;
 
 /**
  * Creates and maintains a 2d canvas on top of the GL canvas. All labels, when
@@ -86,6 +88,9 @@ export class ScatterPlotVisualizerCanvasLabels implements
     // Shift the label to the right of the point circle.
     const xShift = 4;
 
+    const labelBackgroundCardStyle = this.styleStringFromHexColorAndOpacity(
+        LABEL_BACKGROUND_CARD_COLOR, LABEL_BACKGROUND_CARD_OPACITY);
+
     const n = Math.min(MAX_LABELS_ON_SCREEN, lrc.pointIndices.length);
     for (let i = 0; i < n; ++i) {
       let point: THREE.Vector3;
@@ -117,7 +122,7 @@ export class ScatterPlotVisualizerCanvasLabels implements
       if (grid.insert(textBoundingBox, true)) {
         const text = lrc.labelStrings[i];
         const fontSize = lrc.defaultFontSize * lrc.scaleFactors[i] * dpr;
-        this.gc.font = fontSize + 'px roboto';
+        this.gc.font = fontSize + 'pt roboto';
 
         // Now, check with properly computed width.
         textBoundingBox.hiX += this.gc.measureText(text).width - 1;
@@ -126,6 +131,10 @@ export class ScatterPlotVisualizerCanvasLabels implements
           if (sceneIs3D && (lrc.useSceneOpacityFlags[i] === 1)) {
             opacity = opacityMap(camToPoint.length());
           }
+          this.gc.fillStyle = labelBackgroundCardStyle;
+          const rw = textBoundingBox.hiX - textBoundingBox.loX;
+          const rh = textBoundingBox.hiY - textBoundingBox.loY;
+          this.gc.fillRect(textBoundingBox.loX, textBoundingBox.loY, rw, rh);
           this.gc.fillStyle =
               this.styleStringFromPackedRgba(lrc.fillColors, i, opacity);
           this.gc.strokeStyle =
@@ -139,6 +148,15 @@ export class ScatterPlotVisualizerCanvasLabels implements
     }
   }
 
+  private styleStringFromHexColorAndOpacity(hex: number, opacity: number):
+      string {
+    const c = new THREE.Color(hex);
+    const r = (c.r * 255) | 0;
+    const g = (c.g * 255) | 0;
+    const b = (c.b * 255) | 0;
+    return 'rgba(' + r + ',' + g + ',' + b + ',' + opacity + ')';
+  }
+
   private styleStringFromPackedRgba(
       packedRgbaArray: Uint8Array, colorIndex: number,
       opacity: number): string {