Hi all,

I am geting Array buffer allocation failed error when I try to generate a 3D plot with huge number of data points in it. Here is an example of such plot when my n=800

Here is my sample code. When I increase to n=2500, I am getting the following error.

import dash
import dash_core_components as dcc
import dash_html_components as html
import numpy as np
import plotly.graph_objs as go


def get_figure(n):
    x = np.linspace(-100, 100, n)
    y = np.linspace(-100, 100, n)
    xx, yy = np.meshgrid(x, y)
    r = np.sqrt(xx**2 + yy**2)
    zz = np.sin(r) * np.cos(xx)
    return go.Figure(
        data=go.Surface(z=zz),
        layout=dict(width=600, height=600))


app = dash.Dash(__name__, suppress_callback_exceptions=True)

server = app.server
app.layout = html.Div(
    dcc.Graph(
        figure=get_figure(n=2500)
    )
)


if __name__ == '__main__':
    app.run_server(debug=True)

Array buffer allocation failed

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
RangeError: Array buffer allocation failed

    at new ArrayBuffer (<anonymous>)

    at p (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_13_0m1604001894.js:2:1883273)

    at Object.b (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_13_0m1604001894.js:2:1883615)

    at A.S.update (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_13_0m1604001894.js:2:753154)

    at f.p.update (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_13_0m1604001894.js:2:3367781)

    at Object.e.exports [as plot] (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_13_0m1604001894.js:2:3368322)

    at _.w.plot (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_13_0m1604001894.js:2:2608764)

    at Object.r.plot (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_13_0m1604001894.js:2:2586897)

    at r.drawData (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_13_0m1604001894.js:2:2387959)

    at Object.c.syncOrAsync (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_13_0m1604001894.js:2:2278084)

Here is my system config

i7-9700k CPU, 48GB DDR4
OS: Win10 Pro
Browser: Chrome v86.0.4240.193

NodeJS v12.16.2
Python v3.8.3

numpy                1.18.0
plotly               4.12.0
dash                 1.17.0
dash-core-components 1.13.0
dash-html-components 1.1.1
dash-renderer        1.8.3
dash-table           4.11.0

Does anyone how to fix this issue?
I also submit a ticket to Github.

Thanks

1 post - 1 participant

Read full topic

Greetings, I’m struggling to implement a loading icon next to my dropdown input. I can’t seem to be able to make that addition to my dashboard syntax below. I’m trying not to implement another callback in doing so.

body = html.Div(
    [dbc.Jumbotron(
          [
            dbc.Row(dbc.Col(children=[dbc.Spinner(dcc.Dropdown(id="dynamic-dropdown", options=OPTIONS, multi=True, placeholder="Enter your SP500 Symbols"))], lg=6, md=7, sm=12, xs=12),justify='center')
            ], style = {'background-color': '#68d984','margin-bottom':'0px','border-radius':'50px','width':'90%', 'margin-left':'auto','margin-right':'auto'}, fluid=True )
, dbc.Row(dbc.Col([  
                          ],id='graph',lg=9, md=11, sm=12 , xs=12),style={'width':'100%'},justify="center")


       ])



app.layout = html.Div([body])


@app.callback(
    dash.dependencies.Output("dynamic-dropdown", "options"),
    [dash.dependencies.Input("dynamic-dropdown", "search_value")],
    [dash.dependencies.State("dynamic-dropdown", "value")],
)
def update_multi_options(search_value, value):
    if not search_value:
        raise PreventUpdate
    # Make sure that the set values are in the option list, else they will disappear
    # from the shown select list, but still part of the `value`.
    return [
        o for o in OPTIONS if search_value in o["label"] or o["value"] in (value or [])
    ]



@app.callback(
    Output('graph', 'children'),
    [Input('dynamic-dropdown', 'value')],
    [State('graph','children')])

