What is a good way to show relationship between data in 2 dataframes? (dynamic)

[rkc-rkc]

In the toy example below, when clicking on "Alpha", I would like to show a line that connects to "Yankee"

df1 = pd.DataFrame({"id": [101, 102, 103], "Source": ["Alpha", "Beta", "Gamma"]})
df2 = pd.DataFrame({"id": [103, 101, 102], "Target": ["Xray", "Yankee", "Zulu"]})

mo.hstack([df1, <dynamic_relation_display>, df2])

[stephenlf]

Something like this will work. I apologize in advance for any syntax issues. I'm writing from my phone.

Cell 1

df1 = pd.DataFrame({"id": [101, 102, 103], "Source": ["Alpha", "Beta", "Gamma"]})

df2 = pd.DataFrame({"id": [103, 101, 102], "Target": ["Xray", "Yankee", "Zulu"]})

Cell 2

df1_selectable = mo.ui.dataframe(df1)

Cell 3

mo.hstack([
  df1_selectable,
  df2[df2["id"].isin(
    df1_selectable.value["id"]
  )]