graphwise-reactodia 0.0.1-TR9 → 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.ID)) {
-            ServiceProvider.SERVICE_INSTANCES.set(type.ID, 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.ID);
+        return ServiceProvider.SERVICE_INSTANCES.get(serviceClass.ID);
     }
 }
 ServiceProvider.SERVICE_INSTANCES = new Map();
@@ -30882,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.
@@ -30899,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
@@ -30908,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
@@ -31004,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);
@@ -31015,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]);
     /**
@@ -31032,7 +31113,8 @@ function ReactodiaApp(props) {
         ref: onMount,
         defaultLayout: blockingDefaultLayout,
         defaultLanguage: language,
-        translations: translationsForLanguage(language)
+        translations: translationsForLanguage(language),
+        typeStyleResolver: resolveTypeStyle
     }, reactExports.createElement(DefaultWorkspace, {}));
 }
 /**
@@ -31070,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) {
@@ -31079,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();
@@ -31088,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);
@@ -31100,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;
@@ -31110,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 = {
@@ -31118,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;

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

@@ -39,6 +39,7 @@ var registerHost = (hostElement, cmpMeta) => {
   hostElement.__stencil__getHostRef = () => ref;
   return ref;
 };
+var isMemberInElement = (elm, memberName) => memberName in elm;
 var consoleError = (e, el) => (0, console.error)(e, el);
 
 // src/client/client-load-module.ts
@@ -238,6 +239,12 @@ var h = (nodeName, vnodeData, ...children) => {
     if (vnodeData.key) {
       key = vnodeData.key;
     }
+    {
+      const classData = vnodeData.className || vnodeData.class;
+      if (classData) {
+        vnodeData.class = typeof classData !== "object" ? classData : Object.keys(classData).filter((k) => classData[k]).join(" ");
+      }
+    }
   }
   const vnode = newVNode(nodeName, null);
   vnode.$attrs$ = vnodeData;
@@ -288,7 +295,6 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   }
   return propValue;
 };
-var getElement = (ref) => getHostRef(ref).$hostElement$ ;
 var emitEvent = (elm, name, opts) => {
   const ev = plt.ce(name, opts);
   elm.dispatchEvent(ev);
@@ -389,8 +395,85 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
   if (oldValue === newValue) {
     return;
   }
-  memberName.toLowerCase();
+  let isProp = isMemberInElement(elm, memberName);
+  let ln = memberName.toLowerCase();
+  if (memberName === "class") {
+    const classList = elm.classList;
+    const oldClasses = parseClassList(oldValue);
+    let newClasses = parseClassList(newValue);
+    {
+      classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
+      classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
+    }
+  } else if (memberName === "key") ; else if (memberName === "ref") {
+    if (newValue) {
+      newValue(elm);
+    }
+  } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+    if (memberName[2] === "-") {
+      memberName = memberName.slice(3);
+    } else if (isMemberInElement(win, ln)) {
+      memberName = ln.slice(2);
+    } else {
+      memberName = ln[2] + memberName.slice(3);
+    }
+    if (oldValue || newValue) {
+      const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
+      memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
+      if (oldValue) {
+        plt.rel(elm, memberName, oldValue, capture);
+      }
+      if (newValue) {
+        plt.ael(elm, memberName, newValue, capture);
+      }
+    }
+  } else {
+    const isComplex = isComplexType(newValue);
+    if ((isProp || isComplex && newValue !== null) && true) {
+      try {
+        if (!elm.tagName.includes("-")) {
+          const n = newValue == null ? "" : newValue;
+          if (memberName === "list") {
+            isProp = false;
+          } else if (oldValue == null || elm[memberName] != n) {
+            if (typeof elm.__lookupSetter__(memberName) === "function") {
+              elm[memberName] = n;
+            } else {
+              elm.setAttribute(memberName, n);
+            }
+          }
+        } else if (elm[memberName] !== newValue) {
+          elm[memberName] = newValue;
+        }
+      } catch (e) {
+      }
+    }
+    if (newValue == null || newValue === false) {
+      if (newValue !== false || elm.getAttribute(memberName) === "") {
+        {
+          elm.removeAttribute(memberName);
+        }
+      }
+    } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex && elm.nodeType === 1 /* ElementNode */) {
+      newValue = newValue === true ? "" : newValue;
+      {
+        elm.setAttribute(memberName, newValue);
+      }
+    }
+  }
+};
+var parseClassListRegex = /\s/;
+var parseClassList = (value) => {
+  if (typeof value === "object" && value && "baseVal" in value) {
+    value = value.baseVal;
+  }
+  if (!value || typeof value !== "string") {
+    return [];
+  }
+  return value.split(parseClassListRegex);
 };
