Streamlit echarts add clickable links

Using Streamlit
1 
import streamlit as st
from streamlit_echarts import st_echarts

st.set_page_config(layout="wide")

data = {
    "name": "A",
    "link": "https://wikiper.com/wiki/A",
    "children": [
        {"name": "B",
         "link": "https://wikiper.com/wiki/C",
         "children": []
         },
        {
            "children": [{"children": [{"name": "I"}], "name": "E"}, {"name": "F"}],
            "name": "C",
            "link": "https://wikiper.com/wiki/C"
        },
        {
            "children": [
                {"children": [{"name": "J"}, {"name": "K"}], "name": "G"},
                {"name": "H"},
            ],
            "name": "D",
            "link": "https://wikiper.com/wiki/D"
        },
    ],

}

opts = {
    "tooltip": {"trigger": "item", "triggerOn": "mousemove"},
    "series": [
        {
            "type": 'tree',
            "data": [data],
            "top": '1%',
            "left": '7%',
            "bottom": '1%',
            "right": '20%',
            "symbolSize": 7,
            "label": {
                "position": 'left',
                "verticalAlign": 'middle',
                "align": 'right',
                "fontSize": 10
            },
            "leaves": {
                "label": {
                    "position": 'right',
                    "verticalAlign": 'middle',
                    "align": 'left'
                }
            },
            "emphasis": {
                "focus": 'descendant'
            },
            "expandAndCollapse": True,
            "animationDuration": 550,
            "animationDurationUpdate": 750
        }
    ]
}

st_echarts(opts, height=1000)

Using this simple program as shown here I got a tree chart working.
But I have a link key for every children which I want to embed as a hyperlink in the tree chart so when clicked it opens the link in a new tab. Is there anyway I can make this work ?

2

FIgured out one way by adding a double click action to trigger a javascript window.open

events = {
    "dblclick": "function(params) {window.open('https://www.google.com/search?q=' + params.name)}",
}

But still don’t really know how I could use link from original data Dict since it could be different than the name param

But it does look like value key can be used in parms so renaming all link keys to value should be able to let me directly use the link values from original Dict

3

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.