Runtime

Why is my application slow?

Forms with many components in them could become sluggish, which can make navigating them a frustrating task. For example, switching tabs could take one or two seconds. Additionally, after handling an event with the back-end, the form may take a moment before rendering the updates and giving back control to the user. Here are some tips on what might be the cause of these problems and potential approaches for alleviating them:

Many DataGrids/EditGrids

The DataGrid and EditGrid can be very useful for making editable tables in your form. However, each of their columns becomes a component that needs to be initialized and kept track of while the application is running. This means that if you have many DataGrids or EditGrids, the number of components grows strongly. If these components are filled with data from the back-end, the time it takes to render the updates (if any) after the calculations are done might not be negligible any more.

Oftentimes, these tables do not need to be editable by the user. In that case, it is advised to use an HtmlTable instead. This functionality does not create a component for every single column and there will not be as much validation performed when the data changes. This can drastically improve the performance of your application.

If the tables need to be editable, you could try to reduce the number of columns per table, or reduce the number of tables.

Custom logic/conditionals

If you are using Logic or Conditional to change certain aspects of a component based on buttons being clicked or components attaining specific values, the form may become sluggish if there are too many components listening for such events. Other than reducing the number of components listening for the events, there is no proper solution for this problem.

Large DataGrids (many rows)

Having a DataGrid with many rows will impact the responsiveness of your application detrimentally. Therefore, it is advised to use a DataTables component instead. The pagination functionality reduces the number of elements visible on the screen and the application's performance can be maintained.

Why does the data I enter in the back-end not show up in the form?

In Python, the payload is a dict, which is a handle object. This means that the output does not need to be assigned in order to work:

utils.setSubmissionData(payload, key, data, nested_form, parent)

In MATLAB, if you have called the setSubmissionData utility function to set the value of a component, but it seems to have no effect, this may be because the output of setSubmissionData was not assigned to the payload. The correct syntax is:

payload = utils.setSubmissionData(payload, key, ...
    data, "NestedForm", nestedForm, "Parent", parent);

If this does not fix the problem, it may be related to a component that expects the data in a specific format or shape, such as a DataGrid, EditGrid, Plotly or DataTables component. If the data you enter for such a component does not have the right shape or structure, it might not show up in the form as well. This holds for both updating the content, as well as setting the default value. For DataGrid/EditGrid/DataTables components, make sure that if you enter a list of dicts (Python) or a struct array or table (MATLAB), the fields/keys match the keys of the child components.

Why is the back-end never done processing one of my events?

If the back-end is processing an event, you will see a spinner in front of the application and the application cannot be used. If the spinner remains indefinitely, it means that the front-end has not yet received a response from the back-end that is understood. One of these could be the case:

  • The payload of the gui_event, gui_download or gui_upload function is invalid. This can be the case if it does not have the right structure, or if the submission data could not be understood. Reconsider your latest changes to find what is causing the problem.
  • The calculations may simply still be running. For example, this can be the case if there is an infinite while-loop, if a lot of data is being obtained from a database or if the calculations simply take a long time.
  • Quitting a debug session (so without continuing the run) results in an indefinite spinner because the front-end never receives a proper response.

Why does my component move to a different parent after an event?

As described in Form structure, it is advised to use globally unique component keys. If components move to different parent components after an event occurs, it may be because both parent components were given the same key during initialization. This problem can be easily resolved by changing the keys in gui_init such that they are globally unique.

Why do I get a TypeError after an event in Python?

In Python putting data in the submission data that is not JSON serializable will trigger the following exception: TypeError: Object of type <type> is not JSON serializable

Solution: review the data that you are putting in the submission data and ensure that everything is serializable with the json module. This may involve converting data to standard Python data types. E.g. the numpy.int64 data type is not JSON serializable and should be converted to a Python int data type.