feat: vertical processing animation and filtered global references

Safe-DS · Oct 29, 2024 · 13f104c · 13f104c
1 parent 1ca78e6
commit 13f104c
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 58 deletions.
diff --git a/packages/safe-ds-editor/src/components/flow/flow.svelte b/packages/safe-ds-editor/src/components/flow/flow.svelte
@@ -102,7 +102,7 @@
         const executionQueue = placeholderList
             .reverse()
             .map((placeholder) => {
-                const waitTime = Math.floor(Math.random() * 10 + 2) * 500;
+                const waitTime = Math.floor(Math.random() * 12 + 4) * 500;
                 totalWaitTime = waitTime + totalWaitTime;
                 return { chunk: getChunk(placeholder), waitTime: totalWaitTime };
             })

diff --git a/packages/safe-ds-editor/src/components/nodes/node-generic-expression.svelte b/packages/safe-ds-editor/src/components/nodes/node-generic-expression.svelte
@@ -26,7 +26,7 @@
 >
     <Handle type="target" id="target" position={Position.Left} class=" absolute -ml-2.5 h-3 w-3" />
     <Handle type="source" id="source" position={Position.Right} class=" absolute -mr-2.5 h-3 w-3" />
-    <StatusIndicator {status} class="w-1 rounded-l-sm" />
+    <StatusIndicator {status} direction="vertical" class="w-1 rounded-l-sm" />
     <div class="flex h-full flex-grow items-center p-2">
         <div class=" bg-node-dark w-full p-1 py-4">
             <span class="text-text-muted w-full whitespace-pre text-left text-xl"

diff --git a/packages/safe-ds-editor/src/components/sidebars/section-elements.svelte b/packages/safe-ds-editor/src/components/sidebars/section-elements.svelte
@@ -43,62 +43,55 @@
     };
 
     $: categories = Array.from(
-        $globalReferences
-            .filter((ref) => {
-                if (!searchValue) return true;
-                return `${ref.parent}.${ref.name}`
-                    .toLowerCase()
-                    .includes(searchValue.toLowerCase());
-            })
-            // .filter((ref) => {
-            //     return (
-            //         !contextual ||
-            //         !typeName ||
-            //         ref.parent?.toLowerCase() === typeName?.toLowerCase()
-            //     );
-            // })
-            .reduce((categories, ref) => {
-                const categoryPath = ref.category ? ref.category.split('Q') : ['NotYetCategorized'];
+        $globalReferences.reduce((categories, ref) => {
+            const categoryPath = ref.category ? ref.category.split('Q') : ['NotYetCategorized'];
 
-                const insertRef = (path: string[], categories: Category[]) => {
-                    const match = categories.find((c) => c.name === path[0]);
-                    const last = path.length === 1;
-                    const filtered =
-                        contextual &&
+            const insertRef = (path: string[], categories: Category[]) => {
+                const match = categories.find((c) => c.name === path[0]);
+                const last = path.length === 1;
+                const filtered =
+                    (contextual &&
                         typeName &&
-                        ref.parent?.toLowerCase() !== typeName?.toLowerCase();
+                        ref.parent?.toLowerCase() !== typeName?.toLowerCase()) ||
+                    (searchValue &&
+                        !`${ref.parent}.${ref.name}`
+                            .toLowerCase()
+                            .includes(searchValue.toLowerCase()));
 
-                    if (match && last) {
-                        if (!filtered) match.elements.push(ref);
-                        return;
-                    }
-                    if (match && !last) {
-                        if (!match.subcategories) match.subcategories = [];
-                        insertRef(path.slice(1), match.subcategories);
-                    }
-                    if (!match && last) {
-                        const newCategory: Category = {
-                            name: path[0],
-                            subcategories: undefined,
-                            elements: !filtered ? [ref] : [],
-                        };
-                        categories.push(newCategory);
-                        return;
-                    }
-                    if (!match && !last) {
-                        const newCategory: Category = {
-                            name: path[0],
-                            subcategories: [],
-                            elements: [],
-                        };
-                        categories.push(newCategory);
-                        insertRef(path.slice(1), newCategory.subcategories!);
-                    }
-                };
-                insertRef(categoryPath, categories);
+                if (match && last) {
+                    if (!filtered) match.elements.push(ref);
+                    else match.filteredCount += 1;
+                    return;
+                }
+                if (match && !last) {
+                    if (!match.subcategories) match.subcategories = [];
+                    insertRef(path.slice(1), match.subcategories);
+                }
+                if (!match && last) {
+                    const newCategory: Category = {
+                        name: path[0],
+                        subcategories: undefined,
+                        filteredCount: !filtered ? 0 : 1,
+                        elements: !filtered ? [ref] : [],
+                    };
+                    categories.push(newCategory);
+                    return;
+                }
+                if (!match && !last) {
+                    const newCategory: Category = {
+                        name: path[0],
+                        subcategories: [],
+                        filteredCount: 0,
+                        elements: [],
+                    };
+                    categories.push(newCategory);
+                    insertRef(path.slice(1), newCategory.subcategories!);
+                }
+            };
+            insertRef(categoryPath, categories);
 
-                return categories;
-            }, [] as Category[]),
+            return categories;
+        }, [] as Category[]),
     ).sort(customSort);
 </script>
 

