Update app.py

app.py

@@ -1,110 +1,66 @@
-import dash
-from dash import dcc, html
-from dash.dependencies import Input, Output
-import plotly.express as px
+import altair as alt
 import pandas as pd
-
-
-layers = ["conv2d5", "conv2d6", "conv2d7", "conv2d8", "conv2d9", "linear1", "linear2"]
-color_dict = {
-    "ClassifierA_Cr203_C6": "#B3262A",
-    "ClassifierA_test_stim": "#2f559a",
-    "ClassifierA_test_unstim": "#5AADC5",
-}
-
-# Initialize Dash app
-app = dash.Dash(__name__)
-
-server = app.server
-
-# App layout
-app.layout = html.Div(
-    [
-        html.Div(
-            id="plot-container",
-            children=[
-                html.P(
-                    children=[
-                        "The original report can be accessed through this ",
-                        html.A(
-                            "BioRxiv Link",
-                            href="https://www.biorxiv.org/content/10.1101/2023.06.01.542416v1.full.pdf",
-                            target="_blank",
-                        ),
-                        " and the data through this ",
-                        html.A(
-                            "GitHub repository",
-                            href="https://github.com/MannLabs/SPARCS_pub_figures",
-                            target="_blank",
-                        ),
-                    ],
-                    id="initial-announcement",
-                ),
-                html.P(
-                    "Please select a layer to view from the dropdown.",
-                    id="initial-message",
-                ),
-            ],
-        ),
-        dcc.Dropdown(
-            id="layer-dropdown",
-            options=[{"label": layer, "value": layer} for layer in layers],
-            value=layers[0],
-        ),
-        dcc.Graph(id="umap-plot"),
-    ]
-)
-
-
-# Callback to update the plot based on dropdown selection
-@app.callback(Output("umap-plot", "figure"), [Input("layer-dropdown", "value")])
-def update_plot(selected_layer):
-
-    input_path = (
-        f"data/classifier_1_Test_Data/UMAP_data/Raw_data_UMAP_{selected_layer}.csv"
+import panel as pn
+
+pn.extension('vega')
+
+# Selection widgets
+subgroup_select = pn.widgets.Select(name='Layers', options=["conv2d5", "conv2d6", "conv2d7", "conv2d8", "conv2d9", "linear1", "linear2"])
+
+# Bind the widgets to the create_plot function
+@pn.depends(subgroup_select.param.value)
+def create_plot(layers):
+    df_train_umap = pd.read_csv(f"https://raw.githubusercontent.com/jeonghin/si649_project2_sparcs/main/data/classifier_1_Test_Data/UMAP_data/Raw_data_UMAP_{layers}.csv").sample(n=5000, random_state=19)
+    color_dict = {
+        "ClassifierA_Cr203_C6": "#B3262A",
+        "ClassifierA_test_stim": "#2f559a",
+        "ClassifierA_test_unstim": "#5AADC5",
+    }
+
+    # Define a selection for zooming and panning (interval)
+    zoom = alt.selection_interval(bind='scales')
+
+    # Define a selection for the legend
+    legend_selection = alt.selection_multi(fields=['class_label'], bind='legend')
+
+
+    # Create the Altair chart object
+    chart = alt.Chart(df_train_umap).mark_circle(size=4, opacity=1).encode(
+        x=alt.X("UMAP_1:Q", scale=alt.Scale(zero=False)),
+        y=alt.Y("UMAP_2:Q", scale=alt.Scale(zero=False)),
+        color=alt.Color("class_label:N", scale=alt.Scale(domain=list(color_dict.keys()), range=list(color_dict.values()))),
+        tooltip=['UMAP_1', 'UMAP_2', 'class_label'],
+        opacity=alt.condition(legend_selection, alt.value(1), alt.value(0))  # Use the selection here to control opacity
+    ).properties(
+        title=f"UMAP Test Data Labels - {layers}",
+    ).add_selection(
+        legend_selection,  # Add the selection to the chart
+    
+        zoom
+    ).configure_axis(
+        grid=False
+    ).configure_view(
+        strokeWidth=0
     )
-    df_train_umap = pd.read_csv(input_path)
 
-    fig = px.scatter(
-        df_train_umap.sample(frac=1, random_state=19),
-        x="UMAP_1",
-        y="UMAP_2",
-        color="class_label",
-        color_discrete_map=color_dict,
-        title=f"UMAP Test Data Labels - {selected_layer}",
-    )
-    fig.update_traces(
-        marker=dict(size=4, opacity=1, line=dict(width=0)),
-        selector=dict(mode="markers"),
-    )
+    return chart
 
-    # Update layout to have equal aspect ratio
-    fig.update_layout(
-        xaxis=dict(
-            scaleanchor="y",
-            scaleratio=1,
-            dtick=2,
-        ),
-        yaxis=dict(
-            scaleanchor="x",
-            scaleratio=1,
-            dtick=2,
-        ),
-        legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1),
-    )
+# Combine everything in a Panel Column to create an app
+app = pn.Column("# UMAP Data Interactive Visualization", subgroup_select, pn.panel(create_plot, reactive=True))
 
-    # Set a constant range for both axes
-    umap_min = min(df_train_umap["UMAP_1"].min(), df_train_umap["UMAP_2"].min())
-    umap_max = max(df_train_umap["UMAP_1"].max(), df_train_umap["UMAP_2"].max())
+# Set the app to be servable
+app.servable()
 
-    x_range = [umap_min - 2, umap_max + 2]
-    # y_range = [umap_min - 2, umap_max + 2]
-
-    fig.update_xaxes(range=x_range, constrain="domain")
-    # fig.update_yaxes(range=y_range, scaleanchor="x", scaleratio=1)
-
-    return fig
+# Main layout
+main_layout = pn.Column(
+    "# Data Interactive Visualization (SPARCS)",
+    pn.panel(create_plot, reactive=True),
+    subgroup_select,
+)
 
+# Create a basic template
+template = pn.template.BootstrapTemplate(title='SI649 Project 2')
+template.main.append(main_layout)
 
-if __name__ == "__main__":
-    app.run_server(debug=True)
+# Serve the application
+template.servable()