improved UI

frontend/main.js

@@ -2,12 +2,6 @@ import m from "https://esm.sh/mithril@2.2.2"
 import colormap from "https://esm.sh/colormap@2.3.2"
 import {range} from "./util.js";
 
-
-// const second = 1000;
-
-// const canvasWidth = Number.parseFloat(document.querySelector("svg").getAttribute("width"));
-// const canvasHeight = Number.parseFloat(document.querySelector("svg").getAttribute("height"));
-
 function gaussianRandom(mean=0, stdev=1) {
     const u = 1 - Math.random(); // Converting [0,1) to (0,1]
     const v = Math.random();
@@ -45,28 +39,6 @@ function* keyFrames(duration, framePerSeconds){
     }
 }
 
-// const duration = 60;
-// const timeline = anime.timeline({
-//     duration: duration * second,
-//     autoplay: false,
-//     easing: 'linear'});
-//
-// for(let i = 1; i <= 12; i++){
-//     timeline.add({
-//         targets: `#rect-${i}`,
-//         keyframes: Array.from(keyFrames(duration, 30)),
-//       }, 0)
-// }
-
-
-// document.querySelector('#play').onclick = timeline.play;
-// document.querySelector('#pause').onclick = timeline.pause;
-// document.querySelector('#seek').onclick = function(){
-//     const seekVal = Number.parseFloat(second * document.querySelector('#seek-value').value);
-//     timeline.pause();
-//     timeline.seek(seekVal);
-// }
-
 
 function generatePoints(points, frames){
     const lst = [];
@@ -105,7 +77,15 @@ function getCourtLines(){
         m("line", {x1: 600, x2: 600, y1: 0, y2: 450, class: "return-line"})
     ]
 }
+
+
 class WorkingTabs{
+    #datasets =  []
+
+    async oninit(){
+        const url = "/dodgeball-tracker/outputs/index.json"
+        this.#datasets = (await m.request({method: "GET", url: url}))?.index ?? [];
+    }
 
     tabs(){
         return m("div.tabs",
@@ -115,16 +95,14 @@ class WorkingTabs{
     }
 
     info(){
-        const options = [
-            m("option", "one"),
-            m("option", "two"),
-        ]
+        const options = this.#datasets.map(ds => m('option', {value: ds.id}, ds.label));
         return m("div.field",
             m("label.label", "Dataset"),
             m("div.control",
                 m("div.select",
                     m("select", options))));
     }
+
     view(){
         return m("div",
             this.tabs(),