Add ClimaExplorer

This commit adds an interactive viewer for ClimaAnalysis
[skip ci][ci skip]

ClimaExplorer/ClimaExplorer.jl

@@ -0,0 +1,79 @@
+module ClimaExplorer
+
+import ClimaAnalysis
+
+import Bonito:
+    Observable,
+    App,
+    Slider,
+    Dropdown,
+    DOM,
+    Asset,
+    TextField,
+    Card,
+    Grid,
+    Label,
+    Styles,
+    Centered,
+    Button,
+    on
+import CairoMakie
+import GeoMakie
+
+include("layouts.jl")
+
+function _logo_img()
+
+    # TODO: The logo does not resize correctly
+    imstyle = Styles(
+        "display" => :block,
+        "position" => :relative,
+        "width" => "180px",
+        "max-width" => :none, # needs to be set so it's not overwritten by others
+    )
+    img = DOM.a(
+        href = "https://www.github.com/CliMA/ClimaAnalysis.jl",
+        DOM.img(;
+            src = Asset(joinpath("assets", "logo-full.svg")),
+            style = imstyle,
+        ),
+    )
+    return img
+end
+
+
+
+"""
+    BonitoApp(path)
+
+Return a `Bonito` `App` for data at `path`.
+"""
+function BonitoApp(path)
+    app = App(; title = "ClimaExplorer") do
+
+        # Text field to change the path
+        #
+        # TODO: width = 98% is pretty random. We should find a truly responsive with.
+        path_obs = TextField(path, style = Styles("width" => "98%"))
+
+        # Most of the logic is implemented in the layout.jl file. Every time path_obs
+        # change, the body of the web page is redrawn. This allows us to handle invalid
+        # states too.
+        body_layout = map(layout, path_obs)
+
+        img = _logo_img()
+        input_field = Centered(
+            Grid(
+                "Insert the path of your output data and press ENTER",
+                path_obs,
+            ),
+        )
+
+        grid = Grid(Card(input_field), Card(img); columns = "90% 10%")
+
+        return Grid(grid, body_layout)
+    end
+    return app
+end
+
+end

ClimaExplorer/Project.toml

@@ -0,0 +1,14 @@
+name = "ClimaExplorer"
+authors = ["Gabriele Bozzola <[email protected]>"]
+version = "0.0.1"
+
+[deps]
+Bonito = "824d6782-a2ef-11e9-3a09-e5662e0c26f8"
+CairoMakie = "13f3f980-e62b-5c42-98c6-ff1f3baf88f0"
+ClimaAnalysis = "29b5916a-a76c-4e73-9657-3c8fd22e65e6"
+GeoMakie = "db073c08-6b98-4ee5-b6a4-5efafb3259c6"
+
+[compat]
+Bonito = "3"
+ClimaAnalysis = "0.5.5"
+GeoMakie = "0.6.5, 0.7"

ClimaExplorer/README.md

@@ -0,0 +1,10 @@
+<h1 align="center">
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="assets/logo-small-white.svg" width="100px">
+  <source media="(prefers-color-scheme: light)" srcset="assets/logo-small.svg" width="100px">
+  <img alt="Shows the logo of ClimaExplorer, a compass styled with Julia's colors" src="assets/logo-small.svg">
+</picture> <br>
+  ClimaExplorer
+</h1>
+
+`ClimaExplorer` is a tool to explore simulation outputs interactively. Please, refer to the ClimaAnalysis [documentation](https://clima.github.io/ClimaAnalysis.jl/) for more information.

ClimaExplorer/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;
+}

ClimaExplorer/explorer.jl

@@ -0,0 +1,24 @@
+include(joinpath(@__DIR__, "ClimaExplorer.jl"))
+
+import Bonito: route!, wait, Server
+
+path = length(ARGS) >= 1 ? ARGS[1] : "."
+
+# Create server
+IPa = "127.0.0.1"
+port = 8080
+server = Server(IPa, port; proxy_url = "http://localhost:9384")
+
+app = ClimaExplorer.BonitoApp(path)
+
+route!(server, "/" => app)
+println(server)
+wait(server)
+
+# connect to calhpc via
+# ssh -L 9384:localhost:8080 calhpc
+# (assuming calphc is configured as [USER]@[SSH_SERVER]
+
+# run this script
+# app will be on http://localhost:9384/atmos
+# on the Caltech network