Interact with Heatmap embedded in a scrollable UI Panel

I knew how we can click into a Heatmap cell and get its row and column info. This can be done by comparing the mouse-clicking position vs the Heatmap position. But what if my Heatmap has many rows such that when it is created inside a UI panel, the panel becomes scrollable, say the mouse position when I click row 2 is the same as the position when I scroll down and click row 22? Is there a way to get the correct row and column index when I click on a cell after scrolling down?

I'm currently using the "heatmap" function to generate the heatmap. But if above can only be realized using other methods when creating heatmap, feel free to suggest (though my preferred way is to use the "heatmap" function as it gives better flexibility and functionality with the actual heatmap)

Answer 1

[Karan Singh]

Hi @Yiling,

I tried creating a heatmap inside a "UIpanel" with the scrollable property set to "on." Since there are no inherent callbacks for this, I used "ButtonDownFcn" to detect clicks on the heatmap. Additionally, I retrieved the scroll position to correctly map the row and column indices.

function heatmap_clickable()
    % Sample Data
    data = randi(100, 50, 10); % 50 rows, 10 columns

    % Create Figure & Scrollable Panel
    fig = uifigure('Position', [100, 100, 600, 400]);
    scrollPanel = uipanel(fig, 'Position', [10, 10, 580, 380], 'Scrollable', 'on');

    % Create Heatmap Inside Panel
    h = heatmap(scrollPanel, data, 'Colormap', parula);
    h.XLabel = 'Columns';
    h.YLabel = 'Rows';

    % Set Click Callback
    ax = h.NodeChildren(1); % Extract underlying axes
    ax.ButtonDownFcn = @(src, event) heatmapClick(src, event, h, scrollPanel, data);
end

function heatmapClick(src, event, h, scrollPanel, data)
    % Get click position
    clickPos = event.IntersectionPoint; % [X, Y, Z] position
    xClick = clickPos(1);
    yClick = clickPos(2);

    % Get heatmap axis limits
    xLimits = xlim(src);
    yLimits = ylim(src);

    % Compute row & column index
    numRows = size(data, 1);
    numCols = size(data, 2);
    
    colIdx = round(interp1(linspace(xLimits(1), xLimits(2), numCols), 1:numCols, xClick));
    rowIdx = round(interp1(linspace(yLimits(1), yLimits(2), numRows), 1:numRows, yClick));

    % Adjust row index for scrolling
    scrollPos = scrollPanel.ScrollableOffset; % Get scrolling position
    rowIdx = rowIdx + round(scrollPos(2) / (yLimits(2) - yLimits(1)) * numRows);

    % Ensure indices are within valid range
    rowIdx = min(max(rowIdx, 1), numRows);
    colIdx = min(max(colIdx, 1), numCols);

    % Display clicked row and column
    disp(['Clicked on Row: ', num2str(rowIdx), ', Column: ', num2str(colIdx)]);
end

Try checking and running this code for the results, I think this is what you requie. Here is the relevant documentation link which would be useful.

https://in.mathworks.com/help/matlab/creating_plots/button-down-callback-function.html

Karan