Improving table loading time on App Designer for large dataset

I'm using a matlab script to evaluate data, format it in a table and store the result in a .mat file. Currently the table contains 2400x2034 data points but the final table would be 12000x2034 or larger.

The structure of the table is:

categorical(string), categorical(string), categorical(string), categorical(string), 1015xdouble, 1015xdouble

To display the data, I would like to build a simple app that would read the .mat file and display the whole or sections of table. However, the App Designer struggles even with small amounts of data. Displaying 8x2034 rows takes several seconds to load. With more entries, scrolling through the table causes stutters.

I have tried different version of .mat file with/without compression but unfortunately did not help.

The code to load the table at the startup-callback for the app:

% Code that executes after component creation

function startupFcn(app)

%If a completed Table already exists load it, otherwise create empty table

if isfile('completeTable.mat')

load('completeTable.mat');

end

app.completeTable = completeTable;

app.AvailableSpeciesListBox.Items = unique(app.completeTable.Shorthand);

end

And the code for loading the data into the table, upon selecting an entry in an itemlist:

% Value changed function: AvailableSpeciesListBox

function AvailableSpeciesListBoxValueChanged(app, event)

value = app.AvailableSpeciesListBox.Value;

selectedEntries = app.completeTable(app.completeTable.Shorthand == value,:);

app.UITable.Data = selectedEntries(:,2:width(app.completeTable));

end

Answer 1

[Vidhi Agarwal]

Hi Mario,

I understand you are facing an issue with the efficiency in loading the .mat file. Here’s an approach that can help you in getting started:

• Lazy Loading for UI Components : Implement pagination in your UI to load and display data in small subsets, updating the view as users scroll or navigate through the table.
• Use virtual scrolling to render only the visible rows plus a buffer, dynamically loading and unloading data as the user scrolls.

Here’s a sample code that can help in understanding the implementation of Lazy loading.

function updateTableDisplay(app, startIndex, endIndex) 
    % Load and display a subset of the data from startIndex to endIndex 
    if isfile('completeTable.mat') 
        % Assuming completeTable.mat has a variable 'completeTable' in it 
        m = matfile('completeTable.mat'); 
        subsetOfData = m.completeTable(startIndex:endIndex, :); 
        app.UITable.Data = subsetOfData(:,2:width(subsetOfData)); 
   end 
end