graphwise-reactodia 0.0.1-TR16 → 0.0.1-TR18

package/README.md

@@ -66,6 +66,63 @@ persisted in the DB, so they can't be fetched lazily and must be supplied by the
 
 When both are supplied `seedGraph` takes precedence over `seedIris`.
 
+## Events
+
+The element sends every event to the host through one DOM event, `graphwiseReactodiaEvent`. The event
+only informs the host and it bubbles. Its name is exported as `GRAPHWISE_REACTODIA_EVENT`.
+
+`detail` is an `EventDetail`: `{type, payload}`. `type` is an `EventType`; `payload` depends on it:
+
+| `type`  | `payload`       |
+|---------|-----------------|
+| `error` | `ErrorReport`   |
+
+Checking `type` narrows `payload`:
+
+```ts
+element.addEventListener(GRAPHWISE_REACTODIA_EVENT, (event) => {
+  const detail = (event as CustomEvent<EventDetail>).detail;
+  if (detail.type === EventType.ERROR) {
+    const {code, error} = detail.payload; // an ErrorReport
+  }
+});
+```
+
+`EventDetail<T>` is one event, e.g. for a handler of a single type:
+
+```ts
+function onError(detail: EventDetail<EventType.ERROR>): void {
+  const {code, error} = detail.payload;
+}
+```
+
+## Error handling
+
+The element dispatches an `error` event for every error it reports; the codes below list them.
+
+`payload` is an `ErrorReport`:
+
+| Field   | Description                                                                             |
+|---------|-----------------------------------------------------------------------------------------|
+| `code`  | An `ErrorCode`. The host translates by it.                                              |
+| `error` | Always an `Error`; its `message` is untranslated developer text, meant for the logs.    |
+
+`ErrorCode`:
+
+| Code                    | Reported when                                              |
+|-------------------------|------------------------------------------------------------|
+| `missing-required-prop` | A required prop is missing.                                |
+| `data-fetch`            | A SPARQL data provider call failed.                        |
+| `diagram-load`          | The startup load, a reload or a repository switch failed.  |
+| `diagram-import`        | The uploaded file was rejected or its import failed.       |
+| `local-diagram-read`    | Reading the diagram from local storage failed.             |
+| `local-diagram-save`    | Saving the diagram in local storage failed.                |
+
+Failed PNG/SVG exports and printing are not reported.
+
+Every failure is reported once: an error is skipped when it, or an error in its `cause` chain, is already reported.
+Aborted requests are not reported.
+
 ## Editing the fork
 
 Reactodia lives in the `reactodia-workspace/` submodule, which is its own git repo (remote:

package/dist/cjs/error-code-BdRU0RQ9.js

@@ -0,0 +1,36 @@
+'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';
+
+/**
+ * The kind of event the wrapper announces to the host. It selects the payload of an {@link EventDetail}.
+ */
+exports.EventType = void 0;
+(function (EventType) {
+    EventType["ERROR"] = "error";
+})(exports.EventType || (exports.EventType = {}));
+
+/**
+ * The stable category of a reported error. The host uses it to choose its own message.
+ */
+exports.ErrorCode = void 0;
+(function (ErrorCode) {
+    /** A required prop is missing. */
+    ErrorCode["MISSING_REQUIRED_PROP"] = "missing-required-prop";
+    /** A SPARQL data provider call failed. */
+    ErrorCode["DATA_FETCH"] = "data-fetch";
+    /** The startup load, a reload or a repository switch failed. */
+    ErrorCode["DIAGRAM_LOAD"] = "diagram-load";
+    /** The uploaded file was rejected or its import failed. */
+    ErrorCode["DIAGRAM_IMPORT"] = "diagram-import";
+    /** Reading the diagram from local storage failed. */
+    ErrorCode["LOCAL_DIAGRAM_READ"] = "local-diagram-read";
+    /** Saving the diagram in local storage failed. */
+    ErrorCode["LOCAL_DIAGRAM_SAVE"] = "local-diagram-save";
+})(exports.ErrorCode || (exports.ErrorCode = {}));
+
+exports.CLEAR_DIAGRAM_STORAGE_EVENT = CLEAR_DIAGRAM_STORAGE_EVENT;

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index$1 = require('./index-CII9aUQC.js');
-var index = require('./index.cjs.js');
+var index = require('./index-DtzCybH4.js');
+var errorCode = require('./error-code-BdRU0RQ9.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -6331,6 +6331,57 @@ var DefaultColorVariants = [
 	"danger"
 ];
 //#endregion
+//#region src/data/decorated/decoratedDataProvider.ts
+/**
+* Utility graph data provider to wrap over another provider to modify
+* how the requests are made or alter the results.
+*
+* @category Data
+*/
+var DecoratedDataProvider = class {
+	baseProvider;
+	decorator;
+	constructor(options) {
+		this.baseProvider = options.baseProvider;
+		this.decorator = options.decorator;
+	}
+	get factory() {
+		return this.baseProvider.factory;
+	}
+	decorate(method, params) {
+		const bound = this.baseProvider[method].bind(this.baseProvider);
+		const { decorator } = this;
+		return decorator(method, params[0], bound);
+	}
+	knownElementTypes(params) {
+		return this.decorate("knownElementTypes", [params]);
+	}
+	knownLinkTypes(params) {
+		return this.decorate("knownLinkTypes", [params]);
+	}
+	elementTypes(params) {
+		return this.decorate("elementTypes", [params]);
+	}
+	propertyTypes(params) {
+		return this.decorate("propertyTypes", [params]);
+	}
+	linkTypes(params) {
+		return this.decorate("linkTypes", [params]);
+	}
+	elements(params) {
+		return this.decorate("elements", [params]);
+	}
+	links(params) {
+		return this.decorate("links", [params]);
+	}
+	connectedLinkStats(params) {
+		return this.decorate("connectedLinkStats", [params]);
+	}
+	lookup(params) {
+		return this.decorate("lookup", [params]);
+	}
+};
+//#endregion
 //#region src/data/decorated/emptyDataProvider.ts
 /**
 * Empty graph data provider, which always return nothing.
@@ -31333,7 +31384,7 @@ function Service(_serviceClass) {
     // no implementation needed. We only use the type checking of the parameter
 }
 
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$5 = (undefined && undefined.__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;
@@ -31395,11 +31446,11 @@ let DiagramService = DiagramService_1 = class DiagramService {
 DiagramService.ID = 'DiagramService';
 DiagramService.NOTIFY_DEBOUNCE_MS = 300;
 DiagramService.HISTORY_CHANGED_EVENT = 'historyChanged';
-DiagramService = DiagramService_1 = __decorate$4([
+DiagramService = DiagramService_1 = __decorate$5([
     Service
 ], DiagramService);
 
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$4 = (undefined && undefined.__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;
@@ -31414,37 +31465,171 @@ let WindowService = class WindowService {
     }
 };
 WindowService.ID = 'WindowService';
-WindowService = __decorate$3([
+WindowService = __decorate$4([
     Service
 ], WindowService);
 
+var __decorate$3 = (undefined && undefined.__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;
+};
+/**
+ * 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(errorCode.CLEAR_DIAGRAM_STORAGE_EVENT, onClear);
+        return () => target.removeEventListener(errorCode.CLEAR_DIAGRAM_STORAGE_EVENT, onClear);
+    }
+};
+EventService.ID = 'EventService';
+EventService = __decorate$3([
+    Service
+], EventService);
+
 var __decorate$2 = (undefined && undefined.__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;
+/**
+ * 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: errorCode.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$2([
+    Service
+], ErrorService);
+
+var __decorate$1 = (undefined && undefined.__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;
 /**
  * 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() {
-        const raw = this.storage.getItem(DiagramStorageService_1.STORAGE_KEY);
-        if (!raw) {
+        try {
+            const raw = this.storage.getItem(DiagramStorageService_1.STORAGE_KEY);
+            if (!raw) {
+                return undefined;
+            }
+            return JSON.parse(raw);
+        }
+        catch (error) {
+            this.errorService.report(errorCode.ErrorCode.LOCAL_DIAGRAM_READ, error);
             return undefined;
         }
-        return JSON.parse(raw);
     }
     /**
      * Persists the given diagram serialization.
      */
     save(diagram) {
-        this.storage.setItem(DiagramStorageService_1.STORAGE_KEY, JSON.stringify(diagram));
+        try {
+            this.storage.setItem(DiagramStorageService_1.STORAGE_KEY, JSON.stringify(diagram));
+        }
+        catch (error) {
+            this.errorService.report(errorCode.ErrorCode.LOCAL_DIAGRAM_SAVE, error);
+        }
     }
     /**
      * Removes the persisted diagram. Used when a new view (a seed) should take precedence over
@@ -31462,37 +31647,10 @@ let DiagramStorageService = DiagramStorageService_1 = class DiagramStorageServic
 };
 DiagramStorageService.ID = 'DiagramStorageService';
 DiagramStorageService.STORAGE_KEY = 'diagram.state';
-DiagramStorageService = DiagramStorageService_1 = __decorate$2([
+DiagramStorageService = DiagramStorageService_1 = __decorate$1([
     Service
 ], DiagramStorageService);
 
-var __decorate$1 = (undefined && undefined.__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;
-};
-/**
- * Service for event based operations
- */
-let EventService = 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();
-        target.addEventListener(index.CLEAR_DIAGRAM_STORAGE_EVENT, onClear);
-        return () => target.removeEventListener(index.CLEAR_DIAGRAM_STORAGE_EVENT, onClear);
-    }
-};
-EventService.ID = 'EventService';
-EventService = __decorate$1([
-    Service
-], EventService);
-
 /**
  * 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
@@ -31654,6 +31812,7 @@ function GraphwiseMenu() {
     const t = useTranslation();
     const diagramFileService = service(DiagramFileService);
     const diagramService = service(DiagramService);
+    const errorService = service(ErrorService);
     const downloadDiagram = () => {
         const timestamp = new Date().toISOString().replace(/[-:]|\.\d+Z$/g, '');
         diagramFileService.download(model.exportLayout(), `diagram-${timestamp}${DiagramFileService.FILE_EXTENSION}`);
@@ -31664,7 +31823,7 @@ function GraphwiseMenu() {
             await diagramService.importDiagram(model, model.dataProvider, diagram);
         }
         catch (error) {
-            console.error('Failed to upload the diagram', error);
+            errorService.report(errorCode.ErrorCode.DIAGRAM_IMPORT, error);
         }
     };
     return reactExports.createElement(reactExports.Fragment, null, reactExports.createElement(ToolbarActionClearAll, {}), reactExports.createElement(ToolbarActionExport, { kind: 'exportRaster' }), reactExports.createElement(ToolbarActionExport, { kind: 'exportSvg' }), reactExports.createElement(ToolbarActionExport, { kind: 'print' }), reactExports.createElement(ToolbarAction, 
@@ -31702,18 +31861,36 @@ const subscriptions = new SubscriptionList();
 let diagramStorageSubscription;
 const diagramService = service(DiagramService);
 const diagramStorageService = service(DiagramStorageService);
-const eventService = service(EventService);
+const eventService$1 = service(EventService);
+const errorService$1 = service(ErrorService);
+/**
+ * Reports every failed data provider call, unless the call was aborted, and passes the failure on to the caller.
+ */
+const reportDataFetchError = async (_method, params, body) => {
+    var _a;
+    try {
+        return await body(params);
+    }
+    catch (error) {
+        if (!((_a = params.signal) === null || _a === void 0 ? void 0 : _a.aborted)) {
+            errorService$1.report(errorCode.ErrorCode.DATA_FETCH, error);
+        }
+        throw error;
+    }
+};
 /**
  * Builds a Reactodia {@link SparqlDataProvider} for the given endpoint using the supplied
  * query preset. The host owns the query configuration and always passes it in via props.
+ * The provider is decorated, so its failed calls are reported.
  */
 function createDataProvider(props) {
     const { currentRepository, config, providerSettings } = props;
-    return new SparqlDataProvider({
+    const baseProvider = new SparqlDataProvider({
         endpointUrl: currentRepository,
         queryMethod: 'POST',
         queryFunction: config.queryFunction
     }, providerSettings);
+    return new DecoratedDataProvider({ baseProvider, decorator: reportDataFetchError });
 }
 /**
  * Places the seed entities on the canvas. Each IRI is added as a placeholder element, and data is then loaded for the
@@ -31781,7 +31958,7 @@ function subscribeToDiagramChange(model) {
  * @param model The diagram model whose edits are persisted
  */
 function onClearDiagramStorage(model) {
-    subscriptions.add(eventService.subscribeToClearDiagramStorage(() => {
+    subscriptions.add(eventService$1.subscribeToClearDiagramStorage(() => {
         // re-subscribe, to avoid any pending debounced saves, which may write over the cleared diagram
         subscribeToDiagramChange(model);
         diagramStorageService.clear();
@@ -31808,22 +31985,31 @@ function ReactodiaApp(props) {
         const dataProvider = createDataProvider(props);
         const isReload = props.isReload;
         const savedDiagram = diagramStorageService.load();
-        if (isReload) {
-            // Reload the diagram that is currently on the canvas. This may happen when the host changes the provider
-            // settings, or 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 diagramService.importDiagram(model, dataProvider, 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);
+        try {
+            if (isReload) {
+                // Reload the diagram that is currently on the canvas. This may happen when the host changes the provider
+                // settings, or 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 diagramService.importDiagram(model, dataProvider, 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 {
+                // 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 diagramService.importDiagram(model, dataProvider, savedDiagram, signal);
+            }
         }
-        else {
-            // 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 diagramService.importDiagram(model, dataProvider, savedDiagram, signal);
+        catch (error) {
+            if (!signal.aborted) {
+                errorService$1.report(errorCode.ErrorCode.DIAGRAM_LOAD, error);
+            }
+            // rethrow, so the workspace shows the failure on its loading spinner
+            throw error;
         }
     }, [language]);
     /**
@@ -31860,7 +32046,7 @@ function mountReactodia(container, props) {
 /**
  * Re-points the diagram at a new SPARQL endpoint by recreating it with a fresh data provider.
  * The canvas is reset to empty, matching the initial mount, since the data of another repository
- * has nothing to do with the current graph.
+ * has nothing to do with the current graph. A failure is reported, not thrown.
  */
 async function updateReactodia(props) {
     if (!workspaceContext) {
@@ -31868,7 +32054,12 @@ async function updateReactodia(props) {
     }
     const { model } = workspaceContext;
     const dataProvider = createDataProvider(props);
-    await model.createNewDiagram({ dataProvider });
+    try {
+        await model.createNewDiagram({ dataProvider });
+    }
+    catch (error) {
+        errorService$1.report(errorCode.ErrorCode.DIAGRAM_LOAD, error);
+    }
 }
 /**
  * Serializes the current diagram so it can be restored after a remount (e.g. when a
@@ -31887,9 +32078,13 @@ function unmountReactodia(root) {
 
 const graphwiseReactodiaCss = "graphwise-reactodia{--_graphwise-reactodia-type-color-01:var(--graphwise-reactodia-type-color-01);--_graphwise-reactodia-type-color-02:var(--graphwise-reactodia-type-color-02);--_graphwise-reactodia-type-color-03:var(--graphwise-reactodia-type-color-03);--_graphwise-reactodia-type-color-04:var(--graphwise-reactodia-type-color-04);--_graphwise-reactodia-type-color-05:var(--graphwise-reactodia-type-color-05);--_graphwise-reactodia-type-color-06:var(--graphwise-reactodia-type-color-06);--_graphwise-reactodia-type-color-07:var(--graphwise-reactodia-type-color-07);--_graphwise-reactodia-type-color-08:var(--graphwise-reactodia-type-color-08);--_graphwise-reactodia-type-color-09:var(--graphwise-reactodia-type-color-09);--_graphwise-reactodia-type-color-10:var(--graphwise-reactodia-type-color-10);--_graphwise-reactodia-type-color-11:var(--graphwise-reactodia-type-color-11);--_graphwise-reactodia-type-color-12:var(--graphwise-reactodia-type-color-12);--_graphwise-reactodia-type-color-13:var(--graphwise-reactodia-type-color-13);--_graphwise-reactodia-type-color-14:var(--graphwise-reactodia-type-color-14);--_graphwise-reactodia-type-color-15:var(--graphwise-reactodia-type-color-15);--_graphwise-reactodia-type-color-16:var(--graphwise-reactodia-type-color-16);--_graphwise-reactodia-type-color-17:var(--graphwise-reactodia-type-color-17);--_graphwise-reactodia-type-color-18:var(--graphwise-reactodia-type-color-18);--_graphwise-reactodia-type-color-19:var(--graphwise-reactodia-type-color-19);--_graphwise-reactodia-type-color-20:var(--graphwise-reactodia-type-color-20);--_graphwise-reactodia-type-color-contrast:var(--graphwise-reactodia-type-color-contrast, #fff)}graphwise-reactodia{display:block;width:100%;height:100%}graphwise-reactodia .reactodia-container{position:relative;width:100%;height:100%}graphwise-reactodia .reactodia-selection-action__link{display:none}graphwise-reactodia .reactodia-standard-element__thumbnail:not(:has(img)){background:var(--reactodia-element-style-color);border-radius:50%;color:var(--_graphwise-reactodia-type-color-contrast)}";
 
+const errorService = service(ErrorService);
+const eventService = service(EventService);
 const GraphwiseReactodia = class {
     constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
+        index.registerInstance(this, hostRef);
+        this.eventEmitter = index.createEvent(this, "graphwiseReactodiaEvent");
+        this.subscriptions = new SubscriptionList();
         /**
          * UI language code (e.g. `en`, `fr`) for the Reactodia interface. Defaults to English.
          */
@@ -31917,6 +32112,7 @@ const GraphwiseReactodia = class {
         this.renderGraph(true);
     }
     connectedCallback() {
+        this.subscribeToEvents();
         this.renderGraph();
     }
     componentDidLoad() {
@@ -31924,13 +32120,17 @@ const GraphwiseReactodia = class {
         this.renderGraph();
     }
     disconnectedCallback() {
+        this.subscriptions.unsubscribeAll();
         if (this.reactRoot) {
             unmountReactodia(this.reactRoot);
             this.reactRoot = undefined;
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'a03aad892cb1947ab2426d77b3229e1324776c2c' }));
+        return (index.h(index.Host, { key: '2e8541c791f478484c4bad64ad758df99aba2059' }));
+    }
+    subscribeToEvents() {
+        this.subscriptions.add(eventService.subscribe((detail) => this.eventEmitter.emit(detail)));
     }
     renderGraph(isReloading) {
         var _a;
@@ -31938,13 +32138,13 @@ const GraphwiseReactodia = class {
             return;
         }
         if (!this.currentRepository) {
-            throw new Error('currentRepository is required');
+            throw this.reportMissingPropError('currentRepository is required');
         }
         if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.queryFunction)) {
-            throw new Error('config.queryFunction is required');
+            throw this.reportMissingPropError('config.queryFunction is required');
         }
         if (!this.providerSettings) {
-            throw new Error('providerSettings is required');
+            throw this.reportMissingPropError('providerSettings is required');
         }
         if (!this.hostElement) {
             return;
@@ -31964,7 +32164,12 @@ const GraphwiseReactodia = class {
             this.reactRoot = mountReactodia(this.hostElement, props);
         }
     }
-    get hostElement() { return index$1.getElement(this); }
+    reportMissingPropError(message) {
+        const error = new Error(message);
+        errorService.report(errorCode.ErrorCode.MISSING_REQUIRED_PROP, error);
+        return error;
+    }
+    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "currentRepository": ["onCurrentRepositoryChange"],
         "language": ["onLanguageOrSettingsChange"],

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CII9aUQC.js');
+var index = require('./index-DtzCybH4.js');
 var appGlobals = require('./app-globals-CcJr5lkF.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;

package/dist/cjs/{index-CII9aUQC.js → index-DtzCybH4.js}

@@ -289,6 +289,21 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   return propValue;
 };
 var getElement = (ref) => getHostRef(ref).$hostElement$ ;
+
+// src/runtime/event-emitter.ts
+var createEvent = (ref, name, flags) => {
+  const elm = getElement(ref);
+  return {
+    emit: (detail) => {
+      return emitEvent(elm, name, {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail
+      });
+    }
+  };
+};
 var emitEvent = (elm, name, opts) => {
   const ev = plt.ce(name, opts);
   elm.dispatchEvent(ev);
@@ -1205,6 +1220,7 @@ var setNonce = (nonce) => plt.$nonce$ = nonce;
 
 exports.Host = Host;
 exports.bootstrapLazy = bootstrapLazy;
+exports.createEvent = createEvent;
 exports.getElement = getElement;
 exports.h = h;
 exports.promiseResolve = promiseResolve;