def tickers(symbols, children):
    conn.rollback()
    if symbols == None:
        conn.rollback()
        return []
    elif symbols == []:
        conn.rollback()
        return []
    else:
        stock_info = {}
        d = {} #dates
        p = {} #prices

        sym_ids = tuple([id for id in symbols])

        stock_info = {}
        stock_info = get_dict_resultset("SELECT symbol, date, adj_close FROM api.security_price WHERE security_price.symbol IN %s AND date > (SELECT MAX(date) FROM api.security_price) - interval '1 years' ORDER by date;", [sym_ids])

        stock_data_by_symbol = defaultdict(list)
        for entry in stock_info:
            symbol = entry['symbol']
            stock_data_by_symbol[symbol].append(entry)

        trace = []
        for stock in symbols:
            d[stock] = [rec['date'] for rec in stock_data_by_symbol[stock]] 
            p[stock] = [rec['adj_close'] for rec in stock_data_by_symbol[stock]]
            trace.append(go.Scatter(x=d[stock],
                                 y=p[stock],
                                 mode='lines',
                                 text = d[stock],
                                 opacity=0.7,
                                 name=stock,
                                 textposition='bottom center'))


        traces = [trace]
        data = [val for sublist in traces for val in sublist]
        figure = {'data': data,
                  'layout': go.Layout(
                      colorway=["#9b5de5", '#00f5d4', '#FFD23F', '#f15bb5', '#f71735', '#d08c60'],
                      paper_bgcolor='rgba(0, 0, 0, 0)',
                      plot_bgcolor='rgba(0, 0, 0, 0)',
                      margin={
                        'l': 40, # left margin, in px
                        'r': 10, # right margin, in px
                        't': 16, # top margin, in px
                        'b': 30,}, # bottom margin, in px
                      hovermode='x',
                      legend={"x" : 0, "y" : 1, 'font': {'size': 10}},
                      xaxis={'rangeselector': {'buttons': list([
                                                            {'count': 1, 'label': '1M', 
                                                             'step': 'month', 
                                                             'stepmode': 'backward'},
                                                            {'count': 3, 'label': '3M', 
                                                             'step': 'month', 
                                                             'stepmode': 'backward'},
                                                            {'count': 6, 'label': '6M', 
                                                             'step': 'month',
                                                             'stepmode': 'backward'},
                                                            {'count': 1, 'label': '1Y', 
                                                             'step': 'year',
                                                             'stepmode': 'backward'},
                                                            {'count': 3, 'label': '3Y', 
                                                             'step': 'year',
                                                             'stepmode': 'backward'},
                                                            {'count': 1, 'label': 'YTD', 
                                                             'step': 'year', 
                                                             'stepmode': 'todate'},
                                                            {'step': 'all','label':'MAX'},

                                                            ])},
                         'rangeslider': {'visible': True}, 'type': 'date'},

                      
                      
                  ),


                  }

        
        children = [ 
               dbc.Row(dbc.Col(html.P("As of {}, {}".format(d[stock][-1].strftime('%A'),d[stock][-1].strftime('%d %m-%Y')),style={'font-size':'12px','font_family':'Helvetica Neue', 'margin-top':'10px','color':'#ABABAB'}),style={'position':'relative','float':'right'}, width={"offset": 3}), justify='end'),
               html.Div(style={"width":"100%", "height":'30px'}),
               html.H4('Historical Price Chart:', style={'color':'#474747','margin-left':'30px'}),
               html.P('Interactive graph for end-of-day prices', style={'color':'#A2A2A2','margin-left':'30px'}), 
               dcc.Graph(id='output-graph', figure=figure ,config={'displayModeBar': False}, animate=True,style = {'width': '100%',  'touch-action':'none'}), 
               html.P('* Drag sliders to create your own custom date range', style={'font-size':'12px','color':'#A2A2A2','margin-left':'40px'}),
               html.P('** Double-tap or double-click the main graph to reset axis', style={'font-size':'12px','color':'#A2A2A2','margin-left':'40px'}),
               html.Div(style={"width":"100%", "height":'10px'}),
        ]


        return dcc.Loading(id='graph',children=children,type='graph')

I have only been able to replace my dropdown with a loading icon, but that can get annoying for users, also I wasn’t able to replicate the loading for more than one callback firing.

How can I implement a loading icon or spinner next to a dropdown, appearing only during callback load times?

1 post - 1 participant

Read full topic

I have a replica of the Update Graphs on Hover Example working. I would like to do the same graph updates hovering over table cells. Is this possible?

1 post - 1 participant

Read full topic

The dbc.CardBody font seems hard set to Times New Roman. Defining

.card .card-body .card-text {
  font-family: Arial, Helvetica, sans-serif; !important;
}

or using an additional className setting as suggested somewhere does not change it. Defining

