Draw Lines between Cluster Centers

app.py

@@ -1,7 +1,9 @@
 import streamlit as st
 import pandas as pd
+import numpy as np
 from bokeh.plotting import figure
-from bokeh.models import ColumnDataSource
+from bokeh.models import ColumnDataSource, DataTable, TableColumn, CustomJS, Select
+from bokeh.layouts import row, column
 from bokeh.palettes import Reds9, Blues9
 from sklearn.decomposition import PCA
 from sklearn.manifold import TSNE
@@ -17,7 +19,6 @@ TOOLTIPS = """
 </div>
 """
 
-
 def config_style():
     st.markdown("""
         <style>
@@ -28,171 +29,212 @@ def config_style():
     """, unsafe_allow_html=True)
     st.markdown('<h1 class="main-title">Merit Embeddings 🎒📃🏆</h1>', unsafe_allow_html=True)
     st.markdown('<h2 class="sub-title">Donut 🤗</h2>', unsafe_allow_html=True)
-    st.markdown(
-        """
-        <p class="custom-text">
-        Se cargan ambas versiones de los embeddings y se aplica una reducción dimensional sobre el conjunto combinado.
-        Los puntos de la versión real se muestran como <strong>círculos</strong> (tonos de rojo)
-        y los de la es_digital_seq como <strong>cuadrados</strong> (tonos de azul).
-        </p>
-        """, unsafe_allow_html=True)
-
 
 def load_embeddings():
     df_real = pd.read_csv("data/donut_de_Rodrigo_merit_secret_all_embeddings.csv")
     df_es_digital_seq = pd.read_csv("data/donut_de_Rodrigo_merit_es-digital-seq_embeddings.csv")
-
-    embeddings = {
-        "real": df_real,
-        "es-digital-seq": df_es_digital_seq
-    }
-
-    return embeddings
-
+    return {"real": df_real, "es-digital-seq": df_es_digital_seq}
 
 def reducer_selector(df_combined, embedding_cols):
-
-    reduction_method = st.selectbox("Seleccione método de reducción:", options=["PCA", "t-SNE"])
+    reduction_method = st.selectbox("Select Dimensionality Reduction Method:", options=["PCA", "t-SNE"])
     all_embeddings = df_combined[embedding_cols].values
     if reduction_method == "PCA":
         reducer = PCA(n_components=2)
     else:
         reducer = TSNE(n_components=2, random_state=42, perplexity=30, learning_rate=200)
-    reduced = reducer.fit_transform(all_embeddings)
-
-    return reduced
-
+    return reducer.fit_transform(all_embeddings)
 
 def add_dataset_to_fig(fig, df, selected_labels, marker, color_mapping):
+    renderers = {}
     for label in selected_labels:
         subset = df[df['label'] == label]
         if subset.empty:
             continue
         source = ColumnDataSource(data=dict(
-            x = subset['x'],
-            y = subset['y'],
-            label = subset['label'],
-            img = subset['img']
+            x=subset['x'],
+            y=subset['y'],
+            label=subset['label'],
+            img=subset['img']
         ))
         color = color_mapping[label]
         if marker == "circle":
-            fig.circle('x', 'y', size=10, source=source,
-                       fill_color=color, line_color=color,
-                       legend_label=f"{label} (Real)")
+            r = fig.circle('x', 'y', size=10, source=source,
+                           fill_color=color, line_color=color,
+                           legend_label=f"{label} (Real)")
         elif marker == "square":
-            fig.square('x', 'y', size=4, source=source, fill_color=color, line_color=color,
-                       legend_label=f"{label} (Sintético)")
-
+            r = fig.square('x', 'y', size=10, source=source,
+                           fill_color=color, line_color=color,
+                           legend_label=f"{label} (Synthetic)")
+        renderers[label] = r
+    return renderers
 
 def get_color_maps(selected_subsets: dict):
-    
-    # real
+    # Para real
     num_real = len(selected_subsets["real"])
