Add heatmap type to plot app

[jrchudy]

This issue is for adding heatmap plot type to plotly. To start, you can use the configuration below to start including functionality for heatmap. The data request below relies on a url parameter being present to get the data for a specific NCBI_GeneID. If it's easier, the data request can be ignored for now and fake data can be used to get the structure of heatmap working.

Once you have added the configuration from below into plot-config.js, it can be accessed like this: https://dev.gudmap.org/deriva-webapps/plot/?config=heatmp&NCBI_GeneID=11669

More information about plot app can be found in the issue from migration, user-doc, and sample configuration.

The following is an example heatmap configuration to begin with. The idea is that the following can be used to represent the same data as the heatmap app with a different way to configure the contents:

"heatmap": {
        plots: [{
            plot_type: "heatmap",
            plotly: {
                config: {
                    modeBarButtonsToRemove: ["scrollZoom", "zoom2d", "sendDataToCloud", "autoScale2d", "lasso2d", "select2d", "hoverClosestCartesian", "hoverCompareCartesian", "toggleSpikelines"],
                    displaylogo: false,
                    responsive: true
                },
                layout: {
                    title: "Plot Heatmap",
                    height: 1100,
                    width: 1200,
                    showLegend: true,
                    margin: {
                        l: 100,  // left margin for lengthy data labels.
                        b: 300   // bottom margin for lengthy data labels.
                    },
                    xaxis: {
                        title: "Alpha"
                        tickangle: 90,
                        tickfont: {
                          size: 12,
                          family: "Lucida Console"
                        }
                    },
                    yaxis: {
                        title: "Beta",
                        tickfont: {
                          size: 12,
                          family:  "Lucida Console"
                        }
                    }
                }
            },
            config: {},
            traces: [
                {
                    uri: "/ermrest/catalog/2/entity/Gene_Expression:Array_Data_view/NCBI_GeneID={{{$url_parameters.Gene.data.NCBI_GeneID}}}&Section_Ordinal=3",
                    x_col: ["Label"],
                    y_col: ["Probe_Set_Name"],
                    z_col: ["Value"]
                }
            ]
        }]
    }

Notes:

• Use plots[0].traces[0].queryPattern instead of uri since that property supports templating
  • if no templating is needed, the templating function returns the string as is
• Include templating support for the following properties in plots[0].config. Each of these properties are described in the plot app readme:
  • title_display_markdown_pattern
  • xaxis.title_display_markdown_pattern
  • xaxis. tick_display_markdown_pattern
  • yaxis.title_display_markdown_pattern
  • yaxis. tick_display_markdown_pattern
  • Include support for plots[0].traces[0]. graphic_link_pattern (also described in the plot app readme)

[KenyShah24]

In order to align the traces configuration for the heatmap, I suggest replacing the existing uri key with queryPattern. This will ensure consistency with the plot app's other plot_type configurations.

"heatmap": {
        plots: [{
            plot_type: "heatmap",
            plotly: {
                config: {
                    modeBarButtonsToRemove: ["scrollZoom", "zoom2d", "sendDataToCloud", "autoScale2d", "lasso2d", "select2d", "hoverClosestCartesian", "hoverCompareCartesian", "toggleSpikelines"],
                    displaylogo: false,
                    responsive: true
                },
                layout: {
                    title: "Plot Heatmap",
                    height: 1100,
                    width: 1200,
                    showLegend: true,
                    margin: {
                        l: 100,  // left margin for lengthy data labels.
                        b: 300   // bottom margin for lengthy data labels.
                    },
                    xaxis: {
                        title: "Alpha"
                        tickangle: 90,
                        tickfont: {
                          size: 12,
                          family: "Lucida Console"
                        }
                    },
                    yaxis: {
                        title: "Beta",
                        tickfont: {
                          size: 12,
                          family:  "Lucida Console"
                        }
                    }
                }
            },
            config: {},
            traces: [
                {
                    queryPattern: "/ermrest/catalog/2/entity/Gene_Expression:Array_Data_view/NCBI_GeneID={{{$url_parameters.Gene.data.NCBI_GeneID}}}&Section_Ordinal=3",
                    x_col: ["Label"],
                    y_col: ["Probe_Set_Name"],
                    z_col: ["Value"]
                }
            ]
        }]
    }

[KenyShah24]

Additionally, it would be good to include a title column in the traces of plot app just as it's there in heatmap app

traces: [
                {
                    queryPattern: "/ermrest/catalog/2/entity/Gene_Expression:Array_Data_view/NCBI_GeneID={{{$url_parameters.Gene.data.NCBI_GeneID}}}&Section_Ordinal=3",
                    title_col: "Section",
                    x_col: ["Label"],
                    y_col: ["Probe_Set_Name"],
                    z_col: ["Value"]
                }
            ]