Some troubles with idea

Dash Python
1

Hi everyone, I’m building my first app with Dash,Dash-bootstrap and Python 3.7 and I’m stuck with one problem.
I have a csv file,which I transfer to Pandas dataframe. Then I build a table with .DataTable(), and everything is allright, but the thing is that I need that every cell of first column in the table was interactive: for example I click on cell and Modal window going out. The sample of the table :

Customers Value1 Value2

CustomerA 10 11

CustomerB 22 5

CustomerC 143 7

So CustomerA,CustomerB and CustomerC from the example above should be clickable (modal window should pop up?)
I had an idea to create callback data when there is a click on certain cell but I dont have any idea how to make it.
Another idea is to make a dropdown list in every cell of the 1st column, so user will able to choose from similar to every cell choices: choice1, choice2,choice3, this will create a callback and we can popup modal window or even recreate initial table (bad idea, I guess).
Right now i solved this in another way: I created three pages (Index, page 2,page3), and on every page there is information of different level: on Index there is initial table, on page2 is detailed info for all customers,page 3 is for graphs.All in all looks good but still I want to make it in 1 page.
I made this callback function, to return the active_cell,where 'table_first is the id of the table, and ‘text_output’ is H1 element to show clicked cell’s active_cell data:

@app.callback(  Output('text-output', 'children'),
            [Input('table_first', 'active_cell'),Input('table_first','data')])
def get_active_cell(active_cell,data):
if not active_cell:
    return moderdf.iloc[0, 0]
if active_cell:
    return str(data[active_cell[0]]['Customer'])

Will appreciate any help

2

Solved it by myself. Built callback handler and take an active_cell as input,
and as output modal window, and property of its Body ‘children’ (where I sent table) and ‘is_on’ (to open modal window when cell was clicked by user)

1 Like
3

Can you explain me how you did it? I can’t understand…
I have a similar problem. I have a table with all the sensors and the first column (nome) I would like it to be a link for a page of that sensor:

image
image.jpg1354×631 487 KB

any idea how? :face_with_monocle:

4

Sure, I will try. So, perhaps you have callback handler decorator for your table.
The thing is, that Table have this property, called active_cell, and you can use it as Input in callback function.
In my code it looks like that:

@app.callback([Output(component_id='text_output', component_property='children'),
               Output(component_id='customer-modal', component_property='is_open'),
               Output(component_id='modal-body', component_property='children'),
               Output(component_id='modal-footer', component_property='children')],
              [Input(component_id='table_first', component_property='active_cell'),
               Input(component_id='table_first', component_property='data')])

Then, you define function inside callback handler, and write something like:

if active_call:
your logic
else:
default behaviour,when nothing was chosen by user

as you can see I have a lot of outputs in my handler. You can also get the thing that is inside chosen cell:
data[active_cell[‘row’]].get(‘Customer’)
where data is one of the inputs (property of the table) and ‘Customer’ is the name of my column, u can use ‘nome’.
The thing is, that with Inputs you receive the Info from elements,and thats why we need id’s, and with Outputs you return something to elements (there we need id’s of the elements,who accept something)

1 Like
5

Thanks… what I really don’t know is how to trigger an action:

if active_cell:
   url='graphs/'+ str(data[active_cell[‘row’]].get(‘Customer’))+'/'
else
  url=''

how can I make it a link?

6

It triggers as soon as you click on cell in Datatable

1 Like
7

yes, with the activation of the cell I can create the URL… any way of sending the user to a defined URL?:woman_shrugging:

8

Oh, I got it, but what are the pages for the sensors? Are they generated already or how does they look?The reason why I’m asking is that I have a multipage app, and we can use the idea of multipage app as base for your solution.
So that’s how I realized the multipaginity( what a word!):

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])

index_page = html.Div([
    navbar,
    body, modal
])

where navbar is my navbar, body is another table and modal is modal window.
Then:
page_1_layout = html.Div([navbar, html.H1(‘Some stuff’)])
page_2_layout = html.Div([navbar, html.H1(‘Something something’)])

and then:

@app.callback(Output('page-content', 'children'), [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/page-1':
        return page_1_layout
    elif pathname == '/page-2':
        return page_2_layout
    else:
        return index_page

Because of the fact I have only 3 pages (one index and two additional) I was too lazy to make generator,
but if you have a lot of pages you can do it. Just send required data as I did

9

:slight_smile: the idea is that when I click on a specific sensor I would go to a page with the data related to that sensor (static info and all that data sent from it).
So no, the pages are not static…they change based on the sensor and are not (and should not) be previously created. I think you just gave me a great idea with the multipages app. Let’s see if it works!! :slight_smile: thanks!

10

You are welcome, also it’s possible to create modal window when you click on cell, I can explain how I did it. If there is not so many data that you want to show-it could be one of the solutions. And pages could be dynamic- you just send the output from callback to required property of the page