Move Visualize over to Alpine.js & add per-cluster inspection.

lnsp · Nov 30, 2023 · f5c9f49 · f5c9f49
1 parent 09b3fa5
commit f5c9f49
Show file tree

Hide file tree

Showing 4 changed files with 359 additions and 279 deletions.
diff --git a/trace_explorer/web-templates/compare.html b/trace_explorer/web-templates/compare.html
@@ -93,7 +93,7 @@
   }
 "
      x-init="listSources($data)">
-  <div class="p-4 border-r border-gray-300 shrink-0 w-96">
+  <div class="p-4 border-r border-gray-300 shrink-0 w-80">
     <form class="flex flex-col gap-4 h-full"
           @submit.prevent="updateComparisonView($data)">
       <div class="flex gap-2 items-center text-md font-medium">
@@ -102,7 +102,7 @@
       <div class="flex-grow flex flex-col text-sm">
         <select name="sources"
                 multiple
-                class="border border-gray-900 h-12 px-2 w-full h-24 flex-grow"
+                class="border border-gray-900 h-12 px-2 w-full h-24 flex-grow overflow-x-scroll"
                 x-model="selectedSources"
                 @change="listColumns($data)">
           <template x-for="source in sources">
@@ -245,7 +245,8 @@
              class="max-h-full">
       </template>
     </div>
-    <div class="border-t border-gray-300 p-4">
+    <div class="border-t border-gray-300 p-4"
+         x-show="selectedSources.length > 0">
       <div class="text-md font-medium mb-4 flex gap-4 items-center">
         <div>
           Command line
@@ -266,7 +267,7 @@
         </button>
       </div>
       <div id="cmd-string"
-           class="font-mono whitespace-nowrap bg-gray-100 text-sm overflow-x-scroll p-2 flex gap-4 text-gray-900 underline-offset-4">
+           class="font-mono whitespace-nowrap bg-gray-100 text-xs overflow-x-scroll p-2 flex gap-4 text-gray-900 underline-offset-4">
         <span>trace_explorer compare</span>
         <template x-for="(source, index) in selectedSources">
           <span>
@@ -290,4 +291,4 @@
     </div>
   </div>
 </div>
-{% endblock %}
+{% endblock %}
diff --git a/trace_explorer/web-templates/layout.html b/trace_explorer/web-templates/layout.html
@@ -38,8 +38,8 @@
 </head>
 
 <body>
-  <div id="error-modal" class="fixed w-screen hidden h-screen p-5 z-10 flex flex-col items-center bg-black/10 backdrop-blur-sm">
-    <div class="border-2 border-black bg-white shadow-lg p-5 text-lg flex items-center gap-4">
+  <div id="error-modal" class="fixed w-screen hidden h-screen overflow-hidden p-5 z-10 flex flex-col items-center bg-black/10 backdrop-blur-sm">
+    <div class="border-2 border-black bg-white shadow-lg p-5 text-lg flex items-center gap-4 overflow-y-scroll">
       <svg xmlns="http://www.w3.org/2000/svg" class="text-black h-7 w-7" viewBox="0 0 20 20" fill="currentColor">
         <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
       </svg>
@@ -54,6 +54,7 @@
     function showErrorModal(content) {
       $('#error-modal').removeClass('hidden');
       $('#error-message').text(JSON.stringify(content));
+      console.log(content)
     }
   </script>
   <div class="min-h-screen max-h-screen flex relative max-w-screen relative">