style={'font-family': 'Arial, Helvetica, sans-serif'}

does change it but I don’t want to have to do that with every Card definition.

2 posts - 2 participants

Read full topic

I copied the example and change function parse_contents() like this:

    def parse_contents(contents, filename, date):
        content_type, content_string, = contents.split(',')
        print(f'name:{type(filename)}\n{filename}\n')
        print(f'type:{type(content_type)}\n{content_type}\n')
        print(f'string:{type(content_string)}\n{content_string}\n')
        decoded = base64.b64decode(content_string)
        print(f'decoded:{decoded}\n')
        #seq1 = SeqIO.parse(decoded, "fasta")
        #print(f'seq parsed {seq1}')
        seq_str = str(decoded)
        print(f'seq_str: {seq_str}')
        #split into lines for output as P's
        seq_arr = seq_str.split('\n')
        #replace \n
        seq_arr = [x.replace("\n", " ") for x in seq_arr]
        print('seq_arr')
        for line in seq_arr:
            print(line)
        '''
        try:
            
            seq = SeqIO.read(decoded, "fasta")
            print(f'\n\nseq:{seq}')
        except Exception as e:
            print(e)
            return html.Div([
                'Error processing file upload'
            ])
        '''
        return html.Div([
            html.H5(filename),
            html.H6(datetime.datetime.fromtimestamp(date)),

            html.Div([
                html.P(line)
                for line in seq_arr
            ]),
            html.Hr(),

            #debugging content
            html.Div('Raw Content'),
            html.Pre(contents[0:100] + '...', style={
                'whiteSpace': 'pre-wrap',
                'wordBreak': 'break-all'
            })

        ])

But it won’t split on newline nor replace them in the above snippet.
fasta is a very common text format for sequences.
This is the output on stdout

string:<class 'str'>
PldQXzAxMTE0MzMxNC4xIEwtbGFjdGF0ZSBkZWh5ZHJvZ2VuYXNlIFtHbG9lb2JhY3RlciB2aW9sYWNldXNdCk1RRFJMRlZTTUVIUFJBTFBFVERMSUtHQUlWR0FHQVZHTUFJQVlTTUxJUU5URkRFTFZMVkRJRFJSS1ZFR0VWTURMVkhHSVAKRlZFUFNWVlJBR1RMQURDUkdWRFZWVklUQUdBUlFSRUdFVFJMU0xWUVJOVkVJRlJHTElHRUlNRUhDUE5BSUxMVlZTTlBWRApWTVRZVkFNS0xBR0xQUFNSVklHU0dUVkxEVEFSRlJZTExBRVJMUlZEUFJTTEhBWUlJR0VIR0RTRVZQVldTUkFOVkFHQUZMClNFSUVQQVZHVFBERFBBS01GRVZGRUhWS05BQVlFSUlFUktHQVRTV0FJR0xBVFRRSVZSQUlUUk5RTlJWTFBWU1ZMTVNHTEgKR0lFRVZDTEFZUEFWTE5SUUdJRFJMVktGU0xTUEdFRUVRTFFSU0FSVk1SUVRMREdJUUYKCg==

decoded:b'>WP_011143314.1 L-lactate dehydrogenase [Gloeobacter violaceus]\nMQDRLFVSMEHPRALPETDLIKGAIVGAGAVGMAIAYSMLIQNTFDELVLVDIDRRKVEGEVMDLVHGIP\nFVEPSVVRAGTLADCRGVDVVVITAGARQREGETRLSLVQRNVEIFRGLIGEIMEHCPNAILLVVSNPVD\nVMTYVAMKLAGLPPSRVIGSGTVLDTARFRYLLAERLRVDPRSLHAYIIGEHGDSEVPVWSRANVAGAFL\nSEIEPAVGTPDDPAKMFEVFEHVKNAAYEIIERKGATSWAIGLATTQIVRAITRNQNRVLPVSVLMSGLH\nGIEEVCLAYPAVLNRQGIDRLVKFSLSPGEEEQLQRSARVMRQTLDGIQF\n\n'

