Filter for relevant items

* Don’t color Page in change color
* Tailwind: expose colors as CSS variables

ui/src/components/Checkbox.svelte

@@ -0,0 +1,24 @@
+<script>
+    export let name: string;
+    export let enabled = true;
+</script>
+
+<input id="checkbox-{name}" type="checkbox" class="hidden" bind:checked={enabled} />
+<label
+    for="checkbox-{name}"
+    class="py-0.5 px-1 border-2 border-transparent cursor-pointer select-none whitespace-nowrap">{name}</label>
+
+<style>
+    label:hover {
+        color: var(--color-blue-600);
+    }
+
+    input:checked + label {
+        border-top-color: var(--color-blue-600);
+        border-bottom-color: var(--color-blue-600);
+    }
+
+    input + label:hover:not(:active) {
+        @apply border-dotted;
+    }
+</style>

ui/src/debug/DebugView.svelte

@@ -9,6 +9,7 @@
 
     import Popup from '../components/Popup.svelte';
     import PageSelectionPopup from './PageSelectionPopup.svelte';
+    import Checkbox from '../components/Checkbox.svelte';
     import ItemTable from './ItemTable.svelte';
     import TransformerSelectionPopup from './TransformerSelectionPopup.svelte';
 
@@ -16,6 +17,7 @@
 
     const stageNames = debug.stageNames;
     let pinnedPage: number;
+    let onlyRelevantItems = true;
 
     let currentStage = 0;
     $: canNext = currentStage + 1 < stageNames.length;
@@ -68,7 +70,9 @@
             <span>
                 <Popup>
                     <span slot="trigger">
-                        <div class="cursor-pointer hover:underline">{stageNames[currentStage]}</div>
+                        <div class="w-52 cursor-pointer hover:underline whitespace-nowrap">
+                            {stageNames[currentStage]}
+                        </div>
                     </span>
                     <span slot="content">
                         <TransformerSelectionPopup
@@ -78,6 +82,9 @@
                     </span>
                 </Popup>
             </span>
+            <div class="w-full flex flex-row-reverse space-x-2 space-x-reverse text-sm">
+                <Checkbox name="Relevant Items" bind:enabled={onlyRelevantItems} />
+            </div>
         </div>
     </div>
 
@@ -96,6 +103,7 @@
         pages={visiblePages}
         {maxPage}
         {pageIsPinned}
+        bind:onlyRelevantItems
         changes={stageResult.changes} />
 </div>
 

ui/src/debug/ItemTable.svelte

@@ -13,6 +13,7 @@
     export let pages: Page[];
     export let maxPage: number;
     export let pageIsPinned: boolean;
+    export let onlyRelevantItems: boolean;
     export let changes: Map<string, Change>;
     let maxItemsToRenderInOneLoad = 200;
     let renderedMaxPage = 0;
@@ -74,7 +75,7 @@
             {/if}
 
             <!-- Page items -->
-            {#each page.itemGroups as itemGroup, itemIdx}
+            {#each page.itemGroups.filter((group) => !onlyRelevantItems || changes.has(group.top.uuid)) as itemGroup, itemIdx}
                 <tr
                     class:expandable={itemGroup.hasMany()}
                     class:expanded={expandedItemGroup && isExpanded(page.index, itemIdx)}
@@ -121,12 +122,23 @@
     </tbody>
 </table>
 
-{#if !pageIsPinned}
+{#if onlyRelevantItems && changes.size === 0}
-    {#if renderedMaxPage < pages.length}
+    <div class="flex space-x-1 items-center justify-center text-xl">
-        <span use:inView on:intersect={({ detail }) => detail && calculateNextPageToRenderTo()} />
+        <div>No changes from the transformation.</div>
-        <div class="my-6 text-center text-2xl">...</div>
+        <div>Want to see</div>
-    {:else}
+        <div class="font-bold cursor-pointer hover:underline" on:click={() => (onlyRelevantItems = false)}>
-        <div class="my-6 text-center text-2xl">FIN!</div>
+            all items
+        </div>
+        <div>?</div>
+    </div>
+{:else}
+    {#if !pageIsPinned}
+        {#if renderedMaxPage < pages.length}
+            <span use:inView on:intersect={({ detail }) => detail && calculateNextPageToRenderTo()} />
+            <div class="my-6 text-center text-2xl">...</div>
+        {:else}
+            <div class="my-6 text-center text-2xl">FIN!</div>
+        {/if}
     {/if}
 {/if}
 
@@ -174,13 +186,13 @@
         @apply bg-gray-200;
     }
 
-    .changePlus {
+    tr.changePlus td:not(#page) {
         @apply text-green-600;
     }
-    .changeMinus {
+    tr.changeMinus td:not(#page) {
+        @apply text-red-600;
+    }
+    tr.changeNeutral td:not(#page) {
         @apply text-yellow-600;
     }
-    .changeNeutral {
-        @apply text-pink-800;
-    }
 </style>

ui/src/main/Upload.svelte

@@ -5,12 +5,14 @@
     import { processUpload, loadExample } from '../store';
     import type Progress from '@core/Progress';
     import ProgressRing from '../components/ProgressRing.svelte';
+    import Checkbox from '../components/Checkbox.svelte';
 
     let specifiedFileName: string;
     let dragover = false;
     let upload: Promise<any>;
     let rejectionError: string;
     let parseProgress: Progress;
+    let debug = false;
 
     function handleExampleLoad() {
         dragover = true;
@@ -47,7 +49,7 @@
         <div class="py-0.5 border-2 border-gray-50 hover:underline cursor-pointer" on:click={handleExampleLoad}>
             Load Example
         </div>
-        <div class="py-0.5 px-1 border-2 border-gray-50 hover:border-green-600 cursor-pointer">Debug</div>
+        <Checkbox name="Debug" bind:enabled={debug} />
     </div>
 
     <!-- Upload Box -->

ui/tailwind.config.js

@@ -12,5 +12,24 @@ module.exports = {
     variants: {
         extend: {},
     },
-    plugins: [],
+    plugins: [
+        function ({ addBase, theme }) {
+            function extractColorVars(colorObj, colorGroup = '') {
+                return Object.keys(colorObj).reduce((vars, colorKey) => {
+                    const value = colorObj[colorKey];
+
+                    const newVars =
+                        typeof value === 'string'
+                            ? { [`--color${colorGroup}-${colorKey}`]: value }
+                            : extractColorVars(value, `-${colorKey}`);
+
+                    return { ...vars, ...newVars };
+                }, {});
+            }
+
+            addBase({
+                ':root': extractColorVars(theme('colors')),
+            });
+        },
+    ],
 };