event timing

reactive-python · Jul 15, 2023 · bdbe9f0 · bdbe9f0
1 parent 690fbda
commit bdbe9f0
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 2 deletions.
diff --git a/tests/test_app/performance/components.py b/tests/test_app/performance/components.py
@@ -92,3 +92,24 @@ async def event_handler(event):
             }
         ),
     )
+
+
+@component
+def event_timing(worker_num: int):
+    clicked, set_clicked = hooks.use_state(False)
+
+    async def event_handler(_event):
+        set_clicked(True)
+
+    return html.div(
+        html.input(
+            {
+                "class_name": "et",
+                "data-clicked": clicked,
+                "data-worker-num": worker_num,
+                "value": f"Clicked: {clicked}",
+                "type": "button",
+                "on_click": event_handler,
+            },
+        ),
+    )
diff --git a/tests/test_app/performance/urls.py b/tests/test_app/performance/urls.py
@@ -2,6 +2,7 @@
 
 from .views import (
     event_renders_per_second,
+    event_timing,
     mixed_time_to_load,
     net_io_time_to_load,
     renders_per_second,
@@ -20,4 +21,6 @@
     path("ttl/<int:count>", time_to_load),
     path("erps/", event_renders_per_second),
     path("erps/<int:count>", event_renders_per_second),
+    path("et/", event_timing),
+    path("et/<int:count>", event_timing),
 ]
diff --git a/tests/test_app/performance/views.py b/tests/test_app/performance/views.py
@@ -39,3 +39,11 @@ def event_renders_per_second(request, count: int = 1):
         "events_renders_per_second.html",
         {"count": range(max(count, 1))},
     )
+
+
+def event_timing(request, count: int = 1):
+    return render(
+        request,
+        "event_timing.html",
+        {"count": range(max(count, 1))},
+    )
diff --git a/tests/test_app/templates/event_timing.html b/tests/test_app/templates/event_timing.html
@@ -0,0 +1,88 @@
+{% load static %} {% load reactpy %}
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
+    <title>ReactPy</title>
+</head>
+
+<body>
+    <h1>ReactPy Event Timing Test Page</h1>
+
+    <b>
+        <p>Total Active Components: <b id="total-active"></b></p>
+        <p>Time To Load: <b id="time-to-load" data-num=0></b></p>
+        <p>Total Clicked Components: <b id="total-clicked"></b></p>
+        <p>Total Responses: <b id="total-responses"></b></p>
+        <p>Average Event Timing: <b id="avg-et"></b></p>
+    </b>
+
+    <script>
+        const start = new Date();
+        let workerStartTimes = {};
+        let workerEndTimes = {};
+        async function calculateEventTiming() {
+            while (true) {
+                let elements = document.getElementsByClassName("et");
+
+                // Calculate Total Active
+                document.getElementById("total-active").textContent = elements.length;
+
+                // Calculate TTL
+                if (document.getElementById("time-to-load").getAttribute("data-num") != elements.length) {
+                    let timeToLoad = new Date() - start;
+                    document.getElementById("time-to-load").textContent = timeToLoad + " ms";
+                    document.getElementById("time-to-load").setAttribute("data-num", elements.length);
+                }
+
+                // Click on the `.et` elements that have the data attribute `data-clicked="false"`
+                // Store the start and end time for each `data-worker-num` in memory.
+                for (let i = 0; i < elements.length; i++) {
+                    let element = elements[i];
+                    let workerNum = element.getAttribute("data-worker-num");
+                    let clicked = element.getAttribute("data-clicked");
+                    // Check if we haven't stored the start time yet
+                    if (clicked != "true" && !workerStartTimes[workerNum]) {
+                        element.click();
+                        workerStartTimes[workerNum] = new Date();
+                    }
+                    // Check if we haven't stored the end time yet
+                    if (clicked == "true" && !workerEndTimes[workerNum]) {
+                        workerEndTimes[workerNum] = new Date();
+                    }
+                }
+                // Calculate the average time per button it takes for all buttons to have the attribute `data-clicked="true"`
+                // Store this result in `#avg-et`
+                let total = 0;
+                let count = 0;
+                for (const worker in Object.keys(workerStartTimes)) {
+                    if (workerEndTimes[worker]) {
+                        total += workerEndTimes[worker] - workerStartTimes[worker];
+                        count++;
+                    }
+                }
+                let avg = total / count;
+                document.getElementById("total-clicked").textContent = Object.keys(workerStartTimes).length;
+                document.getElementById("total-responses").textContent = Object.keys(workerEndTimes).length;
+                document.getElementById("avg-et").textContent = avg + " ms";
+
+
+                await new Promise((resolve) => setTimeout(resolve, 50));
+            }
+        }
+        calculateEventTiming();        
+    </script>
+
+    <hr>
+    {% for x in count %}
+    <b>Worker {{x}}</b>
+    {% component "test_app.performance.components.event_timing" worker_num=x %}
+    <hr>
+    {% endfor %}
+</body>
+
+</html>
diff --git a/tests/test_app/templates/events_renders_per_second.html b/tests/test_app/templates/events_renders_per_second.html
@@ -22,7 +22,7 @@ <h1>ReactPy Event Driven Renders Per Second Test Page</h1>
 
     <script>
         const start = new Date();
-        async function calculateEPS() {
+        async function calculateERPS() {
             while (true) {
                 let elements = document.getElementsByClassName("erps");
 
@@ -56,7 +56,7 @@ <h1>ReactPy Event Driven Renders Per Second Test Page</h1>
                 await new Promise((resolve) => setTimeout(resolve, 50));
             }
         }
-        calculateEPS();
+        calculateERPS();
     </script>
 
     <hr>