How to Integrate Plotly Graphs with Vuetify Components for Interactive Data Visualization?

[ElliottHuang]

Hi, I'm designing a webapp to display the clustering of raw text embedded to vector data, that is, raw text -> embedding model = vector data -> clustering (t-SNE) = 2D plot.

My current code shows the raw text when I hover my mouse upon the datapoint, but since the text is very long, I can only see a small part of it. I want to design an interaction that when I click the datapoint on the Plotly graph, we can see the full text in the VTextarea in the drawer. I'm asking about how to do this? Thank you

import pandas as pd
import numpy as np
from sklearn.cluster import KMeans
import plotly.graph_objects as go
from trame.app import get_server
from trame.ui.vuetify import SinglePageWithDrawerLayout
from trame.widgets import plotly, vuetify
import json

file = './tsne.csv'
data = pd.read_csv(file)

sentences = []
with open('./rawtext.jsonl', 'r', encoding='utf-8') as file:
    for line in file:
        data_line = json.loads(line)
        sentences.append(data_line["text"])

default_num_clusters = 10

def perform_clustering(num_clusters):
    kmeans = KMeans(n_clusters=num_clusters, random_state=0)
    clusters = kmeans.fit_predict(data[['Feature1', 'Feature2']])
    return clusters

clusters = perform_clustering(default_num_clusters)

def create_figure(clusters):
    fig = go.Figure(data=go.Scatter(
        x=data['Feature1'],
        y=data['Feature2'],
        mode='markers',
        marker=dict(
            color=clusters,
            colorscale='Viridis',
            size=1
        ),
        hovertext=sentences
    ))

    fig.update_layout(
        autosize=False,
        width=1144,
        height=525,
        margin=dict(l=0, r=0, b=0, t=0, pad=0)  
    )
    return fig

fig = create_figure(clusters)

server = get_server()
server.client_type = "vue2"
state, ctrl = server.state, server.controller

def drawer_panels(panel_header):
    with vuetify.VExpansionPanel():
        vuetify.VExpansionPanelHeader(
            panel_header,
            classes="grey lighten-1 my-auto py-1 grey--text text--darken-3",
            hide_details=True,
            dense=False,
        )
        content = vuetify.VExpansionPanelContent(classes="py-2")
    return content

with SinglePageWithDrawerLayout(server) as layout:
    layout.title.set_text("Hello Trame")

    with layout.content:
        with vuetify.VContainer(fluid=True, classes="fill-height", style="background-color: #0484c4;"):
            plotly.Figure(fig, style="padding-top: 45px;")
    
    with layout.toolbar:
        vuetify.VSpacer()
        vuetify.VDivider(vertical=True, classes="mx-2")
        vuetify.VCheckbox(
            v_model="$vuetify.theme.dark",
            on_icon="mdi-lightbulb-off-outline",
            off_icon="mdi-lightbulb-outline",
            classes="mx-1",
            hide_details=True,
            dense=True,
        )

    with layout.drawer as drawer:
        drawer.width = 325    
        with vuetify.VExpansionPanels(
            multiple=True,
        ):
            panel_content = drawer_panels("Raw Text")
            with panel_content:
                vuetify.VTextarea(
                    readonly=True,
                )

if __name__ == "__main__":
    server.start()

[jourdain]

You will need to attach a listener to the chart which will update another variable that will be displayed by vuetify element.