Datatable: virtualization

I have a datatable with 6 columns. Four of them have been downloaded from a website called quandl. They’re date and three interest rate columns associated with the date. Then I calculate two more (spreads or deltas for the interest rates). I have about three years worth of data (750 or so rows). The interest rate columns that I download are editable. When one changes (user input), one of the calculated columns changes also.

I found that the system was really slow. I made virtualization = True and everything sped up really nicely. Instead of this 2 - 3 second delay the change in the calculated fields was pretty instantaneous.

My question is this…is there any drawback to making virtualization = True? If not, why isn’t virtualization set to True by default? Who wouldn’t want their code to run faster (at least in the eyes of your users/clients)?

One of the reasons that the code may have been running slow is the way that I have the callback set up. It’s as follows:
@app.callback(
Output(‘datatable-int-rates’, ‘data’),
[Input(‘datatable-int-rates’, ‘data_timestamp’)],
[State(‘datatable-int-rates’, ‘data’)])
def update_spreads(timestamp, rows):
# Recalculate the value in Conf minus Freddie and Jumbo minus Freddie
for row in rows:
row[‘Conf minus Freddie’] = round(float(row[‘WFC Conf Int Rate’]) - float(row[‘Freddie Mac’]),3)
row[‘Jumbo minus Freddie’] = round(float(row[‘WFC Jumbo Int Rate’]) - float(row[‘Freddie Mac’]),3)
return rows

‘for row in rows’ is just not efficient code. I can’t figure out how to just pass the specific row that has had a value changed. It would be better than doing a loop of 750 rows.

Lastly, would it be possible to make rangeselector more like datepicker in that changing it can change more than one graph?

Thanks in advance.

See https://dash.plot.ly/datatable/virtualization for a discussion on virtualization. The main limitation is that we don’t know the width of all of the columns in advance, so we can’t properly compute the maximum width. So, in some cases, the column widths will change as you scroll unless you lock down the column widths.

Thanks for getting back to me so quickly. AS you noted, the virtualization example uses fixed space for the width of the columns. style_data_conditional=[
{‘if’: {‘column_id’: ‘index’},
‘width’: ‘50px’},
{‘if’: {‘column_id’: ‘Year’},
‘width’: ‘50px’},
{‘if’: {‘column_id’: ‘Country’},
‘width’: ‘100px’},
{‘if’: {‘column_id’: ‘Continent’},
‘width’: ‘70px’},
{‘if’: {‘column_id’: ‘Emission’},
‘width’: ‘75px’},
],

Because I run my application on different sized monitors (my laptop when I’m on the road and a 23" monitor when I’m home) I used percentages for each column:

Column spacing for yield curve data

col_dict = {‘Date’: ‘12%’, ‘1 MO’: ‘8%’, ‘3 MO’: ‘8%’, ‘6 MO’: ‘8%’,
‘1 YR’: ‘8%’, ‘2 YR’: ‘8%’, ‘3 YR’: ‘8%’, ‘5 YR’: ‘8%’,
‘7 YR’: ‘8%’, ‘10 YR’: ‘8%’, ‘20 YR’: ‘8%’, ‘30 YR’: ‘8%’}

I have noticed that the widths do change when I scroll down quickly. Any thoughts on how I can fix this?

Any thoughts on my other questions? How to pass the specific row of the column that I modified to the callback or change the rangeselector so that it can affect more than one graph?

Thanks in advance.