WIP: New visualization: Treemap with d3

[deecay]

Adding new visualization to visualize hierarchical data.

• Hierarchy data must be represented in "adjacency list" model.

example of Adjacency List data

Parent	Child
	root
root	branchA
root	branchB
branchA	leafA
branchA	leafB
branchA	leafC

sample query

Result is an adjacency list hierarchy of Redash dashboards and visualizations.

-- visualizations
select 'dashboard' || CAST(dashboard_id as TEXT) as "parent", 'viz' || CAST(visualization_id as TEXT) as "child", width as "width" from widgets

-- dashboards
union
select 'root' as "parent", 'dashboard' || CAST(id as TEXT) as "child", null from dashboards

-- root node
union
select null, 'root', null from widgets

Editor

General

Colors

[kravets-levko]

Looks good except of few small things 👍

[kravets-levko]

LGTM 👍

[arikfr]

This comment is of course relevant here as well: #3154 (comment).

[deecay]

Updated React compliance. Please let me know if I've missed something.

[kravets-levko]

Thanks @deecay! I'll review ASAP

[kravets-levko]

Looks really awesome! Few notes:

Names of "Parent"/"Child" settings is a bit confusing. I think, current names do not reflect what they actually mean. How about renaming "Child" to "Key", "Parent" to "Parent Key", and also swap them (so user should first select a column which identifies each record, and only then - column which sets relation between records)?

How about renaming "Colors" tab to "Appearance" and moving "Cell padding" option there? Also, IMHO, tooltips and data labels options can be moved to own tab as well.

The last minor thing: for Chart visualization we dynamically compute foreground color based on background color. Maybe, you can try this function here as well (I hope it can make labels more readable):

redash/client/app/visualizations/chart/plotly/utils.js

Lines 33 to 62 in 4e9da3f

	function getFontColor(bgcolor) {
	let result = '#333333';
	if (isString(bgcolor)) {
	let matches = /#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i.exec(bgcolor);
	let r;
	let g;
	let b;
	if (matches) {
	r = parseInt(matches[1], 16);
	g = parseInt(matches[2], 16);
	b = parseInt(matches[3], 16);
	} else {
	matches = /#?([0-9a-f])([0-9a-f])([0-9a-f])/i.exec(bgcolor);
	if (matches) {
	r = parseInt(matches[1] + matches[1], 16);
	g = parseInt(matches[2] + matches[2], 16);
	b = parseInt(matches[3] + matches[3], 16);
	} else {
	return result;
	}
	}
	const lightness = r * 0.299 + g * 0.587 + b * 0.114;
	if (lightness < 170) {
	result = '#ffffff';
	}
	}
	return result;
	}

[kravets-levko]

No need to add browser-specific prefixes - webpack will do it

[kravets-levko]

BTW - I created a demo of this visualization on preview instance, so whoever wants to play with it can use it: https://deploy-preview-3131--redash-preview.netlify.com/queries/189/source#332 (once this PR will be merged, I'll add it to our "all visualizations" demo dashboard).

[ranbena]

Hovering over gutters yields a "null" tooltip.

[kravets-levko]

@ranbena I think that's value from root or some parents (?). Probably visualization should ignore "size" of all parents and aggregate it from leafs and propagate up to the root.

Upd.: probably, there should be no tooltip/label at all on non-leaf blocks 🤔

[ranbena]

Upd.: probably, there should be no tooltip/label at all on non-leaf blocks 🤔

Exactly!

[kravets-levko]

One more thing that crossed my mind: do we really need a "root" record to be returned by query? It's actually not shown anywhere on visualization, so, maybe, it could be dynamically created (if needed internally)? Also, I guess, when user selects "Child" column (in fact - record's unique key) - it's enough to build "flat" treemap without sub-blocks. WDYT?

[ranbena]

Upd.: probably, there should be no tooltip/label at all on non-leaf blocks 🤔

Another way to handle it is to remove the "Cell Padding" settings and hardcode it to { cellPadding: 0 }. It looks fine and the problem doesn't surface 😬

[deecay]

Hi @kravets-levko , @ranbena ,

Thanks so much for the interest and comments.

However, I think I should go this direction now. plotly native treemap

[arikfr]

Hi,

(This is a template message, but I mean every word of it. Also you're welcome to reply)

Thank you for making this contribution. While we couldn't bring it to completion and merge, it's still very much appreciated. 🙇

In the past year the Redash code base gone under massive updates: on the backend we moved to Python 3 & RQ instead of Celery and on the frontend we replaced Angular with React. It's very likely this makes this PR irrelevant without significant changes. :-(

I'm closing this PR now. But if you're still interested in making it happen, let me know and I will reopen.

Thanks.