graphwise-reactodia 0.0.1-TR4 → 0.0.1-TR6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/graphwise-reactodia.cjs.entry.js +39 -15
- package/dist/cjs/graphwise-reactodia.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/graphwise-reactodia/graphwise-reactodia.js +31 -23
- package/dist/collection/components/graphwise-reactodia/i18n/language-key.js +5 -0
- package/dist/collection/components/graphwise-reactodia/i18n/translations.js +3 -1
- package/dist/collection/components/graphwise-reactodia/models/reactodia-config.js +1 -0
- package/dist/collection/components/graphwise-reactodia/reactodia-app.js +25 -9
- package/dist/collection/pages/graphwise-reactodia/main.js +11 -13
- package/dist/esm/graphwise-reactodia.entry.js +39 -15
- package/dist/esm/graphwise-reactodia.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/graphwise-reactodia/graphwise-reactodia.esm.js +1 -1
- package/dist/graphwise-reactodia/{p-b10c344f.entry.js → p-5a330bae.entry.js} +1 -1
- package/dist/types/components/graphwise-reactodia/graphwise-reactodia.d.ts +16 -11
- package/dist/types/components/graphwise-reactodia/i18n/language-key.d.ts +4 -0
- package/dist/types/components/graphwise-reactodia/i18n/translations.d.ts +5 -342
- package/dist/types/components/graphwise-reactodia/models/reactodia-app-props.d.ts +10 -8
- package/dist/types/components/graphwise-reactodia/models/reactodia-config.d.ts +23 -0
- package/dist/types/components.d.ts +33 -29
- package/package.json +14 -3
|
@@ -30631,8 +30631,15 @@ var frTranslation = {
|
|
|
30631
30631
|
zoom_control: zoom_control
|
|
30632
30632
|
};
|
|
30633
30633
|
|
|
30634
|
+
var LanguageKey;
|
|
30635
|
+
(function (LanguageKey) {
|
|
30636
|
+
LanguageKey["EN"] = "en";
|
|
30637
|
+
LanguageKey["FR"] = "fr";
|
|
30638
|
+
})(LanguageKey || (LanguageKey = {}));
|
|
30639
|
+
|
|
30640
|
+
// English is provided by default from reactodia so we don't need to include it here, unless we override it
|
|
30634
30641
|
const TRANSLATIONS = {
|
|
30635
|
-
|
|
30642
|
+
[LanguageKey.FR]: frTranslation
|
|
30636
30643
|
};
|
|
30637
30644
|
|
|
30638
30645
|
/**
|
|
@@ -30657,28 +30664,41 @@ let workspaceContext = null;
|
|
|
30657
30664
|
* query preset. The host owns the query configuration and passes it in via props; when none
|
|
30658
30665
|
* is provided we fall back to Reactodia's generic {@link OwlRdfsSettings} OWL/RDFS preset.
|
|
30659
30666
|
*/
|
|
30660
|
-
function createDataProvider(
|
|
30667
|
+
function createDataProvider(props) {
|
|
30668
|
+
const { currentRepository, config, providerSettings } = props;
|
|
30661
30669
|
return new SparqlDataProvider({
|
|
30662
30670
|
endpointUrl: currentRepository,
|
|
30663
30671
|
queryMethod: 'POST',
|
|
30664
|
-
queryFunction,
|
|
30665
|
-
},
|
|
30672
|
+
queryFunction: config.queryFunction,
|
|
30673
|
+
}, providerSettings);
|
|
30674
|
+
}
|
|
30675
|
+
/**
|
|
30676
|
+
* Places the seed entities on the canvas. Each IRI is added as a placeholder element, and data is then loaded for the
|
|
30677
|
+
* respective nodes using the {@link DataDiagramModel.requestData} method.
|
|
30678
|
+
*/
|
|
30679
|
+
async function seedCanvas(context, seed, signal) {
|
|
30680
|
+
const { model, performLayout } = context;
|
|
30681
|
+
for (const iri of seed) {
|
|
30682
|
+
model.createElement(iri);
|
|
30683
|
+
}
|
|
30684
|
+
await model.requestData();
|
|
30685
|
+
await performLayout({ signal });
|
|
30666
30686
|
}
|
|
30667
30687
|
/**
|
|
30668
30688
|
* The Reactodia workspace React component.
|
|
30669
30689
|
*
|
|
30670
30690
|
* Authored with `React.createElement` (no TSX) on purpose, since there are differences in stencil and react
|
|
30671
30691
|
*
|
|
30672
|
-
*
|
|
30673
|
-
* (Reactodia's `DefaultWorkspace` unified search),
|
|
30674
|
-
*
|
|
30692
|
+
* Without a seed the canvas starts empty and the user populates it through the workspace
|
|
30693
|
+
* search bar (Reactodia's `DefaultWorkspace` unified search), backed by the SPARQL data
|
|
30694
|
+
* provider's lookup. With a seed, the seeded nodes are placed on the canvas on startup.
|
|
30675
30695
|
*/
|
|
30676
30696
|
function ReactodiaApp(props) {
|
|
30677
|
-
const {
|
|
30697
|
+
const { language, initialDiagram, config } = props;
|
|
30678
30698
|
const { onMount } = useLoadedWorkspace(async ({ context, signal }) => {
|
|
30679
30699
|
workspaceContext = context;
|
|
30680
30700
|
const { model } = context;
|
|
30681
|
-
const dataProvider = createDataProvider(
|
|
30701
|
+
const dataProvider = createDataProvider(props);
|
|
30682
30702
|
// A language change remounts this component to rebuild the workspace with the new
|
|
30683
30703
|
// translation bundle; restoring the exported diagram keeps the user's canvas intact.
|
|
30684
30704
|
// 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 +30707,9 @@ function ReactodiaApp(props) {
|
|
|
30687
30707
|
}
|
|
30688
30708
|
else {
|
|
30689
30709
|
await model.createNewDiagram({ dataProvider, signal });
|
|
30710
|
+
if (config.seedIris) {
|
|
30711
|
+
await seedCanvas(context, config.seedIris, signal);
|
|
30712
|
+
}
|
|
30690
30713
|
}
|
|
30691
30714
|
}, [language]);
|
|
30692
30715
|
/**
|
|
@@ -30723,7 +30746,7 @@ async function updateReactodia(props) {
|
|
|
30723
30746
|
return;
|
|
30724
30747
|
}
|
|
30725
30748
|
const { model } = workspaceContext;
|
|
30726
|
-
const dataProvider = createDataProvider(props
|
|
30749
|
+
const dataProvider = createDataProvider(props);
|
|
30727
30750
|
await model.createNewDiagram({ dataProvider });
|
|
30728
30751
|
}
|
|
30729
30752
|
/**
|
|
@@ -30748,7 +30771,7 @@ const GraphwiseReactodia = class {
|
|
|
30748
30771
|
/**
|
|
30749
30772
|
* UI language code (e.g. `en`, `fr`) for the Reactodia interface. Defaults to English.
|
|
30750
30773
|
*/
|
|
30751
|
-
this.language =
|
|
30774
|
+
this.language = LanguageKey.EN;
|
|
30752
30775
|
}
|
|
30753
30776
|
onProviderSettingsChange() {
|
|
30754
30777
|
this.renderGraph();
|
|
@@ -30770,14 +30793,15 @@ const GraphwiseReactodia = class {
|
|
|
30770
30793
|
}
|
|
30771
30794
|
}
|
|
30772
30795
|
render() {
|
|
30773
|
-
return (index.h(index.Host, { key: '
|
|
30796
|
+
return (index.h(index.Host, { key: '8ef8d44db9d8e5eae72474c71c3c586f1f267d9b' }));
|
|
30774
30797
|
}
|
|
30775
30798
|
renderGraph(initialDiagram) {
|
|
30799
|
+
var _a;
|
|
30776
30800
|
if (!this.currentRepository) {
|
|
30777
30801
|
throw new Error('currentRepository is required');
|
|
30778
30802
|
}
|
|
30779
|
-
if (!this.queryFunction) {
|
|
30780
|
-
throw new Error('queryFunction is required');
|
|
30803
|
+
if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.queryFunction)) {
|
|
30804
|
+
throw new Error('config.queryFunction is required');
|
|
30781
30805
|
}
|
|
30782
30806
|
if (!this.hostElement) {
|
|
30783
30807
|
return;
|
|
@@ -30785,7 +30809,7 @@ const GraphwiseReactodia = class {
|
|
|
30785
30809
|
const props = {
|
|
30786
30810
|
initialDiagram,
|
|
30787
30811
|
currentRepository: this.currentRepository,
|
|
30788
|
-
|
|
30812
|
+
config: this.config,
|
|
30789
30813
|
language: this.language,
|
|
30790
30814
|
providerSettings: this.providerSettings,
|
|
30791
30815
|
};
|
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["graphwise-reactodia.cjs",[[0,"graphwise-reactodia",{"currentRepository":[1,"current-repository"],"
|
|
22
|
+
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);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-CcJr5lkF.js');
|
|
|
6
6
|
const defineCustomElements = async (win, options) => {
|
|
7
7
|
if (typeof window === 'undefined') return undefined;
|
|
8
8
|
await appGlobals.globalScripts();
|
|
9
|
-
return index.bootstrapLazy([["graphwise-reactodia.cjs",[[0,"graphwise-reactodia",{"currentRepository":[1,"current-repository"],"
|
|
9
|
+
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);
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
exports.setNonce = index.setNonce;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
2
|
import { exportReactodiaLayout, mountReactodia, unmountReactodia, updateReactodia } from "./reactodia-app";
|
|
3
|
+
import { LanguageKey } from "./i18n/language-key";
|
|
3
4
|
/**
|
|
4
5
|
* A web component that renders a graph with the Reactodia workspace.
|
|
5
6
|
*
|
|
6
7
|
* The component is backed by a SPARQL endpoint but is endpoint-agnostic: the host passes
|
|
7
|
-
* the active repository's endpoint via `current-repository` and a `queryFunction`
|
|
8
|
-
* performs the actual HTTP request. Reactodia fetches all node, link and type data
|
|
9
|
-
* through them; the canvas starts empty and the user populates it via the search bar.
|
|
8
|
+
* the active repository's endpoint via `current-repository` and a `config.queryFunction`
|
|
9
|
+
* that performs the actual HTTP request. Reactodia fetches all node, link and type data
|
|
10
|
+
* lazily through them; the canvas starts empty and the user populates it via the search bar.
|
|
10
11
|
*
|
|
11
12
|
* The component is a thin wrapper around Reactodia: query configuration lives outside the
|
|
12
13
|
* wrapper and is supplied through the `providerSettings` prop.
|
|
@@ -16,7 +17,7 @@ export class GraphwiseReactodia {
|
|
|
16
17
|
/**
|
|
17
18
|
* UI language code (e.g. `en`, `fr`) for the Reactodia interface. Defaults to English.
|
|
18
19
|
*/
|
|
19
|
-
this.language =
|
|
20
|
+
this.language = LanguageKey.EN;
|
|
20
21
|
}
|
|
21
22
|
onProviderSettingsChange() {
|
|
22
23
|
this.renderGraph();
|
|
@@ -38,14 +39,15 @@ export class GraphwiseReactodia {
|
|
|
38
39
|
}
|
|
39
40
|
}
|
|
40
41
|
render() {
|
|
41
|
-
return (h(Host, { key: '
|
|
42
|
+
return (h(Host, { key: '8ef8d44db9d8e5eae72474c71c3c586f1f267d9b' }));
|
|
42
43
|
}
|
|
43
44
|
renderGraph(initialDiagram) {
|
|
45
|
+
var _a;
|
|
44
46
|
if (!this.currentRepository) {
|
|
45
47
|
throw new Error('currentRepository is required');
|
|
46
48
|
}
|
|
47
|
-
if (!this.queryFunction) {
|
|
48
|
-
throw new Error('queryFunction is required');
|
|
49
|
+
if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.queryFunction)) {
|
|
50
|
+
throw new Error('config.queryFunction is required');
|
|
49
51
|
}
|
|
50
52
|
if (!this.hostElement) {
|
|
51
53
|
return;
|
|
@@ -53,7 +55,7 @@ export class GraphwiseReactodia {
|
|
|
53
55
|
const props = {
|
|
54
56
|
initialDiagram,
|
|
55
57
|
currentRepository: this.currentRepository,
|
|
56
|
-
|
|
58
|
+
config: this.config,
|
|
57
59
|
language: this.language,
|
|
58
60
|
providerSettings: this.providerSettings,
|
|
59
61
|
};
|
|
@@ -87,35 +89,35 @@ export class GraphwiseReactodia {
|
|
|
87
89
|
"references": {}
|
|
88
90
|
},
|
|
89
91
|
"required": false,
|
|
90
|
-
"optional":
|
|
92
|
+
"optional": true,
|
|
91
93
|
"docs": {
|
|
92
94
|
"tags": [],
|
|
93
|
-
"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."
|
|
95
|
+
"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."
|
|
94
96
|
},
|
|
95
97
|
"getter": false,
|
|
96
98
|
"setter": false,
|
|
97
99
|
"reflect": false
|
|
98
100
|
},
|
|
99
|
-
"
|
|
101
|
+
"config": {
|
|
100
102
|
"type": "unknown",
|
|
101
|
-
"attribute": "
|
|
103
|
+
"attribute": "config",
|
|
102
104
|
"mutable": false,
|
|
103
105
|
"complexType": {
|
|
104
|
-
"original": "
|
|
105
|
-
"resolved": "
|
|
106
|
+
"original": "ReactodiaConfig",
|
|
107
|
+
"resolved": "ReactodiaConfig",
|
|
106
108
|
"references": {
|
|
107
|
-
"
|
|
109
|
+
"ReactodiaConfig": {
|
|
108
110
|
"location": "import",
|
|
109
|
-
"path": "
|
|
110
|
-
"id": "reactodia
|
|
111
|
+
"path": "./models/reactodia-config",
|
|
112
|
+
"id": "src/components/graphwise-reactodia/models/reactodia-config.ts::ReactodiaConfig"
|
|
111
113
|
}
|
|
112
114
|
}
|
|
113
115
|
},
|
|
114
116
|
"required": false,
|
|
115
|
-
"optional":
|
|
117
|
+
"optional": true,
|
|
116
118
|
"docs": {
|
|
117
119
|
"tags": [],
|
|
118
|
-
"text": "
|
|
120
|
+
"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."
|
|
119
121
|
},
|
|
120
122
|
"getter": false,
|
|
121
123
|
"setter": false
|
|
@@ -125,9 +127,15 @@ export class GraphwiseReactodia {
|
|
|
125
127
|
"attribute": "language",
|
|
126
128
|
"mutable": false,
|
|
127
129
|
"complexType": {
|
|
128
|
-
"original": "
|
|
129
|
-
"resolved": "
|
|
130
|
-
"references": {
|
|
130
|
+
"original": "LanguageKey",
|
|
131
|
+
"resolved": "LanguageKey.EN | LanguageKey.FR",
|
|
132
|
+
"references": {
|
|
133
|
+
"LanguageKey": {
|
|
134
|
+
"location": "import",
|
|
135
|
+
"path": "./i18n/language-key",
|
|
136
|
+
"id": "src/components/graphwise-reactodia/i18n/language-key.ts::LanguageKey"
|
|
137
|
+
}
|
|
138
|
+
}
|
|
131
139
|
},
|
|
132
140
|
"required": false,
|
|
133
141
|
"optional": false,
|
|
@@ -138,7 +146,7 @@ export class GraphwiseReactodia {
|
|
|
138
146
|
"getter": false,
|
|
139
147
|
"setter": false,
|
|
140
148
|
"reflect": false,
|
|
141
|
-
"defaultValue": "
|
|
149
|
+
"defaultValue": "LanguageKey.EN"
|
|
142
150
|
},
|
|
143
151
|
"providerSettings": {
|
|
144
152
|
"type": "unknown",
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import frTranslation from "./fr.reactodia.translation.json";
|
|
2
|
+
import { LanguageKey } from "./language-key";
|
|
3
|
+
// English is provided by default from reactodia so we don't need to include it here, unless we override it
|
|
2
4
|
export const TRANSLATIONS = {
|
|
3
|
-
|
|
5
|
+
[LanguageKey.FR]: frTranslation
|
|
4
6
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -25,28 +25,41 @@ let workspaceContext = null;
|
|
|
25
25
|
* query preset. The host owns the query configuration and passes it in via props; when none
|
|
26
26
|
* is provided we fall back to Reactodia's generic {@link OwlRdfsSettings} OWL/RDFS preset.
|
|
27
27
|
*/
|
|
28
|
-
function createDataProvider(
|
|
28
|
+
function createDataProvider(props) {
|
|
29
|
+
const { currentRepository, config, providerSettings } = props;
|
|
29
30
|
return new SparqlDataProvider({
|
|
30
31
|
endpointUrl: currentRepository,
|
|
31
32
|
queryMethod: 'POST',
|
|
32
|
-
queryFunction,
|
|
33
|
-
},
|
|
33
|
+
queryFunction: config.queryFunction,
|
|
34
|
+
}, providerSettings);
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Places the seed entities on the canvas. Each IRI is added as a placeholder element, and data is then loaded for the
|
|
38
|
+
* respective nodes using the {@link DataDiagramModel.requestData} method.
|
|
39
|
+
*/
|
|
40
|
+
async function seedCanvas(context, seed, signal) {
|
|
41
|
+
const { model, performLayout } = context;
|
|
42
|
+
for (const iri of seed) {
|
|
43
|
+
model.createElement(iri);
|
|
44
|
+
}
|
|
45
|
+
await model.requestData();
|
|
46
|
+
await performLayout({ signal });
|
|
34
47
|
}
|
|
35
48
|
/**
|
|
36
49
|
* The Reactodia workspace React component.
|
|
37
50
|
*
|
|
38
51
|
* Authored with `React.createElement` (no TSX) on purpose, since there are differences in stencil and react
|
|
39
52
|
*
|
|
40
|
-
*
|
|
41
|
-
* (Reactodia's `DefaultWorkspace` unified search),
|
|
42
|
-
*
|
|
53
|
+
* Without a seed the canvas starts empty and the user populates it through the workspace
|
|
54
|
+
* search bar (Reactodia's `DefaultWorkspace` unified search), backed by the SPARQL data
|
|
55
|
+
* provider's lookup. With a seed, the seeded nodes are placed on the canvas on startup.
|
|
43
56
|
*/
|
|
44
57
|
function ReactodiaApp(props) {
|
|
45
|
-
const {
|
|
58
|
+
const { language, initialDiagram, config } = props;
|
|
46
59
|
const { onMount } = useLoadedWorkspace(async ({ context, signal }) => {
|
|
47
60
|
workspaceContext = context;
|
|
48
61
|
const { model } = context;
|
|
49
|
-
const dataProvider = createDataProvider(
|
|
62
|
+
const dataProvider = createDataProvider(props);
|
|
50
63
|
// A language change remounts this component to rebuild the workspace with the new
|
|
51
64
|
// translation bundle; restoring the exported diagram keeps the user's canvas intact.
|
|
52
65
|
// 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 +68,9 @@ function ReactodiaApp(props) {
|
|
|
55
68
|
}
|
|
56
69
|
else {
|
|
57
70
|
await model.createNewDiagram({ dataProvider, signal });
|
|
71
|
+
if (config.seedIris) {
|
|
72
|
+
await seedCanvas(context, config.seedIris, signal);
|
|
73
|
+
}
|
|
58
74
|
}
|
|
59
75
|
}, [language]);
|
|
60
76
|
/**
|
|
@@ -91,7 +107,7 @@ export async function updateReactodia(props) {
|
|
|
91
107
|
return;
|
|
92
108
|
}
|
|
93
109
|
const { model } = workspaceContext;
|
|
94
|
-
const dataProvider = createDataProvider(props
|
|
110
|
+
const dataProvider = createDataProvider(props);
|
|
95
111
|
await model.createNewDiagram({ dataProvider });
|
|
96
112
|
}
|
|
97
113
|
/**
|
|
@@ -1,21 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
};
|
|
5
|
-
|
|
6
|
-
function stubQueryFunction() {
|
|
7
|
-
return Promise.resolve(
|
|
8
|
-
new Response(JSON.stringify(EMPTY_SPARQL_RESULT), {
|
|
9
|
-
status: 200,
|
|
10
|
-
headers: {'Content-Type': 'application/sparql-results+json'},
|
|
11
|
-
})
|
|
12
|
-
);
|
|
1
|
+
// Mock all responses as turtle, as we won't be making any SPARQL requests in the dev server.
|
|
2
|
+
async function stubQueryFunction(_params) {
|
|
3
|
+
return (new Response('', {headers: {'Content-Type': 'text/turtle'}}));
|
|
13
4
|
}
|
|
14
5
|
|
|
6
|
+
// IRIs of the entities the host asks to pre-populate the canvas with on startup.
|
|
7
|
+
const SEED_NODES = ['http://example.com/alice', 'http://example.com/bob'];
|
|
8
|
+
|
|
15
9
|
const reactodia = document.querySelector('graphwise-reactodia');
|
|
16
10
|
|
|
17
11
|
function setQueryFunction() {
|
|
18
|
-
reactodia.
|
|
12
|
+
reactodia.config = {...reactodia.config, queryFunction: stubQueryFunction};
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
function setSeed() {
|
|
16
|
+
reactodia.config = {...reactodia.config, seedIris: SEED_NODES};
|
|
19
17
|
}
|
|
20
18
|
|
|
21
19
|
function setRepository(repository) {
|
|
@@ -30629,8 +30629,15 @@ var frTranslation = {
|
|
|
30629
30629
|
zoom_control: zoom_control
|
|
30630
30630
|
};
|
|
30631
30631
|
|
|
30632
|
+
var LanguageKey;
|
|
30633
|
+
(function (LanguageKey) {
|
|
30634
|
+
LanguageKey["EN"] = "en";
|
|
30635
|
+
LanguageKey["FR"] = "fr";
|
|
30636
|
+
})(LanguageKey || (LanguageKey = {}));
|
|
30637
|
+
|
|
30638
|
+
// English is provided by default from reactodia so we don't need to include it here, unless we override it
|
|
30632
30639
|
const TRANSLATIONS = {
|
|
30633
|
-
|
|
30640
|
+
[LanguageKey.FR]: frTranslation
|
|
30634
30641
|
};
|
|
30635
30642
|
|
|
30636
30643
|
/**
|
|
@@ -30655,28 +30662,41 @@ let workspaceContext = null;
|
|
|
30655
30662
|
* query preset. The host owns the query configuration and passes it in via props; when none
|
|
30656
30663
|
* is provided we fall back to Reactodia's generic {@link OwlRdfsSettings} OWL/RDFS preset.
|
|
30657
30664
|
*/
|
|
30658
|
-
function createDataProvider(
|
|
30665
|
+
function createDataProvider(props) {
|
|
30666
|
+
const { currentRepository, config, providerSettings } = props;
|
|
30659
30667
|
return new SparqlDataProvider({
|
|
30660
30668
|
endpointUrl: currentRepository,
|
|
30661
30669
|
queryMethod: 'POST',
|
|
30662
|
-
queryFunction,
|
|
30663
|
-
},
|
|
30670
|
+
queryFunction: config.queryFunction,
|
|
30671
|
+
}, providerSettings);
|
|
30672
|
+
}
|
|
30673
|
+
/**
|
|
30674
|
+
* Places the seed entities on the canvas. Each IRI is added as a placeholder element, and data is then loaded for the
|
|
30675
|
+
* respective nodes using the {@link DataDiagramModel.requestData} method.
|
|
30676
|
+
*/
|
|
30677
|
+
async function seedCanvas(context, seed, signal) {
|
|
30678
|
+
const { model, performLayout } = context;
|
|
30679
|
+
for (const iri of seed) {
|
|
30680
|
+
model.createElement(iri);
|
|
30681
|
+
}
|
|
30682
|
+
await model.requestData();
|
|
30683
|
+
await performLayout({ signal });
|
|
30664
30684
|
}
|
|
30665
30685
|
/**
|
|
30666
30686
|
* The Reactodia workspace React component.
|
|
30667
30687
|
*
|
|
30668
30688
|
* Authored with `React.createElement` (no TSX) on purpose, since there are differences in stencil and react
|
|
30669
30689
|
*
|
|
30670
|
-
*
|
|
30671
|
-
* (Reactodia's `DefaultWorkspace` unified search),
|
|
30672
|
-
*
|
|
30690
|
+
* Without a seed the canvas starts empty and the user populates it through the workspace
|
|
30691
|
+
* search bar (Reactodia's `DefaultWorkspace` unified search), backed by the SPARQL data
|
|
30692
|
+
* provider's lookup. With a seed, the seeded nodes are placed on the canvas on startup.
|
|
30673
30693
|
*/
|
|
30674
30694
|
function ReactodiaApp(props) {
|
|
30675
|
-
const {
|
|
30695
|
+
const { language, initialDiagram, config } = props;
|
|
30676
30696
|
const { onMount } = useLoadedWorkspace(async ({ context, signal }) => {
|
|
30677
30697
|
workspaceContext = context;
|
|
30678
30698
|
const { model } = context;
|
|
30679
|
-
const dataProvider = createDataProvider(
|
|
30699
|
+
const dataProvider = createDataProvider(props);
|
|
30680
30700
|
// A language change remounts this component to rebuild the workspace with the new
|
|
30681
30701
|
// translation bundle; restoring the exported diagram keeps the user's canvas intact.
|
|
30682
30702
|
// This is done because there is no existing mechanism to re-translate the UI at runtime (not for the UI labels at least)
|
|
@@ -30685,6 +30705,9 @@ function ReactodiaApp(props) {
|
|
|
30685
30705
|
}
|
|
30686
30706
|
else {
|
|
30687
30707
|
await model.createNewDiagram({ dataProvider, signal });
|
|
30708
|
+
if (config.seedIris) {
|
|
30709
|
+
await seedCanvas(context, config.seedIris, signal);
|
|
30710
|
+
}
|
|
30688
30711
|
}
|
|
30689
30712
|
}, [language]);
|
|
30690
30713
|
/**
|
|
@@ -30721,7 +30744,7 @@ async function updateReactodia(props) {
|
|
|
30721
30744
|
return;
|
|
30722
30745
|
}
|
|
30723
30746
|
const { model } = workspaceContext;
|
|
30724
|
-
const dataProvider = createDataProvider(props
|
|
30747
|
+
const dataProvider = createDataProvider(props);
|
|
30725
30748
|
await model.createNewDiagram({ dataProvider });
|
|
30726
30749
|
}
|
|
30727
30750
|
/**
|
|
@@ -30746,7 +30769,7 @@ const GraphwiseReactodia = class {
|
|
|
30746
30769
|
/**
|
|
30747
30770
|
* UI language code (e.g. `en`, `fr`) for the Reactodia interface. Defaults to English.
|
|
30748
30771
|
*/
|
|
30749
|
-
this.language =
|
|
30772
|
+
this.language = LanguageKey.EN;
|
|
30750
30773
|
}
|
|
30751
30774
|
onProviderSettingsChange() {
|
|
30752
30775
|
this.renderGraph();
|
|
@@ -30768,14 +30791,15 @@ const GraphwiseReactodia = class {
|
|
|
30768
30791
|
}
|
|
30769
30792
|
}
|
|
30770
30793
|
render() {
|
|
30771
|
-
return (h(Host, { key: '
|
|
30794
|
+
return (h(Host, { key: '8ef8d44db9d8e5eae72474c71c3c586f1f267d9b' }));
|
|
30772
30795
|
}
|
|
30773
30796
|
renderGraph(initialDiagram) {
|
|
30797
|
+
var _a;
|
|
30774
30798
|
if (!this.currentRepository) {
|
|
30775
30799
|
throw new Error('currentRepository is required');
|
|
30776
30800
|
}
|
|
30777
|
-
if (!this.queryFunction) {
|
|
30778
|
-
throw new Error('queryFunction is required');
|
|
30801
|
+
if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.queryFunction)) {
|
|
30802
|
+
throw new Error('config.queryFunction is required');
|
|
30779
30803
|
}
|
|
30780
30804
|
if (!this.hostElement) {
|
|
30781
30805
|
return;
|
|
@@ -30783,7 +30807,7 @@ const GraphwiseReactodia = class {
|
|
|
30783
30807
|
const props = {
|
|
30784
30808
|
initialDiagram,
|
|
30785
30809
|
currentRepository: this.currentRepository,
|
|
30786
|
-
|
|
30810
|
+
config: this.config,
|
|
30787
30811
|
language: this.language,
|
|
30788
30812
|
providerSettings: this.providerSettings,
|
|
30789
30813
|
};
|
|
@@ -17,5 +17,5 @@ var patchBrowser = () => {
|
|
|
17
17
|
|
|
18
18
|
patchBrowser().then(async (options) => {
|
|
19
19
|
await globalScripts();
|
|
20
|
-
return bootstrapLazy([["graphwise-reactodia",[[0,"graphwise-reactodia",{"currentRepository":[1,"current-repository"],"
|
|
20
|
+
return bootstrapLazy([["graphwise-reactodia",[[0,"graphwise-reactodia",{"currentRepository":[1,"current-repository"],"config":[16],"language":[1],"providerSettings":[16,"provider-settings"]},null,{"currentRepository":["onProviderSettingsChange"],"providerSettings":["onProviderSettingsChange"],"language":["onLanguageChange"]}]]]], options);
|
|
21
21
|
});
|
package/dist/esm/loader.js
CHANGED
|
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-CalY52z6.js';
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await globalScripts();
|
|
8
|
-
return bootstrapLazy([["graphwise-reactodia",[[0,"graphwise-reactodia",{"currentRepository":[1,"current-repository"],"
|
|
8
|
+
return bootstrapLazy([["graphwise-reactodia",[[0,"graphwise-reactodia",{"currentRepository":[1,"current-repository"],"config":[16],"language":[1],"providerSettings":[16,"provider-settings"]},null,{"currentRepository":["onProviderSettingsChange"],"providerSettings":["onProviderSettingsChange"],"language":["onLanguageChange"]}]]]], options);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { defineCustomElements };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as
|
|
1
|
+
import{p as e,b as r}from"./p-Cypw7ydc.js";export{s as setNonce}from"./p-Cypw7ydc.js";import{g as t}from"./p-CalY52z6.js";(()=>{const r=import.meta.url,t={};return""!==r&&(t.resourcesUrl=new URL(".",r).href),e(t)})().then((async e=>(await t(),r([["p-5a330bae",[[0,"graphwise-reactodia",{currentRepository:[1,"current-repository"],config:[16],language:[1],providerSettings:[16,"provider-settings"]},null,{currentRepository:["onProviderSettingsChange"],providerSettings:["onProviderSettingsChange"],language:["onLanguageChange"]}]]]],e))));
|