+var CAPTURE_EVENT_SUFFIX = "Capture";
+var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
 
 // src/runtime/vdom/update-element.ts
 var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
@@ -404,7 +487,9 @@ var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
           elm,
           memberName,
           oldVnodeAttrs[memberName],
-          void 0);
+          void 0,
+          isSvgMode2,
+          newVnode.$flags$);
       }
     }
   }
@@ -413,7 +498,9 @@ var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
       elm,
       memberName,
       oldVnodeAttrs[memberName],
-      newVnodeAttrs[memberName]);
+      newVnodeAttrs[memberName],
+      isSvgMode2,
+      newVnode.$flags$);
   }
 };
 function sortedAttrNames(attrNames) {
@@ -426,12 +513,15 @@ function sortedAttrNames(attrNames) {
   );
 }
 var hostTagName;
+var isSvgMode = false;
 var createElm = (oldParentVNode, newParentVNode, childIndex) => {
   const newVNode2 = newParentVNode.$children$[childIndex];
   let i2 = 0;
   let elm;
   let childNode;
-  {
+  if (newVNode2.$text$ !== null) {
+    elm = newVNode2.$elm$ = win.document.createTextNode(newVNode2.$text$);
+  } else {
     if (!win.document) {
       throw new Error(
         "You are trying to render a Stencil component in an environment that doesn't support the DOM. Make sure to populate the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window) object before rendering a component."
@@ -441,7 +531,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
       newVNode2.$tag$
     );
     {
-      updateElement(null, newVNode2);
+      updateElement(null, newVNode2, isSvgMode);
     }
     if (newVNode2.$children$) {
       for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) {
@@ -473,6 +563,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     const vnode = vnodes[index];
     if (vnode) {
       const elm = vnode.$elm$;
+      nullifyVNodeRefs(vnode);
       if (elm) {
         elm.remove();
       }
@@ -579,13 +670,17 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const elm = newVNode2.$elm$ = oldVNode.$elm$;
   const oldChildren = oldVNode.$children$;
   const newChildren = newVNode2.$children$;
-  {
+  const text = newVNode2.$text$;
+  if (text === null) {
     {
-      updateElement(oldVNode, newVNode2);
+      updateElement(oldVNode, newVNode2, isSvgMode);
     }
     if (oldChildren !== null && newChildren !== null) {
       updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);
     } else if (newChildren !== null) {
+      if (oldVNode.$text$ !== null) {
+        elm.textContent = "";
+      }
       addVnodes(elm, null, newVNode2, newChildren, 0, newChildren.length - 1);
     } else if (
       // don't do this on initial render as it can cause non-hydrated content to be removed
@@ -593,6 +688,14 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     ) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
     }
+  } else if (oldVNode.$text$ !== text) {
+    elm.data = text;
+  }
+};
+var nullifyVNodeRefs = (vNode) => {
+  {
+    vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+    vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
   }
 };
 var insertBefore = (parent, newNode, reference) => {
@@ -1205,7 +1308,6 @@ var setNonce = (nonce) => plt.$nonce$ = nonce;
 
 exports.Host = Host;
 exports.bootstrapLazy = bootstrapLazy;
-exports.getElement = getElement;
 exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;

package/dist/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-CII9aUQC.js');
+var index = require('./index-D1-Nmh_N.js');
 var appGlobals = require('./app-globals-CcJr5lkF.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   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;

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

@@ -1,10 +1,18 @@
 graphwise-reactodia {
-  display: block;
+  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%;
-  height: 100%;
 }