graphwise-reactodia 0.0.1-TR2 → 0.0.1-TR20

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

@@ -0,0 +1,68 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var DiagramFileService_1;
+import { Service } from "../../providers/service/service";
+import { service } from "../../providers/service/service-inject";
+import { WindowService } from "../window/window.service";
+/**
+ * Service for downloading and uploading the diagram as a file. The file content is the same
+ * {@link SerializedDiagram} that is persisted to the local store.
+ */
+let DiagramFileService = DiagramFileService_1 = class DiagramFileService {
+    /**
+     * Downloads the given diagram serialization as a file with the given name.
+     */
+    download(diagram, fileName) {
+        const window = service(WindowService).getWindow();
+        const blob = new Blob([JSON.stringify(diagram)], { type: DiagramFileService_1.MIME_TYPE });
+        const url = window.URL.createObjectURL(blob);
+        const link = window.document.createElement('a');
+        link.href = url;
+        link.download = fileName;
+        link.click();
+        window.URL.revokeObjectURL(url);
+    }
+    /**
+     * Reads a diagram serialization from the given file.
+     *
+     * @throws Error when the file is not valid JSON or is not a serialized diagram.
+     */
+    async read(file) {
+        let diagram;
+        try {
+            diagram = JSON.parse(await file.text());
+        }
+        catch (error) {
+            throw new Error(`File "${file.name}" is not valid JSON: ${error.message}`);
+        }
+        if (!this.isSerializedDiagram(diagram)) {
+            throw new Error(`File "${file.name}" is not a serialized diagram`);
+        }
+        return diagram;
+    }
+    /**
+     * Checks if the provided value is a serialized diagram
+     */
+    isSerializedDiagram(value) {
+        var _a, _b;
+        const diagram = value;
+        return (diagram === null || diagram === void 0 ? void 0 : diagram['@type']) === 'Diagram'
+            && Array.isArray((_a = diagram.layoutData) === null || _a === void 0 ? void 0 : _a.elements)
+            && Array.isArray((_b = diagram.layoutData) === null || _b === void 0 ? void 0 : _b.links);
+    }
+};
+DiagramFileService.ID = 'DiagramFileService';
+DiagramFileService.FILE_EXTENSION = '.json';
+DiagramFileService.MIME_TYPE = 'application/json';
+DiagramFileService = DiagramFileService_1 = __decorate([
+    Service
+], DiagramFileService);
+export { DiagramFileService };

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

@@ -0,0 +1,71 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var DiagramStorageService_1;
+import { Service } from "../../providers/service/service";
+import { service } from "../../providers/service/service-inject";
+import { WindowService } from "../window/window.service";
+import { ErrorService } from "../error/error.service";
+import { ErrorCode } from "../../models/error/error-code";
+/**
+ * Service for local store-related diagram operations
+ */
+let DiagramStorageService = DiagramStorageService_1 = class DiagramStorageService {
+    constructor() {
+        this.errorService = service(ErrorService);
+    }
+    /**
+     * Load the persisted diagram from the local store, or `undefined` when nothing is stored (or the stored value
+     * is unreadable).
+     */
+    load() {
+        try {
+            const raw = this.storage.getItem(DiagramStorageService_1.STORAGE_KEY);
+            if (!raw) {
+                return undefined;
+            }
+            return JSON.parse(raw);
+        }
+        catch (error) {
+            this.errorService.report(ErrorCode.LOCAL_DIAGRAM_READ, error);
+            return undefined;
+        }
+    }
+    /**
+     * Persists the given diagram serialization.
+     */
+    save(diagram) {
+        try {
+            this.storage.setItem(DiagramStorageService_1.STORAGE_KEY, JSON.stringify(diagram));
+        }
+        catch (error) {
+            this.errorService.report(ErrorCode.LOCAL_DIAGRAM_SAVE, error);
+        }
+    }
+    /**
+     * Removes the persisted diagram. Used when a new view (a seed) should take precedence over
+     * previously saved edits.
+     */
+    clear() {
+        this.storage.removeItem(DiagramStorageService_1.STORAGE_KEY);
+    }
+    /**
+     * Local storage getter
+     */
+    get storage() {
+        return service(WindowService).getWindow().localStorage;
+    }
+};
+DiagramStorageService.ID = 'DiagramStorageService';
+DiagramStorageService.STORAGE_KEY = 'diagram.state';
+DiagramStorageService = DiagramStorageService_1 = __decorate([
+    Service
+], DiagramStorageService);
+export { DiagramStorageService };

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

