Modernise UI with bootstrap

This refactors some of the internal code and makes a variety of UI tweaks:

* Tabs now use Bootstrap (added a dependency on popper.js)
* The layout has been condensed
* A new "Meta" tab shows metadata that is not relevant for every view
* Heap profiling tabs are combined into a single dropdown
* Tabs appear even if the underlying data is not available, with an
    explanation how to get the data (some of these explanations need work)
* Tabs can have documentation associated with them; so far this exists
    partially for the "Heap" tab
* When using -hi profiling, the main heap profile charts show the info table
    name (if available) in addition to the pointer
* Ticky data is displayed in a separate tab (if available), alongside the
    other tabs, rather than being a separate mode

Unrelated, CI uploads site artefacts, so that we can review them
manually.

.github/workflows/build.yaml

@@ -51,6 +51,11 @@ jobs:
     - run: cp -r site/* build-folder
     - run: find build-folder -type d -exec chmod 755 {} \;
     - run: find build-folder -type f -exec chmod 644 {} \;
+    - name: Upload GH Pages site
+      uses: actions/upload-artifact@v1
+      with:
+        name: gh-pages-site
+        path: build-folder
     - name: Deploy to GitHub Pages
       if: github.event_name == 'release'
       uses: JamesIves/github-pages-deploy-action@releases/v3

eventlog2html.cabal

@@ -28,6 +28,8 @@ Extra-source-files:
   javascript/generated/vega-embed@6.14.0
   javascript/generated/vega@5.17.0
   javascript/generated/vega-lite@4.17.0
+  javascript/generated/popper.js@1.14.3
+  inline-docs/*.html
 extra-doc-files: README.md
                  CHANGELOG
 Tested-With:         GHC ==9.0.2, GHC ==9.2.7, GHC ==9.4.7, GHC ==9.6.2
@@ -74,6 +76,8 @@ Library
                        Eventlog.HeapProf
                        Eventlog.Vega
                        Eventlog.HtmlTemplate
+                       Eventlog.Rendering.Bootstrap
+                       Eventlog.Rendering.Types
                        Eventlog.VegaTemplate
                        Eventlog.AssetVersions
                        Eventlog.Detailed

hakyll-eventlog/site.hs

@@ -19,6 +19,7 @@ import           Eventlog.Data
 import           Eventlog.Args
 import           Eventlog.VegaTemplate
 import           Eventlog.HtmlTemplate
+import           Eventlog.Rendering.Types
 import           Eventlog.Ticky
 import           Text.Blaze.Html.Renderer.Text
 import           Options.Applicative
@@ -109,18 +110,18 @@ eventlogSnippet :: IORef Int -> [T.Text] -> ChartConfig -> IO T.Text
 eventlogSnippet c as conf = do
    n <- readIORef c
    modifyIORef c (+1)
-   drawEventlog as n conf
+   drawEventlog as (mkTabID (show n)) conf
 
-drawEventlog :: [T.Text] -> Int -> ChartConfig -> IO T.Text
+drawEventlog :: [T.Text] -> TabID -> ChartConfig -> IO T.Text
 drawEventlog args vid conf  = do
   let final_args = ["--no-include-js"] ++ args
   Run as <- handleParseResult (execParserPure defaultPrefs argsInfo (map T.unpack final_args))
   ty <- generateJson (head $ files as) as
-  return $ case ty of
-    HeapProfile (_, dat, _, _) ->
+  return $ case eventlogHeapProfile ty of
+    Just (HeapProfileData dat _ _) ->
       let itd = if traces conf then TraceData else NoTraceData
       in TL.toStrict $ renderHtml $ renderChartWithJson itd (chartType conf) vid dat (vegaJsonText conf)
-    TickyProfile {} -> mempty
+    Nothing -> mempty
 
 def :: ChartConfig
 def = ChartConfig 600 500 True "category20" "set1" (AreaChart Stacked) Nothing
@@ -167,9 +168,4 @@ fullEventLogPage file = do
   Run as <- handleParseResult (execParserPure defaultPrefs argsInfo
           [file, "--no-include-js", "--include-trace-events", "--limit-detailed=100"])
   ty <- generateJson file as
-  case ty of
-    HeapProfile (header, data_json, descs, closure_descs) ->
-      return $ templateString header data_json descs closure_descs as
-    TickyProfile (header, tallocs, ticked_per, dat) ->
-      return $ tickyTemplateString header tallocs ticked_per dat as
-
+  return $ templateString ty as

inline-docs/heap.html

@@ -0,0 +1,31 @@
+<dl>
+  <dt style="color: red">Heap Size</dt>
+  <dd>Total size of <emph>megablocks</emph> allocated by the RTS</dd>
+  <dt style="color: blue">Blocks Size</dt>
+  <dd>Total size of <emph>blocks</emph> allocated by the RTS</dd>
+  <dt style="color: green">Live bytes</dt>
+  <dd>Total size of objects live on the heap (should match top of area pane)</dd>
+</dl>
+
+<p>Process memory usage (as reported by the OS) should correspond roughly to the <span style="color: red">heap size</span>,
+except for data allocated through the FFI (and the RTS also calls <tt>malloc()</tt> itself in a few places).
+</p>
+
+<p>
+When heap profiling is enabled, <span style="color: blue">blocks
+size</span> and <span style="color: green">live bytes</span>
+will typically differ by the size of the nursery.
+For understanding the relationship between <span style="color: blue">blocks
+size</span> and <span style="color: green">live bytes</span>,
+this <a href="https://www.well-typed.com/blog/2021/03/memory-return/">blog
+post</a> contains more information.</p>
+
+<p>
+When heap profiling is not enabled, <span style="color: green">live bytes</span> will be updated only on a major GC, but <span style="color: red">heap size</span> and <span style="color: blue">blocks size</span> are updated more frequently. (Enabling heap profiling causes more frequent major GCs to collect heap samples.)
+</p>
+
+<p>
+This view can also be useful in identifying
+fragmentation. A very badly fragmented heap will have low <span style="color: green">live bytes</span> but
+much higher <span style="color: blue">blocks size</span>.
+</p>

inline-docs/no-cost-centres.html

@@ -0,0 +1,3 @@
+<p>
+The cost centres view is available only when executing the program with <tt>+RTS -hc</tt>.
+</p>

inline-docs/no-detailed.html

@@ -0,0 +1,3 @@
+<p>
+No detailed data to display.
+</p>

inline-docs/no-heap-profile.html

@@ -0,0 +1,14 @@
+<p>
+This eventlog was generated without heap profiling.
+</p>
+
+<p>
+To create a heap profile, you need to run the program with one of the <tt>+RTS
+-h...</tt> options.  The <tt>-hT</tt> (closure type) and <tt>-hi</tt> (info
+table) heap profiling options are available for all programs.  If you compile
+with profiling enabled, more options are available.
+</p>
+
+<p>
+See the <a href="https://downloads.haskell.org/ghc/latest/docs/users_guide/profiling.html#profiling-memory-usage">GHC user's guide on profiling memory usage</a> for more information.
+</p>

inline-docs/no-ticky.html

@@ -0,0 +1,3 @@
+<p>
+No ticky data to display.
+</p>

javascript/stylesheet.css

@@ -9,9 +9,7 @@
   background-color: transparent;
   color: black;
 }
-.container { width: 90%;
-           ; max-width: 90%;
-           }
+.container-fluid { padding: 1em 2em; }
 
 /* Reset milligram table styling so tooltips render correctly */
 table, caption, tbody, tfoot, thead, tr, th, td {
@@ -52,3 +50,15 @@ width: 100%;
 .cheader{
   margin-left:10px;
 }
+
+h1 {
+  font-size: 1em;
+}
+
+.not-available {
+  color: grey;
+}
+
+.custom-tab {
+  margin-top: 1em;
+}

javascript/tablogic.js

@@ -1,26 +1,5 @@
-function changeTab(tabName,elmnt) {
-    var i, tabviz,  tablinks;
-
-    // Hide all elements with class="tabviz" by default */
-    tabviz = document.getElementsByClassName("tabviz");
-    for (i = 0; i < tabviz.length; i++) {
-	    tabviz[i].style.display = "none";
-    }
-
-    // Remove the background color of all tablinks/buttons
-    tablinks = document.getElementsByClassName("tablink");
-    for (i = 0; i < tablinks.length; i++) {
-	    tablinks[i].classList.remove('button-outline');
-    }
-
-    // Show the specific tab content
-    document.getElementById(tabName).style.display = "block";
-
-    // Add the specific color to the button used to open the tab content
-    elmnt.classList.add('button-outline');
-    $.sparkline_display_visible()
-
-}
-
-// Get the element with id="defaultOpen" and click on it
-document.getElementById("defaultOpen").click();
+$(document).ready(function () {
+    $("#closures-tab").on("shown.bs.tab", function (e) {
+        $.sparkline_display_visible();
+    });
+});