graphwise-reactodia 0.0.1-TR1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var index = require('./index-CII9aUQC.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"],"queryFunction":[16,"query-function"],"language":[1],"providerSettings":[16,"provider-settings"]},null,{"currentRepository":["onProviderSettingsChange"],"providerSettings":["onProviderSettingsChange"],"language":["onLanguageChange"]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,13 @@
+{
+  "entries": [
+    "components/graphwise-reactodia/graphwise-reactodia.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.35.1",
+    "typescriptVersion": "5.5.4"
+  },
+  "collections": [],
+  "bundles": [],
+  "global": "polyfill/polyfill-node.js"
+}

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

@@ -0,0 +1,10 @@
+graphwise-reactodia {
+  display: block;
+  width: 100%;
+  height: 75vh;
+}
+graphwise-reactodia .reactodia-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

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

@@ -0,0 +1,182 @@
+import { h, Host } from "@stencil/core";
+import { exportReactodiaLayout, mountReactodia, unmountReactodia, updateReactodia } from "./reactodia-app";
+/**
+ * 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 component is a thin wrapper around Reactodia: query configuration lives outside the
+ * wrapper and is supplied through the `providerSettings` prop.
+ */
+export class GraphwiseReactodia {
+    constructor() {
+        /**
+         * UI language code (e.g. `en`, `fr`) for the Reactodia interface. Defaults to English.
+         */
+        this.language = 'en';
+    }
+    onProviderSettingsChange() {
+        this.renderGraph();
+    }
+    onLanguageChange() {
+        // The translations are evaluated by the workspace at construction, so the only way
+        // to re-translate the UI is to re-create the graph. We carry the
+        // current diagram across the remount so switching languages does not wipe the canvas.
+        const diagram = exportReactodiaLayout();
+        this.renderGraph(diagram);
+    }
+    componentDidLoad() {
+        this.renderGraph();
+    }
+    disconnectedCallback() {
+        if (this.reactRoot) {
+            unmountReactodia(this.reactRoot);
+            this.reactRoot = undefined;
+        }
+    }
+    render() {
+        return (h(Host, { key: '3fca0e2163335fc2cb0fc3c57291e4f29234f2c2' }));
+    }
+    renderGraph(initialDiagram) {
+        if (!this.currentRepository) {
+            throw new Error('currentRepository is required');
+        }
+        if (!this.queryFunction) {
+            throw new Error('queryFunction is required');
+        }
+        if (!this.hostElement) {
+            return;
+        }
+        const props = {
+            initialDiagram,
+            currentRepository: this.currentRepository,
+            queryFunction: this.queryFunction,
+            language: this.language,
+            providerSettings: this.providerSettings,
+        };
+        if (this.reactRoot && !initialDiagram) {
+            void updateReactodia(props);
+        }
+        else {
+            this.reactRoot = mountReactodia(this.hostElement, props);
+        }
+    }
+    static get is() { return "graphwise-reactodia"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["graphwise-reactodia.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["graphwise-reactodia.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "currentRepository": {
+                "type": "string",
+                "attribute": "current-repository",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "queryFunction": {
+                "type": "unknown",
+                "attribute": "query-function",
+                "mutable": false,
+                "complexType": {
+                    "original": "SparqlQueryFunction",
+                    "resolved": "(params: { url: string; body?: string; headers: { [header: string]: string; }; method: string; signal?: AbortSignal; }) => Promise<Response>",
+                    "references": {
+                        "SparqlQueryFunction": {
+                            "location": "import",
+                            "path": "@reactodia/workspace",
+                            "id": "node_modules::SparqlQueryFunction"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "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`."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "language": {
+                "type": "string",
+                "attribute": "language",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "UI language code (e.g. `en`, `fr`) for the Reactodia interface. Defaults to English."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'en'"
+            },
+            "providerSettings": {
+                "type": "unknown",
+                "attribute": "provider-settings",
+                "mutable": false,
+                "complexType": {
+                    "original": "SparqlDataProviderSettings",
+                    "resolved": "SparqlDataProviderSettings",
+                    "references": {
+                        "SparqlDataProviderSettings": {
+                            "location": "import",
+                            "path": "@reactodia/workspace",
+                            "id": "node_modules::SparqlDataProviderSettings"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Query preset for the SPARQL data provider, owned and configured by the host. A DOM\nproperty (an object, not an attribute) passed in from outside the wrapper. When omitted,\nthe data provider falls back to Reactodia's generic OWL/RDFS preset. Changing it rebuilds\nthe data provider and resets the canvas."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "currentRepository",
+                "methodName": "onProviderSettingsChange"
+            }, {
+                "propName": "providerSettings",
+                "methodName": "onProviderSettingsChange"
+            }, {
+                "propName": "language",
+                "methodName": "onLanguageChange"
+            }];
+    }
+}

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

@@ -0,0 +1,4 @@
+import frTranslation from "./fr.reactodia.translation.json";
+export const TRANSLATIONS = {
+    'fr': frTranslation
+};

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

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

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

@@ -0,0 +1,109 @@
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { DefaultWorkspace, SparqlDataProvider, useLoadedWorkspace, Workspace, } from "@reactodia/workspace";
+import { blockingDefaultLayout } from "@reactodia/workspace/layout-sync";
+import { TRANSLATIONS } from "./i18n/translations";
+/**
+ * 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.
+ *
+ * Reactodia never re-reads the translations, so the component must be remounted
+ * to switch the UI language (handled in `graphwise-reactodia.tsx`).
+ */
+function translationsForLanguage(language) {
+    const translation = TRANSLATIONS[language];
+    return translation ? [translation] : [];
+}
+/**
+ * The workspace context captured from the Workspace `ref` once it mounts.
+ * Used to drive the diagram imperatively from {@link updateReactodia}, which
+ * runs outside React and therefore cannot call the `useWorkspace` hook.
+ */
+let workspaceContext = null;
+/**
+ * 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.
+ */
+function createDataProvider(currentRepository, queryFunction, settings) {
+    return new SparqlDataProvider({
+        endpointUrl: currentRepository,
+        queryMethod: 'POST',
+        queryFunction,
+    }, settings);
+}
+/**
+ * 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.
+ */
+function ReactodiaApp(props) {
+    const { currentRepository, queryFunction, language, initialDiagram, providerSettings } = props;
+    const { onMount } = useLoadedWorkspace(async ({ context, signal }) => {
+        workspaceContext = context;
+        const { model } = context;
+        const dataProvider = createDataProvider(currentRepository, queryFunction, providerSettings);
+        // 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)
+        if (initialDiagram) {
+            await model.importLayout({ dataProvider, diagram: initialDiagram, signal });
+        }
+        else {
+            await model.createNewDiagram({ dataProvider, signal });
+        }
+    }, [language]);
+    /**
+     * From the documentation
+     *
+     * return (
+     *     <Reactodia.Workspace ref={onMount}
+     *       defaultLayout={defaultLayout}>
+     *       <Reactodia.DefaultWorkspace />
+     *     </Reactodia.Workspace>
+     *   );
+     */
+    return createElement(Workspace, {
+        ref: onMount,
+        defaultLayout: blockingDefaultLayout,
+        defaultLanguage: language,
+        translations: translationsForLanguage(language)
+    }, createElement(DefaultWorkspace, {}));
+}
+/**
+ * Mounts the Reactodia application into the given container and returns the React root.
+ */
+export function mountReactodia(container, props) {
+    const root = createRoot(container);
+    root.render(createElement(ReactodiaApp, props));
+    return root;
+}
+/**
+ * Re-points the diagram at a new SPARQL endpoint or query preset by recreating it with a
+ * fresh data provider. The canvas is reset to empty, matching the initial mount.
+ */
+export async function updateReactodia(props) {
+    if (!workspaceContext) {
+        return;
+    }
+    const { model } = workspaceContext;
+    const dataProvider = createDataProvider(props.currentRepository, props.queryFunction, props.providerSettings);
+    await model.createNewDiagram({ dataProvider });
+}
+/**
+ * Serializes the current diagram so it can be restored after a remount (e.g. when a
+ * language change rebuilds the workspace). Returns `undefined` if nothing is mounted yet.
+ */
+export function exportReactodiaLayout() {
+    return workspaceContext === null || workspaceContext === void 0 ? void 0 : workspaceContext.model.exportLayout();
+}
+/**
+ * Unmounts the Reactodia application.
+ */
+export function unmountReactodia(root) {
+    root.unmount();
+}

package/dist/collection/index.js

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

package/dist/collection/polyfill/polyfill-node.js

@@ -0,0 +1,17 @@
+/**
+ * Stencil global script, executed once before any component bundle loads.
+ *
+ * Reactodia's transitive dependencies (n3 / readable-stream) reference the Node.js
+ * `process` global at module-evaluation time (e.g. `util.debuglog` reads
+ * `process.env.NODE_DEBUG`). That global does not exist in the browser, so we provide
+ * a minimal shim here to keep those modules from crashing
+ */
+export default function polyfillNode() {
+    const globalScope = globalThis;
+    if (!globalScope.process) {
+        globalScope.process = { env: { NODE_ENV: 'production' } };
+    }
+    else if (!globalScope.process.env) {
+        globalScope.process.env = { NODE_ENV: 'production' };
+    }
+}

package/dist/esm/app-globals-CalY52z6.js

@@ -0,0 +1,21 @@
+/**
+ * Stencil global script, executed once before any component bundle loads.
+ *
+ * Reactodia's transitive dependencies (n3 / readable-stream) reference the Node.js
+ * `process` global at module-evaluation time (e.g. `util.debuglog` reads
+ * `process.env.NODE_DEBUG`). That global does not exist in the browser, so we provide
+ * a minimal shim here to keep those modules from crashing
+ */
+function polyfillNode() {
+    const globalScope = globalThis;
+    if (!globalScope.process) {
+        globalScope.process = { env: { NODE_ENV: 'production' } };
+    }
+    else if (!globalScope.process.env) {
+        globalScope.process.env = { NODE_ENV: 'production' };
+    }
+}
+
+const globalScripts = polyfillNode;
+
+export { globalScripts as g };