Add a bunch of comments

Author: Isaac-Flath

examples/visualizations/plotly_selections/app.py

@@ -1,8 +1,8 @@
 import plotly.express as px
 from fasthtml.common import *
 
-app, rt = fast_app()
-
+# Add the Plotly library to the headers
+app, rt = fast_app(hdrs=(Script(src="https://cdn.plot.ly/plotly-2.24.1.min.js"),))
 
 def create_scatter_plot():
     # Create simple scatter plot with 5 points
@@ -11,37 +11,38 @@ def create_scatter_plot():
     )
     return fig.to_json()
 
-
-@rt("/")
-def get():
-    return Titled(
-        "Interactive Plotly Selection",
-        Div(
-            P("Click any point to see its x-value!"),
-            Div(id="plotly-container"),
-            Div(id="point-info")(P("No point selected yet")),
-            Script(src="https://cdn.plot.ly/plotly-2.24.1.min.js"),
-            Script(
-                f"""
-                // Initialize the plot
-                const plotData = {create_scatter_plot()};
-                Plotly.newPlot('plotly-container', plotData.data, plotData.layout);
-
-                // Add click event handler
-                document.getElementById('plotly-container').on('plotly_click', function(data) {{
-                    const point = data.points[0];
-                    // Make HTMX request when point is clicked
-                    htmx.ajax('GET', `/point/${{point.x}}`, {{target: '#point-info'}});
-                }});
-                """
-            ),
-        ),
-    )
+@rt
+def index():
+    return Titled("Interactive Plotly Selection",
+        P("Click any point to see its x-value!"),
+        # point-info will be updated based on what is clicked
+        Div(id="point-info")(P("No point selected yet")),
+        # plotly-container will be updated with the plot
+        Div(id="plotly-container"),
+        # Initialize the plot
+        Script(
+            f"""
+            // All the plot data is given in json form by `create_scatter_plot`
+            const plotData = {create_scatter_plot()};
+            // Create the plot with that data in location with id `plotly-container`
+            Plotly.newPlot('plotly-container', plotData.data, plotData.layout);
+
+            // Add click event handler
+            // Get thing with id `plotly-container`, and on plotly_click event,
+            // run the function
+            document.getElementById('plotly-container').on('plotly_click', function(data) {{
+                // Get the first point clicked
+                const point = data.points[0];
+                // Make HTMX request when point is clicked with the x-value
+                htmx.ajax('GET', `point/${{point.x}}`, {{target: '#point-info'}});
+            }});
+            """
+            ))
 
 
 @rt("/point/{x_val}")
 def get(x_val: float):
-    return P(f"You clicked the point with x-value: {x_val}")
-
+    # Return the x-value of the point clicked to the UI!
+    return P(Strong(f"You clicked the point with x-value: {x_val}"))
 
 serve()