diff --git a/report.go b/report.go
index 7752c9c..6a1064e 100644
--- a/report.go
+++ b/report.go
@@ -3,6 +3,7 @@ package main
 import (
 	"context"
 	_ "embed"
+	"encoding/json"
 	"errors"
 	"io"
 	"slices"
@@ -27,20 +28,13 @@ func ReportSince(ctx context.Context, w io.Writer, s Storage, t time.Time) error
 			}
 			return nil, errors.New("not impl")
 		},
-		"null": func() any {
-			return nil
-		},
-		"append": func(arr any, v any) (any, error) {
-			if v == nil {
-				return arr, nil
+		"json": func(foo string, args ...any) (any, error) {
+			switch foo {
+			case "Marshal":
+				b, err := json.Marshal(args[0])
+				return string(b), err
 			}
-			switch arr := arr.(type) {
-			case []any:
-				return append(arr, v), nil
-			case nil:
-				return []any{v}, nil
-			}
-			return nil, errors.New("unknown type in append")
+			return nil, errors.New("not impl")
 		},
 	})
 	tmpl, err := tmpl.Parse(reportTMPL)
diff --git a/report.tmpl b/report.tmpl
index e0524cb..e6b2d8d 100644
--- a/report.tmpl
+++ b/report.tmpl
@@ -1,11 +1,52 @@
 <!DOCTYPE html>
 <html>
-  <header>
+  <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
     <script type="module">
       import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
     </script>
+    <script>
+      const allMessages = {{ json "Marshal" .messages }};
+      console.log(allMessages);
+
+      function fillForm() {
+        const filterableFields = [
+          "EventName",
+          "Asset",
+        ];
+        const fieldsToOptions = {};
+        filterableFields.map((field) => {fieldsToOptions[field] = {}});
+        allMessages.map((message) => {
+          Object.keys(fieldsToOptions).map((field) => {fieldsToOptions[field][message[field]] = true});
+        });
+        Object.keys(fieldsToOptions).map((field) => {fieldsToOptions[field] = Object.keys(fieldsToOptions[field])});
+
+        document.getElementById("form").innerHTML = Object.keys(fieldsToOptions).map((field) => {
+        }).join("");
+
+        console.log(fieldsToOptions);
+        `
+          <select name="filter1" multiple>
+            <option selected>a</option>
+            <option selected>b</option>
+          </select>
+        `
+      }
+      function drawAll() {
+         const messages = filterMessages(allMessages)
+         drawEventVolumeByName(messages)
+         drawEventVolumeByWeekday(messages)
+         drawEventVolumeByHour(messages)
+         drawEventVolumeByAsset(messages)
+      }
+      function filterMessages(messages) {
+      }
+      function drawEventVolumeByName() {}
+      function drawEventVolumeByWeekday() {}
+      function drawEventVolumeByHour() {}
+      function drawEventVolumeByAsset() {}
+    </script>
     <style>
       rows {
         display: flex;
@@ -19,14 +60,12 @@
       }
       rows, columns { border: 1px solid red; }
     </style>
-  </header>
-  <body>
+  </head>
+  <body onload="fillForm()">
     <h1>Report</h1>
     <columns>
-      <div style="width: 10em; flex-shrink: 0;">
-        <columns>filter1</columns>
-        <columns>filter2</columns>
-      </div>
+      <form id="form" style="width: 10em; flex-shrink: 0;" onchange="drawAll()">
+      </form>
       <rows>
         <rows>
           <rows>
@@ -35,7 +74,7 @@
           </rows>
           <columns>
             <rows>
-              <h3>by Day</h3>
+              <h3>by Weekday</h3>
               <div>DRAW ME</div>
             </rows>
             <rows>
