Add ClimaExplorer

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

ClimaExplorer/ClimaExplorer.jl

@@ -0,0 +1,75 @@
+module ClimaExplorer
+
+import ClimaAnalysis
+import Bonito
+import Bonito:
+    Observable,
+    App,
+    Slider,
+    Dropdown,
+    DOM,
+    Server,
+    route!,
+    wait,
+    Asset,
+    TextField,
+    Card,
+    Grid,
+    Label,
+    Styles,
+    Centered,
+    Button,
+    on
+import CairoMakie
+import GeoMakie
+
+include("layouts.jl")
+
+function BonitoApp(path)
+    app = App(; title = "ClimaExplorer") do
+        path_obs = TextField(path, style = Styles("width" => "98%"))
+        body_layout = map(layout, path_obs)
+
+        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,
+            ),
+        )
+        style = Styles(
+            "position" => :relative,
+            "display" => :flex,
+            "justify-content" => :center,
+            "align-items" => :center,
+        )
+
+        input_field = Centered(
+            Grid(
+                "Insert the path of your output data and press ENTER",
+                path_obs,
+            ),
+        )
+
+        grid = Grid(
+            Card(input_field; style = style),
+            Card(img; style = style);
+            columns = "90% 10%",
+        )
+        container = DOM.div(grid)
+        Grid(container; rows = "1fr", justify_content = "center")
+
+        top_row = Grid(input_field, 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,8 @@
+<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/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"))
+
+path = length(ARGS) >= 1 ? ARGS[1] : "."
+
+import Bonito: route!, wait, Server
+
+# 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