Create Lines on Click, to help visualize large heatmaps

[Luc45]

I've built a huge correlation heatmap with over 70 metrics, which generated a 3000x3000px gigantic heatmap that was hard to analyse. Since the correlation heatmap is so large, the labels don't fit the screen, so when you are analysing a given metric you have to scroll to the middle of the heatmap which is just full of squares without labels, which made it really hard to analyse.

Together with ChatGPT, I've created some JS code to make it easier to visualize it, and I wanted to share it here in case it's interesting.

• Left click: Adds horizontal line to the row
• Middle click: Adds vertical line to the column
• ESC: Removes the line

I'm opening this issue to see if there's interest in adding this as a functionality of Plotly, or not?

I'll just share the JS code that does it on my heatmap:

<script>
    var myPlot = document.querySelector('.plotly-graph-div');

    myPlot.on('plotly_click', function(data) {
        console.log("Click event triggered");

        var clickedIndex = data.points[0].pointIndex; // Get the clicked row and column indices
        var clickedRow = clickedIndex[0];
        var clickedColumn = clickedIndex[1];

        console.log("Clicked Row: ", clickedRow, "Clicked Column: ", clickedColumn);

        if (data.event.button === 0) { // Left mouse button
            // Horizontal line logic
            addHorizontalLine(clickedRow);
        } else if (data.event.button === 1) { // Middle mouse button
            // Vertical line logic
            addVerticalLine(clickedColumn);
        }
    });

    function addHorizontalLine(rowIndex) {
        console.log("Adding horizontal line at row: ", rowIndex);
        // Calculate y0 and y1 for the horizontal line
        var y0 = rowIndex - 0.5;
        var y1 = rowIndex + 0.5;

        var numberOfColumns = myPlot.data[0].x.length;
        var x0 = -0.5;
        var x1 = numberOfColumns - 0.5;

        var horizontalLine = {
            type: 'rect',
            x0: x0,
            y0: y0,
            x1: x1,
            y1: y1,
            line: {
                color: 'black',
                width: 1
            }
        };

        Plotly.relayout(myPlot, { shapes: [horizontalLine] });
    }

    function addVerticalLine(columnIndex) {
        console.log("Adding vertical line at column: ", columnIndex);
        // Calculate x0 and x1 for the vertical line
        var x0 = columnIndex - 0.5;
        var x1 = columnIndex + 0.5;

        var numberOfRows = myPlot.data[0].y.length;
        var y0 = -0.5;
        var y1 = numberOfRows - 0.5;

        var verticalLine = {
            type: 'rect',
            x0: x0,
            y0: y0,
            x1: x1,
            y1: y1,
            line: {
                color: 'black',
                width: 1
            }
        };

        Plotly.relayout(myPlot, { shapes: [verticalLine] });
    }

    // Function to clear all lines when ESC key is pressed
    document.addEventListener('keydown', function(e) {
        if (e.key === "Escape") {
            console.log("ESC pressed, clearing all lines");
            Plotly.relayout(myPlot, { shapes: [] });
        }
    });
</script>

[alexcjohnson]

Thanks @Luc45 - this is a neat piece of interactivity you've added 🎉

My gut reaction is there will be too many variations on this pattern for it to make sense to include such functionality in out-of-the-box... but maybe not, maybe we could create built-in but disabled-by-default modebar buttons for this? Anyway you're verging on analysis app territory, and indeed it's pretty easy to add this kind of interaction in Dash (for the keypress you need dash-extensions https://github.com/plotly/dash/issues/723)

[gvwilson]

Hi - we are tidying up stale issues and PRs in Plotly's public repositories so that we can focus on things that are still important to our community. Since this one has been sitting for a while, I'm going to close it; if it is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. If you'd like to submit a PR, we'd be happy to prioritize a review, and if it's a request for tech support, please post in our community forum. Thank you - @gvwilson