Use HTMX to lazy-load episode steps

mixtape/core/templates/core/base.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
     <script src="//unpkg.com/alpinejs" defer></script>
+    <script src="https://unpkg.com/htmx.org@2"></script>
     <title>{% block title %}MIXTAPE{% endblock %}</title>
     <style>
       [x-cloak] {

mixtape/core/templates/core/insights.html

@@ -3,47 +3,20 @@
 {% block title %}Inference Results{% endblock %}
 
 {% block content %}
-<div x-data="{ currentStep: 0 }">
+<div>
   <h1 class="text-center text-2xl font-bold">Episode #{{ episode.pk }}</h1>
-  {% for step in steps %}
-  <div
-    x-cloak
-    x-show="currentStep === {{ forloop.counter0 }}"
-    class="flex items-start gap-5 text-center h-[90vh]"
-  >
-    <div class="content-center w-1/2 h-full min-h-full">
-      <img class="max-w-full h-auto" src="{{ step.image.url }}" alt="Step Image">
-    </div>
-    <div class="border border-gray-300 p-2 w-1/2 m-auto max-h-[80vh] overflow-y-scroll">
-      <p class="text-xl font-bold">Step {{ step.number }}</p>
-      {% for agent_step in step.agent_steps.all %}
-        <div>
-          <p class="flex justify-evenly">
-            <span><strong>Agent:</strong> {{ agent_step.agent }}</span>
-            <span><strong>Action:</strong> {{ agent_step.action }}</span>
-            <span><strong>Reward:</strong> {{ agent_step.reward }}</span>
-          </p>
-          <p><strong>Observation Space</strong></p>
-          <p>
-            <pre class="bg-gray-100 p-3 rounded-md font-mono whitespace-pre text-justify text-sm">{{ agent_step.observation_space|pprint }}</pre>
-          </p>
-          <hr>
-        </div>
-      {% empty %}
-        <p>End of episode</p>
-      {% endfor %}
-    </div>
-  </div>
-  {% endfor %}
+  <div id="step" class="h-[90vh]"></div>
   <div>
     <input
       type="range"
-      id="stepsRange"
       min="0"
-      max="{{ steps|length|add:'-1' }}"
+      max="{{ episode.step_count|add:'-1' }}"
       value="0"
       class="w-full"
-      x-model.number="currentStep"
+      hx-trigger="load,input"
+      hx-get="{% url 'insights-step' episode.pk %}"
+      name="step_number"
+      hx-target="#step"
     >
   </div>
 </div>

mixtape/core/templates/core/insights_step.html

@@ -0,0 +1,24 @@
+<div class="flex items-start gap-5 text-center h-full">
+  <div class="content-center w-1/2 h-full min-h-full">
+    <img class="max-w-full h-auto" src="{{ step.image.url }}" alt="Step Image">
+  </div>
+  <div class="border border-gray-300 p-2 w-1/2 m-auto max-h-[80vh] overflow-y-scroll">
+    <p class="text-xl font-bold">Step {{ step.number }}</p>
+    {% for agent_step in step.agent_steps.all %}
+      <div>
+        <p class="flex justify-evenly">
+          <span><strong>Agent:</strong> {{ agent_step.agent }}</span>
+          <span><strong>Action:</strong> {{ agent_step.action }}</span>
+          <span><strong>Reward:</strong> {{ agent_step.reward }}</span>
+        </p>
+        <p><strong>Observation Space</strong></p>
+        <p>
+          <pre class="bg-gray-100 p-3 rounded-md font-mono whitespace-pre text-justify text-sm">{{ agent_step.observation_space|pprint }}</pre>
+        </p>
+        <hr>
+      </div>
+    {% empty %}
+      <p>End of episode</p>
+    {% endfor %}
+  </div>
+</div>

mixtape/core/views.py

@@ -1,3 +1,4 @@
+from django.db.models import Max
 from django.http import HttpRequest, HttpResponse
 from django.shortcuts import get_object_or_404, render
 
@@ -6,9 +7,18 @@
 
 
 def insights(request: HttpRequest, episode_pk: int) -> HttpResponse:
-    episode = get_object_or_404(Episode, pk=episode_pk)
-    steps = Step.objects.prefetch_related('agent_steps').filter(episode=episode_pk)
-    return render(request, 'core/insights.html', {'episode': episode, 'steps': steps})
+    episode = get_object_or_404(
+        Episode.objects.annotate(step_count=Max('steps__number')), pk=episode_pk
+    )
+    return render(request, 'core/insights.html', {'episode': episode})
+
+
+def insights_step(request: HttpRequest, episode_pk: int) -> HttpResponse:
+    step_number = request.GET.get('step_number')
+    step = get_object_or_404(
+        Step.objects.prefetch_related('agent_steps'), episode=episode_pk, number=step_number
+    )
+    return render(request, 'core/insights_step.html', {'step': step})
 
 
 def home_page(request: HttpRequest) -> HttpResponse:

mixtape/urls.py

@@ -25,6 +25,7 @@
     path('api/docs/swagger/', schema_view.with_ui('swagger'), name='docs-swagger'),
     path('', views.home_page, name='home'),
     path('insights/<int:episode_pk>/', views.insights, name='insights'),
+    path('insights/<int:episode_pk>/step/', views.insights_step, name='insights-step'),
 ]
 
 if settings.DEBUG: