fix(navigation): faulty api calls (RDFA-433)

frontend/src/lib/models/nav/NavEntry.svelte.js

@@ -0,0 +1,66 @@
+/*
+ *    Copyright (c) 2024-2026 SOPTIM AG
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ *
+ */
+
+export class NavEntry {
+    label = $state();
+    id = $state();
+    tooltip = $state();
+    #isOpen = $state(false);
+    children = $state([]);
+    data = $state(null);
+
+    /** @type {NavEntry | null} */
+    parent = $state(null);
+
+    /** @returns {boolean} */
+    get isOpen() {
+        return this.#isOpen;
+    }
+
+    /** @param {{ label?: string, id?: string, tooltip?: string, isOpen?: boolean, data?: any }} config */
+    constructor(config = {}) {
+        this.label = config.label ?? "";
+        this.tooltip = config.tooltip ?? "";
+        this.#isOpen = config.isOpen ?? false;
+        this.id = config.id ?? this.label;
+        this.data = config.data ?? null;
+    }
+
+    /** Opens this entry and all ancestors. */
+    open() {
+        this.#isOpen = true;
+        this.parent?.open();
+    }
+
+    /** Closes this entry and all descendants recursively. */
+    close() {
+        this.#isOpen = false;
+        this.children.forEach(child => child.close());
+    }
+
+    /** Toggles the open state. Opening trickles up, closing trickles down. */
+    toggle() {
+        if (this.isOpen) {
+            this.close();
+        } else {
+            this.open();
+        }
+    }
+
+    /** @type {boolean} */
+    hasChildren = $derived(this.children.length > 0);
+}

frontend/src/routes/mainpage/packageNavigation/DatasetDeleteDialog.svelte → frontend/src/routes/DatasetDeleteDialog.svelte

@@ -19,7 +19,7 @@
     import { faExclamation } from "@fortawesome/free-solid-svg-icons";
 
     import { BackendConnection } from "$lib/api/backend.js";
-    import { PUBLIC_BACKEND_URL } from "$lib/config/runtime";
+    import { PUBLIC_BACKEND_URL } from "$lib/config/runtime.js";
     import ActionDialog from "$lib/dialog/ActionDialog.svelte";
     import {
         forceReloadTrigger,

frontend/src/routes/NamespacesDialog.svelte

@@ -83,9 +83,6 @@
             return mapReactiveNamespaceToNamespaceDto(namespace);
         });
         await bec.replaceNamespaces(datasetName, namespaceDTOs);
-        editorState.selectedDataset.trigger();
-        editorState.selectedGraph.trigger();
-        editorState.selectedClassUUID.trigger();
         forceReloadTrigger.trigger();
     }
 

frontend/src/routes/layout/menu-bar/Edit.svelte

@@ -124,7 +124,7 @@
         }
         await enableEditing(selectedDataset);
         await reload();
-        editorState.selectedPackageUUID.trigger();
+        forceReloadTrigger.trigger();
     }
 
     async function requestDisableEditing() {

frontend/src/routes/layout/menu-bar/File.svelte

@@ -28,10 +28,10 @@
     import { Menubar } from "$lib/components/bitsui/menubar";
     import { editorState } from "$lib/sharedState.svelte.js";
 
+    import DatasetDeleteDialog from "../../DatasetDeleteDialog.svelte";
     import ExportDialog from "../../ExportDialog.svelte";
     import GraphDeleteDialog from "../../GraphDeleteDialog.svelte";
     import ImportDialog from "../../ImportDialog.svelte";
-    import DatasetDeleteDialog from "../../mainpage/packageNavigation/DatasetDeleteDialog.svelte";
     import SHACLExportDialog from "../../shacl/SHACLExportDialog.svelte";
     import SHACLUploadDialog from "../../shacl/SHACLUploadDialog.svelte";
     import SnapshotDialog from "../../SnapshotDialog.svelte";

frontend/src/routes/mainpage/classEditor/classEditor.svelte

@@ -26,7 +26,10 @@
     import { eventStack } from "$lib/eventhandling/closeEventManager.svelte.js";
     import { mapClassDtoToReactiveClass } from "$lib/models/reactive/mapper/map-dto-to-reactive-object.js";
     import { adoptUnsavedClassChanges } from "$lib/models/reactive/utils/adopt-model-changes-utils.js";
-    import { editorState } from "$lib/sharedState.svelte.js";
+    import {
+        editorState,
+        forceReloadTrigger,
+    } from "$lib/sharedState.svelte.js";
 
     import {
         getClasses,
@@ -87,6 +90,7 @@
 
     $effect(async () => {
         editorState.selectedClassUUID.subscribe();
+        forceReloadTrigger.subscribe();
         loadingContext = true;
         loadingClass = true;
 
@@ -97,6 +101,7 @@
 
     $effect(async () => {
         editorState.selectedPackageUUID.subscribe();
+        forceReloadTrigger.subscribe();
         isDatasetReadOnly = await isReadOnly(datasetName);
     });
 

frontend/src/routes/mainpage/classEditor/components/ClassEditorButtons.svelte

@@ -102,6 +102,7 @@
                 responseText,
             );
         }
+        forceReloadTrigger.trigger();
     }
 </script>
 

frontend/src/routes/mainpage/classEditor/components/associations/associationEditorDialog/AssociationEditorDialog.svelte

@@ -21,6 +21,7 @@
     import ModifyDataDialog from "$lib/dialog/ModifyDataDialog.svelte";
     import { mapReactiveAssociationToAssociationDto } from "$lib/models/reactive/mapper/map-reactive-object-to-dto.js";
     import { ReactiveAssociation } from "$lib/models/reactive/models/reactive-association.svelte.js";
+    import { forceReloadTrigger } from "$lib/sharedState.svelte.js";
 
     import Direct from "./Direct.svelte";
     import { saveApiAssociationToBackend } from "../save-association-to-backend.js";
@@ -77,6 +78,8 @@
             associations.append(association);
             isNewAssociation = false;
         }
