feat: finish sidebar-elements

packages/safe-ds-editor/src/assets/category/Utilities.svelte

@@ -0,0 +1,13 @@
+<script>
+    export let className = '';
+</script>
+
+<svg class={className} viewBox="0 0 24 24" fill="none">
+    <path
+        d="M15.6316 7.63137C15.2356 7.23535 15.0376 7.03735 14.9634 6.80902C14.8981 6.60817 14.8981 6.39183 14.9634 6.19098C15.0376 5.96265 15.2356 5.76465 15.6316 5.36863L18.47 2.53026C17.7168 2.18962 16.8806 2 16.0002 2C12.6865 2 10.0002 4.68629 10.0002 8C10.0002 8.49104 10.0592 8.9683 10.1705 9.42509C10.2896 9.91424 10.3492 10.1588 10.3387 10.3133C10.3276 10.4751 10.3035 10.5612 10.2289 10.7051C10.1576 10.8426 10.0211 10.9791 9.74804 11.2522L3.50023 17.5C2.6718 18.3284 2.6718 19.6716 3.50023 20.5C4.32865 21.3284 5.6718 21.3284 6.50023 20.5L12.748 14.2522C13.0211 13.9791 13.1576 13.8426 13.2951 13.7714C13.4391 13.6968 13.5251 13.6727 13.6869 13.6616C13.8414 13.651 14.086 13.7106 14.5751 13.8297C15.0319 13.941 15.5092 14 16.0002 14C19.3139 14 22.0002 11.3137 22.0002 8C22.0002 7.11959 21.8106 6.28347 21.47 5.53026L18.6316 8.36863C18.2356 8.76465 18.0376 8.96265 17.8092 9.03684C17.6084 9.1021 17.3921 9.1021 17.1912 9.03684C16.9629 8.96265 16.7649 8.76465 16.3689 8.36863L15.6316 7.63137Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
+</svg>

packages/safe-ds-editor/src/assets/category/categoryIcon.svelte

@@ -6,6 +6,7 @@
     import Modeling from './Modeling.svelte';
     import DataProcessing from './DataProcessing.svelte';
     import DataExploration from './DataExploration.svelte';
+    import Utilities from './Utilities.svelte';
 
     const svgMap: { [key: string]: typeof ModelEvaluation } = {
         modelevaluation: ModelEvaluation,
@@ -15,6 +16,7 @@
         dataprocessing: DataProcessing,
         dataexploration: DataExploration,
         segment: Segment,
+        utilities: Utilities,
     };
 
     export let name: string;

packages/safe-ds-editor/src/components/sidebars/section-elements.svelte

@@ -4,28 +4,38 @@
     import type { ClassValue } from 'clsx';
     import type { Writable } from 'svelte/store';
     import type { GlobalReference } from '$global';
-    import { ScrollArea } from '../ui/scroll-area';
-    import Accordion from '../ui/accordion/accordion.svelte';
-    import { isEmpty } from '../../../../safe-ds-lang/src/helpers/collections';
+    import { ScrollArea } from '$src/components/ui/scroll-area';
+    import Accordion from '$src/components/ui/accordion/accordion.svelte';
+    import { type Node as XYNode } from '@xyflow/svelte';
     import CategoryIcon from '$src/assets/category/categoryIcon.svelte';
+    import { getTypeName } from '$/src/components/sidebars/utils';
+    import { Switch } from '$/src/components/ui/switch';
+    import type { Category } from '$/src/components/ui/category/category-tree-node.svelte';
+    import CategoryTreeNode from '$/src/components/ui/category/category-tree-node.svelte';
 
     export let globalReferences: Writable<GlobalReference[]>;
     export let className: ClassValue;
     export { className as class };
+    export let selectedNodeList: XYNode[];
+
+    $: typeName = getTypeName(selectedNodeList);
 
     let searchValue: string;
