graphwise-reactodia 0.0.1-TR7 → 0.0.1-TR8

package/dist/collection/components/graphwise-reactodia/reactodia-app.js

@@ -1,8 +1,13 @@
 import { createElement } from "react";
 import { createRoot } from "react-dom/client";
-import { DefaultWorkspace, SparqlDataProvider, useLoadedWorkspace, Workspace, } from "@reactodia/workspace";
+import { DefaultWorkspace, SparqlDataProvider, useLoadedWorkspace, Workspace } from "@reactodia/workspace";
 import { blockingDefaultLayout } from "@reactodia/workspace/layout-sync";
 import { TRANSLATIONS } from "./i18n/translations";
+import { service } from "./providers/service/service-inject";
+import { DiagramService } from "./services/diagram/diagram.service";
+import { DiagramStorageService } from "./services/diagram-storage/diagram-storage.service";
+import { EventService } from "./services/event/event.service";
+import { SubscriptionList } from "./models/subscription-list";
 /**
  * Reactodia ships English as its built-in default bundle, so English needs no override.
  * Other languages are layered on top as partial bundles; unknown codes fall back to English.
@@ -20,6 +25,12 @@ function translationsForLanguage(language) {
  * runs outside React and therefore cannot call the `useWorkspace` hook.
  */
 let workspaceContext = null;
+/**
+ * Active listeners that persist diagram edits to local storage. Populated when the workspace
+ * mounts and released in {@link unmountReactodia}, so persistence follows the same lifecycle as
+ * the React root.
+ */
+const subscriptions = new SubscriptionList();
 /**
  * Builds a Reactodia {@link SparqlDataProvider} for the given endpoint using the supplied
  * query preset. The host owns the query configuration and passes it in via props; when none
@@ -30,15 +41,16 @@ function createDataProvider(props) {
     return new SparqlDataProvider({
         endpointUrl: currentRepository,
         queryMethod: 'POST',
-        queryFunction: config.queryFunction,
+        queryFunction: config.queryFunction
     }, providerSettings);
 }
 /**
  * Places the seed entities on the canvas. Each IRI is added as a placeholder element, and data is then loaded for the
  * respective nodes using the {@link DataDiagramModel.requestData} method.
  */
-async function seedCanvas(context, seed, signal) {
+async function seedIrisToCanvas(context, dataProvider, seed, signal) {
     const { model, performLayout } = context;
+    await model.createNewDiagram({ dataProvider, signal });
     for (const iri of seed) {
         model.createElement(iri);
     }
@@ -46,18 +58,13 @@ async function seedCanvas(context, seed, signal) {
     await performLayout({ signal });
 }
 /**
- * Places a pre-resolved graph (e.g. a CONSTRUCT query result) on the canvas. The relationships
- * are computed and not persisted in the repository, so the edges are drawn directly from the
- * supplied data instead of being fetched. The node IRIs do exist in the repository, so only
- * their display data is hydrated via {@link DataDiagramModel.requestElementData}.
- *
- * Note we use `requestElementData` rather than `requestData`: the latter would also query the
- * provider for *all* persisted links between the seeded nodes, over-fetching beyond the
- * CONSTRUCT's selection. Hydrating elements alone keeps the canvas to exactly the supplied
- * edges, while further expansion continues lazily against the SPARQL provider.
+ * Places a pre-resolved graph (e.g. a CONSTRUCT query result) on the canvas. The difference between this and
+ * {@link seedIrisToCanvas} is that this method does not request link data from the SPARQL endpoint, since describe/construct
+ * queries are not persisted in the DB. Here we expect provided links and query for element data only
  */
-async function seedGraphCanvas(context, links, signal) {
+async function seedGraphToCanvas(context, dataProvider, links, signal) {
     const { model, performLayout } = context;
+    await model.createNewDiagram({ dataProvider, signal });
     const uniqueIris = new Set();
     links.forEach((link) => {
         var _a;
@@ -75,11 +82,30 @@ async function seedGraphCanvas(context, links, signal) {
             });
         });
     });
-    // Request data only for elements.
-    // Link data is not available in the DB, since we are displaying construct/describe queries
     await model.requestElementData(Array.from(uniqueIris));
     await performLayout({ signal });
 }