+        association.save();
+        forceReloadTrigger.trigger();
     }
 </script>
 

frontend/src/routes/mainpage/classEditor/components/attributes/AttributeEditorDialog.svelte

@@ -26,6 +26,7 @@
     import { mapReactiveAttributeToAttributeDto } from "$lib/models/reactive/mapper/map-reactive-object-to-dto.js";
     import { ReactiveAttribute } from "$lib/models/reactive/models/reactive-attribute.svelte.js";
     import { getControlButtonsForReactiveObject } from "$lib/models/reactive/utils/reactive-objects-control-button-utils.js";
+    import { forceReloadTrigger } from "$lib/sharedState.svelte.js";
     import { getNsPrefixNsUriString } from "$lib/utils/namespace.js";
 
     import { saveApiAttributeToBackend } from "./save-attribute-to-backend.js";
@@ -87,6 +88,7 @@
             attributes.append(attribute);
             isNewAttribute = false;
         }
+        forceReloadTrigger.trigger();
     }
 </script>
 

frontend/src/routes/mainpage/classEditor/components/enum-entries/EnumEntryEditorDialog.svelte

@@ -25,6 +25,7 @@
     import { mapReactiveEnumEntryToEnumEntryDto } from "$lib/models/reactive/mapper/map-reactive-object-to-dto.js";
     import { ReactiveEnumEntry } from "$lib/models/reactive/models/reactive-enum-entry.svelte.js";
     import { getControlButtonsForReactiveObject } from "$lib/models/reactive/utils/reactive-objects-control-button-utils.js";
+    import { forceReloadTrigger } from "$lib/sharedState.svelte.js";
     import { getNsPrefixNsUriString } from "$lib/utils/namespace.js";
 
     import { saveApiEnumEntryToBackend } from "./save-enum-entry-to-backend.js";
@@ -76,6 +77,8 @@
             enumEntries.append(enumEntry);
             isNewEnumEntry = false;
         }
+        enumEntry.save();
+        forceReloadTrigger.trigger();
     }
 </script>
 

frontend/src/routes/mainpage/packageEditorDialog.svelte

@@ -27,11 +27,13 @@
     import { getControlButtonsForReactiveObject } from "$lib/models/reactive/utils/reactive-objects-control-button-utils.js";
     import { forceReloadTrigger } from "$lib/sharedState.svelte.js";
 
