graphwise-reactodia 0.0.1-TR6 → 0.0.1-TR8

package/README.md

@@ -34,6 +34,38 @@ npm run build
 (`reactodia:install` + `reactodia:compile`), then runs `reactodia:dedupe-react` to remove the fork's own
 `react`/`react-dom` copies so the bundle ends up with a single React instance.
 
+## Seeding the canvas
+
+By default the canvas starts empty and the user populates it through the workspace search bar. The host can
+instead pre-populate it on startup by passing seed data through `config` (see `ReactodiaAppProps`). Seeding is
+skipped when an `initialDiagram` is restored (e.g. after a language-change remount). There are two mechanisms,
+handled in `reactodia-app.ts`:
+
+### `seedIris` — lazy seed
+
+`config.seedIris` is a list of element(node) IRIs. Each IRI is placed as a placeholder node, then `seedCanvas` calls
+the model's `requestData()` so both the element data **and** its links are fetched from the SPARQL endpoint.
+Use this when the relationships are persisted in the repository and can be resolved lazily.
+
+### `seedGraph` — pre-resolved seed
+
+`config.seedGraph` is a list of `Triple` objects (mirroring GraphDB's `rest/explore-graph` shape).
+`seedGraphCanvas` places each `source`/`target` as an element and draws the supplied links directly, then
+requests **element data only** (`requestElementData`) — it does *not* ask the endpoint for links.
+
+Use this for the result of a CONSTRUCT/DESCRIBE query, whose relationships are computed and therefore not
+persisted in the DB, so they can't be fetched lazily and must be supplied by the host.
+
+`Triple` (`models/triple.ts`):
+
+| Field           | Description                                              |
+|-----------------|----------------------------------------------------------|
+| `source`        | Source element IRI.                                      |
+| `target`        | Target element IRI.                                      |
+| `rawPredicates` | Full (absolute) predicate IRIs — used as the link types. |
+
+When both are supplied `seedGraph` takes precedence over `seedIris`.
+
 ## Editing the fork
 
 Reactodia lives in the `reactodia-workspace/` submodule, which is its own git repo (remote:

package/dist/cjs/graphwise-reactodia.cjs.entry.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var index = require('./index-CII9aUQC.js');
+var index$1 = require('./index-CII9aUQC.js');
+var index = require('./index.cjs.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -18579,11 +18580,15 @@ function addWatermark(svg, viewBox, watermarkSvg) {
 	image.setAttribute("opacity", "0.3");
 	svg.insertBefore(image, svg.firstChild);
 }
+function stripPseudoElements(selectorText) {
+	if (!selectorText.includes("::")) return selectorText;
+	return selectorText.split(",").map((selector) => selector.replace(/::[a-zA-Z-]+/g, "").trim()).filter(Boolean).join(", ");
+}
 function collectAppliedCssFromDocument(targetSubtree) {
 	const appliedRules = [];
 	enumerateStylesheets((rule) => {
-		const selectorWithoutPseudo = rule.selectorText.replace(/::[a-zA-Z-]+$/, "");
-		if (targetSubtree.querySelector(selectorWithoutPseudo)) appliedRules.push(rule);
+		const selector = stripPseudoElements(rule.selectorText);
+		if (selector && targetSubtree.querySelector(selector)) appliedRules.push(rule);
 	});
 	return appliedRules;
 }
@@ -30642,6 +30647,188 @@ const TRANSLATIONS = {
     [LanguageKey.FR]: frTranslation
 };
 
+/**
+ * Provider for all {@link Service} instances. Services are singletons: there is only one
+ * instance of each service, created on demand and cached here so every consumer shares it.
+ */
+class ServiceProvider {
+    /**
+     * Returns the instance of the given service type, creating and caching it on first request.
+     *
+     * @param type The service type to retrieve.
+     * @returns The shared instance of the service.
+     * @template T The type of the service to retrieve.
+     */
+    static get(type) {
+        if (!ServiceProvider.SERVICE_INSTANCES.has(type.name)) {
+            ServiceProvider.SERVICE_INSTANCES.set(type.name, new type());
+        }
+        return ServiceProvider.SERVICE_INSTANCES.get(type.name);
+    }
+}
+ServiceProvider.SERVICE_INSTANCES = new Map();
+
+/**
+ * Injects the singleton instance of the given service class from the {@link ServiceProvider}.
+ *
+ * @param serviceClass The class of the service to inject.
+ * @returns The shared instance of the specified service class.
+ * @template T The type of the service to inject.
+ * @example
+ * ```typescript
+ * const diagramStateService = service(DiagramStateService);
+ * ```
+ */
+function service(serviceClass) {
+    return ServiceProvider.get(serviceClass);
+}
+
+/**
+ * Service for diagram related operations and subscriptions
+ */
+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';
+
+/**
+ * Service that provides access to browser window-related functionality.
+ */
+class WindowService {
+    getWindow() {
+        return window;
+    }
+}
+
+/**
+ * Service for local store-related diagram operations
+ */
+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';
+
+/**
+ * Service for event based operations
+ */
+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(index.CLEAR_DIAGRAM_STORAGE_EVENT, onClear);
+        return () => target.removeEventListener(index.CLEAR_DIAGRAM_STORAGE_EVENT, onClear);
+    }
+}
+
+/**
+ * A collection of {@link Subscription}s that can be released together. Components collect the
+ * subscriptions they open and call {@link unsubscribeAll} on teardown so nothing is left
+ * listening.
+ */
+class SubscriptionList {
+    constructor(subscriptions = []) {
+        this.items = subscriptions;
+    }
+    /**
+     * Adds a subscription to the list.
+     */
+    add(subscription) {
+        this.items.push(subscription);
+    }
+    /**
+     * Adds multiple subscriptions to the list.
+     */
+    addAll(subscriptions) {
+        this.items.push(...subscriptions);
+    }
+    /**
+     * Removes a subscription from the list without unsubscribing it.
+     */
+    remove(subscription) {
+        this.items = this.items.filter((sub) => sub !== subscription);
+    }
+    /**
+     * Calls every subscription (unsubscribing it) and clears the list.
+     */
+    unsubscribeAll() {
+        this.items.forEach((subscription) => subscription());
+        this.items = [];
+    }
+}
+
 /**
  * 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.
@@ -30659,6 +30846,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
@@ -30669,21 +30862,71 @@ 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);
     }
     await model.requestData();
     await performLayout({ signal });
 }
+/**
+ * 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 seedGraphToCanvas(context, dataProvider, links, signal) {
+    const { model, performLayout } = context;
+    await model.createNewDiagram({ dataProvider, signal });
+    const uniqueIris = new Set();
+    links.forEach((link) => {
+        var _a;
+        uniqueIris.add(link.source);
+        uniqueIris.add(link.target);
+        // this is a createOrGet, regardless of the name, so we don't need to worry about duplicates.
+        model.createElement(link.source);
+        model.createElement(link.target);
+        (_a = link.rawPredicates) === null || _a === void 0 ? void 0 : _a.forEach((predicate) => {
+            model.createLinks({
+                linkTypeId: predicate,
+                sourceId: link.source,
+                targetId: link.target,
+                properties: {}
+            });
+        });
+    });
+    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.
  *
@@ -30694,22 +30937,32 @@ async function seedCanvas(context, seed, 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 (config.seedIris) {
-                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]);
     /**
@@ -30760,6 +31013,7 @@ function exportReactodiaLayout() {
  * Unmounts the Reactodia application.
  */
 function unmountReactodia(root) {
+    subscriptions.unsubscribeAll();
     root.unmount();
 }
 
