graphwise-reactodia 0.0.1-TR11 → 0.0.1-TR13

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

@@ -23868,6 +23868,35 @@ function ToolbarAction(props) {
 	});
 }
 /**
+* Toolbar action component to open a file selection dialog.
+*
+* @category Components
+*/
+function ToolbarActionOpen(props) {
+	const { className, fileAccept, onSelect, children, ...otherProps } = props;
+	const inputRef = reactExports.useRef(null);
+	return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [/* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarAction, {
+		...otherProps,
+		className: clsx(className, `${CLASS_NAME$8}__open`),
+		onSelect: () => {
+			inputRef.current?.click();
+		},
+		children
+	}), /* @__PURE__ */ jsxRuntimeExports.jsx("input", {
+		ref: inputRef,
+		role: "none",
+		type: "file",
+		className: `${CLASS_NAME$8}__open-input`,
+		accept: fileAccept,
+		onChange: (e) => {
+			if (e.currentTarget.files) {
+				const file = e.currentTarget.files[0];
+				onSelect(file);
+			}
+		}
+	})] });
+}
+/**
 * Toolbar action component to clear diagram content.
 *
 * Clearing the diagram adds a command to the command history.
@@ -30846,6 +30875,16 @@ function getContentFittingBoxForLayout(state) {
 	};
 }
 
+const graphwise_toolbar_action$1 = {
+	"download_diagram.label": "Export to JSON",
+	"download_diagram.title": "Export the diagram to a JSON file",
+	"upload_diagram.label": "Import from JSON",
+	"upload_diagram.title": "Replace the diagram with one from a JSON file"
+};
+var enTranslation = {
+	graphwise_toolbar_action: graphwise_toolbar_action$1
+};
+
 const authoring_state = {
 	"entity_action_delete.label": "supprimer",
 	"entity_action_delete.title": "Supprimer l'entité",
@@ -31100,6 +31139,12 @@ const standard_link = {
 const toolbar = {
 	"menu_toggle.title": "Ouvrir le menu"
 };
+const graphwise_toolbar_action = {
+	"download_diagram.label": "Exporter en JSON",
+	"download_diagram.title": "Exporter le diagramme en fichier JSON",
+	"upload_diagram.label": "Importer depuis JSON",
+	"upload_diagram.title": "Remplacer le diagramme par celui d'un fichier JSON"
+};
 const toolbar_action = {
 	"clear_all.command": "Tout effacer",
 	"clear_all.title": "Supprimer tous les éléments et liens du diagramme",
@@ -31210,6 +31255,7 @@ var frTranslation = {
 	standard_element: standard_element,
 	standard_link: standard_link,
 	toolbar: toolbar,
+	graphwise_toolbar_action: graphwise_toolbar_action,
 	toolbar_action: toolbar_action,
 	unified_search: unified_search,
 	visual_authoring: visual_authoring,
@@ -31224,8 +31270,10 @@ var LanguageKey;
     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
+// English is provided by default from reactodia, so the English bundle holds only our own keys and overrides. If
+// A key is missing, reactodia defaults to its own translation.
 const TRANSLATIONS = {
+    [LanguageKey.EN]: enTranslation,
     [LanguageKey.FR]: frTranslation
 };
 
@@ -31285,7 +31333,7 @@ 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 __decorate$4 = (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;
@@ -31296,6 +31344,20 @@ var DiagramService_1;
  * Service for diagram related operations and subscriptions
  */
 let DiagramService = DiagramService_1 = class DiagramService {
+    /**
+     * Replaces the diagram content with the given serialization. Element data is requested from the data provider and
+     * the links between the imported elements are validated against it.
+     *
+     * @param model The diagram model to import into.
+     * @param dataProvider The data provider to bind to the diagram.
+     * @param diagram The serialization to import. When `undefined`, the diagram is cleared.
+     * @param signal Optional signal to abort the import.
+     */
+    importDiagram(model, dataProvider, diagram, signal) {
+        // selection is not cleared on import, so we clear it manually to avoid painting the previous selection
+        model.setSelection([]);
+        return model.importLayout({ dataProvider, diagram, signal, validateLinks: true });
+    }
     /**
      * Subscribes to diagram changes. On every debounced change the current layout is
      * exported and passed to the callback.
@@ -31330,11 +31392,11 @@ let DiagramService = DiagramService_1 = class DiagramService {
 DiagramService.ID = 'DiagramService';
 DiagramService.NOTIFY_DEBOUNCE_MS = 300;
 DiagramService.HISTORY_CHANGED_EVENT = 'historyChanged';
-DiagramService = DiagramService_1 = __decorate$3([
+DiagramService = DiagramService_1 = __decorate$4([
     Service
 ], DiagramService);
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -31349,11 +31411,11 @@ let WindowService = class WindowService {
     }
 };
 WindowService.ID = 'WindowService';
-WindowService = __decorate$2([
+WindowService = __decorate$3([
     Service
 ], WindowService);
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -31397,11 +31459,11 @@ let DiagramStorageService = DiagramStorageService_1 = class DiagramStorageServic
 };
 DiagramStorageService.ID = 'DiagramStorageService';
 DiagramStorageService.STORAGE_KEY = 'diagram.state';
-DiagramStorageService = DiagramStorageService_1 = __decorate$1([
+DiagramStorageService = DiagramStorageService_1 = __decorate$2([
     Service
 ], DiagramStorageService);
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -31424,7 +31486,7 @@ let EventService = class EventService {
     }
 };
 EventService.ID = 'EventService';
-EventService = __decorate([
+EventService = __decorate$1([
     Service
 ], EventService);
 
@@ -31518,8 +31580,102 @@ const resetColors = () => {
     typeToIndex.clear();
 };
 
+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;
+};
+var DiagramFileService_1;
+/**
+ * Service for downloading and uploading the diagram as a file. The file content is the same
+ * {@link SerializedDiagram} that is persisted to the local store.
+ */
+let DiagramFileService = DiagramFileService_1 = class DiagramFileService {
+    /**
+     * Downloads the given diagram serialization as a file with the given name.
+     */
+    download(diagram, fileName) {
+        const window = service(WindowService).getWindow();
+        const blob = new Blob([JSON.stringify(diagram)], { type: DiagramFileService_1.MIME_TYPE });
+        const url = window.URL.createObjectURL(blob);
+        const link = window.document.createElement('a');
+        link.href = url;
+        link.download = fileName;
+        link.click();
+        window.URL.revokeObjectURL(url);
+    }
+    /**
+     * Reads a diagram serialization from the given file.
+     *
+     * @throws Error when the file is not valid JSON or is not a serialized diagram.
+     */
+    async read(file) {
+        let diagram;
+        try {
+            diagram = JSON.parse(await file.text());
+        }
+        catch (error) {
+            throw new Error(`File "${file.name}" is not valid JSON: ${error.message}`);
+        }
+        if (!this.isSerializedDiagram(diagram)) {
+            throw new Error(`File "${file.name}" is not a serialized diagram`);
+        }
+        return diagram;
+    }
+    /**
+     * Checks if the provided value is a serialized diagram
+     */
+    isSerializedDiagram(value) {
+        var _a, _b;
+        const diagram = value;
+        return (diagram === null || diagram === void 0 ? void 0 : diagram['@type']) === 'Diagram'
+            && Array.isArray((_a = diagram.layoutData) === null || _a === void 0 ? void 0 : _a.elements)
+            && Array.isArray((_b = diagram.layoutData) === null || _b === void 0 ? void 0 : _b.links);
+    }
+};
+DiagramFileService.ID = 'DiagramFileService';
+DiagramFileService.FILE_EXTENSION = '.json';
+DiagramFileService.MIME_TYPE = 'application/json';
+DiagramFileService = DiagramFileService_1 = __decorate([
+    Service
+], DiagramFileService);
+
+/**
+ * The workspace main menu: Reactodia's default actions, followed by the diagram download and upload.
+ *
+ * Passing a `menu` to the `DefaultWorkspace` replaces its default actions, so they are listed here again.
+ * Rendered inside the workspace, so the actions can use the workspace hooks.
+ */
+function GraphwiseMenu() {
+    const { model } = useWorkspace();
+    const t = useTranslation();
+    const diagramFileService = service(DiagramFileService);
+    const diagramService = service(DiagramService);
+    const downloadDiagram = () => {
+        const timestamp = new Date().toISOString().replace(/[-:]|\.\d+Z$/g, '');
+        diagramFileService.download(model.exportLayout(), `diagram-${timestamp}${DiagramFileService.FILE_EXTENSION}`);
+    };
+    const uploadDiagram = async (file) => {
+        try {
+            const diagram = await diagramFileService.read(file);
+            await diagramService.importDiagram(model, model.dataProvider, diagram);
+        }
+        catch (error) {
+            console.error('Failed to upload the diagram', error);
+        }
+    };
+    return reactExports.createElement(reactExports.Fragment, null, reactExports.createElement(ToolbarActionClearAll, {}), reactExports.createElement(ToolbarActionExport, { kind: 'exportRaster' }), reactExports.createElement(ToolbarActionExport, { kind: 'exportSvg' }), reactExports.createElement(ToolbarActionExport, { kind: 'print' }), reactExports.createElement(ToolbarAction, 
+    // The same icon as ToolbarActionSave. We dont use that action, since it disables saving on refresh
+    { className: 'reactodia-toolbar-action__save', title: t.text('graphwise_toolbar_action.download_diagram.title'), onSelect: downloadDiagram }, t.text('graphwise_toolbar_action.download_diagram.label')), reactExports.createElement(ToolbarActionOpen, {
+        title: t.text('graphwise_toolbar_action.upload_diagram.title'),
+        fileAccept: DiagramFileService.FILE_EXTENSION,
+        onSelect: (file) => void uploadDiagram(file)
+    }, t.text('graphwise_toolbar_action.upload_diagram.label')));
+}
+
 /**
- * Reactodia ships English as its built-in default bundle, so English needs no override.
+ * Reactodia ships English as its built-in default bundle, so the English bundle only adds our own keys.
  * 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
@@ -31543,8 +31699,7 @@ let workspaceContext = null;
 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.
+ * query preset. The host owns the query configuration and always passes it in via props.
  */
 function createDataProvider(props) {
     const { currentRepository, config, providerSettings } = props;
@@ -31637,10 +31792,12 @@ function ReactodiaApp(props) {
         const dataProvider = createDataProvider(props);
         const isReload = props.isReload;
         const savedDiagram = service(DiagramStorageService).load();
+        const diagramService = service(DiagramService);
         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, validateLinks: true });
+            // Reload the diagram that is currently on the canvas. This may happen when the host changes the provider
+            // settings, or 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 diagramService.importDiagram(model, dataProvider, currentDiagram, signal);
         }
         else if ((_a = config.seedIris) === null || _a === void 0 ? void 0 : _a.length) {
             await seedIrisToCanvas(context, dataProvider, config.seedIris, signal);
@@ -31651,7 +31808,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, validateLinks: true });
+            await diagramService.importDiagram(model, dataProvider, savedDiagram, signal);
         }
     }, [language]);
     /**
@@ -31670,7 +31827,11 @@ function ReactodiaApp(props) {
         defaultLanguage: language,
         translations: translationsForLanguage(language),
         typeStyleResolver: resolveTypeStyle
-    }, reactExports.createElement(DefaultWorkspace, {}));
+    }, reactExports.createElement(DefaultWorkspace, {
+        menu: reactExports.createElement(GraphwiseMenu),
+        // place Undo/redo/layout actions in top right corner.
+        actionsToolbar: { dock: 'ne' }
+    }));
 }
 /**
  * Mounts the Reactodia application into the given container and returns the React root.
@@ -31681,8 +31842,9 @@ function mountReactodia(container, 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.
+ * Re-points the diagram at a new SPARQL endpoint by recreating it with a fresh data provider.
+ * The canvas is reset to empty, matching the initial mount, since the data of another repository
+ * has nothing to do with the current graph.
  */
 async function updateReactodia(props) {
     if (!workspaceContext) {
@@ -31707,7 +31869,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:block;width:100%;height:75vh}graphwise-reactodia .reactodia-container{position:relative;width:100%;height:100%}graphwise-reactodia .reactodia-selection-action__link{display:none}";
 
 const GraphwiseReactodia = class {
     constructor(hostRef) {
@@ -31717,12 +31879,13 @@ const GraphwiseReactodia = class {
          */
         this.language = LanguageKey.EN;
     }
-    onProviderSettingsChange() {
+    onCurrentRepositoryChange() {
         this.renderGraph();
     }
-    onLanguageChange() {
+    onLanguageOrSettingsChange() {
         // The translations are evaluated by the workspace at construction, so the only way
         // to re-translate the UI is to re-create the graph.
+        // Setting changes should keep the current diagram despite possible
         this.renderGraph(true);
     }
     onThemeChange() {
@@ -31741,7 +31904,7 @@ const GraphwiseReactodia = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'f3247ee3254896e4e4987bd2fa0e3dfce1ce1d2a' }));
+        return (index$1.h(index$1.Host, { key: '6f1115b91eac308ef155978dfe1482f152c38b1b' }));
     }
     renderGraph(isReloading) {
         var _a;
@@ -31751,6 +31914,9 @@ const GraphwiseReactodia = class {
         if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.queryFunction)) {
             throw new Error('config.queryFunction is required');
         }
+        if (!this.providerSettings) {
+            throw new Error('providerSettings is required');
+        }
         if (!this.hostElement) {
             return;
         }
@@ -31770,9 +31936,9 @@ const GraphwiseReactodia = class {
     }
     get hostElement() { return index$1.getElement(this); }
     static get watchers() { return {
-        "currentRepository": ["onProviderSettingsChange"],
-        "providerSettings": ["onProviderSettingsChange"],
-        "language": ["onLanguageChange"],
+        "currentRepository": ["onCurrentRepositoryChange"],
+        "language": ["onLanguageOrSettingsChange"],
+        "providerSettings": ["onLanguageOrSettingsChange"],
         "theme": ["onThemeChange"]
     }; }
 };

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"],"config":[16],"language":[1],"providerSettings":[16,"provider-settings"],"theme":[1]},null,{"currentRepository":["onProviderSettingsChange"],"providerSettings":["onProviderSettingsChange"],"language":["onLanguageChange"],"theme":["onThemeChange"]}]]]], options);
+  return index.bootstrapLazy([["graphwise-reactodia.cjs",[[0,"graphwise-reactodia",{"currentRepository":[1,"current-repository"],"config":[16],"language":[1],"providerSettings":[16,"provider-settings"],"theme":[1]},null,{"currentRepository":["onCurrentRepositoryChange"],"language":["onLanguageOrSettingsChange"],"providerSettings":["onLanguageOrSettingsChange"],"theme":["onThemeChange"]}]]]], 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"],"config":[16],"language":[1],"providerSettings":[16,"provider-settings"],"theme":[1]},null,{"currentRepository":["onProviderSettingsChange"],"providerSettings":["onProviderSettingsChange"],"language":["onLanguageChange"],"theme":["onThemeChange"]}]]]], options);
+  return index.bootstrapLazy([["graphwise-reactodia.cjs",[[0,"graphwise-reactodia",{"currentRepository":[1,"current-repository"],"config":[16],"language":[1],"providerSettings":[16,"provider-settings"],"theme":[1]},null,{"currentRepository":["onCurrentRepositoryChange"],"language":["onLanguageOrSettingsChange"],"providerSettings":["onLanguageOrSettingsChange"],"theme":["onThemeChange"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -7,4 +7,7 @@ graphwise-reactodia .reactodia-container {
   position: relative;
   width: 100%;
   height: 100%;
+}
+graphwise-reactodia .reactodia-selection-action__link {
+  display: none;
 }

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

@@ -20,12 +20,13 @@ export class GraphwiseReactodia {
          */
         this.language = LanguageKey.EN;
     }
-    onProviderSettingsChange() {
+    onCurrentRepositoryChange() {
         this.renderGraph();
     }
-    onLanguageChange() {
+    onLanguageOrSettingsChange() {
         // The translations are evaluated by the workspace at construction, so the only way
         // to re-translate the UI is to re-create the graph.
+        // Setting changes should keep the current diagram despite possible
         this.renderGraph(true);
     }
     onThemeChange() {
@@ -44,7 +45,7 @@ export class GraphwiseReactodia {
         }
     }
     render() {
-        return (h(Host, { key: 'f3247ee3254896e4e4987bd2fa0e3dfce1ce1d2a' }));
+        return (h(Host, { key: '6f1115b91eac308ef155978dfe1482f152c38b1b' }));
     }
     renderGraph(isReloading) {
         var _a;
@@ -54,6 +55,9 @@ export class GraphwiseReactodia {
         if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.queryFunction)) {
             throw new Error('config.queryFunction is required');
         }
+        if (!this.providerSettings) {
+            throw new Error('providerSettings is required');
+        }
         if (!this.hostElement) {
             return;
         }
@@ -172,7 +176,7 @@ export class GraphwiseReactodia {
                 "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."
+                    "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. Required: the\nwrapper has no default preset and throws when it is missing. Changing it rebuilds the data\nprovider and reloads the graph with it, keeping the current diagram."
                 },
                 "getter": false,
                 "setter": false
@@ -202,13 +206,13 @@ export class GraphwiseReactodia {
     static get watchers() {
         return [{
                 "propName": "currentRepository",
-                "methodName": "onProviderSettingsChange"
-            }, {
-                "propName": "providerSettings",
-                "methodName": "onProviderSettingsChange"
+                "methodName": "onCurrentRepositoryChange"
             }, {
                 "propName": "language",
-                "methodName": "onLanguageChange"
+                "methodName": "onLanguageOrSettingsChange"
+            }, {
+                "propName": "providerSettings",
+                "methodName": "onLanguageOrSettingsChange"
             }, {
                 "propName": "theme",
                 "methodName": "onThemeChange"

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

@@ -1,6 +1,9 @@
+import enTranslation from "./en.reactodia.translation.json";
 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
+// English is provided by default from reactodia, so the English bundle holds only our own keys and overrides. If
+// A key is missing, reactodia defaults to its own translation.
 export const TRANSLATIONS = {
+    [LanguageKey.EN]: enTranslation,
     [LanguageKey.FR]: frTranslation
 };

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

@@ -0,0 +1,37 @@
+import { createElement, Fragment } from "react";
+import { ToolbarAction, ToolbarActionClearAll, ToolbarActionExport, ToolbarActionOpen, useTranslation, useWorkspace } from "@reactodia/workspace";
+import { service } from "../providers/service/service-inject";
+import { DiagramService } from "../services/diagram/diagram.service";
+import { DiagramFileService } from "../services/diagram-file/diagram-file.service";
+/**
+ * The workspace main menu: Reactodia's default actions, followed by the diagram download and upload.
+ *
+ * Passing a `menu` to the `DefaultWorkspace` replaces its default actions, so they are listed here again.
+ * Rendered inside the workspace, so the actions can use the workspace hooks.
+ */
+export function GraphwiseMenu() {
+    const { model } = useWorkspace();
+    const t = useTranslation();
+    const diagramFileService = service(DiagramFileService);
+    const diagramService = service(DiagramService);
+    const downloadDiagram = () => {
+        const timestamp = new Date().toISOString().replace(/[-:]|\.\d+Z$/g, '');
+        diagramFileService.download(model.exportLayout(), `diagram-${timestamp}${DiagramFileService.FILE_EXTENSION}`);
+    };
+    const uploadDiagram = async (file) => {
+        try {
+            const diagram = await diagramFileService.read(file);
+            await diagramService.importDiagram(model, model.dataProvider, diagram);
+        }
+        catch (error) {
+            console.error('Failed to upload the diagram', error);
+        }
+    };
+    return createElement(Fragment, null, createElement(ToolbarActionClearAll, {}), createElement(ToolbarActionExport, { kind: 'exportRaster' }), createElement(ToolbarActionExport, { kind: 'exportSvg' }), createElement(ToolbarActionExport, { kind: 'print' }), createElement(ToolbarAction, 
+    // The same icon as ToolbarActionSave. We dont use that action, since it disables saving on refresh
+    { className: 'reactodia-toolbar-action__save', title: t.text('graphwise_toolbar_action.download_diagram.title'), onSelect: downloadDiagram }, t.text('graphwise_toolbar_action.download_diagram.label')), createElement(ToolbarActionOpen, {
+        title: t.text('graphwise_toolbar_action.upload_diagram.title'),
+        fileAccept: DiagramFileService.FILE_EXTENSION,
+        onSelect: (file) => void uploadDiagram(file)
+    }, t.text('graphwise_toolbar_action.upload_diagram.label')));
+}

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

@@ -9,8 +9,9 @@ import { DiagramStorageService } from "./services/diagram-storage/diagram-storag
 import { EventService } from "./services/event/event.service";
 import { SubscriptionList } from "./models/subscription-list";
 import { resolveTypeStyle } from "./styles/type-style.resolver";
+import { GraphwiseMenu } from "./menu/graphwise-menu";
 /**
- * Reactodia ships English as its built-in default bundle, so English needs no override.
+ * Reactodia ships English as its built-in default bundle, so the English bundle only adds our own keys.
  * 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
@@ -34,8 +35,7 @@ let workspaceContext = null;
 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.
+ * query preset. The host owns the query configuration and always passes it in via props.
  */
 function createDataProvider(props) {
     const { currentRepository, config, providerSettings } = props;
@@ -128,10 +128,12 @@ function ReactodiaApp(props) {
         const dataProvider = createDataProvider(props);
         const isReload = props.isReload;
         const savedDiagram = service(DiagramStorageService).load();
+        const diagramService = service(DiagramService);
         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, validateLinks: true });
+            // Reload the diagram that is currently on the canvas. This may happen when the host changes the provider
+            // settings, or 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 diagramService.importDiagram(model, dataProvider, currentDiagram, signal);
         }
         else if ((_a = config.seedIris) === null || _a === void 0 ? void 0 : _a.length) {
             await seedIrisToCanvas(context, dataProvider, config.seedIris, signal);
@@ -142,7 +144,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, validateLinks: true });
+            await diagramService.importDiagram(model, dataProvider, savedDiagram, signal);
         }
     }, [language]);
     /**
@@ -161,7 +163,11 @@ function ReactodiaApp(props) {
         defaultLanguage: language,
         translations: translationsForLanguage(language),
         typeStyleResolver: resolveTypeStyle
-    }, createElement(DefaultWorkspace, {}));
+    }, createElement(DefaultWorkspace, {
+        menu: createElement(GraphwiseMenu),
+        // place Undo/redo/layout actions in top right corner.
+        actionsToolbar: { dock: 'ne' }
+    }));
 }
 /**
  * Mounts the Reactodia application into the given container and returns the React root.
@@ -172,8 +178,9 @@ export function mountReactodia(container, 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.
+ * Re-points the diagram at a new SPARQL endpoint by recreating it with a fresh data provider.
+ * The canvas is reset to empty, matching the initial mount, since the data of another repository
+ * has nothing to do with the current graph.
  */
 export async function updateReactodia(props) {
     if (!workspaceContext) {

package/dist/collection/components/graphwise-reactodia/services/diagram/diagram.service.js

@@ -14,6 +14,20 @@ import { Service } from "../../providers/service/service";
  * Service for diagram related operations and subscriptions
  */
 let DiagramService = DiagramService_1 = class DiagramService {
+    /**
+     * Replaces the diagram content with the given serialization. Element data is requested from the data provider and
+     * the links between the imported elements are validated against it.
+     *
+     * @param model The diagram model to import into.
+     * @param dataProvider The data provider to bind to the diagram.
+     * @param diagram The serialization to import. When `undefined`, the diagram is cleared.
+     * @param signal Optional signal to abort the import.
+     */
+    importDiagram(model, dataProvider, diagram, signal) {
+        // selection is not cleared on import, so we clear it manually to avoid painting the previous selection
+        model.setSelection([]);
+        return model.importLayout({ dataProvider, diagram, signal, validateLinks: true });
+    }
     /**
      * Subscribes to diagram changes. On every debounced change the current layout is
      * exported and passed to the callback.