-    import { getNamespaces } from "./classEditor/fetch-class-editor-context.js";
+    import {
+        getNamespaces,
+        getPackages,
+    } from "./classEditor/fetch-class-editor-context.js";
 
     let {
         showDialog = $bindable(),
-        packages = [],
         pack,
         readonly = false,
         datasetName = null,
@@ -43,13 +45,15 @@
     let pkg = $state(null);
     let isNewPackage = $state(true);
     let namespaces = $state([]);
+    let packages = $state([]);
 
     function getSubstitutedNamespace(namespace) {
         const namespaceObj = namespaces.find(n => n.prefix === namespace);
         return namespaceObj ? namespaceObj.substitutedPrefix : namespace;
     }
 
     async function onOpen() {
+        await fetchPackages();
         if (pack) {
             isNewPackage = false;
             pkg = new ReactivePackage({
@@ -76,8 +80,26 @@
             namespaces = await getNamespaces(datasetName);
         }
     }
+    async function fetchPackages() {
+        if (!datasetName || !graphUri) {
+            packages = [];
+            return;
+        }
+        try {
+            packages = await getPackages(datasetName, graphUri);
+        } catch (err) {
+            console.error("Failed to load packages:", err);
+            packages = [];
+        }
+    }
 
     async function savePackage() {
+        console.log(
+            "Saving package in dataset",
+            datasetName,
+            "and graph",
+            graphUri,
+        );
         if (!datasetName || !graphUri) {
             return;
         }

frontend/src/routes/mainpage/packageNavigation/ClassEntry.svelte

@@ -29,54 +29,42 @@
     import { editorState } from "$lib/sharedState.svelte.js";
     import { shortenIri } from "$lib/utils/iri.js";
 
-    import {
-        getUri,
-        isSelectedClass,
-    } from "./packageNavigationUtils.svelte.js";
+    import { isSelectedClass } from "./packageNavigationUtils.svelte.js";
     import DeleteClassConfirmDialog from "../../DeleteClassConfirmDialog.svelte";
     import SHACLClassSpecificPopUp from "../../shacl/shaclclassspecific/SHACLClassSpecificPopUp.svelte";
 
     let {
-        dataset,
-        graph,
-        pack,
-        cls,
-        prefixes = [],
-        readOnly = false,
+        datasetNavEntry,
+        graphNavEntry,
+        classNavEntry,
+        namespaces = [],
+        readonly = false,
         onPackChange = () => {},
     } = $props();
 
     let showDeleteDialog = $state(false);
     let showSHACLDialog = $state(false);
 
-    const highlightLabel = $derived(
-        shortenIri(
-            prefixes,
-            cls?.prefix ? `${cls.prefix}${cls.label}` : (cls?.label ?? ""),
-        ),
-    );
+    const highlightLabel = $derived(shortenIri(namespaces, classNavEntry.id));
     const shaclClass = $derived({
-        uuid: { value: cls?.uuid },
-        label: { value: cls?.label ?? "" },
+        uuid: { value: classNavEntry?.id },
+        label: { value: classNavEntry?.label ?? "" },
     });
 
     function selectClass() {
-        onPackChange({
-            ...pack,
-            showContents: true,
-            userCollapsed: false,
-        });
+        onPackChange();
         if (!editorState.selectedClassUUID.getValue()) {
-            eventStack.executeNewestEvent(cls.uuid);
-            editorState.selectedClassDataset.updateValue(dataset.label);
-            editorState.selectedClassGraph.updateValue(getUri(graph));
-            editorState.selectedClassUUID.updateValue(cls.uuid);
+            eventStack.executeNewestEvent(classNavEntry.id);
+            editorState.selectedClassDataset.updateValue(datasetNavEntry.id);
+            editorState.selectedClassGraph.updateValue(graphNavEntry.id);
+            editorState.selectedClassUUID.updateValue(classNavEntry.id);
             return;
         }
+        //The event executed to open the discard confirm delete dialog
         eventStack.executeNewestEvent({
-            datasetName: dataset.label,
-            graphUri: getUri(graph),
-            classUuid: cls.uuid,
+            datasetName: datasetNavEntry.id,
+            graphUri: graphNavEntry.id,
+            classUuid: classNavEntry.id,
         });
     }
 </script>
@@ -85,10 +73,14 @@
     <ContextMenu.TriggerArea class="flex w-full flex-col items-stretch">
         <NavigationEntry
             level={4}
-            label={cls.label}
+            label={classNavEntry.label}
             icon={faFileLines}
-            isSelected={isSelectedClass(dataset, graph, cls)}
-            title={cls.label}
+            isSelected={isSelectedClass(
+                datasetNavEntry.id,
+                graphNavEntry.id,
+                classNavEntry.id,
+            )}
+            title={datasetNavEntry.tooltip}
             {highlightLabel}
             onclick={selectClass}
         />
@@ -114,7 +106,7 @@
                 selectClass();
                 showDeleteDialog = true;
             }}
-            disabled={readOnly}
+            disabled={readonly}
             faIcon={faTrash}
             variant="danger"
         >
@@ -125,15 +117,14 @@
 
 <DeleteClassConfirmDialog
     bind:showDialog={showDeleteDialog}
-    datasetName={dataset.label}
-    graphUri={getUri(graph)}
-    classUuid={cls.uuid}
-    classLabel={cls.label}
+    datasetName={datasetNavEntry.id}
+    graphUri={graphNavEntry.id}
+    classUuid={classNavEntry.id}
+    classLabel={classNavEntry.label}
 />
 <SHACLClassSpecificPopUp
-    datasetName={dataset.label}
-    graphUri={getUri(graph)}
+    datasetName={datasetNavEntry.id}
+    graphUri={graphNavEntry.id}
     reactiveClass={shaclClass}
     bind:showDialog={showSHACLDialog}
-    class={shaclClass}
 />