+    let contextual: boolean = false;
 
     const customCategoryOrder = [
+        'BasicElement',
         'DataImport',
         'DataExport',
         'DataExploration',
         'DataProcessing',
         'Modeling',
         'ModelEvaluation',
+        'Utilities',
     ];
-    const customSort = ([a]: [string, GlobalReference[]], [b]: [string, GlobalReference[]]) => {
-        const indexA = customCategoryOrder.indexOf(a);
-        const indexB = customCategoryOrder.indexOf(b);
+    const customSort = (a: Category, b: Category) => {
+        const indexA = customCategoryOrder.indexOf(a.name);
+        const indexB = customCategoryOrder.indexOf(b.name);
         if (indexA === -1 && indexB === -1) return 0;
         if (indexA === -1) return 1;
         if (indexB === -1) return -1;
@@ -40,14 +50,55 @@
                     .toLowerCase()
                     .includes(searchValue.toLowerCase());
             })
-            .reduce((map, ref) => {
-                if (!map.has(ref.category)) {
-                    map.set(ref.category, []);
-                }
-                map.get(ref.category)!.push(ref);
-                return map;
-            }, new Map<string, GlobalReference[]>())
-            .entries(),
+            // .filter((ref) => {
+            //     return (
+            //         !contextual ||
+            //         !typeName ||
+            //         ref.parent?.toLowerCase() === typeName?.toLowerCase()
+            //     );
+            // })
+            .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 &&
+                        typeName &&
+                        ref.parent?.toLowerCase() !== typeName?.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);
+
+                return categories;
+            }, [] as Category[]),
     ).sort(customSort);
 </script>
 
@@ -61,25 +112,34 @@
         <div
             class="bg-menu-400 flex-grow cursor-grab justify-center rounded-sm p-1 py-3 text-center shadow"
         >
-            Expression
+            GenericExpression
         </div>
     </div>
     <div class=" mx-3 border-none">
         <Input placeholder="Search..." bind:value={searchValue} />
     </div>
+    <div class=" mx-4 flex flex-row items-center gap-2 text-sm">
+        <Switch
+            onCheckedChange={(value) => {
+                contextual = value;
+            }}
+            class="data-[state=unchecked]:bg-menu-300 data-[state=checked]:bg-menu-300"
+        />
+        <p data-state={contextual ? 'on' : 'off'} class=" data-[state=off]:text-text-muted">
+            Contextual
+        </p>
+    </div>
     <ScrollArea>
