Style graph

src/server/web/pages/graph.rs

@@ -28,18 +28,23 @@ use self::util::MetricFolder;
     source = "
 {% match self %}
   {% when MetricTree::File with { name, metric } %}
-    <label>
-      <input type=\"checkbox\" name=\"{{ metric }}\">
-      {{ name }}
-    </label>
+    <label><input type=\"checkbox\" name=\"{{ metric }}\"> {{ name }}</label>
   {% when MetricTree::Folder with { name, metric, children } %}
-    {% if let Some(metric) = metric %}
-      <input type=\"checkbox\" name=\"{{ metric }}\">
+    {% if children.trees.is_empty() %}
+      {% if let Some(metric) = metric %}
+        <label><input type=\"checkbox\" name=\"{{ metric }}\"> {{ name }}/</label>
+      {% endif %}
+    {% else if let Some(metric) = metric %}
+      <details>
+        <summary><input type=\"checkbox\" name=\"{{ metric }}\"> {{ name }}/</summary>
+        {{ children|safe }}
+      </details>
+    {% else %}
+      <details class=\"no-metric\">
+        <summary>{{ name }}/</summary>
+        {{ children|safe }}
+      </details>
     {% endif %}
-    <details>
-      <summary>{{ name }}/</summary>
-      {{ children|safe }}
-    </details>
 {% endmatch %}
 "
 )]

static/base.css

@@ -1,7 +1,9 @@
 * {
     font-family: monospace;
+    font-size: inherit;
     margin: 0;
     padding: 0;
+    box-sizing: border-box;
 }
 
 body {
@@ -31,7 +33,6 @@ a:hover {
 }
 
 button {
-    font-size: inherit;
     padding: 0 .5ch;
 }
 
@@ -51,16 +52,17 @@ details {
 details>summary {
     font-weight: bold;
     cursor: pointer;
-    list-style-type: "> ";
+    list-style: "> " inside;
 }
 
 details[open]>summary {
-    list-style-type: "v ";
+    list-style: "v " inside;
 }
 
 ul,
 ol {
-    list-style-type: "- ";
+    list-style: "- " outside;
+    margin-left: 2ch;
 }
 
 dl {
@@ -151,12 +153,62 @@ nav a:hover {
     color: #a33;
 }
 
-/* Refs */
+/* Index */
 
 .refs-list dl {
     margin-bottom: 0;
 }
 
+/* Graph */
+
+.graph-container {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: flex-start;
+}
+
+.graph-container #plot {
+    margin-right: 1em;
+    margin-bottom: 1em;
+    box-shadow: 0 0 .5em black;
+}
+
+.graph-container #metrics {
+    flex: 0 50ch;
+    box-shadow: 0 0 .5em black;
+}
+
+.metrics-list {
+    background-color: #ddd;
+    padding: .3em 1ch;
+}
+
+.metrics-list * {
+    margin: 0;
+    padding: 0;
+    background-color: unset;
+    list-style: none;
+}
+
+.metrics-list details[open]>summary {
+    list-style: none;
+}
+
+.metrics-list input[type="checkbox"] {
+    width: 2ch;
+}
+
+.metrics-list details.no-metric>summary {
+    list-style: "-> " outside;
+    margin-left: 3ch;
+}
+
+.metrics-list summary~* {
+    border-left: .1ch solid black;
+    margin-left: .9ch;
+    padding-left: 1ch;
+}
+
 /* Queue */
 
 .queue-commits form {

templates/pages/graph.html

@@ -7,34 +7,15 @@
 <script type="module" src="{{ link_graph_js }}"></script>
 {% endblock %}
 
-{# {% macro metric_tree(tree) %}
-{% match tree %}
-{% when File with { name, metric } %}
-<label><input type="checkbox" name="{{ metric }}"> {{ name }}</label>
-{% when Folder with { name, metric, children } %}
-<details>
-    <summary>{{ name }}/</summary>
-    {% call metric_forest(children) %}
-</details>
-{% endmatch %}
-{% endmacro %}
-
-{% macro metric_forest(trees) %}
-<ul>
-    {% for tree in forest %}
-    {% call metric_tree(tree) %}
-    {% endfor %}
-</ul>
-{% endmacro %} #}
-
 {% block body %}
 
 <h2>Graph</h2>
 
-<div id="plot"></div>
-
-<div id="metrics">
-    {{ metrics|safe }}
+<div class="graph-container">
+    <div id="plot"></div>
+    <div id="metrics" class="metrics-list">
+        {{ metrics|safe }}
+    </div>
 </div>
 
 {% endblock %}