seq_str: b'>WP_011143314.1 L-lactate dehydrogenase [Gloeobacter violaceus]\nMQDRLFVSMEHPRALPETDLIKGAIVGAGAVGMAIAYSMLIQNTFDELVLVDIDRRKVEGEVMDLVHGIP\nFVEPSVVRAGTLADCRGVDVVVITAGARQREGETRLSLVQRNVEIFRGLIGEIMEHCPNAILLVVSNPVD\nVMTYVAMKLAGLPPSRVIGSGTVLDTARFRYLLAERLRVDPRSLHAYIIGEHGDSEVPVWSRANVAGAFL\nSEIEPAVGTPDDPAKMFEVFEHVKNAAYEIIERKGATSWAIGLATTQIVRAITRNQNRVLPVSVLMSGLH\nGIEEVCLAYPAVLNRQGIDRLVKFSLSPGEEEQLQRSARVMRQTLDGIQF\n\n'
seq_arr
b'>WP_011143314.1 L-lactate dehydrogenase [Gloeobacter violaceus]\nMQDRLFVSMEHPRALPETDLIKGAIVGAGAVGMAIAYSMLIQNTFDELVLVDIDRRKVEGEVMDLVHGIP\nFVEPSVVRAGTLADCRGVDVVVITAGARQREGETRLSLVQRNVEIFRGLIGEIMEHCPNAILLVVSNPVD\nVMTYVAMKLAGLPPSRVIGSGTVLDTARFRYLLAERLRVDPRSLHAYIIGEHGDSEVPVWSRANVAGAFL\nSEIEPAVGTPDDPAKMFEVFEHVKNAAYEIIERKGATSWAIGLATTQIVRAITRNQNRVLPVSVLMSGLH\nGIEEVCLAYPAVLNRQGIDRLVKFSLSPGEEEQLQRSARVMRQTLDGIQF\n\n'

Newlines are there in the output div as well. How can I go from base64 to a Python string and then run strip and replace from a fasta file upload to dcc.Upload()?

Here is a raw sample that can be copy and pasted into a file called s.fasta to try:

>WP_011143314.1 L-lactate dehydrogenase [Gloeobacter violaceus]
MQDRLFVSMEHPRALPETDLIKGAIVGAGAVGMAIAYSMLIQNTFDELVLVDIDRRKVEGEVMDLVHGIP
FVEPSVVRAGTLADCRGVDVVVITAGARQREGETRLSLVQRNVEIFRGLIGEIMEHCPNAILLVVSNPVD
VMTYVAMKLAGLPPSRVIGSGTVLDTARFRYLLAERLRVDPRSLHAYIIGEHGDSEVPVWSRANVAGAFL
SEIEPAVGTPDDPAKMFEVFEHVKNAAYEIIERKGATSWAIGLATTQIVRAITRNQNRVLPVSVLMSGLH
GIEEVCLAYPAVLNRQGIDRLVKFSLSPGEEEQLQRSARVMRQTLDGIQF

3 posts - 2 participants

Read full topic

I use the following construction for my plots:

import dash_core_components as dcc
import dash_bootstrap_components as dbc

dbc.Row([
dbc.Col(dcc.Graph()),
dbc.Col(dcc.Graph())
])

The problem is that my hovers does not fit into the layout anymore,
Does anybody know how to fit them?

1 post - 1 participant

Read full topic

Hello,

Currently I’m reproducing the Gapminder bubble diagram with Plotly Express.
I cannot figure out hot to avoid that the data of the previous frame are cleaned up with the next frame. Indeed this is possible in Gapminder tool.

I really appreciate your support!

1 post - 1 participant

Read full topic

Hi everybody. I have to update an image in a web page. I am using dcc.Interval to set the time interval and update the image from the url. The frequency is 30 seconds, however the image keeps the same. Why the image is not update? Thanks in advance. I share the code.

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([
dcc.Interval(
id=‘sab-images-interval-component’,
interval=30*1000, # 30 seconds
n_intervals=0
),

dbc.Col([
    dbc.Row([
        dbc.Col(html.Div(id='disp_sab_div'), width=2),
    ], no_gutters=True, align="center"),
]),

])

@app.callback(
[
Output(component_id=‘disp_sab_div’, component_property=‘children’)
],
[
Input(component_id=‘sab-images-interval-component’, component_property=‘n_intervals’)
]
)
def _updateDispSab(n):
_div =
image_filename = ‘http://179.xx.yy.zz/SBYA/Sab_cam.jpg’
title =‘Sabancay from Chivay’

print(str(dt.datetime.now()))

