INP optimization

[EverettBerry]

The site feels slow and records low core web vitals scores because of how we render data into the datatables object.

What happens today is that all the data is rendered into a

element server side and then most of the columns of the table are hidden in Javascript. This act of hiding most of the data greatly impacts the interaction time for the user and responsiveness of the page. It also results in 17K elements being rendered onto the page.

This in turn impacts what jobs are done by the main thread, where we spend a lot of time on layout, script evaluation, and rendering.

Instead, we can invert the work done here, and only render the default columns onto the page in HTML. We can store the rest of the column data directly in the g_data_tables object and only add a column to the page if the user selects it from the columns dropdown or has it saved in their user preferences.

We may need to use null values for the hidden columns initially. However, the rows().data() method seemingly provides a clean way to update data in the table.

At the end of the update operation, g_data_table.columns(columnIndex).data(data); should return the updated column values and it should be visible on the table. We ought to be able to use our existing code for making columns visible and invisible using g_data_table.columns([2, 3]).visible(true);.

We can modify the headers for the columns using jQuery and the nodes API:

table
    .column( -1 )
    .nodes()
    .to$()      // Convert to a jQuery object
    .addClass( 'ready' );
);

Further example of how we might implement show/hide columns once the data is stored.

$('#show-column-btn').click(function () {
  var selectedColumn = $('#column-dropdown select').val();
  var columnIndex = g_data_table.column('.' + selectedColumn).index();

  // Set the text and class for the header
  var headerCell = $(g_data_table.column(columnIndex).header());
  headerCell.text('New Header Text');
  headerCell.addClass('new-class');

  // Show the column
  g_data_table.column(columnIndex).visible(true).draw();
});

A look at the data structure of the columns object.