@@ -0,0 +1,78 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ErrorService_1;
+import { Service } from "../../providers/service/service";
+import { service } from "../../providers/service/service-inject";
+import { EventType } from "../../models/event/event-type";
+import { EventService } from "../event/event.service";
+/**
+ * Service that collects the failures of the wrapper and the fork, so they can be announced to the host.
+ */
+let ErrorService = ErrorService_1 = class ErrorService {
+    constructor() {
+        this.eventService = service(EventService);
+        this.reported = new WeakSet();
+    }
+    /**
+     * Reports a failure to the host, unless it's an abort, or this exact error object is already reported
+     * from another place.
+     *
+     * The same error object may be reported from different places. E.g. a query that fails while a diagram loads is
+     * reported by the data provider decorator as `data-fetch`, and then reaches the `catch` around the load, which
+     * reports it as `diagram-load`. Only the first one is announced.
+     *
+     * The `cause` is checked because the fork wraps whatever fails during a diagram import in a new error:
+     *
+     * ```ts
+     * // reactodia-workspace/src/editor/dataDiagramModel.ts, importLayout
+     * } catch (error) {
+     *   throw new Error('Reactodia: failed to import a layout', {cause: error});
+     * }
+     * ```
+     *
+     * We need to check the cause to make sure we don't report the same error/abort more than once.
+     *
+     * @param code The category of the failure.
+     * @param thrown The thrown value.
+     */
+    report(code, thrown) {
+        const causes = this.causeChain(thrown);
+        if (this.isAbortedOrAlreadyReported(causes)) {
+            return;
+        }
+        causes.forEach((cause) => this.reported.add(cause));
+        this.eventService.emit({ type: EventType.ERROR, payload: { code, error: thrown } });
+    }
+    /**
+     * Whether any link of the given cause chain is an abort or is already reported.
+     */
+    isAbortedOrAlreadyReported(causes) {
+        return causes.some((cause) => cause.name === ErrorService_1.ABORT_ERROR_NAME || this.reported.has(cause));
+    }
+    /**
+     * The thrown value followed by its `cause`, the cause of that, and so on, for as long as they are objects.
+     */
+    causeChain(thrown) {
+        const causes = [];
+        let current = thrown;
+        while (typeof current === 'object' && current !== null && !causes.includes(current)) {
+            causes.push(current);
+            current = current.cause;
+        }
+        return causes;
+    }
+};
+ErrorService.ID = 'ErrorService';
+ErrorService.ABORT_ERROR_NAME = 'AbortError';
+ErrorService = ErrorService_1 = __decorate([
+    Service
+], ErrorService);
+export { ErrorService };

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

