Color metanodes by function

[chihuahua]

This change makes it so that when the user colors nodes by structure, metanodes are differentiated in color based on function. Previously, functions were assigned an 'unknown' color because there is only 1 instance of a function within the library for each function.

[chihuahua]

This will be tested internally via integration tests.

[jart]

Have we looked into color blindness at any point, regarding these graph explorer colors? cc: @wchargin

[wchargin]

As far as I know, we haven't looked into it. It appears that the colors for non-expanded nodes are

rgb(187, 198, 221)
rgb(197, 226, 182)
rgb(189, 219, 219)
rgb(239, 216, 169)
rgb(245, 190, 163)
rgb(245, 163, 190)
rgb(197, 182, 226)
rgb(235, 173, 235)
rgb(187, 221, 198)
rgb(235, 235, 173)
rgb(187, 198, 221)

(given by invoking STRUCTURE_PALETTE(id, false), defined in tf_graph_common/render.ts, for id from 0 to 10 inclusive; it's cyclic).

I'm not sure what the right metric is. Here's the (symmetric) contrast ratio matrix, using WCAG definitions:

1.00  1.22  1.17  1.23  1.04  1.13  1.10  1.04  1.17  1.39  1.00
1.22  1.00  1.04  1.01  1.17  1.37  1.34  1.27  1.05  1.14  1.22
1.17  1.04  1.00  1.05  1.12  1.32  1.28  1.22  1.00  1.19  1.17
1.23  1.01  1.05  1.00  1.18  1.39  1.35  1.29  1.06  1.13  1.23
1.04  1.17  1.12  1.18  1.00  1.18  1.14  1.09  1.12  1.33  1.04
1.13  1.37  1.32  1.39  1.18  1.00  1.03  1.08  1.31  1.57  1.13
1.10  1.34  1.28  1.35  1.14  1.03  1.00  1.05  1.28  1.52  1.10
1.04  1.27  1.22  1.29  1.09  1.08  1.05  1.00  1.22  1.45  1.04
1.17  1.05  1.00  1.06  1.12  1.31  1.28  1.22  1.00  1.19  1.17
1.39  1.14  1.19  1.13  1.33  1.57  1.52  1.45  1.19  1.00  1.39
1.00  1.22  1.17  1.23  1.04  1.13  1.10  1.04  1.17  1.39  1.00

(source: https://gist.github.com/wchargin/f0c73cf9d38cff7d31cf1fec9019a419)

These are quite low contrast values—4.5 is the minimum for text-on-background—but it's not clear that contrast is the right thing to look at, as these are certainly not text-on-background.

Probably a better metric is CIE L*a*b* distance:

Node color distances, CIE L*a*b:
  0.00   17.90    7.33   19.62   17.97   17.36    7.61   16.71   12.79   22.57
 17.90    0.00   11.38    9.24   15.77   28.29   24.78   32.27    5.62    7.27
  7.33   11.38    0.00   15.57   17.13   22.41   14.82   23.42    5.93   16.99
 19.62    9.24   15.57    0.00    8.19   23.57   24.52   29.74   12.12    5.62
 17.97   15.77   17.13    8.19    0.00   16.20   20.44   23.70   16.24   13.81
 17.36   28.29   22.41   23.57   16.20    0.00   12.91    9.54   25.62   28.91
  7.61   24.78   14.82   24.52   20.44   12.91    0.00    9.51   20.07   28.45
 16.71   32.27   23.42   29.74   23.70    9.54    9.51    0.00   28.25   34.45
 12.79    5.62    5.93   12.12   16.24   25.62   20.07   28.25    0.00   12.14
 22.57    7.27   16.99    5.62   13.81   28.91   28.45   34.45   12.14    0.00
Average color pair distance: 17.66
Quantiles: 5.62, 12.12, 16.99, 23.57, 34.45

For reference, distances of TensorBoard standard palette:
  0.00   18.23   31.70   78.89   98.52   81.02   44.22
 18.23    0.00   27.33   69.70   92.02   78.83   31.26
 31.70   27.33    0.00   77.51   97.16   97.51   46.48
 78.89   69.70   77.51    0.00   25.52   49.91   40.05
 98.52   92.02   97.16   25.52    0.00   56.53   64.25
 81.02   78.83   97.51   49.91   56.53    0.00   58.23
 44.22   31.26   46.48   40.05   64.25   58.23    0.00
Average color pair distance: 60.23
Quantiles: 18.23, 40.05, 58.23, 78.89, 98.52

And distances of sRGB primary colors:
  0.00  170.57  176.31
170.57    0.00  258.68
176.31  258.68    0.00
Average color pair distance: 201.85
Quantiles: 170.57, 170.57, 176.31, 176.31, 258.68

This shows that the node colors are significantly closer together than the standard TensorBoard accessible palette: the median distance for node colors is less than the minimum distance in the standard palette.

(source: https://gist.github.com/wchargin/a0625f9c972485f2d35edad2b829cd8d)

Personally, I've had no trouble with distinguishing the colors. But this anecdata should be qualified on two points: (a), my experience is mostly just with small datasets for TensorBoard develoment, so the number of distinct colors used is small (I don't think I've ever seen past the third color), and (b) my deuteranomaly is, I think, pretty mild. Plus, it's anecdata.

Thus, my tentative conclusion is: based on the CIE L*a*b* distances, it might not be a bad idea to use the standard TensorBoard palette instead, but I also don't have sufficient expertise to make a decisive suggestion.

[chihuahua]

That's a thorough, quantitative analysis! Here are the colors juxtaposed. Each row is a palette.

Code for generating that.

What about a less intense version of TensorBoard's? We also likely want a slightly bigger palette.

[wchargin]

An alternative to decreasing the opacity is to show white on darker colors, as with our existing pickTextColor function:

tensorboard/tensorboard/components/tf_card_heading/util.js

Lines 35 to 45 in 5ebc2b9

	export function pickTextColor(background) {
	const rgb = convertHexToRgb(background);
	if (!rgb) {
	return 'inherit';
	}
	// See: http://www.w3.org/TR/AERT#color-contrast
	const brightness = Math.round((rgb[0] * 299 +
	rgb[1] * 587 +
	rgb[2] * 114) / 1000);
	return brightness > 125 ? 'inherit' : '#eee';
	}

This yields the following:

(jsbin: http://jsbin.com/ginopimupi/edit?html,css,js,output)

In my opinion, it is notably easier to distinguish the colors than in the palette with reduced opacity: for instance: color pairs {1,3} and {5,6} and {6,7}. Consider also that these colors will be at a distance from another, not directly juxtaposed. The reduced opacity is precisely the problem with the current palette, not so much the hues! so reintroducing it doesn't make much sense, in my opinion.

The "smart text colors" option is perfectly legible to me, and is consistent with the rest of TensorBoard and with WAI.

[wchargin]

We also likely want a slightly bigger palette.

Do you have any evidence to suggest that people frequently need to differentiate among more than seven isomorphism classes of subgraphs? (The jump from ten to seven does not seem large.)

[chihuahua]

The reason I note that is because each function gets a color now - we can address later when functions become popular.

Smart colors look good, although they require nuanced logic, ie sometimes the label is within vs outside. Let me see if I can cover all the cases ... it helps that expanded nodes are lighter.