Minor Changes

app.py

@@ -2,7 +2,7 @@ import streamlit as st
 import pandas as pd
 import numpy as np
 from bokeh.plotting import figure
-from bokeh.models import ColumnDataSource, DataTable, TableColumn, CustomJS, Select
+from bokeh.models import ColumnDataSource, DataTable, TableColumn, CustomJS, Select, Button
 from bokeh.layouts import row, column
 from bokeh.palettes import Reds9, Blues9
 from sklearn.decomposition import PCA
@@ -62,21 +62,21 @@ def add_dataset_to_fig(fig, df, selected_labels, marker, color_mapping):
                            fill_color=color, line_color=color,
                            legend_label=f"{label} (Real)")
         elif marker == "square":
-            r = fig.square('x', 'y', size=10, source=source,
+            r = fig.square('x', 'y', size=6, 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):
-    # Para real
     num_real = len(selected_subsets["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"]))}
-    # 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):
@@ -94,7 +94,7 @@ def subset_selectors(unique_subsets: dict):
     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="")
+    fig = figure(width=400, height=400, 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"],
@@ -138,7 +138,7 @@ def main():
     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)
+    # 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)
@@ -147,12 +147,15 @@ def main():
     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
+    data_table = DataTable(source=source_table, columns=columns, width=400, height=300)
     
-    # Creamos un widget Select para elegir el subset real (columnas de la tabla)
+    # 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)
     
+    # Botón para resetear la visualización a colores originales
+    reset_button = Button(label="Reset Colors", button_type="primary")
+    
     # 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')
@@ -161,7 +164,7 @@ def main():
     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 para actualizar la visualización según la selección de la tabla y el dropdown
     callback = CustomJS(args=dict(source=source_table, line_source=line_source,
                                   synthetic_centers=synthetic_centers_js,
                                   real_centers=real_centers_js,
@@ -182,7 +185,6 @@ def main():
             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];
@@ -208,7 +210,6 @@ def main():
                 }
             }
         } else {
-            // Sin selección: reiniciar línea y colores
             line_source.data = { 'x': [], 'y': [] };
             line_source.change.emit();
             for (var key in synthetic_renderers) {
@@ -228,12 +229,37 @@ def main():
         }
     """)
     
-    # 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)
     
-    # Organizar layout: colocamos el gráfico, la tabla y el dropdown
-    layout = row(fig, column(real_select, data_table))
+    # Callback para el botón de resetear: se reinician la línea y los colores a su estado original.
+    reset_callback = CustomJS(args=dict(line_source=line_source,
+                                        synthetic_renderers=synthetic_renderers,
+                                        real_renderers=real_renderers,
+                                        synthetic_colors=color_maps["es-digital-seq"],
+                                        real_colors=color_maps["real"]),
+    code="""
+        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];
+            }
+        }
+    """)
+    reset_button.js_on_event("button_click", reset_callback)
+    
+    # Organizar el layout: gráfico, dropdown, botón de reset y tabla
+    layout = column(fig, column(real_select, reset_button, data_table))
     st.bokeh_chart(layout)
 
 if __name__ == "__main__":