Heatmap of data with multiple z layers

[jrchudy]

Description

As part of Smite project, we would like to show a graph as described below:

The data in the database is in the form of (x, y, z) where x and y are fixed axes and the z value is a precomputed count. There are multiple z values for different experiments maybe. Something like the following where x=[A, B, C, D], y=[1, 2, 3, 4] and z1 is every combination of the 2 sets and their counts. z2 and z3 are the same combination of data but under a different scope/experiment:

	A	B	C	D
1	112	132	256	117
2	245	688	2367	928
3	142	583	1678	783
4	86	132	443	327

Some of the requirements include:

• hover over shows x, y, and z1, z2, and z3 values
• being able to click on each cell to go to a recordset page that reprsents that x, y, and z date
• a color scale that shows "hotter" for larger numbers and "colder" for small numbers
• xaxis labels on top of chart
• a selector on top of the chart to swap between z1, z2, and z3 heatmap data being shown

In this issue, we will go over ways that we can achieve this and changes that are needed.

Plot app (2D Heatmap in plotly)

Using plot_type='heatmap', we can create our a 2d heatmap with our own supplied data.
Pros:

• color range is handled by plotly
• plotly allows for us to define the z values for each combination of x and y
  • plotly expects this to be an array of arrays
• hover template is possible to configure
  • having z2 and z3 as part of the hovertemplate for the heatmap showing z1 can be done using hoverinfo: 'text' and setting a `text: [[], [], ... ] property that maps similar to the z values
• xaxis labels can be mirrored on top and bottom
  • can be done with plotly configuration already, no changes needed in plot app
• configurable selectors for plot app is intended to be supported

Cons:

• click event can be supported similar to how we hacked the click event for violin plot (as long as event is based on x, y, z data)

Heatmap app (Series of 1D Heatmaps in plotly)

Example: https://dev.atlas-d2k.org/deriva-webapps/heatmap/#2/Gene_Expression:Array_Data_view/NCBI_GeneID=11682

Similar to the 2D heatmap above. All functionality ends up being the same. There isn't a reason to use a series of 1D heatmaps instead of 1 2D heatmap.

Matrix app

The matrix app shows the different zs for a combination of x and y values. In this case, there will be just one z value for each cell, so while we could use the matrix app, it's not something that the app is designed for.

Other than that, the following are the other changes required to make this feature work in the matrix app:

• The existing color palettes won't work. We need to assign colors based on the value of z. The logic should be straightforward.
• We need to add a flag to show the z value in the grid.
• We need to add a flag to turn off the following: search box, legend, and color palette selector.

While the matrix app is not designed for such a use case, the required changes to make it work in this scenario should be simple. The only downside of using a matrix app is that we cannot have multiple matrices in the same app, which is supported out of the box in the plot app.

[jrchudy]

Issue #150 handles support for queryPattern for all plot types. (completed)
Issue #121 handles support for hovertemplate display. (completed)

Issue #172 handles adding support for a single selector that shows above the heatmap (complete)