@@ -0,0 +1,58 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Service } from "../../providers/service/service";
+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
+ */
+let EventService = class EventService {
+    /**
+     * Announces an event to the host.
+     *
+     * @param detail The event detail.
+     */
+    emit(detail) {
+        var _a;
+        (_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, detail);
+    }
+    /**
+     * Subscribes to the emitted events, replacing the previous subscriber.
+     *
+     * @param callback Called with every emitted event.
+     * @returns A {@link Subscription} that, when called, removes the callback, unless it has already been replaced.
+     */
+    subscribe(callback) {
+        this.callback = callback;
+        return () => {
+            if (this.callback === callback) {
+                this.callback = undefined;
+            }
+        };
+    }
+    /**
+     * 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();
+        target.addEventListener(CLEAR_DIAGRAM_STORAGE_EVENT, onClear);
+        return () => target.removeEventListener(CLEAR_DIAGRAM_STORAGE_EVENT, onClear);
+    }
+};
+EventService.ID = 'EventService';
+EventService = __decorate([
+    Service
+], EventService);
+export { EventService };

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

@@ -0,0 +1,24 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Service } from "../../providers/service/service";
+/**
+ * Service that provides access to browser window-related functionality.
+ */
+let WindowService = class WindowService {
+    getWindow() {
+        return window;
+    }
+};
+WindowService.ID = 'WindowService';
+WindowService = __decorate([
+    Service
+], WindowService);
+export { WindowService };

package/dist/collection/components/graphwise-reactodia/styles/type-style.resolver.js

@@ -0,0 +1,52 @@
+/**
+ * Color slot assigned to each type, in the order the types are first seen.
+ */
+const typeToIndex = new Map();
+/**
+ * Returns the internal property of the given palette slot, numbered from 1 and padded to two digits as in `_theme.scss`.
+ */
+function getTypeColorProperty(slot) {
+    return `--_graphwise-reactodia-type-color-${String(slot).padStart(2, '0')}`;
+}
+/**
+ * Reads the type palette of the Theme API: the internal properties `_theme.scss` resolves from the ones
+ * the host declares, in slot order up to the first empty one.
+ */
+function getPalette() {
+    const host = document.querySelector('graphwise-reactodia');
+    if (!host) {
+        return [];
+    }
+    const style = getComputedStyle(host);
+    const palette = [];
+    let color = style.getPropertyValue(getTypeColorProperty(1)).trim();
+    while (color) {
+        palette.push(color);
+        color = style.getPropertyValue(getTypeColorProperty(palette.length + 1)).trim();
+    }
+    return palette;
+}
+/**
+ * Colors an element by its type: each type takes the next color from the palette, which wraps
+ * around once it runs out
+ *
+ * Returns `undefined` for elements without a type (placeholders and other non-entity elements) and
+ * when the host does not define the palette, leaving Reactodia to fall back to its own hash-based
+ * colors.
+ */
+export const resolveTypeStyle = (types) => {
+    const type = types[0];
+    if (!type) {
+        return undefined;
+    }
+    let index = typeToIndex.get(type);
+    if (index === undefined) {
+        index = typeToIndex.size;
+        typeToIndex.set(type, index);
+    }
+    const colors = getPalette();
+    return colors.length ? { color: colors[index % colors.length] } : undefined;
+};
+export const resetColors = () => {
+    typeToIndex.clear();
+};

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/components/graphwise-reactodia/ui-config/default-ui-config.js

@@ -0,0 +1,30 @@
+import { MenuItem } from "../models/ui/menu-item";
+import { NodeAction } from "../models/ui/node-action";
+import { ToolbarDock } from "../models/ui/toolbar-dock";
+/**
+ * The default UI configuration: Reactodia's behaviour, plus the diagram download and upload in the menu.
+ */
+export const DEFAULT_UI_CONFIG = {
+    mainToolbar: { dock: ToolbarDock.NW },
+    actionsToolbar: { dock: ToolbarDock.SW },
+    menu: {
+        items: [
+            MenuItem.CLEAR_ALL,
+            MenuItem.EXPORT_PNG,
+            MenuItem.EXPORT_SVG,
+            MenuItem.PRINT,
+            MenuItem.EXPORT_JSON,
+            MenuItem.IMPORT_JSON
+        ]
+    },
+    nodeActions: [
+        NodeAction.GROUP,
+        NodeAction.REMOVE,
+        NodeAction.EXPAND,
+        NodeAction.OPEN_LINK,
+        NodeAction.CONNECTIONS,
+        NodeAction.ADD_TO_FILTER,
+        NodeAction.ANNOTATE,
+        NodeAction.ESTABLISH_LINK
+    ]
+};

package/dist/collection/components/graphwise-reactodia/ui-config/ui-config-mapper.js

@@ -0,0 +1,51 @@
+import { createElement, Fragment } from "react";
+import { ToolbarDock } from "../models/ui/toolbar-dock";
+import { MenuItem } from "../models/ui/menu-item";
+import { NodeAction } from "../models/ui/node-action";
+import { ErrorCode } from "../models/error/error-code";
+import { service } from "../providers/service/service-inject";
+import { ErrorService } from "../services/error/error.service";
+import { mergeWithDefaults } from "../utils/object-util";
+import { DEFAULT_UI_CONFIG } from "./default-ui-config";
+import { createMenuItems } from "../menu/graphwise-menu";
+import { createNodeActions } from "../node-action/node-actions";
+const errorService = service(ErrorService);
+/**
+ * Merges the host's UI configuration over the default and maps the result to `DefaultWorkspace` props. A `null` or
+ * missing field keeps the default; objects merge key by key and lists replace the default whole. Unknown values are
+ * reported and left out; a repeated list entry is kept once.
+ *
+ * @param ui The host's UI configuration.
+ */
+export function toWorkspaceProps(ui) {
+    const resolved = mergeWithDefaults(ui !== null && ui !== void 0 ? ui : {}, DEFAULT_UI_CONFIG);
+    const menuItems = [...new Set(resolved.menu.items)].filter((item) => isValid(item, MenuItem));
+    const nodeActions = [...new Set(resolved.nodeActions)].filter((action) => isValid(action, NodeAction));
+    return {
+        menu: menuItems.length ? createElement(Fragment, null, createMenuItems(menuItems)) : null,
+        mainToolbar: toToolbarProps(resolved.mainToolbar, DEFAULT_UI_CONFIG.mainToolbar),
+        actionsToolbar: toToolbarProps(resolved.actionsToolbar, DEFAULT_UI_CONFIG.actionsToolbar),
+        halo: { children: createNodeActions(nodeActions) }
+    };
+}
+/**
+ * Maps a toolbar position to the `DefaultWorkspace` toolbar props. With an unknown dock, `defaultPosition` is used
+ * whole, since the offsets are relative to the dock.
+ */
+function toToolbarProps(position, defaultPosition) {
+    const { dock, offsetX, offsetY } = isValid(position.dock, ToolbarDock) ? position : defaultPosition;
+    return { dock, dockOffsetX: offsetX, dockOffsetY: offsetY };
+}
+/**
+ * Whether `value` is one of the `known` values. Reports it as unknown UI configuration when it is not.
+ *
+ * @param value The value from the UI configuration.
+ * @param known The known values, e.g. an enum.
+ */
+function isValid(value, known) {
+    const isValid = Object.values(known).includes(value);
+    if (!isValid) {
+        errorService.report(ErrorCode.UNKNOWN_UI_CONFIG, new Error(`Unknown UI configuration value: "${value}"`));
+    }
+    return isValid;
+}

package/dist/collection/components/graphwise-reactodia/utils/object-util.js

@@ -0,0 +1,30 @@
+/**
+ * Merges an object with default values. Ported from the GraphDB Workbench `ObjectUtil.mergeWithDefaults`.
+ *
+ * For each property in `defaults`, if the value in `object` is `null` or `undefined`, the default value is used instead.
+ * Nested objects are merged recursively. Arrays and other non-plain values are treated as single values and are not
+ * merged.
+ *
+ * The returned object is a new object and does not share references with the inputs. The inputs must be
+ * structured-cloneable.
+ *
+ * @param object Source object whose values take precedence over defaults.
+ * @param defaults Default values applied when properties are missing or null.
+ * @returns A new object containing the merged result.
+ */
+export function mergeWithDefaults(object, defaults) {
+    const result = structuredClone(object);
+    Object.entries(defaults).forEach(([key, defaultValue]) => {
+        const value = result[key];
+        if (value === null || value === undefined) {
+            result[key] = structuredClone(defaultValue);
+        }
+        else if (isPlainObject(value) && isPlainObject(defaultValue)) {
+            result[key] = mergeWithDefaults(value, defaultValue);
+        }
+    });
+    return result;
+}
+function isPlainObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}