-        {#each categories as [categoryName, references] (categoryName)}
-            <Accordion class="pl-3" name={categoryName ? categoryName : 'Undefined'}>
+        {#each categories as category}
+            <Accordion class="pl-3" name={category.name}>
                 <CategoryIcon
                     slot="icon"
-                    name={categoryName}
+                    name={category.name}
                     className="mr-2 overflow-hidden stroke-text-normal "
                 />
 
                 <div class="flex flex-col gap-2 py-2 pl-12">
-                    {#each references as reference}
-                        <span>{reference.parent + '.' + reference.name}</span>
-                    {/each}
+                    <CategoryTreeNode {category} />
                 </div>
             </Accordion>
         {/each}

packages/safe-ds-editor/src/components/sidebars/sidebar.svelte

@@ -18,15 +18,12 @@
     export let globalReferences: Writable<GlobalReference[]>;
     export let selectedNodeList: XYNode[];
 
-    let paneElements = false;
-    let paneSegments = true;
+    let paneElements = true;
+    let paneSegments = false;
     let paneParameters = false;
     let paneDocumentation = false;
 
     const dispatch = createEventDispatcher();
-
-    const LORE =
-        'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
 </script>
 
 <div class={cn('h-full w-full', className)}>
@@ -37,7 +34,7 @@
             bind:showPane={paneElements}
             showResizeHandle={paneSegments || paneDocumentation || paneParameters}
         >
-            <SectionElements {globalReferences} />
+            <SectionElements {globalReferences} {selectedNodeList} />
         </SidebarSection>
         <SidebarSection
             name={'Segmente'}

packages/safe-ds-editor/src/components/sidebars/utils.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import type { Node as XYNode } from '@xyflow/svelte';
 import type { CallProps } from '../nodes/node-call.svelte';
 import type { PlaceholderProps } from '../nodes/node-placeholder.svelte';
@@ -21,7 +20,7 @@ export const getName = (xyNodeList: XYNode[]) => {
             return placeholder.name;
         }
         if (Object.keys(node.data).includes('genericExpression')) {
-            const { genericExpression } = node.data as GenericExpressionProps;
+            // const { genericExpression } = node.data as GenericExpressionProps;
             return 'Expression';
         }
         return '';
@@ -77,7 +76,7 @@ export const getParameterList = (xyNode: XYNode) => {
         return result;
     }
     if (Object.keys(xyNode.data).includes('genericExpression')) {
-        const { genericExpression } = xyNode.data as GenericExpressionProps;
+        // const { genericExpression } = xyNode.data as GenericExpressionProps;
         return [];
     }
     return [];
@@ -107,3 +106,24 @@ export const intersect = (list: Parameter[][]) => {
 
     return intersection;
 };
+
+export const getTypeName = (xyNodeList: XYNode[]) => {
+    if (xyNodeList.length !== 1) return undefined;
+    const node = xyNodeList[0];
+
+    if (Object.keys(node.data).includes('call')) {
+        const { call } = node.data as CallProps;
+        if (call.resultList.length !== 1) return;
+        const result = call.resultList[0];
+        return result.type;
+    }
+    if (Object.keys(node.data).includes('placeholder')) {
+        const { placeholder } = node.data as PlaceholderProps;
+        return placeholder.type;
+    }
+    if (Object.keys(node.data).includes('genericExpression')) {
+        const { genericExpression } = node.data as GenericExpressionProps;
+        return genericExpression.type;
+    }
+    return;
+};

packages/safe-ds-editor/src/components/ui/accordion/accordion.svelte

@@ -5,6 +5,7 @@
 
     export let name: string;
     export let className: ClassValue;
+    export let withIcon: boolean = true;
     export { className as class };
 
     let showPane: boolean = false;
@@ -23,9 +24,11 @@
     <ChevronRight
         class="duration-35 mr-2 h-4 w-4 shrink-0 transition-transform focus:outline-none"
     />
-    <div class="flex h-9 w-9 justify-center align-middle">
-        <slot name="icon" />
-    </div>
+    {#if withIcon}
+        <div class="flex h-9 w-9 justify-center align-middle">
+            <slot name="icon" />
+        </div>
+    {/if}
     {name}
 </button>
 {#if showPane}

packages/safe-ds-editor/src/components/ui/category/category-tree-node.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" context="module">
+    export type Category = {
+        name: string;
+        subcategories: Category[] | undefined;
+        elements: GlobalReference[];
+    };
+</script>
+
+<script lang="ts">
+    import Accordion from '$/src/components/ui/accordion/accordion.svelte';
+
+    import type { GlobalReference } from '$global';
+
+    export let category: Category;
+</script>
+
+{#if !category.subcategories}
+    {#each category.elements as element}
+        <span>{element.parent + '.' + element.name}</span>
+    {/each}
+{:else}
+    <div class="pl-3">
+        {#each category.subcategories as subcategory}
+            <Accordion withIcon={false} name={subcategory.name}>
+                <div class="flex flex-col gap-2 py-2 pl-12">
+                    <svelte:self category={subcategory} />
+                </div>
+            </Accordion>
+        {/each}
+    </div>
+{/if}

packages/safe-ds-editor/src/components/ui/switch/index.ts

@@ -0,0 +1,7 @@
+import Root from './switch.svelte';
+
+export {
+    Root,
+    //
+    Root as Switch,
+};