graphwise-reactodia 0.0.1-TR5 → 0.0.1-TR7

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

@@ -30631,8 +30631,15 @@ var frTranslation = {
 	zoom_control: zoom_control
 };
 
+var LanguageKey;
+(function (LanguageKey) {
+    LanguageKey["EN"] = "en";
+    LanguageKey["FR"] = "fr";
+})(LanguageKey || (LanguageKey = {}));
+
+// English is provided by default from reactodia so we don't need to include it here, unless we override it
 const TRANSLATIONS = {
-    'fr': frTranslation
+    [LanguageKey.FR]: frTranslation
 };
 
 /**
@@ -30657,28 +30664,77 @@ let workspaceContext = null;
  * 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.
  */
-function createDataProvider(currentRepository, queryFunction, settings) {
+function createDataProvider(props) {
+    const { currentRepository, config, providerSettings } = props;
     return new SparqlDataProvider({
         endpointUrl: currentRepository,
         queryMethod: 'POST',
-        queryFunction,
-    }, settings);
+        queryFunction: config.queryFunction,
+    }, providerSettings);
+}
+/**
+ * Places the seed entities on the canvas. Each IRI is added as a placeholder element, and data is then loaded for the
+ * respective nodes using the {@link DataDiagramModel.requestData} method.
+ */
+async function seedCanvas(context, seed, signal) {
+    const { model, performLayout } = context;
+    for (const iri of seed) {
+        model.createElement(iri);
+    }
+    await model.requestData();
+    await performLayout({ signal });
+}
+/**
+ * Places a pre-resolved graph (e.g. a CONSTRUCT query result) on the canvas. The relationships
+ * are computed and not persisted in the repository, so the edges are drawn directly from the
+ * supplied data instead of being fetched. The node IRIs do exist in the repository, so only
+ * their display data is hydrated via {@link DataDiagramModel.requestElementData}.
+ *
+ * Note we use `requestElementData` rather than `requestData`: the latter would also query the
+ * provider for *all* persisted links between the seeded nodes, over-fetching beyond the
+ * CONSTRUCT's selection. Hydrating elements alone keeps the canvas to exactly the supplied
+ * edges, while further expansion continues lazily against the SPARQL provider.
+ */
+async function seedGraphCanvas(context, links, signal) {
+    const { model, performLayout } = context;
+    const uniqueIris = new Set();
+    links.forEach((link) => {
+        var _a;
+        uniqueIris.add(link.source);
+        uniqueIris.add(link.target);
+        // this is a createOrGet, regardless of the name, so we don't need to worry about duplicates.
+        model.createElement(link.source);
+        model.createElement(link.target);
+        (_a = link.rawPredicates) === null || _a === void 0 ? void 0 : _a.forEach((predicate) => {
+            model.createLinks({
+                linkTypeId: predicate,
+                sourceId: link.source,
+                targetId: link.target,
+                properties: {}
+            });
+        });
+    });
+    // Request data only for elements.
+    // Link data is not available in the DB, since we are displaying construct/describe queries
+    await model.requestElementData(Array.from(uniqueIris));
+    await performLayout({ signal });
 }
 /**
  * The Reactodia workspace React component.
  *
  * Authored with `React.createElement` (no TSX) on purpose, since there are differences in stencil and react
  *
- * The canvas starts empty; the user populates it through the workspace search bar
- * (Reactodia's `DefaultWorkspace` unified search), which is backed by the SPARQL
- * data provider's lookup.
+ * Without a seed the canvas starts empty and the user populates it through the workspace
+ * search bar (Reactodia's `DefaultWorkspace` unified search), backed by the SPARQL data
+ * provider's lookup. With a seed, the seeded nodes are placed on the canvas on startup.
  */
 function ReactodiaApp(props) {
-    const { currentRepository, queryFunction, language, initialDiagram, providerSettings } = props;
+    const { language, initialDiagram, config } = props;
     const { onMount } = useLoadedWorkspace(async ({ context, signal }) => {
+        var _a, _b;
         workspaceContext = context;
         const { model } = context;
-        const dataProvider = createDataProvider(currentRepository, queryFunction, providerSettings);
+        const dataProvider = createDataProvider(props);
         // A language change remounts this component to rebuild the workspace with the new
         // translation bundle; restoring the exported diagram keeps the user's canvas intact.
         // This is done because there is no existing mechanism to re-translate the UI at runtime (not for the UI labels at least)
@@ -30687,6 +30743,12 @@ function ReactodiaApp(props) {
         }
         else {
             await model.createNewDiagram({ dataProvider, signal });
+            if ((_a = config.seedGraph) === null || _a === void 0 ? void 0 : _a.length) {
+                await seedGraphCanvas(context, config.seedGraph, signal);
+            }
+            else if ((_b = config.seedIris) === null || _b === void 0 ? void 0 : _b.length) {
+                await seedCanvas(context, config.seedIris, signal);
+            }
         }
     }, [language]);
     /**
@@ -30723,7 +30785,7 @@ async function updateReactodia(props) {
         return;
     }
     const { model } = workspaceContext;
-    const dataProvider = createDataProvider(props.currentRepository, props.queryFunction, props.providerSettings);
+    const dataProvider = createDataProvider(props);
     await model.createNewDiagram({ dataProvider });
 }
 /**
@@ -30748,7 +30810,7 @@ const GraphwiseReactodia = class {
         /**
          * UI language code (e.g. `en`, `fr`) for the Reactodia interface. Defaults to English.
          */
-        this.language = 'en';
+        this.language = LanguageKey.EN;
     }
     onProviderSettingsChange() {
         this.renderGraph();
@@ -30760,7 +30822,7 @@ const GraphwiseReactodia = class {
         const diagram = exportReactodiaLayout();
         this.renderGraph(diagram);
     }
-    componentDidLoad() {
+    connectedCallback() {
         this.renderGraph();
     }
     disconnectedCallback() {
@@ -30770,14 +30832,15 @@ const GraphwiseReactodia = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '3fca0e2163335fc2cb0fc3c57291e4f29234f2c2' }));
+        return (index.h(index.Host, { key: '63c58ee1d28c4866aa66d3dcf4893879de4d09f6' }));
     }
     renderGraph(initialDiagram) {
+        var _a;
         if (!this.currentRepository) {
             throw new Error('currentRepository is required');
         }
-        if (!this.queryFunction) {
-            throw new Error('queryFunction is required');
+        if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.queryFunction)) {
+            throw new Error('config.queryFunction is required');
         }
         if (!this.hostElement) {
             return;
@@ -30785,7 +30848,7 @@ const GraphwiseReactodia = class {
         const props = {
             initialDiagram,
             currentRepository: this.currentRepository,
-            queryFunction: this.queryFunction,
+            config: this.config,
             language: this.language,
             providerSettings: this.providerSettings,
         };

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

@@ -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"],"queryFunction":[16,"query-function"],"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"]},null,{"currentRepository":["onProviderSettingsChange"],"providerSettings":["onProviderSettingsChange"],"language":["onLanguageChange"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ 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"],"queryFunction":[16,"query-function"],"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"]},null,{"currentRepository":["onProviderSettingsChange"],"providerSettings":["onProviderSettingsChange"],"language":["onLanguageChange"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -1,12 +1,13 @@
 import { h, Host } from "@stencil/core";
 import { exportReactodiaLayout, mountReactodia, unmountReactodia, updateReactodia } from "./reactodia-app";
+import { LanguageKey } from "./i18n/language-key";
 /**
  * A web component that renders a graph with the Reactodia workspace.
  *
  * The component is backed by a SPARQL endpoint but is endpoint-agnostic: the host passes
- * the active repository's endpoint via `current-repository` and a `queryFunction` that
- * performs the actual HTTP request. Reactodia fetches all node, link and type data lazily
- * through them; the canvas starts empty and the user populates it via the search bar.
+ * the active repository's endpoint via `current-repository` and a `config.queryFunction`
+ * that performs the actual HTTP request. Reactodia fetches all node, link and type data
+ * lazily through them; the canvas starts empty and the user populates it via the search bar.
  *
  * The component is a thin wrapper around Reactodia: query configuration lives outside the
  * wrapper and is supplied through the `providerSettings` prop.
@@ -16,7 +17,7 @@ export class GraphwiseReactodia {
         /**
          * UI language code (e.g. `en`, `fr`) for the Reactodia interface. Defaults to English.
          */
-        this.language = 'en';
+        this.language = LanguageKey.EN;
     }
     onProviderSettingsChange() {
         this.renderGraph();
@@ -28,7 +29,7 @@ export class GraphwiseReactodia {
         const diagram = exportReactodiaLayout();
         this.renderGraph(diagram);
     }
-    componentDidLoad() {
+    connectedCallback() {
         this.renderGraph();
     }
     disconnectedCallback() {
@@ -38,14 +39,15 @@ export class GraphwiseReactodia {
         }
     }
     render() {
-        return (h(Host, { key: '3fca0e2163335fc2cb0fc3c57291e4f29234f2c2' }));
+        return (h(Host, { key: '63c58ee1d28c4866aa66d3dcf4893879de4d09f6' }));
     }
     renderGraph(initialDiagram) {
+        var _a;
         if (!this.currentRepository) {
             throw new Error('currentRepository is required');
         }
-        if (!this.queryFunction) {
-            throw new Error('queryFunction is required');
+        if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.queryFunction)) {
+            throw new Error('config.queryFunction is required');
         }
         if (!this.hostElement) {
             return;
@@ -53,7 +55,7 @@ export class GraphwiseReactodia {
         const props = {
             initialDiagram,
             currentRepository: this.currentRepository,
-            queryFunction: this.queryFunction,
+            config: this.config,
             language: this.language,
             providerSettings: this.providerSettings,
         };
@@ -87,35 +89,35 @@ export class GraphwiseReactodia {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The active repository id. Appended to {@link queryFunction} as the request `url`;\nchanging it re-points the graph at the new repository (and resets the canvas),\nwhich is how runtime repository changes are handled."
+                    "text": "The active repository id. Appended to {@link queryFunction } as the request `url`;\nchanging it re-points the graph at the new repository (and resets the canvas),\nwhich is how runtime repository changes are handled."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false
             },
-            "queryFunction": {
+            "config": {
                 "type": "unknown",
-                "attribute": "query-function",
+                "attribute": "config",
                 "mutable": false,
                 "complexType": {
-                    "original": "SparqlQueryFunction",
-                    "resolved": "(params: { url: string; body?: string; headers: { [header: string]: string; }; method: string; signal?: AbortSignal; }) => Promise<Response>",
+                    "original": "ReactodiaConfig",
+                    "resolved": "ReactodiaConfig",
                     "references": {
-                        "SparqlQueryFunction": {
+                        "ReactodiaConfig": {
                             "location": "import",
-                            "path": "@reactodia/workspace",
-                            "id": "reactodia-workspace/dist/typings/workspace.d.ts::SparqlQueryFunction"
+                            "path": "./models/reactodia-config",
+                            "id": "src/components/graphwise-reactodia/models/reactodia-config.ts::ReactodiaConfig"
                         }
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "HTTP transport for the SPARQL requests. Set by the host so requests go through the host's HTTP layer (auth,\ninterceptors) instead of a built-in `fetch`."
+                    "text": "Host-supplied configuration: the SPARQL `queryFunction` transport and an optional `seed`\nset of entities to pre-populate the canvas with. A DOM property (an object, not an\nattribute) passed in from outside the wrapper.\n\nRead once on mount; not watched, as it only sets up the data source and initial canvas."
                 },
                 "getter": false,
                 "setter": false
@@ -125,9 +127,15 @@ export class GraphwiseReactodia {
                 "attribute": "language",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "LanguageKey",
+                    "resolved": "LanguageKey.EN | LanguageKey.FR",
+                    "references": {
+                        "LanguageKey": {
+                            "location": "import",
+                            "path": "./i18n/language-key",
+                            "id": "src/components/graphwise-reactodia/i18n/language-key.ts::LanguageKey"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -138,7 +146,7 @@ export class GraphwiseReactodia {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'en'"
+                "defaultValue": "LanguageKey.EN"
             },
             "providerSettings": {
                 "type": "unknown",

package/dist/collection/components/graphwise-reactodia/i18n/language-key.js

@@ -0,0 +1,5 @@
+export var LanguageKey;
+(function (LanguageKey) {
+    LanguageKey["EN"] = "en";
+    LanguageKey["FR"] = "fr";
+})(LanguageKey || (LanguageKey = {}));

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

@@ -1,4 +1,6 @@
 import frTranslation from "./fr.reactodia.translation.json";
+import { LanguageKey } from "./language-key";
+// English is provided by default from reactodia so we don't need to include it here, unless we override it
 export const TRANSLATIONS = {
-    'fr': frTranslation
+    [LanguageKey.FR]: frTranslation
 };

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

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

package/dist/collection/components/graphwise-reactodia/models/reactodia-seed-link.js

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

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

@@ -25,28 +25,77 @@ let workspaceContext = null;
  * 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.
  */
-function createDataProvider(currentRepository, queryFunction, settings) {
+function createDataProvider(props) {
+    const { currentRepository, config, providerSettings } = props;
     return new SparqlDataProvider({
         endpointUrl: currentRepository,
         queryMethod: 'POST',
-        queryFunction,
-    }, settings);
+        queryFunction: config.queryFunction,
+    }, providerSettings);
+}
+/**
+ * Places the seed entities on the canvas. Each IRI is added as a placeholder element, and data is then loaded for the
+ * respective nodes using the {@link DataDiagramModel.requestData} method.
+ */
+async function seedCanvas(context, seed, signal) {
+    const { model, performLayout } = context;
+    for (const iri of seed) {
+        model.createElement(iri);
+    }
+    await model.requestData();
+    await performLayout({ signal });
+}
+/**
+ * Places a pre-resolved graph (e.g. a CONSTRUCT query result) on the canvas. The relationships
+ * are computed and not persisted in the repository, so the edges are drawn directly from the
+ * supplied data instead of being fetched. The node IRIs do exist in the repository, so only
+ * their display data is hydrated via {@link DataDiagramModel.requestElementData}.
+ *
+ * Note we use `requestElementData` rather than `requestData`: the latter would also query the
+ * provider for *all* persisted links between the seeded nodes, over-fetching beyond the
+ * CONSTRUCT's selection. Hydrating elements alone keeps the canvas to exactly the supplied
+ * edges, while further expansion continues lazily against the SPARQL provider.
+ */
+async function seedGraphCanvas(context, links, signal) {
+    const { model, performLayout } = context;
+    const uniqueIris = new Set();
+    links.forEach((link) => {
+        var _a;
+        uniqueIris.add(link.source);
+        uniqueIris.add(link.target);
+        // this is a createOrGet, regardless of the name, so we don't need to worry about duplicates.
+        model.createElement(link.source);
+        model.createElement(link.target);
+        (_a = link.rawPredicates) === null || _a === void 0 ? void 0 : _a.forEach((predicate) => {
+            model.createLinks({
+                linkTypeId: predicate,
+                sourceId: link.source,
+                targetId: link.target,
+                properties: {}
+            });
+        });
+    });
+    // Request data only for elements.
+    // Link data is not available in the DB, since we are displaying construct/describe queries
+    await model.requestElementData(Array.from(uniqueIris));
+    await performLayout({ signal });
 }
 /**
  * The Reactodia workspace React component.
  *
  * Authored with `React.createElement` (no TSX) on purpose, since there are differences in stencil and react
  *
- * The canvas starts empty; the user populates it through the workspace search bar
- * (Reactodia's `DefaultWorkspace` unified search), which is backed by the SPARQL
- * data provider's lookup.
+ * Without a seed the canvas starts empty and the user populates it through the workspace
+ * search bar (Reactodia's `DefaultWorkspace` unified search), backed by the SPARQL data
+ * provider's lookup. With a seed, the seeded nodes are placed on the canvas on startup.
  */
 function ReactodiaApp(props) {
-    const { currentRepository, queryFunction, language, initialDiagram, providerSettings } = props;
+    const { language, initialDiagram, config } = props;
     const { onMount } = useLoadedWorkspace(async ({ context, signal }) => {
+        var _a, _b;
         workspaceContext = context;
         const { model } = context;
-        const dataProvider = createDataProvider(currentRepository, queryFunction, providerSettings);
+        const dataProvider = createDataProvider(props);
         // A language change remounts this component to rebuild the workspace with the new
         // translation bundle; restoring the exported diagram keeps the user's canvas intact.
         // This is done because there is no existing mechanism to re-translate the UI at runtime (not for the UI labels at least)
@@ -55,6 +104,12 @@ function ReactodiaApp(props) {
         }
         else {
             await model.createNewDiagram({ dataProvider, signal });
+            if ((_a = config.seedGraph) === null || _a === void 0 ? void 0 : _a.length) {
+                await seedGraphCanvas(context, config.seedGraph, signal);
+            }
+            else if ((_b = config.seedIris) === null || _b === void 0 ? void 0 : _b.length) {
+                await seedCanvas(context, config.seedIris, signal);
+            }
         }
     }, [language]);
     /**
@@ -91,7 +146,7 @@ export async function updateReactodia(props) {
         return;
     }
     const { model } = workspaceContext;
-    const dataProvider = createDataProvider(props.currentRepository, props.queryFunction, props.providerSettings);
+    const dataProvider = createDataProvider(props);
     await model.createNewDiagram({ dataProvider });
 }
 /**

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

@@ -1,21 +1,34 @@
-const EMPTY_SPARQL_RESULT = {
-  head: {vars: []},
-  results: {bindings: []},
-};
-
-function stubQueryFunction() {
-  return Promise.resolve(
-    new Response(JSON.stringify(EMPTY_SPARQL_RESULT), {
-      status: 200,
-      headers: {'Content-Type': 'application/sparql-results+json'},
-    })
-  );
+// Mock all responses as turtle, as we won't be making any SPARQL requests in the dev server.
+async function stubQueryFunction(_params) {
+  return (new Response('', {headers: {'Content-Type': 'text/turtle'}}));
 }
 
+// IRIs of the entities the host asks to pre-populate the canvas with on startup.
+const SEED_NODES = ['http://example.com/alice', 'http://example.com/bob'];
+
+// Pre-resolved edges (e.g. a CONSTRUCT result) the host asks to draw directly on the canvas,
+// without querying the SPARQL endpoint for link data.
+const SEED_GRAPH = [
+  {
+    source: 'http://example.com/alice',
+    target: 'http://example.com/bob',
+    predicates: ['knows'],
+    rawPredicates: ['http://example.com/knows'],
+  },
+];
+
 const reactodia = document.querySelector('graphwise-reactodia');
 
 function setQueryFunction() {
-  reactodia.queryFunction = stubQueryFunction;
+  reactodia.config = {...reactodia.config, queryFunction: stubQueryFunction};
+}
+
+function setSeed() {
+  reactodia.config = {...reactodia.config, seedIris: SEED_NODES};
+}
+
+function setSeedGraph() {
+  reactodia.config = {...reactodia.config, seedGraph: SEED_GRAPH};
 }
 
 function setRepository(repository) {