package/dist/collection/index.js

@@ -1 +1,7 @@
-export {};
+export { CLEAR_DIAGRAM_STORAGE_EVENT } from './components/graphwise-reactodia/models/clear-diagram-storage-event';
+export { GRAPHWISE_REACTODIA_EVENT } from './components/graphwise-reactodia/models/event/event-detail';
+export { EventType } from './components/graphwise-reactodia/models/event/event-type';
+export { ErrorCode } from './components/graphwise-reactodia/models/error/error-code';
+export { ToolbarDock } from './components/graphwise-reactodia/models/ui/toolbar-dock';
+export { MenuItem } from './components/graphwise-reactodia/models/ui/menu-item';
+export { NodeAction } from './components/graphwise-reactodia/models/ui/node-action';

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

@@ -0,0 +1,157 @@
+// 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.
+//
+// The queries are recorded, so the tests can tell which provider settings built them.
+const sparqlQueries = [];
+window.sparqlQueries = sparqlQueries;
+
+async function stubQueryFunction(params) {
+  sparqlQueries.push(params.body);
+  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'}});
+}
+
+// A transport that always fails, as an unreachable or misconfigured endpoint would.
+async function failingQueryFunction() {
+  throw new Error('Query failed');
+}
+
+// A transport that never answers. Once its request is cancelled it fails with an ordinary error, as a transport
+// that does not throw an `AbortError` would. The pending and the cancelled requests are counted.
+window.pendingQueries = 0;
+window.cancelledQueries = 0;
+
+function hangingQueryFunction(params) {
+  window.pendingQueries++;
+  return new Promise((_resolve, reject) => {
+    params.signal?.addEventListener('abort', () => {
+      window.pendingQueries--;
+      window.cancelledQueries++;
+      reject(new Error('Request cancelled'));
+    });
+  });
+}
+
+// The errors the component reports are recorded, so the tests can tell what the host was notified of.
+const reportedErrors = [];
+window.reportedErrors = reportedErrors;
+// The listener is on the document, since the tests replace the element.
+document.addEventListener('graphwiseReactodiaEvent', (event) => {
+  if (event.detail.type !== 'error') {
+    return;
+  }
+  const {code, error} = event.detail.payload;
+  reportedErrors.push({code, message: error.message});
+});
+
+// The text search events are counted.
+window.textSearches = 0;
+document.addEventListener('graphwiseReactodiaEvent', (event) => {
+  if (event.detail.type === 'text-search') {
+    window.textSearches++;
+  }
+});
+
+const SEED_NODES = ['http://example.com/alice', 'http://example.com/bob'];
+
+const SEED_GRAPH = [
+  {
+    source: 'http://example.com/alice',
+    target: 'http://example.com/bob',
+    rawPredicates: ['http://example.com/knows'],
+  },
+];
+
+const reactodia = document.querySelector('graphwise-reactodia');
+
+function setQueryFunction() {
+  reactodia.config = {...reactodia.config, queryFunction: stubQueryFunction};
+}
+
+function setFailingQueryFunction() {
+  reactodia.config = {...reactodia.config, queryFunction: failingQueryFunction};
+}
+
+function setHangingQueryFunction() {
+  reactodia.config = {...reactodia.config, queryFunction: hangingQueryFunction};
+}
+
+// The wrapper has no default preset, so the host always passes one. The demo uses Reactodia's generic
+// OWL/RDFS preset, copied into `owl-rdfs-settings.js`.
+function setProviderSettings() {
+  reactodia.providerSettings = OWL_RDFS_SETTINGS;
+}
+
+// A runtime change goes through the `providerSettings` prop. The extra prefix marks the queries built
+// with the changed settings.
+function changeProviderSettings() {
+  reactodia.providerSettings = {
+    ...OWL_RDFS_SETTINGS,
+    defaultPrefix: `${OWL_RDFS_SETTINGS.defaultPrefix}\nPREFIX changed: <http://example.com/changed#>\n`,
+  };
+}
+
+// Replaces the element with a new one the way a framework such as Angular renders it: attached first, then
+// the props set one by one. The component code is already loaded by then, so the component is initialized
+// before it has any of its props.
+function attachThenSetProps(order) {
+  const props = {
+    config: {queryFunction: stubQueryFunction, seedIris: SEED_NODES},
+    currentRepository: 'repo-a',
+    providerSettings: OWL_RDFS_SETTINGS,
+    language: 'fr',
+    theme: 'light',
+  };
+  const element = document.createElement('graphwise-reactodia');
+  element.dataset.test = 'reactodia';
+  document.querySelector('graphwise-reactodia').replaceWith(element);
+  order.forEach((prop) => {
+    element[prop] = props[prop];
+  });
+}
+
+function setSeed() {
+  reactodia.config = {...reactodia.config, seedIris: SEED_NODES};
+}
+
+function setSeedGraph() {
+  reactodia.config = {...reactodia.config, seedGraph: SEED_GRAPH};
+}
+
+// A partial host UI configuration, merged over the default.
+const HOST_UI = {
+  actionsToolbar: {dock: 'ne'},
+  nodeActions: ['group', 'remove', 'expand', 'connections', 'add-to-filter', 'annotate', 'establish-link'],
+};
+
+function setHostUi() {
+  reactodia.config = {...reactodia.config, ui: HOST_UI};
+}
+
+function setEmptyMenuUi() {
+  reactodia.config = {...reactodia.config, ui: {menu: {items: []}}};
+}
+
+function setRepository(repository) {
+  reactodia.currentRepository = repository;
+}
+
+function setLanguage(language) {
+  reactodia.language = language;
+}
+
+function setTheme(theme) {
+  reactodia.theme = theme;
+}
+
+// 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'));
+}