_div = html.Div([
    html.Img(
        src=image_filename,
        style={
            'width': '100%',
        }
    ),
])

return [_div]

if name == ‘main’:

2 posts - 1 participant

Read full topic

Hello,

I am searching for a bar chart which is capable of creating a plot like this:

bar1366×640 3.86 KB

I am reading from an .csv file and my data looks like this:

1. Task   Start   End	Duration ....
2.  2       0      2		2
3.  4       2      4		2
4.  6       4      7		3
5.  4       7      8		1
6.  6       8	   10		2
...

So every task has a his start and stop time. Also his wide is given (duration). When a Task ends, the next task will start. A task can run multiple times.
I couldn’t find anything similar to this, so if it is possible i would appreciate a small example.

Thanks

5 posts - 3 participants

Read full topic

trying to limit the amount of inputs a user can enter in my multi-dropdown. In my code below, I have it set to 4 values MAX!

This code doesn’t bring back errors, but it’s not functioning like I want it to. I want the callback to stop users from entering more inputs once the number exceeds 4.

@app.callback(
    [dash.dependencies.Output("input-warning", "children"),
    dash.dependencies.Output("dynamic-dropdown", "options")],
    [dash.dependencies.Input("dynamic-dropdown", "search_value")],
    [dash.dependencies.State("dynamic-dropdown", "value")],
)
def update_multi_options(search_value, value):
    conn.rollback()
    if search_value is None:
        raise PreventUpdate
    elif len(value) >= 4:
        children = html.P("limit reached",id='input-warning')
        return [children, [o for o in OPTIONS if o["value"] in value]]  
    else:
    # Make sure that the set values are in the option list, else they will disappear
    # from the shown select list, but still part of the `value`.
        return [
            o for o in OPTIONS if search_value.upper() in o["label"].upper() or o["value"] in (value or [])
        ]

I made an elif conditional to try and limit the inputs, I couldn’t get it to work however.

Would greatly appreciate some guidance on why my code doesn’t achieve what I want it to.

1 post - 1 participant

Read full topic

Hi everyone

I’m trying to find a way to deploy a Dash app with a large amount of assets (±1.3GB) for free. I’ve deployed with Heroku before, but it looks like the maximum allowed slug size is 500MB.

I’ve seen that one can store assets on S3 and “use” them from a Heroku app: https://devcenter.heroku.com/articles/s3. I’m not sure what this implies for how the app will load, and the user experience will be, though.

Another option could be to generate a static site from the Dash app and host this via e.g. GitHub pages, but I have no idea how/where I would need to start with this option.

Does anyone have experience deploying such an app? Can you comment on the suggestions that I’ve made here, or perhaps make better suggestions?

Thanks!

1 post - 1 participant

Read full topic

I created horizontal bar chart in Plotly-dash, but bar text size doesn’t fit to the figure size, so part of the text is cut (please see red-framed area on the screenshot attached).

I tried the following:

1. Changing left and right margin in figure layout. The whole figure is moving, but the text remains cut.
2. Setting ‘offset’ in figure data. I’ve got vertical offset of bars, but not horizontal offset of the figure area.

Then I tried to add option cliponaxis = False. Text become visible, but overlaps axis labels, still not expected behaviour:

I will highly appreciate if somebody could advice how to fix it.

3 posts - 2 participants

Read full topic

I’d like to reduce the following legend:

to one, that would show colors
{YF: blue, PF: red}
and symbols

{cirlce: GUT, 
diamond: LIPOPROTEIN, 
square: FAT BODY, 
cross: WING DISC}

2 posts - 1 participant

Read full topic

I would like to be able to reorder the children of a div.

I have seen a previous example (Drag and drop cards) that allow to drag&drop elements thanks to the Dragula js library.

However, while on the UI, the order of elements are changed, on the children property of the div, the children are not reordered.

I have adapted the code to adapt the children order within the javascript.

What I am still missing is the ability from the JS code to trigger the event “the children of this element has been changed, trigger the callbacks that depends on it”.

To make it clearer, here is an example:
app.py

import dash
import dash_html_components as html
from dash.dependencies import Input, Output, ClientsideFunction, State

app = dash.Dash(
    __name__,
    external_scripts=["https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js"],
)