@@ -30767,7 +31021,7 @@ const graphwiseReactodiaCss = "graphwise-reactodia{display:block;width:100%;heig
 
 const GraphwiseReactodia = class {
     constructor(hostRef) {
-        index.registerInstance(this, hostRef);
+        index$1.registerInstance(this, hostRef);
         /**
          * UI language code (e.g. `en`, `fr`) for the Reactodia interface. Defaults to English.
          */
@@ -30778,13 +31032,13 @@ const GraphwiseReactodia = class {
     }
     onLanguageChange() {
         // The translations are evaluated by the workspace at construction, so the only way
-        // to re-translate the UI is to re-create the graph. We carry the
-        // current diagram across the remount so switching languages does not wipe the canvas.
-        const diagram = exportReactodiaLayout();
-        this.renderGraph(diagram);
+        // to re-translate the UI is to re-create the graph.
+        this.renderGraph(true);
     }
-    componentDidLoad() {
-        this.renderGraph();
+    connectedCallback() {
+        if (this.config) {
+            this.renderGraph();
+        }
     }
     disconnectedCallback() {
         if (this.reactRoot) {
@@ -30793,9 +31047,9 @@ const GraphwiseReactodia = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '8ef8d44db9d8e5eae72474c71c3c586f1f267d9b' }));
+        return (index$1.h(index$1.Host, { key: 'b33d3709a5d7b1fdde8d528d036d9dbc962d6c76' }));
     }
-    renderGraph(initialDiagram) {
+    renderGraph(isReloading) {
         var _a;
         if (!this.currentRepository) {
             throw new Error('currentRepository is required');
@@ -30807,20 +31061,20 @@ const GraphwiseReactodia = class {
             return;
         }
         const props = {
-            initialDiagram,
+            isReload: isReloading,
             currentRepository: this.currentRepository,
             config: this.config,
             language: this.language,
             providerSettings: this.providerSettings,
         };
-        if (this.reactRoot && !initialDiagram) {
+        if (this.reactRoot && !isReloading) {
             void updateReactodia(props);
         }
         else {
             this.reactRoot = mountReactodia(this.hostElement, props);
         }
     }
-    get hostElement() { return index.getElement(this); }
+    get hostElement() { return index$1.getElement(this); }
     static get watchers() { return {
         "currentRepository": ["onProviderSettingsChange"],
         "providerSettings": ["onProviderSettingsChange"],

package/dist/cjs/index.cjs.js

@@ -1,2 +1,9 @@
 'use strict';
 
+/**
+ * Event name for clearing the local store state of the diagram. There is an event listener listening for it, which
+ * will clear the local store state, whenever this event is fired.
+ */
+const CLEAR_DIAGRAM_STORAGE_EVENT = 'graphwise-reactodia:clear-diagram-storage';
+
+exports.CLEAR_DIAGRAM_STORAGE_EVENT = CLEAR_DIAGRAM_STORAGE_EVENT;

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { exportReactodiaLayout, mountReactodia, unmountReactodia, updateReactodia } from "./reactodia-app";
+import { mountReactodia, unmountReactodia, updateReactodia } from "./reactodia-app";
 import { LanguageKey } from "./i18n/language-key";
 /**
  * A web component that renders a graph with the Reactodia workspace.
@@ -24,13 +24,13 @@ export class GraphwiseReactodia {
     }
     onLanguageChange() {
         // The translations are evaluated by the workspace at construction, so the only way
-        // to re-translate the UI is to re-create the graph. We carry the
-        // current diagram across the remount so switching languages does not wipe the canvas.
-        const diagram = exportReactodiaLayout();
-        this.renderGraph(diagram);
+        // to re-translate the UI is to re-create the graph.
+        this.renderGraph(true);
     }
-    componentDidLoad() {
-        this.renderGraph();
+    connectedCallback() {
+        if (this.config) {
+            this.renderGraph();
+        }
     }
     disconnectedCallback() {
         if (this.reactRoot) {
@@ -39,9 +39,9 @@ export class GraphwiseReactodia {
         }
     }
     render() {
-        return (h(Host, { key: '8ef8d44db9d8e5eae72474c71c3c586f1f267d9b' }));
+        return (h(Host, { key: 'b33d3709a5d7b1fdde8d528d036d9dbc962d6c76' }));
     }
-    renderGraph(initialDiagram) {
+    renderGraph(isReloading) {
         var _a;
         if (!this.currentRepository) {
             throw new Error('currentRepository is required');
@@ -53,13 +53,13 @@ export class GraphwiseReactodia {
             return;
         }
         const props = {
-            initialDiagram,
+            isReload: isReloading,
             currentRepository: this.currentRepository,
             config: this.config,
             language: this.language,
             providerSettings: this.providerSettings,
         };
-        if (this.reactRoot && !initialDiagram) {
+        if (this.reactRoot && !isReloading) {
             void updateReactodia(props);
         }
         else {

package/dist/collection/components/graphwise-reactodia/models/clear-diagram-storage-event.js

@@ -0,0 +1,5 @@
+/**
+ * Event name for clearing the local store state of the diagram. There is an event listener listening for it, which
+ * will clear the local store state, whenever this event is fired.
+ */
+export const CLEAR_DIAGRAM_STORAGE_EVENT = 'graphwise-reactodia:clear-diagram-storage';

package/dist/collection/components/graphwise-reactodia/models/subscription-list.js

@@ -0,0 +1,35 @@
+/**
+ * A collection of {@link Subscription}s that can be released together. Components collect the
+ * subscriptions they open and call {@link unsubscribeAll} on teardown so nothing is left
+ * listening.
+ */
+export class SubscriptionList {
+    constructor(subscriptions = []) {
+        this.items = subscriptions;
+    }
+    /**
+     * Adds a subscription to the list.
+     */
+    add(subscription) {
+        this.items.push(subscription);
+    }
+    /**
+     * Adds multiple subscriptions to the list.
+     */
+    addAll(subscriptions) {
+        this.items.push(...subscriptions);
+    }
+    /**
+     * Removes a subscription from the list without unsubscribing it.
+     */
+    remove(subscription) {
+        this.items = this.items.filter((sub) => sub !== subscription);
+    }
+    /**
+     * Calls every subscription (unsubscribing it) and clears the list.
+     */
+    unsubscribeAll() {
+        this.items.forEach((subscription) => subscription());
+        this.items = [];
+    }
+}

package/dist/collection/components/graphwise-reactodia/models/subscription.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/graphwise-reactodia/models/triple.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/graphwise-reactodia/providers/service/service-inject.js

@@ -0,0 +1,15 @@
+import { ServiceProvider } from "./service.provider";
+/**
+ * Injects the singleton instance of the given service class from the {@link ServiceProvider}.
+ *
+ * @param serviceClass The class of the service to inject.
+ * @returns The shared instance of the specified service class.
+ * @template T The type of the service to inject.
+ * @example
+ * ```typescript
+ * const diagramStateService = service(DiagramStateService);
+ * ```
+ */
+export function service(serviceClass) {
+    return ServiceProvider.get(serviceClass);
+}

package/dist/collection/components/graphwise-reactodia/providers/service/service.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/graphwise-reactodia/providers/service/service.provider.js

@@ -0,0 +1,20 @@
+/**
+ * Provider for all {@link Service} instances. Services are singletons: there is only one
+ * instance of each service, created on demand and cached here so every consumer shares it.
+ */
+export class ServiceProvider {
+    /**
+     * Returns the instance of the given service type, creating and caching it on first request.
+     *
+     * @param type The service type to retrieve.
+     * @returns The shared instance of the service.
+     * @template T The type of the service to retrieve.
+     */
+    static get(type) {
+        if (!ServiceProvider.SERVICE_INSTANCES.has(type.name)) {
+            ServiceProvider.SERVICE_INSTANCES.set(type.name, new type());
+        }
+        return ServiceProvider.SERVICE_INSTANCES.get(type.name);
+    }
+}
+ServiceProvider.SERVICE_INSTANCES = new Map();