Add custom time range option

Author: jcheng5

examples/model-score/app.py

@@ -1,4 +1,5 @@
 import sqlite3
+from datetime import datetime, timedelta, timezone
 
 import pandas as pd
 import plotly.express as px
@@ -43,13 +44,27 @@ def df():
         params=[150],
     )
     # Treat timestamp as a continuous variable
-    tbl["timestamp"] = pd.to_datetime(tbl["timestamp"]).dt.strftime("%H:%M:%S")
+    tbl["timestamp"] = pd.to_datetime(tbl["timestamp"], utc=True)
+    tbl["time"] = tbl["timestamp"].dt.strftime("%H:%M:%S")
     # Reverse order of rows
     tbl = tbl.iloc[::-1]
 
     return tbl
 
 
+def read_time_period(from_time, to_time):
+    tbl = pd.read_sql(
+        "select * from auc_scores where timestamp between ? and ? order by timestamp, model",
+        con,
+        params=[from_time, to_time],
+    )
+    # Treat timestamp as a continuous variable
+    tbl["timestamp"] = pd.to_datetime(tbl["timestamp"], utc=True)
+    tbl["time"] = tbl["timestamp"].dt.strftime("%H:%M:%S")
+
+    return tbl
+
+
 model_colors = {
     "model_1": "#7fc97f",
     "model_2": "#beaed4",
@@ -60,37 +75,79 @@ def df():
 model_names = list(model_colors.keys())
 
 
-app_ui = x.ui.page_sidebar(
-    x.ui.sidebar(
-        ui.input_selectize(
-            "refresh",
-            "Refresh interval",
-            {
-                0: "Realtime",
-                5: "5 seconds",
-                30: "30 seconds",
-                60 * 5: "5 minutes",
-                60 * 15: "15 minutes",
-            },
+def app_ui(req):
+    end_time = datetime.now(timezone.utc)
+    start_time = end_time - timedelta(minutes=1)
+
+    return x.ui.page_sidebar(
+        x.ui.sidebar(
+            ui.input_checkbox_group(
+                "models", "Models", model_names, selected=model_names
+            ),
+            ui.input_radio_buttons(
+                "timeframe",
+                "Timeframe",
+                ["Latest", "Specific timeframe"],
+                selected="Latest",
+            ),
+            ui.panel_conditional(
+                "input.timeframe === 'Latest'",
+                ui.input_selectize(
+                    "refresh",
+                    "Refresh interval",
+                    {
+                        0: "Realtime",
+                        5: "5 seconds",
+                        30: "30 seconds",
+                        60 * 5: "5 minutes",
+                        60 * 15: "15 minutes",
+                    },
+                ),
+            ),
+            ui.panel_conditional(
+                "input.timeframe !== 'Latest'",
+                ui.input_slider(
+                    "timerange",
+                    "Time range",
+                    min=start_time,
+                    max=end_time,
+                    value=[start_time, end_time],
+                    step=timedelta(seconds=1),
+                    time_format="%H:%M:%S",
+                ),
+            ),
         ),
-        ui.input_checkbox_group("models", "Models", model_names, selected=model_names),
-    ),
-    ui.div(
-        ui.h1("Model monitoring dashboard"),
-        ui.p(
-            x.ui.output_ui("value_boxes"),
+        ui.div(
+            ui.h1("Model monitoring dashboard"),
+            ui.p(
+                x.ui.output_ui("value_boxes"),
+            ),
+            x.ui.card(output_widget("plot_timeseries")),
+            x.ui.card(output_widget("plot_dist")),
+            style="max-width: 800px;",
         ),
-        x.ui.card(output_widget("plot_timeseries")),
-        x.ui.card(output_widget("plot_dist")),
-        style="max-width: 800px;",
-    ),
-    fillable=False,
-)
+        fillable=False,
+    )
 
 
 def server(input: Inputs, output: Outputs, session: Session):
+    @reactive.Effect
+    def update_time_range():
+        reactive.invalidate_later(5)
+        min_time, max_time = pd.to_datetime(
+            con.execute(
+                "select min(timestamp), max(timestamp) from auc_scores"
+            ).fetchone(),
+            utc=True,
+        )
+        ui.update_slider(
+            "timerange",
+            min=min_time.replace(tzinfo=timezone.utc),
+            max=max_time.replace(tzinfo=timezone.utc),
+        )
+
     @reactive.Calc
-    def throttled_df():
+    def recent_df():
         refresh = int(input.refresh())
         if refresh == 0:
             return df()
@@ -99,12 +156,22 @@ def throttled_df():
             with reactive.isolate():
                 return df()
 
+    @reactive.Calc
+    def timeframe_df():
+        start, end = input.timerange()
+        return read_time_period(start, end)
+
     @reactive.Calc
     def filtered_df():
-        data = throttled_df()
+        data = recent_df() if input.timeframe() == "Latest" else timeframe_df()
+
         # Filter the rows so we only include the desired models
         return data[data["model"].isin(input.models())]
 
+    @reactive.Calc
+    def filtered_model_names():
+        return filtered_df()["model"].unique()
+
     @output
     @render.ui
     def value_boxes():
@@ -134,11 +201,11 @@ def value_boxes():
         )
 
     @output
-    @render_plotly_streaming(recreate_when=input.models)
+    @render_plotly_streaming(recreate_key=filtered_model_names)
     def plot_timeseries():
         fig = px.line(
             filtered_df(),
-            x="timestamp",
+            x="time",
             y="score",
             labels=dict(score="auc"),
             color="model",
@@ -162,7 +229,7 @@ def plot_timeseries():
         return fig
 
     @output
-    @render_plotly_streaming(recreate_when=input.models)
+    @render_plotly_streaming(recreate_key=filtered_model_names)
     def plot_dist():
         fig = px.histogram(
             filtered_df(),
@@ -188,6 +255,7 @@ def plot_dist():
         # From https://plotly.com/python/facet-plots/#customizing-subplot-figure-titles
         fig.for_each_annotation(lambda a: a.update(text=a.text.split("=")[-1]))
 
+        fig.update_yaxes(matches=None)
         fig.update_xaxes(range=[0, 1], fixedrange=True)
         fig.layout.height = 500
 

examples/model-score/plotly_streaming.py

@@ -1,28 +1,60 @@
 import functools
+import json
 
 import plotly.graph_objects as go
 from shinywidgets import render_widget
 
 from shiny import reactive
 
 
-def render_plotly_streaming(fn=None, *, recreate_when=lambda: None):
+# Return a hash of an arbitrary object, including nested dicts, lists, and numpy/pandas
+# data structures. Uses json.dumps() internally.
+def _hash_anything(obj):
+    return hash(json.dumps(obj, sort_keys=True, default=_to_json_repr))
+
+
+def _to_json_repr(obj):
+    # If has to_json(), use that; make sure it's callable
+    if hasattr(obj, "to_json") and callable(obj.to_json):
+        return json.loads(obj.to_json())
+    if hasattr(obj, "to_list") and callable(obj.to_list):
+        return obj.to_list()
+    if hasattr(obj, "tolist") and callable(obj.tolist):
+        return obj.tolist()
+    if hasattr(obj, "to_dict") and callable(obj.to_dict):
+        return obj.to_dict()
+    raise TypeError(f"Object of type {type(obj)} is not JSON serializable")
+
+
+def render_plotly_streaming(fn=None, *, recreate_key=lambda: None):
     """Custom decorator for Plotly streaming plots. This is similar to
     shinywidgets.render_widget, except:
 
     1. You return simply a Figure, not FigureWidget.
     2. On reactive invalidation, the figure is updated in-place, rather than recreated
        from scratch.
+
+    Parameters
+    ----------
+    recreate_key : callable, optional
+        A function that returns a hashable object. If the value returned by this
+        function changes, the plot will be recreated from scratch. This is useful for
+        changes that render_plotly_streaming can't handle well, such as changing the
+        number of traces in a plot.
     """
 
     if fn is not None:
-        return render_plotly_streaming(recreate_when=recreate_when)(fn)
+        return render_plotly_streaming(recreate_key=recreate_key)(fn)
 
     def decorator(func):
+        @deduplicate
+        def recreate_trigger():
+            return _hash_anything(recreate_key())
+
         @render_widget
         @functools.wraps(func)
         def wrapper():
-            recreate_when()
+            recreate_trigger()
 
             with reactive.isolate():
                 fig = func()
@@ -43,3 +75,22 @@ def update_plotly_data():
         return wrapper
 
     return decorator
+
+
+def deduplicate(func):
+    with reactive.isolate():
+        rv = reactive.Value(func())
+
+    @reactive.Effect
+    def update():
+        x = func()
+        with reactive.isolate():
+            if x != rv():
+                rv.set(x)
+
+    @reactive.Calc
+    @functools.wraps(func)
+    def wrapper():
+        return rv()
+
+    return wrapper

examples/model-score/requirements.in

@@ -0,0 +1,4 @@
+pandas
+plotly
+shiny
+shinywidgets