Fix inflight loader.

lnsp · Nov 26, 2023 · 9747135 · 9747135
1 parent 95dc4e9
commit 9747135
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/trace_explorer/web-templates/compare.html b/trace_explorer/web-templates/compare.html
@@ -25,6 +25,7 @@
     }
   }
   async function updateComparisonView($data) {
+    $data.inflight = true;
     try {
       let response = await $.ajax('/compare', {
         data: JSON.stringify({
@@ -55,6 +56,8 @@
       $data.selectedPlot = 0;
     } catch (e) {
       showErrorModal(e);
+    } finally {
+      $data.inflight = false;
     }
   }
   async function copyToClipboard() {
@@ -166,13 +169,13 @@
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="2"
-                 x-show="inflight">
+                 x-show="!$data.inflight">
               <path stroke-linecap="round"
                     stroke-linejoin="round"
                     d="M14 5l7 7m0 0l-7 7m7-7H3" />
             </svg>
-            <svg x-show="inflight"
-                 class="animate-spin h-5 w-5 text-white hidden"
+            <svg x-show="$data.inflight"
+                 class="animate-spin h-5 w-5 text-white"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24">

diff --git a/trace_explorer/web-templates/layout.html b/trace_explorer/web-templates/layout.html
@@ -57,18 +57,13 @@
     }
   </script>
   <div class="min-h-screen max-h-screen flex relative max-w-screen relative">
-    <div class="p-4 h-screen bg-black text-gray-100 w-40 shrink-0">
+    <div class="py-4 px-8 h-screen bg-black text-gray-100 w-60 shrink-0">
       <div class="text-2xl font-medium py-2">Trace<br>Explorer</div>
       <div class="py-2">
-        <ul class="flex flex-col gap-4 text-lg text-gray-400">
-          <li><a class="border-b-2 border-transparent hover:border-gray-100 {% if active == 'convert' %}text-gray-100{% endif %}"
-               href="/convert">Convert</a></li>
-          <li><a class="border-b-2 border-transparent hover:border-gray-100 {% if active == 'preprocess' %}text-gray-100{% endif %}"
-               href="/preprocess">Preprocess</a></li>
-          <li><a class="border-b-2 border-transparent hover:border-gray-100 {% if active == 'visualize' %}text-gray-100{% endif %}"
-               href="/visualize">Visualize</a></li>
-          <li><a class="border-b-2 border-transparent hover:border-gray-100 {% if active == 'compare' %}text-gray-100{% endif %}"
-               href="/compare">Compare</a></li>
+        <ul class="flex flex-col gap-4 text-lg">
+          {% for link in ['Convert', 'Preprocess', 'Visualize', 'Compare'] %}
+            {% include 'sidebar_link.html' %}
+          {% endfor %}
         </ul>
       </div>
     </div>

diff --git a/trace_explorer/web-templates/sidebar_link.html b/trace_explorer/web-templates/sidebar_link.html
@@ -0,0 +1,4 @@
+<li>
+    <a class="before:content-['➜'] before:text-sm before:absolute flex items-center relative before:-left-4 hover:before:opacity-100 {% if active == link.lower() %}text-gray-100 before:opacity-100 {% else %}text-gray-400 before:opacity-0{% endif %}"
+       href="/{{ link|lower }}">{{ link }}</a>
+</li>