app.layout = html.Div(
    id="main",
    children=[
        html.Button(id="btn", children="Refresh display for order of children"),
        html.Label(id="order"),
        html.Div(
            id="drag_container",
            className="container",
            children=[html.Button(id=f"child-{i}", children=f"child-{i}") for i in range(5)],
        ),
    ],
)

app.clientside_callback(
    ClientsideFunction(namespace="clientside", function_name="make_draggable"),
    Output("drag_container", "data-drag"),
    [Input("drag_container", "id")],
    [State("drag_container", "children")],
)


@app.callback(
    Output("order", "children"),
    [
        Input(component_id="btn", component_property="n_clicks"),
        Input(component_id="drag_container", component_property="children"),
    ],
)
def watch_children(nclicks, children):
    """Display on screen the order of children"""
    return ", ".join([comp["props"]["id"] for comp in children])


if __name__ == "__main__":
    app.run_server(debug=True)

asset/script.js

if (!window.dash_clientside) {
    window.dash_clientside = {};
}
window.dash_clientside.clientside = {
    make_draggable: function (id, children) {
        setTimeout(function () {
            var drake = dragula({});
            var el = document.getElementById(id)
            drake.containers.push(el);
            drake.on("drop", function (_el, target, source, sibling) {
                // a component has been dragged & dropped
                // get the order of the ids from the DOM
                var order_ids = Array.from(target.children).map(function (child) {
                    return child.id;
                });
                // in place sorting of the children to match the new order
                children.sort(function (child1, child2) {
                    return order_ids.indexOf(child1.props.id) - order_ids.indexOf(child2.props.id)
                });
                // How can I trigger an update on the children property
                // ???
            })
        }, 1)
        return window.dash_clientside.no_update
    }
}

assets/dargula.css

.gu-mirror {
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
  }
  .gu-hide {
    display: none !important;
  }
  .gu-unselectable {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
  }
  .gu-transit {
    opacity: 0.2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
  }

1 post - 1 participant

Read full topic

I have an ASCII representation of a decision tree output to the console:

image937×410 6.92 KB

image1861×472 11 KB

In Notepad++ with all characters being displayed this looks like:

image1402×479 11.9 KB

Is there a way to get Dash to properly display this ASCII decision tree? I’ve tried output to HTML.H# as well straight to a Div…no luck. So far, the tree is just being completely garbled.

1 post - 1 participant

Read full topic

Hi friends,

I’m trying to evaluate whether I should implement my re-usable functionalty/dashboard as a custom component or a layout.

I’m looking for a more or less exact definition of where I should draw the boundary between a (React) Component and a Python (Layout).

Can you give some advice or rule of thumb of when to go for one or the other?

Best & Thanks!

1 post - 1 participant

Read full topic

Hi everyone. I hope you are safe.
I am making a Datatable that includes a column with dropdowns. In the app, there is an option to change the Bootstrap theme (yes it’s with Bootstrap), and I made a callback that changes the datatable cells’ background colour accordingly. In general the colour of the text is updated with the Bootstrap them. However, the text of the dropdowns stays black and doesn’t follow the colour of the rest of the datatable contents.

In the explanation page for dropdowns in datatables :

you will notice that while the content of the example datatables are cyan in general, the dropdowns are black.

So my question is : what’s the property that I should output in my callback to modify the colours of the dropdown ?
Many thanks in advance!
Jerome

1 post - 1 participant

Read full topic

When a user logs in, I load some dataframes for processing into a simple cache.

I don’t want these to persist forever of course. But I also ONLY want them to stop persisting when the user’s session has expired. Not using the timeout arg in cache.set(key, data_to_cache, timeout=100)

Without using a central trigger to wipe out my cache, it seems I have to set fixed timeouts (100s above) to clear the cache.

Is there a way to use Flask-Sessions such that I set session expiry to 5 minutes of inactivity? Then after 5 mins, the entire cache is cleared.

1 post - 1 participant

Read full topic

Whenever I type into an input field or click on certain components in my layout, the scrollbar jumps in and out, making the size of the layout change rapidly and hence screen flickering.

I’m using dash core, html and bootstrap components in my layout.

What could be causing this?

3 posts - 2 participants

Read full topic

I have some functionality that will differ between mobile/desktop. More than just styling but actually the input into a callback should be different depending on the screen width. Anyone know of some clever ways to get this info into the back-end?

1 post - 1 participant

Read full topic