diff --git a/packages/safe-ds-editor/src/components/ui/category/category-tree-node.svelte b/packages/safe-ds-editor/src/components/ui/category/category-tree-node.svelte
@@ -2,6 +2,7 @@
     export type Category = {
         name: string;
         subcategories: Category[] | undefined;
+        filteredCount: number;
         elements: GlobalReference[];
     };
 </script>
@@ -18,6 +19,9 @@
     {#each category.elements as element}
         <span>{element.parent + '.' + element.name}</span>
     {/each}
+    {#if category.filteredCount > 0}
+        <span>{'Filtered Elements: ' + category.filteredCount}</span>
+    {/if}
 {:else}
     <div class="pl-3">
         {#each category.subcategories as subcategory}

diff --git a/packages/safe-ds-editor/src/components/ui/status-indicator/status-indicator.svelte b/packages/safe-ds-editor/src/components/ui/status-indicator/status-indicator.svelte
@@ -9,6 +9,10 @@
     export let className: ClassValue;
     export { className as class };
     export let status;
+    export let direction: 'horizontal' | 'vertical' = 'horizontal';
+
+    $: loadingAnimationClass =
+        direction === 'vertical' ? 'loading-animation-v' : 'loading-animation-h';
 </script>
 
 <div
@@ -19,7 +23,7 @@
             'data-[status=done]:bg-green-400',
             'data-[status=none]:bg-neutral-400',
             'data-[status=waiting]:bg-yellow-500',
-            `${status === 'processing' ? 'loading-animation' : ''} data-[status=processing]:bg-menu-700`,
+            `${status === 'processing' ? loadingAnimationClass : ''} data-[status=processing]:bg-menu-700`,
         ],
         className,
     )}
@@ -29,7 +33,7 @@
 
 <style>
     /* Define the keyframes for the loading animation */
-    @keyframes loadingAnimation {
+    @keyframes loadingAnimationH {
         0% {
             background-position: 0 0;
         }
@@ -38,8 +42,17 @@
         }
     }
 
+    @keyframes loadingAnimationV {
+        0% {
+            background-position: 0 100px;
+        }
+        100% {
+            background-position: 0 0;
+        }
+    }
+
     /* Create a CSS class for the loading animation */
-    .loading-animation {
+    .loading-animation-h {
         background-image: linear-gradient(
             to right,
             rgba(255, 255, 255, 0.4) 25%,
@@ -50,7 +63,21 @@
             rgb(234 179 8) 75%
         );
         background-size: 200px 4px;
-        animation: loadingAnimation 1s linear infinite;
+        animation: loadingAnimationH 1s linear infinite;
+    }
+
+    .loading-animation-v {
+        background-image: linear-gradient(
+            to top,
+            rgba(255, 255, 255, 0.4) 25%,
+            rgb(234 179 8) 25%,
+            rgb(234 179 8) 50%,
+            rgba(255, 255, 255, 0.4) 50%,
+            rgba(255, 255, 255, 0.4) 75%,
+            rgb(234 179 8) 75%
+        );
+        background-size: 4px 200px;
+        animation: loadingAnimationV 1s linear infinite;
     }
 
     /* Optional: Smooth transition when changing status */