stage description tooltip

core/src/Debugger.ts

@@ -13,11 +13,13 @@ export default class Debugger {
   private transformers: ItemTransformer[];
   private stageResultCache: StageResult[];
   stageNames: string[];
+  stageDescriptions: string[];
 
   constructor(inputSchema: string[], inputItems: Item[], context: TransformContext, transformers: ItemTransformer[]) {
     this.transformers = transformers;
     this.context = context;
     this.stageNames = ['Parse Result', ...transformers.map((t) => t.name)];
+    this.stageDescriptions = ['Initial items as parsed by PDFjs', ...transformers.map((t) => t.description)];
     this.stageResultCache = [initialStage(inputSchema, inputItems)];
   }
 

ui/src/debug/DebugView.svelte

@@ -75,6 +75,7 @@
                     <span slot="content">
                         <TransformerSelectionPopup
                             {stageNames}
+                            stageDescriptions={debug.stageDescriptions}
                             {currentStage}
                             on:selectTransformer={(e) => (currentStage = e.detail)} />
                     </span>

ui/src/debug/TransformerSelectionPopup.svelte

@@ -6,6 +6,7 @@
     import type { Writable } from 'svelte/store';
 
     export let stageNames: string[];
+    export let stageDescriptions: string[];
     export let currentStage: number;
 
     const popupOpened: Writable<boolean> = getContext('popupOpened');
@@ -17,24 +18,26 @@
     }
 </script>
 
-<div class="absolute -mt-6 p-2 bg-gray-200 shadow-lg rounded-sm overflow-auto max-h-96" transition:slide>
+<div class="absolute -mt-6 " transition:slide>
+    <div class="p-2 bg-gray-200 shadow-lg rounded-sm overflow-auto max-h-96">
         {#each stageNames as stageName, idx}
             <div
                 on:click={() => selectTransformer(idx)}
-            class="px-2 "
+                class="tooltip px-2"
                 class:selected={idx == currentStage}
-            class:selectable={idx != currentStage}>
+                class:selectable={idx != currentStage}
+                data-text={stageDescriptions[idx]}>
                 {stageName}
             </div>
         {/each}
     </div>
+</div>
 
 <style>
     .selected {
         @apply cursor-default;
         @apply bg-gray-300;
         @apply rounded;
-        /* @apply underline; */
     }
     .selectable {
         @apply cursor-pointer;
@@ -44,4 +47,35 @@
         @apply text-green-700;
         @apply rounded;
     }
+
+    .tooltip:before {
+        content: attr(data-text); /* here's the magic */
+        position: absolute;
+
+        transform: translateY(-2px);
+
+        /* move to right */
+        left: 100%;
+
+        /* the arrow */
+        border: 10px solid;
+        border-color: transparent transparent transparent var(--color-gray-600);
+
+        /* basic styles */
+        @apply ml-2;
+        @apply px-2;
+        @apply py-1;
+        @apply w-72;
+        @apply bg-gray-300;
+        @apply text-gray-800;
+        @apply rounded;
+        @apply shadow-sm;
+        @apply text-center;
+        @apply italic;
+
+        display: none; /* hide by default */
+    }
+    .tooltip:hover:before {
+        display: block;
+    }
 </style>