-    if num_real <= 9:
-        red_palette = Reds9[:num_real]
-    else:
-        red_palette = (Reds9 * ((num_real // 9) + 1))[:num_real]
+    red_palette = Reds9[:num_real] if num_real <= 9 else (Reds9 * ((num_real // 9) + 1))[:num_real]
     color_mapping_real = {label: red_palette[i] for i, label in enumerate(sorted(selected_subsets["real"]))}
-    
-    # es-digital-seq
-    num_es_digital_seq = len(selected_subsets["es-digital-seq"])
-    if num_es_digital_seq <= 9:
-        blue_palette = Blues9[:num_es_digital_seq]
-    else:
-        blue_palette = (Blues9 * ((num_es_digital_seq // 9) + 1))[:num_es_digital_seq]
-    color_mapping_es_digital_seq = {label: blue_palette[i] for i, label in enumerate(sorted(selected_subsets["es-digital-seq"]))}
-
-    # Gather color maps
-    color_maps = {
-        "real": color_mapping_real,
-        "es-digital-seq": color_mapping_es_digital_seq
-    }
-
-    return color_maps
-
+    # Para es-digital-seq (sintéticos)
+    num_es = len(selected_subsets["es-digital-seq"])
+    blue_palette = Blues9[:num_es] if num_es <= 9 else (Blues9 * ((num_es // 9) + 1))[:num_es]
+    color_mapping_es = {label: blue_palette[i] for i, label in enumerate(sorted(selected_subsets["es-digital-seq"]))}
+    return {"real": color_mapping_real, "es-digital-seq": color_mapping_es}
 
 def split_versions(df_combined, reduced):
-
     df_combined['x'] = reduced[:, 0]
     df_combined['y'] = reduced[:, 1]
-
-    df_real_reduced = df_combined[df_combined["version"] == "real"].copy()
-    df_es_digital_seq_reduced = df_combined[df_combined["version"] == "es_digital_seq"].copy()
-    
-    # Obtener los subsets únicos de cada versión
-    unique_subsets_real = sorted(df_real_reduced['label'].unique().tolist())
-    unique_subsets_es_digital_seq = sorted(df_es_digital_seq_reduced['label'].unique().tolist())
-
-    unique_subsets = {
-        "real": unique_subsets_real,
-        "es-digital-seq": unique_subsets_es_digital_seq,
-    }
-
-    dfs_reduced = {
-        "real": df_real_reduced,
-        "es-digital-seq": df_es_digital_seq_reduced,
-    }
-
-    return dfs_reduced, unique_subsets
-
+    df_real = df_combined[df_combined["version"] == "real"].copy()
+    df_es = df_combined[df_combined["version"] == "es_digital_seq"].copy()
+    unique_real = sorted(df_real['label'].unique().tolist())
+    unique_es = sorted(df_es['label'].unique().tolist())
+    return {"real": df_real, "es-digital-seq": df_es}, {"real": unique_real, "es-digital-seq": unique_es}
 
 def subset_selectors(unique_subsets: dict):
-
-    selected_subsets_real = st.multiselect("Seleccione subsets para visualizar (Real):",
-                                             options=unique_subsets["real"],
-                                             default=unique_subsets["real"])
-    selected_subsets_es_digital_seq = st.multiselect("Seleccione subsets para visualizar (Sintético):",
-                                        options=unique_subsets["es-digital-seq"],
-                                        default=unique_subsets["es-digital-seq"])
-    
-    selected_subsets = {
-        "real": selected_subsets_real,
-        "es-digital-seq": selected_subsets_es_digital_seq
-    }
-
-    return selected_subsets
-
+    selected_real = st.multiselect("Select Real Subsets:", options=unique_subsets["real"], default=unique_subsets["real"])
+    selected_es = st.multiselect("Select Synthetic Subsets:", options=unique_subsets["es-digital-seq"], default=unique_subsets["es-digital-seq"])
+    return {"real": selected_real, "es-digital-seq": selected_es}
 
 def create_figure(dfs_reduced, selected_subsets: dict, color_maps: dict):
-
-    fig = figure(width=600, height=600, tooltips=TOOLTIPS,
-                 title="")
-    
-    add_dataset_to_fig(fig, dfs_reduced["real"], selected_subsets["real"],
-                       marker="circle", color_mapping=color_maps["real"])
-    add_dataset_to_fig(fig, dfs_reduced["es-digital-seq"], selected_subsets["es-digital-seq"],
-                       marker="square", color_mapping=color_maps["es-digital-seq"])
-    
+    fig = figure(width=600, height=600, tooltips=TOOLTIPS, title="")
+    real_renderers = add_dataset_to_fig(fig, dfs_reduced["real"], selected_subsets["real"],
+                                        marker="circle", color_mapping=color_maps["real"])
+    synthetic_renderers = add_dataset_to_fig(fig, dfs_reduced["es-digital-seq"], selected_subsets["es-digital-seq"],
+                                             marker="square", color_mapping=color_maps["es-digital-seq"])
     fig.legend.location = "top_right"
     fig.legend.click_policy = "hide"
+    return fig, real_renderers, synthetic_renderers
 
-    return fig
-
+def calculate_cluster_centers(df: pd.DataFrame, selected_labels: list) -> dict:
+    centers = {}
+    for label in selected_labels:
+        subset = df[df['label'] == label]
+        if not subset.empty:
+            centers[label] = (subset['x'].mean(), subset['y'].mean())
+    return centers
+
+def compute_distances(centers_es: dict, centers_real: dict) -> pd.DataFrame:
+    distances = {}
+    for es_label, (x_es, y_es) in centers_es.items():
+        distances[es_label] = {}
+        for real_label, (x_real, y_real) in centers_real.items():
+            distances[es_label][real_label] = np.sqrt((x_es - x_real)**2 + (y_es - y_real)**2)
+    return pd.DataFrame(distances).T
 
 def main():
-    
     config_style()
+    embeddings = load_embeddings()
+    embeddings["real"]["version"] = "real"
+    embeddings["es-digital-seq"]["version"] = "es_digital_seq"
+    embedding_cols = [col for col in embeddings["real"].columns if col.startswith("dim_")]
     
-    embeddings_dfs = load_embeddings()
-    
-    embeddings_dfs["real"]["version"] = "real"
-    embeddings_dfs["es-digital-seq"]["version"] = "es_digital_seq"
-    
-    embedding_cols = [col for col in embeddings_dfs["real"].columns if col.startswith("dim_")]
-    
-    # Combine dataframes to apply method reduction
-    df_combined = pd.concat([embeddings_dfs["real"], embeddings_dfs["es-digital-seq"]], ignore_index=True)
-
+    df_combined = pd.concat([embeddings["real"], embeddings["es-digital-seq"]], ignore_index=True)
     reduced = reducer_selector(df_combined, embedding_cols)
     
-    # Split back the different versions
     dfs_reduced, unique_subsets = split_versions(df_combined, reduced)
-
     selected_subsets = subset_selectors(unique_subsets)
     color_maps = get_color_maps(selected_subsets)
-    figure = create_figure(dfs_reduced, selected_subsets, color_maps)
+    fig, real_renderers, synthetic_renderers = create_figure(dfs_reduced, selected_subsets, color_maps)
+    
+    centers_real = calculate_cluster_centers(dfs_reduced["real"], selected_subsets["real"])
+    centers_es = calculate_cluster_centers(dfs_reduced["es-digital-seq"], selected_subsets["es-digital-seq"])
+    df_distances = compute_distances(centers_es, centers_real)
+    
+    # Creamos la tabla de distancias (se muestran todas las combinaciones)
+    df_table = df_distances.copy()
+    df_table.reset_index(inplace=True)
+    df_table.rename(columns={'index': 'Synthetic'}, inplace=True)
+    source_table = ColumnDataSource(df_table)
+    columns = [TableColumn(field='Synthetic', title='Synthetic')]
+    for col in df_table.columns:
+        if col != 'Synthetic':
+            columns.append(TableColumn(field=col, title=col))
+    data_table = DataTable(source=source_table, columns=columns, width=400, height=300)  # Selección por fila
+    
+    # Creamos un widget Select para elegir el subset real (columnas de la tabla)
+    real_subset_names = list(df_table.columns[1:])  # todas las columnas excepto 'Synthetic'
+    real_select = Select(title="Select Real Subset:", value=real_subset_names[0], options=real_subset_names)
+    
+    # Fuente para la línea que conecta los centros
+    line_source = ColumnDataSource(data={'x': [], 'y': []})
+    fig.line('x', 'y', source=line_source, line_width=2, line_color='black')
+    
+    # Preparar centros para el callback
+    synthetic_centers_js = {k: [v[0], v[1]] for k, v in centers_es.items()}
+    real_centers_js = {k: [v[0], v[1]] for k, v in centers_real.items()}
+    
+    # Callback para actualizar la línea y colores en función de la fila seleccionada y el valor del dropdown
+    callback = CustomJS(args=dict(source=source_table, line_source=line_source,
+                                  synthetic_centers=synthetic_centers_js,
+                                  real_centers=real_centers_js,
+                                  synthetic_renderers=synthetic_renderers,
+                                  real_renderers=real_renderers,
+                                  synthetic_colors=color_maps["es-digital-seq"],
+                                  real_colors=color_maps["real"],
+                                  real_select=real_select),
+    code="""
+        var selected = source.selected.indices;
+        if (selected.length > 0) {
+            var row = selected[0];
+            var data = source.data;
+            var synthetic_label = data['Synthetic'][row];
+            var real_label = real_select.value;
+            var syn_coords = synthetic_centers[synthetic_label];
+            var real_coords = real_centers[real_label];
+            line_source.data = { 'x': [syn_coords[0], real_coords[0]], 'y': [syn_coords[1], real_coords[1]] };
+            line_source.change.emit();
+            
+            // Actualizar colores: resaltar únicamente los puntos implicados
+            for (var key in synthetic_renderers) {
+                if (synthetic_renderers.hasOwnProperty(key)) {
+                    var renderer = synthetic_renderers[key];
+                    if (key === synthetic_label) {
+                        renderer.glyph.fill_color = synthetic_colors[key];
+                        renderer.glyph.line_color = synthetic_colors[key];
+                    } else {
+                        renderer.glyph.fill_color = "lightgray";
+                        renderer.glyph.line_color = "lightgray";
+                    }
+                }
+            }
+            for (var key in real_renderers) {
+                if (real_renderers.hasOwnProperty(key)) {
+                    var renderer = real_renderers[key];
+                    if (key === real_label) {
+                        renderer.glyph.fill_color = real_colors[key];
+                        renderer.glyph.line_color = real_colors[key];
+                    } else {
+                        renderer.glyph.fill_color = "lightgray";
+                        renderer.glyph.line_color = "lightgray";
+                    }
+                }
+            }
+        } else {
+            // Sin selección: reiniciar línea y colores
+            line_source.data = { 'x': [], 'y': [] };
+            line_source.change.emit();
+            for (var key in synthetic_renderers) {
+                if (synthetic_renderers.hasOwnProperty(key)) {
+                    var renderer = synthetic_renderers[key];
+                    renderer.glyph.fill_color = synthetic_colors[key];
+                    renderer.glyph.line_color = synthetic_colors[key];
+                }
+            }
+            for (var key in real_renderers) {
+                if (real_renderers.hasOwnProperty(key)) {
+                    var renderer = real_renderers[key];
+                    renderer.glyph.fill_color = real_colors[key];
+                    renderer.glyph.line_color = real_colors[key];
+                }
+            }
+        }
+    """)
+    
+    # Asociamos el callback a los cambios en la selección de filas y en el dropdown
+    source_table.selected.js_on_change('indices', callback)
+    real_select.js_on_change('value', callback)
     
-    st.bokeh_chart(figure)
+    # Organizar layout: colocamos el gráfico, la tabla y el dropdown
+    layout = row(fig, column(real_select, data_table))
+    st.bokeh_chart(layout)
 
 if __name__ == "__main__":
     main()