Experimental process namespace support

README.md

@@ -23,8 +23,12 @@ You can also build the files yourself and deploy them to any web host:
 You can use some query parameters to set initial state to the Editor.
 
 * `server`: Set a openEO back-end to connect to by default, e.g. `https://earthengine.openeo.org`
-* `discover`: If you want to skip authentication and just show the capabiltiies of the back-end, simply set to `1`
-* `process`: Loads a process from a URL and shows it in the Model Builder.
+* `discover`: If you want to skip authentication and just show the capabiltiies of the back-end, simply set to `1`.
+* `process`: Loads a process from a URL and shows it in the Model Builder. You can also pass a single process name with an optional namespace to the parameter (format: `process@namespace`) to simply add a single process node for that process by default.
+* `namespaces`: Loads a additional process namespaces. Multiple namespaces can be separated by a comma (e.g. `vector,sar`).
+* `edit-node` Opens the parameter editor for a single process node on start-up. Must have the `process` parameter being set, otherwise will be ignored. You can set two types of values:
+  * `1`: If only a single node is being added, opens this node without explicitly naming it.
+  * Otherwise, the value must correspond to the node identifier without `#` at the beginning.
 
 Example: <https://editor.openeo.org?server=https://earthengine.openeo.org&discover=1&process=https://raw.githubusercontent.com/Open-EO/openeo-earthengine-driver/master/tests/data/sample-processgraph.json>
 

config.js

@@ -34,6 +34,9 @@ export default {
 		'wmts'
 	],
 
