implement two column scrollable layout

0ef0be8d · Florian Atteneder · 1fcbabf3 · 0ef0be8d · 0ef0be8d · 0ef0be8d
Commit 0ef0be8d authored 3 years ago by Florian Atteneder
--- a/Project.toml
+++ b/Project.toml
@@ -4,9 +4,11 @@ authors = ["Florian Atteneder <florian.atteneder@gmail.com>"]
 version = "0.1.0"

 [deps]
+CommonMark = "a80b9123-70ca-4bc0-993e-6e3bcb318db6"
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
 Genie = "c43c736e-a2d1-11e8-161f-af95117fbd1e"
 Glob = "c27321d9-0574-5035-807b-f59d2c89b15c"
+HTTP = "cd3eb016-35fb-5094-929b-558a96fad6f3"
 Inflector = "6d011eab-0732-4556-8808-e463c76bf3b6"
 Logging = "56ddb016-857b-54e1-b83d-db4d58db5568"
 LoggingExtras = "e6f89c97-d47a-5376-807f-9c37f3926c36"

--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ $ julia --project -e "using Pkg; Pkg.instantiate()"

 # Setup

-To access data from somewhere else on the disk we use a symlink located `public/data`
+To access data from somewhere else on the disk we use a symlink located `public/experiments`
 that points to the files, e.g.
 ```sh
 $ ln -s <path/to/rootdir> public/data

--- a/routes.jl
+++ b/routes.jl
 using Genie, Genie.Router, Genie.Renderer.Html, Genie.Requests
 using Stipple, StippleUI
+using HTTP
 using Glob
 using Markdown
+using CommonMark
 using TOML
+using dg1d
 import Base: Filesystem


@@ -38,13 +41,13 @@ function widdest_keyset(dics)
 end


-function fill_missing!(dic, keyset)
+function fill_missing!(dict, keyset)
  for k in keyset
-    if !(haskey(dic, k))
-      dic[k] = missing
+    if !(haskey(dict, k))
+      dict[k] = missing
    end
  end
-  dic
+  dict
 end


@@ -94,7 +97,6 @@ function html_slideshow(paths)
    p = p[10:end]
    push!(divs,
    """
-    <link rel="stylesheet" href="slideshow.css">
    <script src="slideshow.js">
    </script>
    <div class="mySlides">
@@ -105,6 +107,7 @@ function html_slideshow(paths)
  end
  html = """
  <div class="slideshow-container">
+  <link rel="stylesheet" href="slideshow.css">
  $(join(divs, "\n"))
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
@@ -113,6 +116,97 @@ function html_slideshow(paths)
 end


+function html_twocolumn_scrollable(header, table, filenames_plots)
+
+  parser = Parser()
+  enable!(parser, TableRule())
+  html_table = CommonMark.html(parser(table))
+
+  html_plots = []
+  for filename in filenames_plots
+    !isfile(filename) && @warn "Path '$filename' is not a file"
+    push!(html_plots, """<img src="http://localhost:8000/$(filename[10:end])" style="width:100%">""")
+  end
+  html_plots = join(html_plots, "\n")
+  
+  html_site = """
+<!DOCTYPE html>
+<html>
+<style>
+.prev, .next {
+  cursor: pointer;
+  position: absolute;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  border-radius: 10px 10px 10px 10px;
+  user-select: none;
+  background-color: rgba(0,0,0,0.8);
+}
+
+.next {
+  right: 10%;
+}
+
+.prev {
+  left: 10%;
+}
+
+</style>
+<body style="margin: 0; overflow: hidden">
+  <div style="display: flex; flex-direction: column; height: 100vh">
+    <div style="background-color: blue; 
+                color: white; 
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                align-items: center;">
+
+    $(header)
+
+    </div>
+    <div style="display: flex; flex-direction: row; overflow: hidden">
+      <div style="display: flex; flex-grow: 1; flex-basis: 50%; flex-direction: column; overflow-y: auto">
+
+        <!-- table content goes here -->
+
+        $(html_table)
+
+      </div>
+      <div style=" overflow-y: auto; display: flex; flex-basis: 50%; flex-direction: column;">
+
+        <!-- plot content goes here -->
+
+        $(html_plots...)
+
+      </div>
+    </div>
+  </div>
+</body>
+</html>
+"""
+
+  return html_site
+end
+
+
+function to_markdown_table(dict::FlatDict)
+  divider = [ "---" for _ in 1:length(dict) ]
+  md = """
+  | Parameter | Value |
+  |---        |---    |
+  """
+  row_template(k, v) = "| $(k) | $(v) |\n"
+  ks, vs = collect(keys(dict)), collect(values(dict))
+  sort_indices = sortperm(ks)
+  ks, vs = ks[sort_indices], vs[sort_indices]
+  for (key, value) in zip(ks, vs)
+    md *= row_template(key, value)
+  end
+  return md
+end
+
+
 route("/plots") do
  rootdir = "./public/data/test_advection"
  @assert isdir(rootdir) "Rootdir '$rootdir' not found!"
@@ -124,4 +218,51 @@ route("/plots") do
 end


+function generate_html_sites(id, rootdir)
+
+  rootdir = "./public/experiments/advection_sine"
+  @assert isdir(rootdir) "Experiments directory '$rootdir' not found!"
+  outputdirs = gather_outputdirs(rootdir)
+  filenames_plots = []
+  all_ids = Int64[]
+  for dir in outputdirs
+    this_id = match(r"_(\d)+$", dir)
+    isnothing(this_id) && continue
+    push!(all_ids, parse(Int64, first(this_id.captures)))
+    files = glob("$dir/*.png")
+    push!(filenames_plots, files)
+  end
+  display(filenames_plots)
+
+  header_template(_id, text) = """
+  <a class="prev" href="http://localhost:8000/table-plots/$(_id-1)">&#10094;</a>
+  $text
+  <a class="next" href="http://localhost:8000/table-plots/$(_id+1)">&#10095;</a>
+  """
+  
+  table        = gather_parameters(rootdir)
+  parameters   = [ dg1d.to_dict(FlatDict, row) for row in eachrow(table) ]
+  html_tables  = [ to_markdown_table(p) for p in parameters ]
+  html_headers = [ header_template(id, basename(dir)) for dir in outputdirs ]
+  html_sites   = [ html_twocolumn_scrollable(header, tbl, plts)
+                 for (header, tbl,plts) in zip(html_headers, html_tables, filenames_plots) ]
+  return html_sites
+end
+
+
+route("/startpage") do
+  link = linkto(:table_plots, sim_id=1)
+  localhost_link = "http://localhost:8000$link"
+  return HTTP.request("GET", localhost_link)
+end
+
+
+route("/table-plots/:sim_id", named=:table_plots) do
+  sim_id = parse(Int64, payload(:sim_id))
+  rootdir = "./public/experiments/advection_sine"
+  html_sites = generate_html_sites(sim_id, rootdir)
+  return html_sites[sim_id]
+end
+
+
 up()