+/**
+ * Subscribes to the model's changes so diagram edits are persisted to local storage. The
+ * subscription is tracked in {@link subscriptions} so it is released together with the React
+ * root in {@link unmountReactodia}.
+ */
+function onDiagramChange(model) {
+    const storage = service(DiagramStorageService);
+    const diagramService = service(DiagramService);
+    subscriptions.add(diagramService.subscribeToDiagramChange(model, (diagram) => storage.save(diagram)));
+}
+/**
+ * Subscribes to the host's "clear persisted diagram" command so the saved layout is dropped on
+ * request (e.g. before a fresh seed should take precedence over previously saved edits). The
+ * subscription is tracked in {@link subscriptions} so it is released together with the React
+ * root in {@link unmountReactodia}.
+ */
+function onClearDiagramStorage() {
+    const storage = service(DiagramStorageService);
+    const eventService = service(EventService);
+    subscriptions.add(eventService.subscribeToClearDiagramStorage(() => storage.clear()));
+}
 /**
  * The Reactodia workspace React component.
  *
@@ -90,26 +116,32 @@ async function seedGraphCanvas(context, links, signal) {
  * provider's lookup. With a seed, the seeded nodes are placed on the canvas on startup.
  */
 function ReactodiaApp(props) {
-    const { language, initialDiagram, config } = props;
+    const { language, config } = props;
+    const currentDiagram = props.isReload ? exportReactodiaLayout() : undefined;
     const { onMount } = useLoadedWorkspace(async ({ context, signal }) => {
         var _a, _b;
         workspaceContext = context;
         const { model } = context;
+        onDiagramChange(model);
+        onClearDiagramStorage();
         const dataProvider = createDataProvider(props);
-        // A language change remounts this component to rebuild the workspace with the new
-        // translation bundle; restoring the exported diagram keeps the user's canvas intact.
-        // This is done because there is no existing mechanism to re-translate the UI at runtime (not for the UI labels at least)
-        if (initialDiagram) {
-            await model.importLayout({ dataProvider, diagram: initialDiagram, signal });
+        const isReload = props.isReload;
+        const savedDiagram = service(DiagramStorageService).load();
+        if (isReload) {
+            // Simply reload without using the current state. This may happen when the user switches the language at runtime.
+            // since there is no existing mechanism to re-translate the UI at runtime (not for the UI labels at least)
+            await model.importLayout({ dataProvider, diagram: currentDiagram, signal });
+        }
+        else if ((_a = config.seedIris) === null || _a === void 0 ? void 0 : _a.length) {
+            await seedIrisToCanvas(context, dataProvider, config.seedIris, signal);
+        }
+        else if ((_b = config.seedGraph) === null || _b === void 0 ? void 0 : _b.length) {
+            await seedGraphToCanvas(context, dataProvider, config.seedGraph, signal);
         }
         else {
-            await model.createNewDiagram({ dataProvider, signal });
-            if ((_a = config.seedGraph) === null || _a === void 0 ? void 0 : _a.length) {
-                await seedGraphCanvas(context, config.seedGraph, signal);
-            }
-            else if ((_b = config.seedIris) === null || _b === void 0 ? void 0 : _b.length) {
-                await seedCanvas(context, config.seedIris, signal);
-            }
+            // Restore the previously saved layout when present, otherwise start empty. Either way this binds the
+            // data provider (savedDiagram is undefined -> empty diagram), so the unified search/lookup works.
+            await model.importLayout({ dataProvider, diagram: savedDiagram, signal });
         }
     }, [language]);
     /**
@@ -160,5 +192,6 @@ export function exportReactodiaLayout() {
  * Unmounts the Reactodia application.
  */
 export function unmountReactodia(root) {
+    subscriptions.unsubscribeAll();
     root.unmount();
 }

package/dist/collection/components/graphwise-reactodia/services/diagram/diagram.service.js

@@ -0,0 +1,39 @@
+/**
+ * Service for diagram related operations and subscriptions
+ */
+export class DiagramService {
+    /**
+     * Subscribes to diagram changes. On every debounced change the current layout is
+     * exported and passed to the callback
+     *
+     * @param model The diagram model to observe.
+     * @param onChangeCallback Called with the exported layout when the diagram changes.
+     * @returns A {@link Subscription} that, when called, removes the listener and drops any
+     * pending notification.
+     */
+    subscribeToDiagramChange(model, onChangeCallback) {
+        let notifyTimer;
+        const onHistoryChange = () => {
+            if (notifyTimer) {
+                clearTimeout(notifyTimer);
+            }
+            notifyTimer = setTimeout(() => {
+                notifyTimer = undefined;
+                onChangeCallback(model.exportLayout());
+            }, DiagramService.NOTIFY_DEBOUNCE_MS);
+        };
+        model.history.events.on(DiagramService.HISTORY_CHANGED_EVENT, onHistoryChange);
+        return () => {
+            model.history.events.off(DiagramService.HISTORY_CHANGED_EVENT, onHistoryChange);
+            if (notifyTimer) {
+                clearTimeout(notifyTimer);
+            }
+        };
+    }
+}
+/**
+ * Debounce time for the callback trigger. This is needed, because certain events (like moving a node) can trigger
+ * multiple `historyChanged` events in a short time.
+ */
+DiagramService.NOTIFY_DEBOUNCE_MS = 300;
+DiagramService.HISTORY_CHANGED_EVENT = 'historyChanged';

package/dist/collection/components/graphwise-reactodia/services/diagram-storage/diagram-storage.service.js

@@ -0,0 +1,42 @@
+import { service } from "../../providers/service/service-inject";
+import { WindowService } from "../window/window.service";
+/**
+ * Service for local store-related diagram operations
+ */
+export class DiagramStorageService {
+    /**
+     * Load the persisted diagram from the local store, or `undefined` when nothing is stored (or the stored value
+     * is unreadable).
+     */
+    load() {
+        var _a;
+        const raw = (_a = this.storage) === null || _a === void 0 ? void 0 : _a.getItem(DiagramStorageService.STORAGE_KEY);
+        if (!raw) {
+            return undefined;
+        }
+        return JSON.parse(raw);
+    }
+    /**
+     * Persists the given diagram serialization.
+     */
+    save(diagram) {
+        var _a;
+        (_a = this.storage) === null || _a === void 0 ? void 0 : _a.setItem(DiagramStorageService.STORAGE_KEY, JSON.stringify(diagram));
+    }
+    /**
+     * Removes the persisted diagram. Used when a new view (a seed) should take precedence over
+     * previously saved edits.
+     */
+    clear() {
+        var _a;
+        (_a = this.storage) === null || _a === void 0 ? void 0 : _a.removeItem(DiagramStorageService.STORAGE_KEY);
+    }
+    /**
+     * Local storage getter
+     */
+    get storage() {
+        var _a;
+        return (_a = service(WindowService).getWindow()) === null || _a === void 0 ? void 0 : _a.localStorage;
+    }
+}
+DiagramStorageService.STORAGE_KEY = 'diagram.state';

package/dist/collection/components/graphwise-reactodia/services/event/event.service.js

@@ -0,0 +1,22 @@
+import { CLEAR_DIAGRAM_STORAGE_EVENT } from "../../models/clear-diagram-storage-event";
+import { service } from "../../providers/service/service-inject";
+import { WindowService } from "../window/window.service";
+/**
+ * Service for event based operations
+ */
+export class EventService {
+    /**
+     * Subscribes to the host's "clear persisted diagram" command.
+     *
+     * @param onClear Called whenever the event fires.
+     * @returns A {@link Subscription} that, when called, removes the listener.
+     */
+    subscribeToClearDiagramStorage(onClear) {
+        const target = service(WindowService).getWindow();
+        if (!target) {
+            return () => undefined;
+        }
+        target.addEventListener(CLEAR_DIAGRAM_STORAGE_EVENT, onClear);
+        return () => target.removeEventListener(CLEAR_DIAGRAM_STORAGE_EVENT, onClear);
+    }
+}

package/dist/collection/components/graphwise-reactodia/services/window/window.service.js

@@ -0,0 +1,8 @@
+/**
+ * Service that provides access to browser window-related functionality.
+ */
+export class WindowService {
+    getWindow() {
+        return window;
+    }
+}

package/dist/collection/components/graphwise-reactodia/testing/storage.mock.js

@@ -0,0 +1,35 @@
+/**
+ * Minimal in-memory {@link Storage}, so services that read `localStorage` can be exercised
+ * without a real browser store and asserted against directly. Shared across test suites.
+ */
+export class StorageMock {
+    constructor() {
+        this.store = new Map();
+    }
+    get length() {
+        return this.store.size;
+    }
+    clear() {
+        this.store.clear();
+    }
+    getItem(key) {
+        return this.store.has(key) ? this.store.get(key) : null;
+    }
+    key(index) {
+        var _a;
+        return (_a = Array.from(this.store.keys())[index]) !== null && _a !== void 0 ? _a : null;
+    }
+    removeItem(key) {
+        this.store.delete(key);
+    }
+    setItem(key, value) {
+        this.store.set(key, value);
+    }
+}
+/**
+ * Creates a fresh {@link StorageMock}. Suites install the returned instance as the global
+ * `localStorage` themselves.
+ */
+export function createStorageMock() {
+    return new StorageMock();
+}

package/dist/collection/index.js

@@ -1 +1 @@
-export {};
+export { CLEAR_DIAGRAM_STORAGE_EVENT } from './components/graphwise-reactodia/models/clear-diagram-storage-event';

package/dist/collection/pages/graphwise-reactodia/main.js

@@ -1,18 +1,22 @@
-// Mock all responses as turtle, as we won't be making any SPARQL requests in the dev server.
-async function stubQueryFunction(_params) {
-  return (new Response('', {headers: {'Content-Type': 'text/turtle'}}));
+// There is no SPARQL endpoint behind the dev server, so every query is answered with an empty
+// result. The shape has to match what the provider asks for: SELECT/ASK queries are parsed with
+// `response.json()` and would blow up on an empty body, CONSTRUCT/DESCRIBE queries are parsed as
+// turtle, where an empty body is a valid (empty) graph.
+async function stubQueryFunction(params) {
+  const accept = params.headers?.['Accept'] ?? '';
+  if (accept.includes('sparql-results+json')) {
+    const body = JSON.stringify({head: {vars: []}, results: {bindings: []}, boolean: false});
+    return new Response(body, {headers: {'Content-Type': 'application/sparql-results+json'}});
+  }
+  return new Response('', {headers: {'Content-Type': 'text/turtle'}});
 }
 
-// IRIs of the entities the host asks to pre-populate the canvas with on startup.
 const SEED_NODES = ['http://example.com/alice', 'http://example.com/bob'];
 
-// Pre-resolved edges (e.g. a CONSTRUCT result) the host asks to draw directly on the canvas,
-// without querying the SPARQL endpoint for link data.
 const SEED_GRAPH = [
   {
     source: 'http://example.com/alice',
     target: 'http://example.com/bob',
-    predicates: ['knows'],
     rawPredicates: ['http://example.com/knows'],
   },
 ];
@@ -38,3 +42,9 @@ function setRepository(repository) {
 function setLanguage(language) {
   reactodia.language = language;
 }
+
+// The host asks the component to drop its persisted diagram by dispatching a namespaced window
+// event, rather than holding an element reference and calling a method on it.
+function clearDiagramStorage() {
+  window.dispatchEvent(new Event('graphwise-reactodia:clear-diagram-storage'));
+}