graphwise-reactodia 0.0.1-TR8 → 0.0.1-blank-nodes-TR1

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index$1 = require('./index-CII9aUQC.js');
+var index$1 = require('./index-D1-Nmh_N.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 : {};
@@ -6833,6 +6833,7 @@ var RdfSettings = {
 	openWorldLinks: false,
 	propertyConfigurations: [],
 	openWorldProperties: false,
+	acceptBlankNodes: false,
 	linksInfoQuery: `SELECT ?source ?type ?target
             WHERE {
                 \${linkConfigurations}
@@ -7036,7 +7037,7 @@ var SparqlDataProvider = class {
 	options;
 	settings;
 	queryFunction;
-	acceptBlankNodes = false;
+	acceptBlankNodes;
 	chunkMeasure;
 	linkByPredicate = /* @__PURE__ */ new Map();
 	linkById = /* @__PURE__ */ new Map();
@@ -7052,6 +7053,7 @@ var SparqlDataProvider = class {
 		this.settings = settings;
 		this.queryFunction = queryFunction;
 		const { chunk, queryMethod = "GET", prepareLabelPredicate, prepareImagePredicate } = this.options;
+		this.acceptBlankNodes = Boolean(settings.acceptBlankNodes);
 		if (chunk) {
 			if (!Number.isSafeInteger(chunk.maxSize)) throw new Error("SparqlDataProviderOptions.chunk.maxSize should be a non-negative number");
 		}
@@ -7081,6 +7083,17 @@ var SparqlDataProvider = class {
 		this.labelPredicate = prepareLabelPredicate ?? rdfs.label;
 		this.imagePredicate = prepareImagePredicate ?? schema.thumbnailUrl;
 	}
+	/**
+	* Sets whether blank nodes are allowed to appear as entities in the query results.
+	*
+	* The flag is read while a query is being built, so the change applies to every
+	* subsequent request without recreating the provider.
+	*
+	* @see {@link SparqlDataProviderSettings.acceptBlankNodes}
+	*/
+	setAcceptBlankNodes(accept) {
+		this.acceptBlankNodes = accept;
+	}
 	async queryChunked(items, callback) {
 		const { maxSize, measure } = this.chunkMeasure;
 		const tasks = [];
@@ -30655,15 +30668,15 @@ class ServiceProvider {
     /**
      * Returns the instance of the given service type, creating and caching it on first request.
      *
-     * @param type The service type to retrieve.
+     * @param serviceClass 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());
+    static get(serviceClass) {
+        if (!ServiceProvider.SERVICE_INSTANCES.has(serviceClass.ID)) {
+            ServiceProvider.SERVICE_INSTANCES.set(serviceClass.ID, new serviceClass());
         }
-        return ServiceProvider.SERVICE_INSTANCES.get(type.name);
+        return ServiceProvider.SERVICE_INSTANCES.get(serviceClass.ID);
     }
 }
 ServiceProvider.SERVICE_INSTANCES = new Map();
@@ -30683,13 +30696,42 @@ function service(serviceClass) {
     return ServiceProvider.get(serviceClass);
 }
 
+/**
+ * Decorator for a service class.
+ * It receives the class and simply type checks it with the {@link Service} interface.
+ * Works as a contract, which enforces the service class to have a static ID member.
+ * We can't simply implement the interface, since this will enforce the ID to be an instance member, which is not what we want.
+ *
+ * @param _serviceClass The decorated service class, checked for its ID and discarded.
+ * @template T The type of the service instance.
+ * @example
+ * ```TypeScript
+ * @Service
+ * export class WindowService {
+ *   static readonly ID = 'WindowService';
+ * }
+ * ```
+ */
+function Service(_serviceClass) {
+    // no implementation needed. We only use the type checking of the parameter
+}
+
+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;
+};
+var DiagramService_1;
 /**
  * Service for diagram related operations and subscriptions
  */
-class DiagramService {
+let DiagramService = DiagramService_1 = class DiagramService {
     /**
      * Subscribes to diagram changes. On every debounced change the current layout is
-     * exported and passed to the callback
+     * exported and passed to the callback.
+     * Debounce time for the callback trigger is needed, because certain events (like moving a node) can trigger
+     * multiple `historyChanged` events in a short time.
      *
      * @param model The diagram model to observe.
      * @param onChangeCallback Called with the exported layout when the diagram changes.
@@ -30705,44 +30747,60 @@ class DiagramService {
             notifyTimer = setTimeout(() => {
                 notifyTimer = undefined;
                 onChangeCallback(model.exportLayout());
-            }, DiagramService.NOTIFY_DEBOUNCE_MS);
+            }, DiagramService_1.NOTIFY_DEBOUNCE_MS);
         };
-        model.history.events.on(DiagramService.HISTORY_CHANGED_EVENT, onHistoryChange);
+        model.history.events.on(DiagramService_1.HISTORY_CHANGED_EVENT, onHistoryChange);
         return () => {
-            model.history.events.off(DiagramService.HISTORY_CHANGED_EVENT, onHistoryChange);
+            model.history.events.off(DiagramService_1.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.ID = 'DiagramService';
 DiagramService.NOTIFY_DEBOUNCE_MS = 300;
 DiagramService.HISTORY_CHANGED_EVENT = 'historyChanged';
-
+DiagramService = DiagramService_1 = __decorate$3([
+    Service
+], DiagramService);
+
+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;
+};
 /**
  * Service that provides access to browser window-related functionality.
  */
-class WindowService {
+let WindowService = class WindowService {
     getWindow() {
         return window;
     }
-}
-
+};
+WindowService.ID = 'WindowService';
+WindowService = __decorate$2([
+    Service
+], WindowService);
+
+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
  */
-class DiagramStorageService {
+let DiagramStorageService = DiagramStorageService_1 = 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);
+        const raw = this.storage.getItem(DiagramStorageService_1.STORAGE_KEY);
         if (!raw) {
             return undefined;
         }
@@ -30752,31 +30810,38 @@ class DiagramStorageService {
      * 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));
+        this.storage.setItem(DiagramStorageService_1.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);
+        this.storage.removeItem(DiagramStorageService_1.STORAGE_KEY);
     }
     /**
      * Local storage getter
      */
     get storage() {
-        var _a;
-        return (_a = service(WindowService).getWindow()) === null || _a === void 0 ? void 0 : _a.localStorage;
+        return service(WindowService).getWindow().localStorage;
     }
-}
+};
+DiagramStorageService.ID = 'DiagramStorageService';
 DiagramStorageService.STORAGE_KEY = 'diagram.state';
-
+DiagramStorageService = DiagramStorageService_1 = __decorate$1([
+    Service
+], DiagramStorageService);
+
+var __decorate = (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
  */
-class EventService {
+let EventService = class EventService {
     /**
      * Subscribes to the host's "clear persisted diagram" command.
      *
@@ -30785,13 +30850,14 @@ class EventService {
      */
     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);
     }
-}
+};
+EventService.ID = 'EventService';
+EventService = __decorate([
+    Service
+], EventService);
 
 /**
  * A collection of {@link Subscription}s that can be released together. Components collect the
@@ -30829,6 +30895,60 @@ class SubscriptionList {
     }
 }
 
+const NODE_COLOR_VARIABLES = [
+    '--gw-foreground-visual-diagram-categorical-01',
+    '--gw-foreground-visual-diagram-categorical-02',
+    '--gw-foreground-visual-diagram-categorical-03',
+    '--gw-foreground-visual-diagram-categorical-04',
+    '--gw-foreground-visual-diagram-categorical-05',
+    '--gw-foreground-visual-diagram-categorical-06',
+    '--gw-foreground-visual-diagram-categorical-07',
+    '--gw-foreground-visual-diagram-categorical-08',
+    '--gw-foreground-visual-diagram-categorical-09',
+    '--gw-foreground-visual-diagram-categorical-10',
+    '--gw-foreground-visual-diagram-categorical-11',
+    '--gw-foreground-visual-diagram-categorical-12',
+    '--gw-foreground-visual-diagram-categorical-13',
+    '--gw-foreground-visual-diagram-categorical-14',
+    '--gw-foreground-visual-diagram-categorical-15',
+    '--gw-foreground-visual-diagram-categorical-16',
+    '--gw-foreground-visual-diagram-categorical-17',
+    '--gw-foreground-visual-diagram-categorical-18',
+    '--gw-foreground-visual-diagram-categorical-19',
+    '--gw-foreground-visual-diagram-categorical-20'
+];
+/**
+ * Color slot assigned to each type, in the order the types are first seen.
+ */
+const typeToIndex = new Map();
+function getColor(variable) {
+    return getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+}
+/**
+ * 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.
+ */
+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 color = getColor(NODE_COLOR_VARIABLES[index % NODE_COLOR_VARIABLES.length]);
+    return color ? { color } : undefined;
+};
+const resetColors = () => {
+    typeToIndex.clear();
+};
+
 /**
  * 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.
@@ -30846,6 +30966,11 @@ function translationsForLanguage(language) {
  * runs outside React and therefore cannot call the `useWorkspace` hook.
  */
 let workspaceContext = null;
+/**
+ * The data provider backing the current diagram, kept so runtime flags can be flipped on it
+ * in place. Replaced whenever the provider is rebuilt.
+ */
+let activeDataProvider = 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
@@ -30855,15 +30980,24 @@ 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
- * is provided we fall back to Reactodia's generic {@link OwlRdfsSettings} OWL/RDFS preset.
+ * is provided we fall back to Reactodia's generic {@link OwlStatsSettings} OWL/RDFS preset.
  */
 function createDataProvider(props) {
     const { currentRepository, config, providerSettings } = props;
-    return new SparqlDataProvider({
+    activeDataProvider = new SparqlDataProvider({
         endpointUrl: currentRepository,
         queryMethod: 'POST',
         queryFunction: config.queryFunction
-    }, providerSettings);
+    }, Object.assign(Object.assign({}, OwlStatsSettings), providerSettings));
+    return activeDataProvider;
+}
+/**
+ * Flips the `acceptBlankNodes` flag on the live data provider. The flag is read while a query
+ * is being built, so this applies to every subsequent request without recreating the provider
+ * and without resetting the canvas.
+ */
+function setAcceptBlankNodes(accept) {
+    activeDataProvider === null || activeDataProvider === void 0 ? void 0 : activeDataProvider.setAcceptBlankNodes(accept);
 }
 /**
  * Places the seed entities on the canvas. Each IRI is added as a placeholder element, and data is then loaded for the
@@ -30951,7 +31085,7 @@ function ReactodiaApp(props) {
         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 });
+            await model.importLayout({ dataProvider, diagram: currentDiagram, signal, validateLinks: true });
         }
         else if ((_a = config.seedIris) === null || _a === void 0 ? void 0 : _a.length) {
             await seedIrisToCanvas(context, dataProvider, config.seedIris, signal);
@@ -30962,7 +31096,7 @@ function ReactodiaApp(props) {
         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 model.importLayout({ dataProvider, diagram: savedDiagram, signal });
+            await model.importLayout({ dataProvider, diagram: savedDiagram, signal, validateLinks: true });
         }
     }, [language]);
     /**
@@ -30979,7 +31113,8 @@ function ReactodiaApp(props) {
         ref: onMount,
         defaultLayout: blockingDefaultLayout,
         defaultLanguage: language,
-        translations: translationsForLanguage(language)
+        translations: translationsForLanguage(language),
+        typeStyleResolver: resolveTypeStyle
     }, reactExports.createElement(DefaultWorkspace, {}));
 }
 /**
@@ -31017,7 +31152,7 @@ function unmountReactodia(root) {
     root.unmount();
 }
 
-const graphwiseReactodiaCss = "graphwise-reactodia{display:block;width:100%;height:75vh}graphwise-reactodia .reactodia-container{position:relative;width:100%;height:100%}";
+const graphwiseReactodiaCss = "graphwise-reactodia{display:flex;flex-direction:column;width:100%;height:75vh}graphwise-reactodia .blank-nodes-toggle{display:flex;align-items:center;gap:4px;padding:4px 8px}graphwise-reactodia .reactodia-container{position:relative;flex:1;min-height:0;width:100%}";
 
 const GraphwiseReactodia = class {
     constructor(hostRef) {
@@ -31026,6 +31161,8 @@ const GraphwiseReactodia = class {
          * UI language code (e.g. `en`, `fr`) for the Reactodia interface. Defaults to English.
          */
         this.language = LanguageKey.EN;
+        /** POC toggle for the provider's `acceptBlankNodes` flag. Internal, not part of the public API. */
+        this.acceptBlankNodes = false;
     }
     onProviderSettingsChange() {
         this.renderGraph();
@@ -31035,11 +31172,21 @@ const GraphwiseReactodia = class {
         // to re-translate the UI is to re-create the graph.
         this.renderGraph(true);
     }
+    onThemeChange() {
+        resetColors();
+        this.renderGraph(true);
+    }
     connectedCallback() {
         if (this.config) {
             this.renderGraph();
         }
     }
+    // The graph container is only available after the first render, so the initial mount happens here.
+    componentDidLoad() {
+        if (this.config) {
+            this.renderGraph();
+        }
+    }
     disconnectedCallback() {
         if (this.reactRoot) {
             unmountReactodia(this.reactRoot);
@@ -31047,7 +31194,12 @@ const GraphwiseReactodia = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'b33d3709a5d7b1fdde8d528d036d9dbc962d6c76' }));
+        return (index$1.h(index$1.Host, { key: '65718a059757d2b18fde62002d5b050304830143' }, index$1.h("label", { key: '3b50b626a046366b3b705f8e430c04d88af436ca', class: "blank-nodes-toggle" }, index$1.h("input", { key: 'c81d4d27d8fec14ae1ed9333b4f21eb90e482bc5', type: "checkbox", "data-test": "accept-blank-nodes", checked: this.acceptBlankNodes, onChange: (event) => this.onAcceptBlankNodesChange(event) }), "Accept blank nodes"), index$1.h("div", { key: 'e1313a71ebf215cea2ef23917fb643dc7c74b014', class: "reactodia-container", ref: (element) => this.graphContainer = element })));
+    }
+    // Applied to the live provider, so the next query picks it up without rebuilding the diagram.
+    onAcceptBlankNodesChange(event) {
+        this.acceptBlankNodes = event.target.checked;
+        setAcceptBlankNodes(this.acceptBlankNodes);
     }
     renderGraph(isReloading) {
         var _a;
@@ -31057,7 +31209,7 @@ const GraphwiseReactodia = class {
         if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.queryFunction)) {
             throw new Error('config.queryFunction is required');
         }
-        if (!this.hostElement) {
+        if (!this.graphContainer) {
             return;
         }
         const props = {
@@ -31065,20 +31217,21 @@ const GraphwiseReactodia = class {
             currentRepository: this.currentRepository,
             config: this.config,
             language: this.language,
-            providerSettings: this.providerSettings,
+            // Carried through so a rebuilt provider keeps whatever the toggle is currently set to.
+            providerSettings: Object.assign(Object.assign({}, this.providerSettings), { acceptBlankNodes: this.acceptBlankNodes }),
         };
         if (this.reactRoot && !isReloading) {
             void updateReactodia(props);
         }
         else {
-            this.reactRoot = mountReactodia(this.hostElement, props);
+            this.reactRoot = mountReactodia(this.graphContainer, props);
         }
     }
-    get hostElement() { return index$1.getElement(this); }
     static get watchers() { return {
         "currentRepository": ["onProviderSettingsChange"],
         "providerSettings": ["onProviderSettingsChange"],
-        "language": ["onLanguageChange"]
+        "language": ["onLanguageChange"],
+        "theme": ["onThemeChange"]
     }; }
 };
 GraphwiseReactodia.style = graphwiseReactodiaCss;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CII9aUQC.js');
+var index = require('./index-D1-Nmh_N.js');
 var appGlobals = require('./app-globals-CcJr5lkF.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["graphwise-reactodia.cjs",[[0,"graphwise-reactodia",{"currentRepository":[1,"current-repository"],"config":[16],"language":[1],"providerSettings":[16,"provider-settings"]},null,{"currentRepository":["onProviderSettingsChange"],"providerSettings":["onProviderSettingsChange"],"language":["onLanguageChange"]}]]]], options);
+  return index.bootstrapLazy([["graphwise-reactodia.cjs",[[0,"graphwise-reactodia",{"currentRepository":[1,"current-repository"],"config":[16],"language":[1],"providerSettings":[16,"provider-settings"],"theme":[1],"acceptBlankNodes":[32]},null,{"currentRepository":["onProviderSettingsChange"],"providerSettings":["onProviderSettingsChange"],"language":["onLanguageChange"],"theme":["onThemeChange"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;