Add ClimaAnalysisInteractive

This commit adds an interactive viewer for ClimaAnalysis

Project.toml

@@ -10,25 +10,28 @@ Reexport = "189a3867-3050-52da-a836-e630ba90ab69"
 Statistics = "10745b16-79ce-11e8-11f9-7d13ad32a3b2"
 
 [weakdeps]
+Bonito = "824d6782-a2ef-11e9-3a09-e5662e0c26f8"
 CairoMakie = "13f3f980-e62b-5c42-98c6-ff1f3baf88f0"
 GeoMakie = "db073c08-6b98-4ee5-b6a4-5efafb3259c6"
 
 [extensions]
 CairoMakieExt = "CairoMakie"
+ClimaAnalysisInteractiveExt = "Bonito"
 GeoMakieExt = "GeoMakie"
 
 [compat]
 Aqua = "0.8"
+Bonito = "3"
 CairoMakie = "0.11.11, 0.12"
 Documenter = "1"
 ExplicitImports = "1.6"
 GeoMakie = "0.6.5, 0.7"
 JuliaFormatter = "1"
 NCDatasets = "0.13.1, 0.14"
 OrderedCollections = "1.3"
+Reexport = "1"
 SafeTestsets = "0.1"
 Statistics = "1"
-Reexport = "1"
 Test = "1"
 julia = "1.9"
 

ext/ClimaAnalysisInteractiveExt.jl

@@ -0,0 +1,74 @@
+using Bonito
+import Bonito: Observables
+using WGLMakie
+
+import ClimaAnalysis
+
+Bonito.browser_display()
+climastyle = Bonito.Asset(joinpath(@__DIR__, "assets", "interactive.css"))
+
+app = App() do
+    path = "../../ClimaAtmos.jl/output/diagnostic_edmfx_aquaplanet"
+    simdir = ClimaAnalysis.SimDir(path)
+    variables = ClimaAnalysis.available_vars(simdir) |> collect
+    vars_menu = Dropdown(variables)
+    # short_name = vars_menu.value.val
+    short_name = "va"
+
+    reductions = ClimaAnalysis.available_reductions(simdir; short_name) |> collect
+    reductions_menu = Dropdown(reductions)
+
+    reduction = reductions_menu.value.val
+    periods = ClimaAnalysis.available_periods(simdir; short_name, reduction) |> collect
+    periods_menu = Dropdown(periods)
+
+    period = periods_menu.value.val
+
+    time_slider = Slider(ClimaAnalysis.times(get(simdir; short_name, reduction, period)))
+
+    v2 = DOM.div(time_slider.value)
+
+    level_slider = Slider(ClimaAnalysis.altitudes(get(simdir; short_name, reduction, period)))
+
+    v3 = DOM.div(level_slider.value)
+
+    fig = CairoMakie.Figure(size=(1200, 760))
+
+    var = get(simdir; short_name, reduction, period)
+
+    var_sliced = ClimaAnalysis.slice(var, time = time_slider.value.val, z = level_slider.value.val)
+
+    fig = Figure(size=(1200, 900))
+
+    level_slice = map(level_slider) do z
+        return ClimaAnalysis.slice(var, time = time_slider.value.val, z = z).data
+    end
+
+    CairoMakie.heatmap(fig[1, 1], level_slice)
+
+    return DOM.div(
+        DOM.div(
+            climastyle,
+            DOM.h2("Output:"),
+            "$path",
+            DOM.h3("Short name"),
+            vars_menu,
+            DOM.h3("Reduction"),
+            reductions_menu,
+            DOM.h3("Period"),
+            periods_menu,
+            DOM.h3("Time"),
+            v2,
+            time_slider,
+            DOM.h3("Altitude"),
+            v3,
+            level_slider;
+            class = "column left",
+        ),
+        DOM.div(fig, class = "column right"),
+        class = "container"
+    )
+end
+
+# server = Server(app, "0.0.0.0", 8080)
+route!(server, "/" => app)

ext/assets/interactive.css

@@ -0,0 +1,12 @@
+.container {
+    display: flex;
+}
+.column {
+    padding: 10px;
+}
+.left {
+    flex: 0 1 20%; /* Flex-grow: 0, Flex-shrink: 1, Flex-basis: 20% */
+}
+.right {
+    flex: 1;
+}