extern/pdf-to-markdown
1
0
Fork 0
mirror of https://github.com/jzillmann/pdf-to-markdown.git synced 2025-06-25 20:11:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

stage description tooltip

Browse Source
This commit is contained in:
Johannes Zillmann 2021-02-28 10:20:21 +01:00
parent a99b031bc6
commit 37c50be4ca
3 changed files with 48 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/Debugger.ts
View File

@ -13,11 +13,13 @@ export default class Debugger {
private transformers: ItemTransformer[]; private transformers: ItemTransformer[];
private stageResultCache: StageResult[]; private stageResultCache: StageResult[];
stageNames: string[]; stageNames: string[];
stageDescriptions: string[];
constructor(inputSchema: string[], inputItems: Item[], context: TransformContext, transformers: ItemTransformer[]) { constructor(inputSchema: string[], inputItems: Item[], context: TransformContext, transformers: ItemTransformer[]) {
this.transformers = transformers; this.transformers = transformers;
this.context = context; this.context = context;
this.stageNames = ['Parse Result', ...transformers.map((t) => t.name)]; 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)]; this.stageResultCache = [initialStage(inputSchema, inputItems)];
} }

1
ui/src/debug/DebugView.svelte
View File

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

56
ui/src/debug/TransformerSelectionPopup.svelte
View File

@ -6,6 +6,7 @@
import type { Writable } from 'svelte/store'; import type { Writable } from 'svelte/store';
export let stageNames: string[]; export let stageNames: string[];
export let stageDescriptions: string[];
export let currentStage: number; export let currentStage: number;
const popupOpened: Writable<boolean> = getContext('popupOpened'); const popupOpened: Writable<boolean> = getContext('popupOpened');
@ -17,16 +18,19 @@
} }
</script> </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>
{#each stageNames as stageName, idx} <div class="p-2 bg-gray-200 shadow-lg rounded-sm overflow-auto max-h-96">
<div {#each stageNames as stageName, idx}
on:click={() => selectTransformer(idx)} <div
class="px-2 " on:click={() => selectTransformer(idx)}
class:selected={idx == currentStage} class="tooltip px-2"
class:selectable={idx != currentStage}> class:selected={idx == currentStage}
{stageName} class:selectable={idx != currentStage}
</div> data-text={stageDescriptions[idx]}>
{/each} {stageName}
</div>
{/each}
</div>
</div> </div>
<style> <style>
@ -34,7 +38,6 @@
@apply cursor-default; @apply cursor-default;
@apply bg-gray-300; @apply bg-gray-300;
@apply rounded; @apply rounded;
/* @apply underline; */
} }
.selectable { .selectable {
@apply cursor-pointer; @apply cursor-pointer;
@ -44,4 +47,35 @@
@apply text-green-700; @apply text-green-700;
@apply rounded; @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> </style>