+	// Additional process namespaces to load by default
+	processNamespaces: [],
+
 	// Key is the OIDC provider id, value is the client ID
 	oidcClientIds: {},
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openeo/web-editor",
-  "version": "0.8.0-rc.8",
+  "version": "0.9.0-beta.1",
   "apiVersions": [
     "1.0.0-rc.2",
     "1.0.0",
@@ -41,10 +41,10 @@
     "build": "npm run build:epsg && npx vue-cli-service build --report"
   },
   "dependencies": {
-    "@openeo/js-client": "^2.0.1",
-    "@openeo/js-commons": "^1.3.0",
-    "@openeo/js-processgraphs": "^1.2.0",
-    "@openeo/vue-components": "^2.4.1",
+    "@openeo/js-client": "^2.1.0",
+    "@openeo/js-commons": "^1.4.0",
+    "@openeo/js-processgraphs": "^1.3.0",
+    "@openeo/vue-components": "^2.5.0",
     "ajv": "^6.12.6",
     "axios": "^0.21.1",
     "codemirror": "^5.58.2",

src/Page.vue

@@ -20,8 +20,6 @@ import EventBusMixin from './components/EventBusMixin.vue';
 import Utils from './utils';
 import ConnectForm from './components/ConnectForm.vue';
 import axios from 'axios';
-import { UserProcess } from '@openeo/js-client';
-import { ProcessGraph } from '@openeo/js-processgraphs';
 
 // Making axios available globally for the OpenEO JS client
 window.axios = axios;
@@ -57,6 +55,10 @@ export default {
 		};
 	},
 	created() {
+		this.addProcessNamespacesToRequest(Utils.param('namespaces'));
+		this.setInitialProcess(Utils.param('process'));
+		this.setInitialNode(Utils.param('edit-node'));
+
 		if (Utils.param('discover')) {
 			this.skipLogin = true;
 		}
@@ -100,12 +102,11 @@ export default {
 		...Utils.mapState(['activeRequests']),
 		...Utils.mapGetters(['isDiscovered']),
 		...Utils.mapState('editor', ['hightestModalZIndex']),
-		...Utils.mapGetters('userProcesses', {getProcessById: 'getAllById'})
 	},
 	methods: {
-		...Utils.mapActions(['describeAccount', 'describeCollection']),
-		...Utils.mapMutations(['startActiveRequest', 'endActiveRequest']),
-		...Utils.mapActions('userProcesses', {readUserProcess: 'read'}),
+		...Utils.mapActions(['describeAccount', 'describeCollection', 'loadProcess']),
+		...Utils.mapMutations(['startActiveRequest', 'endActiveRequest', 'addProcessNamespacesToRequest']),
+		...Utils.mapMutations('editor', ['setInitialProcess', 'setInitialNode']),
 		setTitle(subtitle) {
 			var title = `${this.$config.serviceName} ${this.$config.appName}`;
 			if (subtitle) {
@@ -144,26 +145,9 @@ export default {
 			}
 		},
 		async showProcess(process) {
-			// Convert process id into process
-			if (typeof process === 'string') {
-				process = this.getProcessById(process);
-			}
-
-			if (!process.native) {
-				try {
-					let udp = await this.readUserProcess({data: process});
-					process = udp.toJSON();
-				} catch(error) {
-					Utils.exception(this, error, "Load Process Error: " + process.id);
-					return;
-				}
-			}
-
-			if (process instanceof ProcessGraph || process instanceof UserProcess) {
-				process = process.toJSON();
-			}
-
-			this.showModal('ProcessModal', {process});
+			this.showModal('ProcessModal', {
+				process: await this.loadProcess(process)
+			});
 		},
 		showProcessParameter(parameter, udp = true) {
 			this.showModal('ProcessParameterModal', {

src/components/CustomProcessPanel.vue

@@ -41,13 +41,13 @@ export default {
 	},
 	computed: {
 		...Utils.mapState('editor', ['process']),
+		...Utils.mapGetters(['processes']),
 		...Utils.mapGetters('editor', ['hasProcess']),
 	},
 	mounted() {
 		this.listen('replaceProcess', this.replaceProcess);
 	},
 	methods: {
-		...Utils.mapGetters('userProcesses', {getProcessById: 'getAllById'}),
 		showInEditor(process) {
 			this.refreshElement(process, updatedProcess => this.emit('editProcess', updatedProcess));
 		},
@@ -77,7 +77,7 @@ export default {
 				});
 				fields.push(this.getIdField(this.process.id));
 			}
-			else if (this.process.id && !!this.getProcessById(this.process.id)) {
+			else if (this.processes.has(this.process.id, 'user')) {
 				fields.push({
 					label: 'Warning!',
 					description: "A process with the given name exists! If you click 'Save' below, you confirm that you want to override the existing process. If you don't want to override the existing process, please choose a different name below.",

src/components/DiscoveryToolbar.vue

@@ -15,11 +15,12 @@
 				</template>
 			</Collections>
 
-			<Processes class="category" :processes="processes" :searchTerm="searchTerm" :offerDetails="false" :collapsed="collapsed">
+			<Processes class="category" :processes="allProcesses" :searchTerm="searchTerm" :offerDetails="false" :collapsed="collapsed">
 				<template #summary="{ item }">
 					<div class="discovery-entity" draggable="true" @dragstart="onDrag($event, 'process', item)">
 						<div class="discovery-info" @click="showProcess(item)">
-							<i v-if="!item.native" class="custom-process fas fa-xs fa-sitemap" title="Custom Process"></i>
+							<i v-if="item.namespace === 'user'" class="custom-process fas fa-xs fa-sitemap" title="Custom Process"></i>
+							<i v-else-if="item.namespace !== 'backend'" class="custom-process fas fa-xs fa-tag" :title="`Process from namespace '${item.namespace}'`"></i>
 							<strong :title="item.id">{{ item.id }}</strong>
 							<small v-if="item.summary" :title="item.summary">{{ item.summary }}</small>
 						</div>
@@ -95,25 +96,23 @@ export default {
 		};
 	},
 	computed: {
-		...Utils.mapState(['predefinedProcesses', 'collections', 'udfRuntimes']),
+		...Utils.mapState(['collections', 'udfRuntimes']),
 		...Utils.mapState('editor', ['discoverySearchTerm']),
-		...Utils.mapState('userProcesses', ['userProcesses']),
-		...Utils.mapGetters(['supports', 'collectionDefaults', 'fileFormats']),
-		...Utils.mapGetters('userProcesses', {getProcessById: 'getAllById'}),
+		...Utils.mapGetters(['supports', 'collectionDefaults', 'fileFormats', 'processes']),
 		supportsLoadCollection() {
-			return !!this.getProcessById('load_collection');
+			return this.processes.has('load_collection');
 		},
 		supportsRunUdf() {
-			return !!this.getProcessById('run_udf');
+			return this.processes.has('run_udf');
 		},
 		supportsSaveResult() {
-			return !!this.getProcessById('save_result');
+			return this.processes.has('save_result');
 		},
 		hasUdfRuntimes() {
 			return Utils.size(this.udfRuntimes);
 		},
-		processes() {
-			return this.predefinedProcesses.concat(this.userProcesses);
+		allProcesses() {
+			return this.processes.all();
 		},
 		searchTerm: {
 			get() {
@@ -187,6 +186,7 @@ export default {
 				case 'process':
 					return {
 						process_id: data.id,
+						namespace: data.namespace,
 						arguments: {}
 					};
 				case 'udf':

src/components/Editor.vue

@@ -72,11 +72,8 @@ export default {
 	mounted() {
 		this.updateTab();
 	},
-	computed: {
-		...Utils.mapGetters('userProcesses', {getProcessById: 'getAllById'})
-	},
 	methods: {
-		...Utils.mapActions('userProcesses', {readUserProcess: 'read'}),
+		...Utils.mapActions(['loadProcess']),
 		showModel() {
 			this.error = null;
 			this.modelValue = this.value;
@@ -111,12 +108,7 @@ export default {
 		},
 		async insertProcess(node) {
 			try {
-				// Fully load or update custom process
-				let process = this.getProcessById(node.process_id);
-				if (process != null && !process.native) {
-					await this.readUserProcess({data: process});
-				}
-				// Add process to editor
+				await this.loadProcess({id: node.process_id, namespace: node.namespace});
 				this.activeEditor().insertProcess(node);
 			} catch(error) {
 				Utils.exception(this, error);

src/components/IDE.vue

@@ -94,15 +94,7 @@ export default {
 			}
 		}
 	},
-	async created() {
-		try {
-			await this.loadInitialProcess();
-		} catch (error) {
-			Utils.exception(this, error, "Loading process failed");
-		}
-
-	},
-	mounted() {
+	async mounted() {
 		this.listen('showDataForm', this.showDataForm);
 		this.listen('editProcess', this.editProcess);
 
@@ -123,7 +115,6 @@ export default {
 	},
 	methods: {
 		...Utils.mapActions(['describeAccount']),
-		...Utils.mapActions('editor', ['loadInitialProcess']),
 		...Utils.mapMutations('editor', ['setContext', 'setProcess']),
 
 		resized(event) {

src/components/TextEditor.vue

@@ -72,7 +72,7 @@ export default {
 		}
 	},
 	computed: {
-		...Utils.mapGetters(['processRegistry']),
+		...Utils.mapGetters(['processes']),
 		languageString() {
 			return typeof this.language === 'string' ? this.language.toLowerCase() : '';
 		},
@@ -184,7 +184,7 @@ export default {
 					if (value) {
 						var process = JSON.parse(value);
 						if (Utils.size(process) > 0) {
-							var pg = new ProcessGraph(process, this.processRegistry);
+							var pg = new ProcessGraph(process, this.processes);
 							pg.allowEmpty();
 							pg.parse();
 							return this.emit(process);

src/components/VisualEditor.vue

@@ -30,14 +30,14 @@
 					ref="blocks"
 					:editable="editable"
 					:id="id"
-					:processes="processRegistry"
+					:processes="processes"
 					:collections="collections"
 					:parent="parent"
 					:parentSchema="parentSchema"
 					:value="value"
 					@input="commit"
 					@error="errorHandler"
-					@showProcess="id => emit('showProcess', id)"
+					@showProcess="(id, namespace) => emit('showProcess', {id, namespace})"
 					@showCollection="id => emit('showCollection', id)"
 					@showParameter="param => emit('showProcessParameter', param)"
 					@editParameter="editParameter"
@@ -57,6 +57,7 @@ import Utils from '../utils.js';
 import DiscoveryToolbar from './DiscoveryToolbar.vue';
 import EventBusMixin from './EventBusMixin.vue';
 import FullscreenButton from './FullscreenButton.vue';
+import { ProcessParameter } from '@openeo/js-commons';
 
 export default {
 	name: 'VisualEditor',
@@ -95,8 +96,8 @@ export default {
 	},
 	computed: {
 		...Utils.mapState(['collections']),
-		...Utils.mapGetters(['processRegistry']),
-		...Utils.mapGetters('userProcesses', ['supportsMath', 'isMathProcess'])
+		...Utils.mapGetters(['supportsMath', 'isMathProcess', 'processes']),
+		...Utils.mapState('editor', ['initialNode']),
 	},
 	data() {
 		return {
@@ -109,11 +110,29 @@ export default {
 		};
 	},
 	watch: {
-		value(value) {
-			this.isMath = this.isMathProcess(value);
+		value: {
+			immediate: true,
+			handler(value) {
+				this.isMath = this.isMathProcess(value);
+
+				if (this.initialNode && Utils.isObject(value) && Utils.isObject(value.process_graph)) {
+					try {
+						let node = this.initialNode;
+						if (node == "1" && Utils.size(value.process_graph)) {
+							node = Object.keys(value.process_graph)[0];
+						}
+						this.openArgumentEditorForNode(node);
+					} catch (error) {
+						Utils.exception(this, error);
+					} finally {
+						this.setInitialNode(null);
+					}
+				}
+			}
 		}
 	},
 	methods: {
+		...Utils.mapMutations('editor', ['setInitialNode']),
 		commit(value) {
 			// Fix #115: Return the default value/null if no nodes are given
 			if (typeof this.defaultValue !== 'undefined' && Utils.isObject(value) && Utils.size(value.process_graph) === 0) {
@@ -462,6 +481,22 @@ export default {
 			};
 			this.emit('showModal', 'ExpressionModal', props, events);
 		},
+		openArgumentEditorForNode(nodeId) {
+			let process = Utils.deepClone(this.value);
+			let node = process.process_graph[nodeId];
+			let processSpec = this.processes.get(node.process_id, node.namespace);
+			this.openArgumentEditor(
+				processSpec.parameters.map(p => new ProcessParameter(p)).filter(p => p.isEditable()),
+				node.arguments,
+				processSpec.id,
+				true,
+				null,
+				data => {
+					Object.assign(node, {arguments: data});
+					this.commit(process);
+				}
+			);
+		},
 		openArgumentEditor(parameters, data, title = "Edit", editable = true, selectParameterName = null, saveCallback = null, parent = null) {
 			let props = {
 				title,
@@ -492,7 +527,11 @@ export default {
 		insertProcess(node, x = null, y = null) {
 			try {
 				var pos = this.$refs.blocks.getPositionForPageXY(x, y);
-				this.$refs.blocks.addProcess(node.process_id, node.arguments, pos);
+				let namespace = node.namespace;
+				if (namespace === 'backend' || namespace === 'user') {
+					namespace = null;
+				}
+				this.$refs.blocks.addProcess(node.process_id, node.arguments, pos, namespace);
 			} catch(error) {
 				Utils.exception(this, error);
 			}