Save Datatable Link "Markdown"

Dash Python
1

Hello everyone,

I would like to describe my problem with words. I have a dash datatable in which Im have links embedded as “markdowns”.
The links open fine if I click on them. My problem is that when I click on the links the callback function is executed but the dcc.Store Output components will not be updated because I land on another site when I click on the links. Does anyone know a workaround to this problem?

Thank you,
Clemens

2

HI @cosco with the information you provide it will be almost impossible to help you. Why do you expect the dcc.Store() to be updated? What should be the content? What are the Input() for your callback?

3

Hello AIMPED,
I use the datatable as a lookup for variable Stocktags I receive via an API. I collect the “active-cell” property of the datatable and compare it with the dataframe I received a callback earlier for the same index. I then extract the Stocktag the user has selected via mouseclick and pass it to a function that makes another apicall to receive more data. The Api Call is working as I can print the results during the callback. If I just click in the cell that contains the stocktag and not on the stocktaglink itself and navigate by hand to the next page the results appear as I wanted. It just doesnt work when I click on the link as the requested Data is not stored.

I now thought of making the tablefield appear as it was a link and pass the link manually via an callback (by clicking on the selected cell). Unluckily then the mousecursor disappears and there is this textmousehover.

I really hope you could understand me. If not i can provide an example :slight_smile:
Best Regards

4

please :grimacing:

5 
import dash
from dash import html
from dash import dash_table
import pandas as pd

from dash.exceptions import PreventUpdate
from dash import html, dcc, Input, Output, callback, Dash, State
import dash_bootstrap_components as dbc

df = pd.DataFrame({
    'Date': ['2018-08-30 22:52:25', '2021-09-29 13:33:49'],
    'Ticket ID': [1444008, 1724734],
    'Work Order': ['119846184', '122445397'],
    'Link(s)': ['[Google](https://www.google.com)', '[Twitter](https://www.twitter.com)'],
})

app = dash.Dash()

app.layout = html.Div(children=[

    dbc.Row(dash_table.DataTable(
        id="SearchTable",
        data=df.to_dict(orient='records'),
        columns=[{'id': x, 'name': x, 'presentation': 'markdown'} for x in df.columns],
    )),
    dbc.Row(html.Div(id="testOutput")),


    dcc.Store("SelectedCell","session")

])


@app.callback(
    Output("SelectedCell",'data'),
    Input("SearchTable", "active_cell"), prevent_initial_call=True)

def GetSelectedStock(active_cell):
    if active_cell == []:
         raise PreventUpdate
    if active_cell and 'Link(s)' in active_cell.values():


         return (str(active_cell))
        

@app.callback(
    Output("testOutput",'children'),
    Input("SelectedCell", "modified_timestamp"), 
    State("SelectedCell", "data"),     
    prevent_initial_call=True
)

def printSelectedCell(ts, active_cell):
    if ts is None or active_cell is None:
        raise PreventUpdate
    print (active_cell)
    return active_cell




if __name__ == '__main__':
    app.run_server(port=8051, debug=True)
6

It was working. But I dont know how. I have to further check it. :frowning:

Can you please explain to me why it is just working if I change the cells and why it is not working if I use a random string instead of the active cell as an parameter for the dcc.store? Thank you!

7

So I figured out that the problem must lie with the link I open. If I open the Link to another site of my dash app in a new tab then the changes are not used there. But if I navigate around in the tab I clicked on the link then the changes are seeable and stored.

This means, that I can open links from my table but if I open links to other sites of my app then the callback is not executed in the site that opens

EDIT: I found some code from Eduardo which looks like it achieves my desired result. Will try it and thank you for your time.
Here is the link (Example 1):

Best Regards

8

So I believe I am struggling with the same issue.

I have a multipage application, but cannot pass the “active_cell” value between pages (as desired).

The issue occurs on my markdown links in the table. Essentially they work as intended, and changes to my second page in the same tab, however I have to click on the cell before the actual link if I want to pass the “active_cell” value to the next page. This is very undesirable, is there any work arounds?

So in summary is there a way to “save” the “active_cell” value without having to click the cell first and then the markdown link?
In my callbacks I can see that the callback is triggered, so it tries to save the “active_cell” value, but the rerender happens to fast I guess, as none of my “catching” callbacks gets the value.

image

Am I making sense? :slight_smile:

Ps. It further seems that the dcc.Store() where I try to store the information has to be set to ‘session’ or else it seems to be reset when clicking the link. (Even though link stays in same tab and application)?

9

Are you using Pages in your multi-page app? If so, you can pass the data from the active cell in the path variable by clicking on a markdown link.

The example # 12 in this repo shows how to do this with Dash AG Grid. But a previous version used DataTable. You can find it in the git history here

1 Like
10

No not yet at least! :slight_smile:

So far I have used url and pathname to handle page navigation, but I will give it a try updating to the Pages functionality!

11

I ended up using the dcc.Location ‘search’ parameter instead of dcc.Store, as it was only an Id I needed to pass. Some testing also showed that my previous dcc.Location method did work with less data (around 1000 entries) but was too slow in updating with more.

@AnnMarieW Later I would properly use your method, but changing my template from the old dcc.Location method to pages proved to be a larger task :slight_smile:

1 Like