packages = [ "matplotlib", "plotly", "ruamel-yaml==0.16.13", "pandas", "./static/wheels/ioos_qc-2.0.2-py3-none-any.whl", ] [[fetch]] from = "./" files = ["qc.py"] [splashscreen] autoclose = true [[runtimes]] src = "https://cdn.jsdelivr.net/pyodide/v0.22.0/full/pyodide.js" name = "pyodide-0.22.0" lang = "python"

IOOS QC Web App

How to use pyscript to run ioos_qc on the browser.

# Import libraries import pandas as pd import matplotlib.pyplot as plt import js import json import plotly import plotly.express as px from pyodide.http import open_url # Get the data uploaded_file = "./water_level_example_test.csv" df = pd.read_csv(open_url(uploaded_file)) # Run QA/QC from qc import run_tests, make_mask variable = "sea_surface_height_above_sea_level" result = run_tests(df, variable) def plot(qc_test): mask = make_mask(df, result, variable, qc_test) fig = px.line(df, x="time", y=variable, width=800, height=400) fig.add_trace( px.scatter( x=df["time"], y=mask["qc_fail"], color_discrete_sequence=["red"], ).data[0], ) fig.add_trace( px.scatter( x=df["time"], y=mask["qc_notrun"], color_discrete_sequence=["gray"], ).data[0], ) fig.add_trace( px.scatter( x=df["time"], y=mask["qc_suspect"], color_discrete_sequence=["orange"], ).data[0], ) fig.add_trace( px.scatter( x=df["time"], y=mask["qc_pass"], color_discrete_sequence=["green"], ).data[0], ) graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder) js.plot(graphJSON, "qc_test") from js import document from pyodide.ffi import create_proxy def selectChange(event): choice = document.getElementById("select").value plot(choice) def setup(): # Create a JsProxy for the callback function change_proxy = create_proxy(selectChange) e = document.getElementById("select") e.addEventListener("change", change_proxy) setup() plot(qc_test="gross_range_test") result.to_html()