Extract current page

* and show it when pinned but no results

ui/src/debug/ControlBar.svelte

@@ -1,10 +1,7 @@
 <script>
     import { slide } from 'svelte/transition';
     import slideH from '../svelte/slideH';
-    import { linear } from 'svelte/easing';
 
-    import Icon from 'fa-svelte';
-    import { faMapPin as pin } from '@fortawesome/free-solid-svg-icons/faMapPin';
     import { BookOpen, ArrowLeft, ArrowRight } from 'svelte-hero-icons';
 
     import { debugStage } from '../config';
@@ -26,7 +23,7 @@
     export let groupingEnabled = true;
     export let onlyRelevantItems = true;
 
-    let { pinnedPageIndex, pagePinned } = pageControl;
+    let { pagePinned } = pageControl;
 
     $: canNext = $debugStage + 1 < stageNames.length;
     $: canPrev = $debugStage > 0;
@@ -34,41 +31,32 @@
 
 <div class="sticky top-0 pt-2 pb-1 z-20 bg-gray-50">
     <div class="flex items-center space-x-2">
-        {#if $pagePinned}
-            <span on:click={() => pageControl.unpinPage()} transition:slideH={{ duration: 180, easing: linear }}>
-                <Icon class="text-xs hover:text-select hover:opacity-25 cursor-pointer opacity-75" icon={pin} />
+        <Popup>
+            <span slot="trigger" let:opened>
+                <BookOpen size="1x" class="hover:text-select cursor-pointer {opened && 'text-select'}" />
             </span>
-        {/if}
-        <span>
-            <Popup>
-                <span slot="trigger" let:opened>
-                    <BookOpen size="1x" class="hover:text-select cursor-pointer {opened && 'text-select'}" />
-                </span>
-                <span slot="content">
-                    <PageSelectionPopup {pageControl} />
-                </span>
-            </Popup>
-        </span>
-        <span>
-            <Popup>
-                <span slot="trigger" let:opened>
-                    <div
-                        class="hover:text-select cursor-pointer {opened && 'text-select'}"
-                        style="font-family: AmericanTypewriter, verdana">
-                        F
+            <span slot="content">
+                <PageSelectionPopup {pageControl} />
+            </span>
+        </Popup>
+        <Popup>
+            <span slot="trigger" let:opened>
+                <div
+                    class="hover:text-select cursor-pointer {opened && 'text-select'}"
+                    style="font-family: AmericanTypewriter, verdana">
+                    F
+                </div>
+            </span>
+            <span slot="content">
+                <div class="absolute mt-1 py-2 px-2 bg-gray-200 rounded-br">
+                    <div class=" overflow-y-scroll " style="max-height: 65vh" transition:slide={{ duration: 400 }}>
+                        {#each [...fontMap.keys()] as fontName}
+                            <FontEntry {fontMap} {fontName} />
+                        {/each}
                     </div>
-                </span>
-                <span slot="content">
-                    <div class="absolute mt-1 py-2 px-2 bg-gray-200 rounded-br">
-                        <div class=" overflow-y-scroll " style="max-height: 65vh" transition:slide={{ duration: 400 }}>
-                            {#each [...fontMap.keys()] as fontName}
-                                <FontEntry {fontMap} {fontName} />
-                            {/each}
-                        </div>
-                    </div>
-                </span>
-            </Popup>
-        </span>
+                </div>
+            </span>
+        </Popup>
 
         <div>|</div>
         <div>Transformation:</div>

ui/src/debug/CurrentPage.svelte

@@ -0,0 +1,34 @@
+<script>
+    import slideH from '../svelte/slideH';
+    import { linear } from 'svelte/easing';
+
+    import Icon from 'fa-svelte';
+    import { faMapPin as pin } from '@fortawesome/free-solid-svg-icons/faMapPin';
+    import { ArrowLeft, ArrowRight } from 'svelte-hero-icons';
+
+    import PageControl from './PageControl';
+
+    export let pageControl: PageControl;
+    export let pageIndex: number;
+
+    let { pagePinned, canPrev, canNext } = pageControl;
+</script>
+
+<div class="flex items-center space-x-1">
+    {#if $pagePinned}
+        <span on:click={() => pageControl.unpinPage()} transition:slideH={{ duration: 180, easing: linear }}>
+            <Icon class="text-xs hover:text-select hover:opacity-25 cursor-pointer opacity-75" icon={pin} />
+        </span>
+    {/if}
+    <div>Page {pageIndex + 1} {$pagePinned ? '' : ' / ' + pageControl.totalPages}</div>
+</div>
+{#if $pagePinned}
+    <div class="absolute flex ml-4 space-x-2">
+        <span on:click={() => pageControl.prev()}>
+            <ArrowLeft size="1x" class={$canPrev ? 'hover:text-select cursor-pointer' : 'opacity-25'} />
+        </span>
+        <span on:click={() => pageControl.next()}>
+            <ArrowRight size="1x" class={$canNext ? 'hover:text-select cursor-pointer' : 'opacity-25'} />
+        </span>
+    </div>
+{/if}

ui/src/debug/DebugView.svelte

@@ -8,12 +8,13 @@
     import ControlBar from './ControlBar.svelte';
     import ItemTable from './ItemTable.svelte';
     import PageControl from './PageControl';
+    import CurrentPage from './CurrentPage.svelte';
 
     export let debug: Debugger;
 
     const pageControl = new PageControl(debug.pageCount);
     const stageNames = debug.stageNames;
-    const { pinnedPageIndex } = pageControl;
+    const { pinnedPageIndex, pagePinned } = pageControl;
     let groupingEnabled = true;
     let onlyRelevantItems = true;
 
@@ -51,28 +52,35 @@
         <ItemTable schema={stageResult.schema} pages={visiblePages} {pageControl} changes={stageResult.changes} />
     {:else}
         <!-- No items visible -->
-        <div class="flex space-x-1 items-center justify-center text-xl">
-            <div in:blur={{ delay: 500 }}>No visible changes from the transformation.</div>
-            {#if supportsRelevanceFiltering && onlyRelevantItems}
-                <div in:blur={{ delay: 900 }}>Disable the</div>
-                <div
-                    in:blur={{ delay: 950 }}
-                    class="font-bold cursor-pointer hover:underline"
-                    on:click={() => (onlyRelevantItems = false)}>
-                    relevance filter
-                </div>
-                <div in:blur={{ delay: 990 }}>?</div>
-            {/if}
-            {#if supportsGrouping && !groupingEnabled}
-                <div in:blur={{ delay: 1000 }}>Enable</div>
-                <div
-                    in:blur={{ delay: 1050 }}
-                    class="font-bold cursor-pointer hover:underline"
-                    on:click={() => (groupingEnabled = true)}>
-                    grouping
-                </div>
-                <div in:blur={{ delay: 1090 }}>?</div>
+        <div class="flex mt-8">
+            {#if $pagePinned}
+                <span class="w-36">
+                    <CurrentPage {pageControl} pageIndex={$pinnedPageIndex} />
+                </span>
             {/if}
+            <div class="flex w-full space-x-1 items-center justify-center text-xl">
+                <div in:blur={{ delay: 500 }}>No visible changes from the transformation.</div>
+                {#if supportsRelevanceFiltering && onlyRelevantItems}
+                    <div in:blur={{ delay: 900 }}>Disable the</div>
+                    <div
+                        in:blur={{ delay: 950 }}
+                        class="font-bold cursor-pointer hover:underline"
+                        on:click={() => (onlyRelevantItems = false)}>
+                        relevance filter
+                    </div>
+                    <div in:blur={{ delay: 990 }}>?</div>
+                {/if}
+                {#if supportsGrouping && !groupingEnabled}
+                    <div in:blur={{ delay: 1000 }}>Enable</div>
+                    <div
+                        in:blur={{ delay: 1050 }}
+                        class="font-bold cursor-pointer hover:underline"
+                        on:click={() => (groupingEnabled = true)}>
+                        grouping
+                    </div>
+                    <div in:blur={{ delay: 1090 }}>?</div>
+                {/if}
+            </div>
         </div>
     {/if}
 </div>

ui/src/debug/ItemRow.svelte

@@ -10,6 +10,7 @@
     import ChangeSymbol from './ChangeSymbol.svelte';
     import { formatValue } from './formatValues';
     import PageControl from './PageControl';
+    import CurrentPage from './CurrentPage.svelte';
 
     export let pageControl: PageControl;
     export let pageIdx: number;
@@ -18,7 +19,6 @@
     export let itemGroup: ItemGroup;
     export let changes: ChangeIndex;
 
-    let { pagePinned, canPrev, canNext } = pageControl;
     let expandedItemGroup: { pageIndex: number; itemIndex: number };
 
     $: expanded =
@@ -39,17 +39,7 @@
     <!-- Page number in first page item row -->
     {#if itemIdx === 0}
         <td id="page" class="page bg-gray-50 align-top">
-            <div>Page {pageIdx + 1} {$pagePinned ? '' : ' / ' + pageControl.totalPages}</div>
-            {#if $pagePinned}
-                <div class="absolute flex ml-1 space-x-2">
-                    <span on:click={() => pageControl.prev()}>
-                        <ArrowLeft size="1x" class={$canPrev ? 'hover:text-select cursor-pointer' : 'opacity-25'} />
-                    </span>
-                    <span on:click={() => pageControl.next()}>
-                        <ArrowRight size="1x" class={$canNext ? 'hover:text-select cursor-pointer' : 'opacity-25'} />
-                    </span>
-                </div>
-            {/if}
+            <CurrentPage pageIndex={pageIdx} {pageControl} />
         </td>
     {:else}
         <td id="page" />