WIP add experimental virtual scroll workload

suites-experimental/suites.mjs

@@ -271,4 +271,87 @@ export const ExperimentalSuites = freezeSuites([
             }),
         ],
     },
+    {
+        name: "Timeline-Mithril",
+        url: "suites-experimental/timeline/dist/index.html",
+        tags: ["experimental", "timeline", "mithril"],
+        async prepare(page) {
+            await page.waitForElement("#app-container");
+        },
+        tests: [
+            new BenchmarkTestStep("Start", (page) => {
+                const btn = page.querySelector("#btn-explore");
+                if (btn) {
+                    btn.click();
+                    page.layout();
+                }
+            }),
+            new BenchmarkTestStep("SearchTimeline", (page) => {
+                const btn = page.querySelector("#btn-explore");
+                if (btn) {
+                    btn.click();
+                    page.layout();
+                }
+                const searchInput = page.querySelector("input.search-input");
+                if (!searchInput) return;
+                const queries = [
+                    "C", "Co", "Com", "Comp", "Compu", "Comput", "Compute", "Computer", "",
+                    "I", "In", "Int", "Inte", "Intel", "",
+                    "A", "Ap", "App", "Appl", "Apple", "",
+                ];
+                for (let round = 0; round < 4; round++) {
+                    for (const q of queries) {
+                        searchInput.setValue(q);
+                        searchInput.dispatchEvent("input");
+                        page.layout();
+                    }
+                }
+            }),
+            new BenchmarkTestStep("FilterByCategory", (page) => {
+                const btn = page.querySelector("#btn-explore");
+                if (btn) {
+                    btn.click();
+                    page.layout();
+                }
+                const filterPills = page.querySelectorAll(".filter-pill");
+                if (!filterPills || filterPills.length === 0) return;
+                const count = Math.min(filterPills.length, 10);
+                for (let round = 0; round < 18; round++) {
+                    for (let i = 0; i < count; i++) {
+                        filterPills[i].click();
+                        page.layout();
+                    }
+                }
+            }),
+            new BenchmarkTestStep("SwitchLanguage", (page) => {
+                const btn = page.querySelector("#btn-explore");
+                if (btn) {
+                    btn.click();
+                    page.layout();
+                }
+                const langButtons = page.querySelectorAll(".lang-selector button.lang-btn");
+                if (langButtons && langButtons.length > 2) {
+                    for (let round = 0; round < 18; round++) {
+                        langButtons[1].click();
+                        page.layout();
+                        langButtons[2].click();
+                        page.layout();
+                        langButtons[0].click();
+                        page.layout();
+                    }
+                }
+            }),
+            new BenchmarkTestStep("ScrollTimeline", (page) => {
+                const btn = page.querySelector("#btn-explore");
+                if (btn) {
+                    btn.click();
+                    page.layout();
+                }
+                for (let i = 0; i < 2; i++) {
+                    page.call("stepScrollTimeline");
+                    page.layout();
+                }
+            }),
+        ],
+    },
 ]);

suites-experimental/timeline/.gitignore

@@ -0,0 +1,2 @@
+# Compiled TypeScript and generated output files
+src/**/*.js

suites-experimental/timeline/data-generator.js

@@ -0,0 +1,81 @@
+export function generateTimelineData(numEvents = 1000) {
+    const data = [];
+    const categories = ["travel", "schools", "medical", "federal", "public-health"];
+    const severities = ["low", "medium", "high"];
+
+    let currentDate = new Date(2020, 0, 1); // Jan 1, 2020
+
+    for (let i = 0; i < numEvents; i++) {
+        const id = `event-${i}`;
+
+        if (i % 2 === 0)
+            currentDate.setDate(currentDate.getDate() + 1);
+
+        const dateString = currentDate.toISOString().split("T")[0];
+
+        if (i % 50 === 0) {
+            data.push({
+                id,
+                type: "header",
+                date: dateString,
+                title: currentDate.toLocaleDateString("en-US", { month: "long", year: "numeric" }),
+                text: `Phase ${Math.floor(i / 50) + 1} of the pandemic response.`,
+            });
+            continue;
+        }
+
+        if (i % 20 === 0) {
+            data.push({
+                id,
+                type: "milestone",
+                date: dateString,
+                category: "medical",
+                title: `Major Milestone: Phase ${Math.floor(i / 20)}`,
+                text: "Significant progress reported in vaccine development or distribution. National case counts reach new thresholds.",
+                severity: "high",
+            });
+            continue;
+        }
+
+        const category = categories[Math.floor(Math.random() * categories.length)];
+        const severity = severities[Math.floor(Math.random() * severities.length)];
+
+        let title = "";
+        let text = "";
+
+        switch (category) {
+            case "travel":
+                title = "Travel Restriction Imposed";
+                text = "United States imposes travel restrictions on passengers arriving from regions with high infection rates. Screening protocols enhanced at major airports.";
+                break;
+            case "schools":
+                title = "School District Transition";
+                text = "Major school districts announce transition to remote learning models. Educators and parents adapt to online platforms amidst local case spikes.";
+                break;
+            case "medical":
+                title = "Clinical Trial Update";
+                text = "Researchers publish preliminary data on therapeutics. Hospitals report on ICU capacity and PPE supply chains.";
+                break;
+            case "federal":
+                title = "Federal Policy Announcement";
+                text = "Federal agencies issue new guidelines on workplace safety, economic relief packages, or emergency declarations.";
+                break;
+            case "public-health":
+                title = "Public Health Advisory";
+                text = "CDC updates recommendations on mask-wearing, social distancing, and testing availability. Local officials issue stay-at-home warnings.";
+                break;
+        }
+
+        data.push({
+            id,
+            type: "event",
+            date: dateString,
+            category,
+            title: `${title} (${i})`,
+            text: `${text} Cumulative impact is assessed by local health departments.`,
+            severity,
+        });
+    }
+
+    return data;
+}

suites-experimental/timeline/dist/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Geschichte des Computers (1900 - 2026)</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
+
+      <script type="module" crossorigin src="./assets/index.js"></script>
+      <link rel="stylesheet" href="./assets/index.css">
+    </head>
+    <body>
+        <div id="app"></div>
+
+    </body>
+</html>