From 2f369b1bdfeb592faab9e2fe27ca27d90ba2b325 Mon Sep 17 00:00:00 2001
From: Matthias Mohr <m.mohr@uni-muenster.de>
Date: Tue, 10 Aug 2021 15:58:03 +0200
Subject: [PATCH 1/3] Namespace support + support to open more types of
 processes (and parameters) by default #178

---
 README.md                                 |   8 +-
 config.js                                 |   3 +
 src/Page.vue                              |  36 ++-----
 src/components/DiscoveryToolbar.vue       |  22 ++---
 src/components/Editor.vue                 |  12 +--
 src/components/IDE.vue                    |  11 +--
 src/components/TextEditor.vue             |   4 +-
 src/components/VisualEditor.vue           |  53 +++++++++--
 src/components/modals/ExpressionModal.vue |  21 ++---
 src/components/modals/ProcessModal.vue    |   3 +-
 src/events.md                             |   2 +-
 src/store/editor.js                       |  47 +++++++--
 src/store/files.js                        |   3 -
 src/store/index.js                        | 110 ++++++++++++++++++----
 src/store/jobs.js                         |   2 +
 src/store/userProcesses.js                |  59 +-----------
 16 files changed, 230 insertions(+), 166 deletions(-)

diff --git a/README.md b/README.md
index 1ce6f74d3..728134689 100644
--- a/README.md
+++ b/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>
 
diff --git a/config.js b/config.js
index d3fa20bbc..e96103f7b 100644
--- a/config.js
+++ b/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: {},
 
diff --git a/src/Page.vue b/src/Page.vue
index 9f92441db..da7b497f6 100644
--- a/src/Page.vue
+++ b/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', {
diff --git a/src/components/DiscoveryToolbar.vue b/src/components/DiscoveryToolbar.vue
index 5f41ef894..4e5ffbba9 100644
--- a/src/components/DiscoveryToolbar.vue
+++ b/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>
@@ -91,24 +92,22 @@ export default {
 		};
 	},
 	computed: {
-		...Utils.mapState(['predefinedProcesses', 'collections', 'udfRuntimes']),
-		...Utils.mapState('userProcesses', ['userProcesses']),
-		...Utils.mapGetters(['supports', 'collectionDefaults', 'fileFormats']),
-		...Utils.mapGetters('userProcesses', {getProcessById: 'getAllById'}),
+		...Utils.mapState(['collections', 'udfRuntimes']),
+		...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();
 		}
 	},
 	watch: {
@@ -160,6 +159,7 @@ export default {
 				case 'process':
 					return {
 						process_id: data.id,
+						namespace: data.namespace,
 						arguments: {}
 					};
 				case 'udf':
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 258dd10ed..36c129d8f 100644
--- a/src/components/Editor.vue
+++ b/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);
diff --git a/src/components/IDE.vue b/src/components/IDE.vue
index 68e167d51..c7dba2d99 100644
--- a/src/components/IDE.vue
+++ b/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) {
diff --git a/src/components/TextEditor.vue b/src/components/TextEditor.vue
index 329271e01..008c4ff1b 100644
--- a/src/components/TextEditor.vue
+++ b/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);
diff --git a/src/components/VisualEditor.vue b/src/components/VisualEditor.vue
index d375b117c..e6f63dd8b 100644
--- a/src/components/VisualEditor.vue
+++ b/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);
 			}
diff --git a/src/components/modals/ExpressionModal.vue b/src/components/modals/ExpressionModal.vue
index af60c2076..60a9a80dd 100644
--- a/src/components/modals/ExpressionModal.vue
+++ b/src/components/modals/ExpressionModal.vue
@@ -10,7 +10,7 @@
 					</p>
 					<p>Supported <strong>mathematical functions</strong>:
 						<template v-if="mathProcesses.length">
-							<br /><kbd v-for="func in mathProcesses" :key="func.id" :title="func.summary" @click="emit('showProcess', func.id)" class="click" draggable="true" @dragstart="onDrag($event, 'functions', func)">{{ func.id }}</kbd>
+							<br /><kbd v-for="func in mathProcesses" :key="func.id" :title="func.summary" @click="emit('showProcess', func.id, func.namespace)" class="click" draggable="true" @dragstart="onDrag($event, 'functions', func)">{{ func.id }}</kbd>
 						</template>
 						<template v-else>None</template>
 					</p>
@@ -96,14 +96,13 @@ export default {
 			}
 	},
 	computed: {
-		...Utils.mapState('userProcesses', ['operatorMapping', 'arrayOperatorMapping']),
-		...Utils.mapGetters(['processRegistry']),
-		...Utils.mapGetters('userProcesses', ['mathProcesses', 'isMathProcess', 'reverseOperatorMapping']),
+		...Utils.mapState(['operatorMapping', 'arrayOperatorMapping']),
+		...Utils.mapGetters(['processes', 'mathProcesses', 'isMathProcess', 'reverseOperatorMapping']),
 		operators() {
 			var ops = [];
 			for(var op in this.operatorMapping) {
 				let processId = this.operatorMapping[op];
-				let title = this.processRegistry.get(processId).summary;
+				let title = this.processes.get(processId).summary;
 				ops.push({op, processId, title});
 			}
 			return ops;
@@ -112,7 +111,7 @@ export default {
 			let resultNodes = [];
 			for(var id in this.processGraph) {
 				var node = this.processGraph[id];
-				var p = this.processRegistry.get(node.process_id);
+				var p = this.processes.get(node.process_id);
 				if (Process.isMathProcess(p)) {
 					resultNodes.push(id);
 				}
@@ -126,7 +125,7 @@ export default {
 			}
 
 			// array_element must be supported
-			let process = this.processRegistry.get('array_element');
+			let process = this.processes.get('array_element');
 			if (!process) {
 				return false;
 			}
@@ -164,7 +163,7 @@ export default {
 				return;
 			}
 
-			var pg = new ProcessGraph(process, this.processRegistry);
+			var pg = new ProcessGraph(process, this.processes);
 			pg.parse();
 			let formula = this.nodeToFormula(pg.getResultNode());
 			if (formula) {
@@ -193,7 +192,7 @@ export default {
 			}
 
 			let operator = this.reverseOperatorMapping[node.process_id];
-			let process = this.processRegistry.get(node.process_id);
+			let process = this.processes.get(node.process_id);
 			let isArrayData = (typeof this.arrayOperatorMapping[node.process_id] !== 'undefined');
 
 			let convertValue = value => {
@@ -380,7 +379,7 @@ export default {
 		},
 		addOperatorProcess(operator, left, right) {
 			if (typeof this.operatorMapping[operator] !== 'undefined') {
-				let process = this.processRegistry.get(this.operatorMapping[operator]);
+				let process = this.processes.get(this.operatorMapping[operator]);
 				let args = {};
 				if (!process || !Array.isArray(process.parameters) || process.parameters.length < 2) {
 					throw new Error("Process for operator " + operator + " must have at least two parameters");
@@ -395,7 +394,7 @@ export default {
 		},
 		addProcess(process, args) {
 			if (typeof process === 'string') {
-				process = this.processRegistry.get(process);
+				process = this.processes.get(process);
 			}
 
 			if (!process) {
diff --git a/src/components/modals/ProcessModal.vue b/src/components/modals/ProcessModal.vue
index 29d0a3a8c..67e86c2ad 100644
--- a/src/components/modals/ProcessModal.vue
+++ b/src/components/modals/ProcessModal.vue
@@ -16,6 +16,7 @@
 import Editor from '../Editor.vue';
 import Modal from './Modal.vue';
 import Process from '@openeo/vue-components/components/Process.vue';
+import Utils from '../../utils';
 
 export default {
 	name: 'ProcessModal',
@@ -31,7 +32,7 @@ export default {
 	},
 	computed: {
 		minWidth() {
-			if (this.process !== null && this.process.process_graph) {
+			if (Utils.isObject(this.process) && this.process.process_graph) {
 				return "85%";
 			}
 			else {
diff --git a/src/events.md b/src/events.md
index 999df1844..0f5114670 100644
--- a/src/events.md
+++ b/src/events.md
@@ -20,7 +20,7 @@ Showa information about the web editor in a modal.
 ### showCollection(id)
 Shows collection information in a modal.
 
-### showProcess(id)
+### showProcess(process)
 Shows process information in a modal.
 
 ## Viewer & Web Services
diff --git a/src/store/editor.js b/src/store/editor.js
index b329f68b8..f821f837b 100644
--- a/src/store/editor.js
+++ b/src/store/editor.js
@@ -4,20 +4,21 @@ import { ProcessGraph } from '@openeo/js-processgraphs';
 
 const serverStorage = "serverUrls";
 
-const getDefaultState = importFromQuery => {
+const getDefaultState = () => {
 	return {
 		storedServers: JSON.parse(localStorage.getItem(serverStorage) || "[]"),
 		context: null,
 		process: null,
 		hightestModalZIndex: 1000,
 		epsgCodes: [],
-		initialProcessUrl: importFromQuery ? Utils.param('process') : null
+		initialProcess: null,
+		initialNode: null
 	};
 };
 
 export default {
 	namespaced: true,
-	state: getDefaultState(true),
+	state: getDefaultState(),
 	actions: {
 		async loadEpsgCodes(cx) {
 			if (cx.state.epsgCodes.length === 0) {
@@ -26,18 +27,44 @@ export default {
 			}
 		},
 		async loadInitialProcess(cx) {
-			if(!Utils.isUrl(cx.state.initialProcessUrl)) {
-				return;
+			if (cx.state.process) {
+				return; // Process already loaded (usually during a later login)
 			}
-			let response = await axios(cx.state.initialProcessUrl);
-			if (Utils.isObject(response.data)) {
-				var pg = new ProcessGraph(response.data);
-				pg.parse();
-				cx.commit('setProcess', response.data);
+			if (Utils.isUrl(cx.state.initialProcess)) {
+				let response = await axios(cx.state.initialProcess);
+				if (Utils.isObject(response.data)) {
+					var pg = new ProcessGraph(response.data);
+					pg.parse();
+					cx.commit('setProcess', response.data);
+				}
+			}
+			else if (typeof cx.state.initialProcess === 'string' && cx.state.initialProcess.length > 0) {
+				let [id, namespace] = cx.state.initialProcess.split('@');
+				try {
+					await cx.dispatch('loadProcess', {id, namespace}, {root: true});
+				} catch (error) {
+					console.warn(error);
+				}
+				cx.commit('setProcess', {
+					process_graph: {
+						[id]: {
+							process_id: id,
+							namespace,
+							arguments: {},
+							result: true
+						}
+					}
+				});
 			}
 		}
 	},
 	mutations: {
+		setInitialProcess(state, process) {
+			state.initialProcess = process;
+		},
+		setInitialNode(state, node) {
+			state.initialNode = node;
+		},
 		openModal(state) {
 			state.hightestModalZIndex = state.hightestModalZIndex + 1;
 		},
diff --git a/src/store/files.js b/src/store/files.js
index e695de2c4..983d48752 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -11,13 +11,10 @@ export default storeFactory({
 	primaryKey: 'path',
 	customizations: {
 		getters: {
-			// ToDo
 		},
 		actions: {
-			// ToDo
 		},
 		mutations: {
-			// ToDo
 		}
 	}
 });
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index 433b2de45..d78afa776 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,9 +1,11 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 
-import { OpenEO, FileTypes } from '@openeo/js-client';
-import { ProcessRegistry } from '@openeo/js-processgraphs';
+import { OpenEO, FileTypes, Formula } from '@openeo/js-client';
+import { ProcessRegistry } from '@openeo/js-commons';
 import Utils from '../utils.js';
+import Process from '../process.js';
+import Config from '../../config';
 // Sub-modules
 import editor from './editor';
 import files from './files';
@@ -26,8 +28,14 @@ const getDefaultState = () => {
 		fileFormats: {},
 		serviceTypes: {},
 		udfRuntimes: {},
-		predefinedProcesses: [],
-		collections: []
+		processesUpdated: 0,
+		collections: [],
+		processNamespaces: Config.processNamespaces || [],
+		operatorMapping: Formula.operatorMapping,
+		arrayOperatorMapping: {
+			'product': '*',
+			'sum': '+'
+		}
 	};
 };
 
@@ -64,11 +72,6 @@ export default new Vuex.Store({
 		supportsBillingPlans: (state) => state.connection !== null && state.connection.capabilities().currency() !== null && state.connection.capabilities().listPlans().length > 0,
 		apiVersion: (state) => state.connection !== null ? state.connection.capabilities().apiVersion() : null,
 		fileFormats: (state) => state.fileFormats instanceof FileTypes ? state.fileFormats.toJSON() : {input: {}, output: {}},
-		processRegistry: (state) => {
-			var registry = new ProcessRegistry(state.predefinedProcesses);
-			registry.addAll(state.userProcesses.userProcesses);
-			return registry;
-		},
 		collectionDefaults: (state) => (id) => {
 			var collection = state.collections.find(c => c.id === id);
 			if (!Utils.isObject(collection)) {
@@ -94,6 +97,42 @@ export default new Vuex.Store({
 			var bands = null;
 			return {id, spatial_extent, temporal_extent, bands};
 		},
+		processes: (state) => state.processesUpdated && state.connection !== null ? state.connection.processes : new ProcessRegistry(),
+		reverseOperatorMapping: (state) => {
+			let mapping = {};
+			for(var op in state.operatorMapping) {
+				mapping[state.operatorMapping[op]] = op;
+			}
+			return Object.assign(mapping, state.arrayOperatorMapping);
+		},
+		supportsMath: (state, getters) => {
+			for(let i in state.operatorMapping) {
+				let processId = state.operatorMapping[i];
+				if (!getters.processes.has(processId)) {
+					return false;
+				}
+			}
+			return true;
+		},
+		isMathProcess: (state, getters) => (process) => {
+			if (!Utils.isObject(process) || Utils.size(process.process_graph) === 0) {
+				return null;
+			}
+			let unsupportedFuncs = Object.values(process.process_graph).find(node => !getters.readableMathProcesses.includes(node.process_id));
+			if (unsupportedFuncs !== undefined) {
+				return false;
+			}
+			return true;
+		},
+		mathProcesses: (state, getters) => {
+			return getters.processes.all().filter(Process.isMathProcess);
+		},
+		readableMathProcesses: (state, getters) => {
+			return getters.mathProcesses.map(p => p.id)
+					.concat(Object.values(state.operatorMapping))
+					.concat(Object.keys(state.arrayOperatorMapping))
+					.concat(['array_element']);
+		}
 	},
 	actions: {
 		async connect(cx, url) {
@@ -102,7 +141,7 @@ export default new Vuex.Store({
 			// Connect and request capabilities
 			var connection = null;
 			try {
-				connection = await OpenEO.connect(url);
+				connection = await OpenEO.connect(url, {addNamespaceToProcess: true});
 			} catch (error) {
 				if(error.message == 'Network Error' || error.name == 'NetworkError') {
 					error = new Error("Server is not available.");
@@ -121,6 +160,7 @@ export default new Vuex.Store({
 			}
 
 			connection.on('authProviderChanged', provider => cx.commit('authenticated', provider !== null));
+			connection.on('processesChanged', () => cx.commit('updateProcesses'));
 
 			// Only commit the connection change after requesting the auth providers
 			// as this indicates that the connection procedure has finished.
@@ -146,13 +186,20 @@ export default new Vuex.Store({
 			// Request processes
 			if (capabilities.hasFeature('listProcesses')) {
 				promises.push(cx.state.connection.listProcesses()
-					.then(response => cx.commit('predefinedProcesses', response))
 					.catch(error => cx.commit('addDiscoveryError', error)));
 			}
 			else {
 				cx.commit('addDiscoveryError', new Error("Pre-defined processes not supported by the back-end."));
 			}
 
+			// Request processes from namespaces
+			if (cx.state.processNamespaces.length > 0) {
+				for(let namespace of cx.state.processNamespaces) {
+					promises.push(cx.state.connection.listProcesses(namespace)
+						.catch(error => cx.commit('addDiscoveryError', error)));
+				}
+			}
+
 			// Request custom processes
 			if (capabilities.hasFeature('listUserProcesses') && cx.state.connection.isAuthenticated()) {
 				promises.push(cx.dispatch('userProcesses/list')
@@ -187,6 +234,13 @@ export default new Vuex.Store({
 
 			await Promise.all(promises);
 
+			// Request initial process
+			try {
+				await cx.dispatch('editor/loadInitialProcess');
+			} catch (error) {
+				cx.commit('addDiscoveryError', error)
+			}
+
 			cx.commit('discoveryCompleted');
 		},
 
@@ -210,6 +264,19 @@ export default new Vuex.Store({
 			return collection;
 		},
 
+		async loadProcess(cx, {id, namespace}) {
+			process = cx.getters.processes.get(id, namespace);
+			if (process.namespace !== 'backend') {
+				if (process.namespace === 'user') {
+					await cx.dispatch('userProcesses/read', {data: process});
+				}
+				else if (process.namespace && namespace !== 'backend') {
+					await cx.state.connection.describeProcess(id, process.namespace);
+				}
+			}
+			return cx.getters.processes.get(id, namespace);
+		},
+
 		async logout(cx, disconnect = false) {
 			if (cx.state.isAuthenticated) {
 				// Logout (mostly for OIDC)
@@ -263,11 +330,22 @@ export default new Vuex.Store({
 		udfRuntimes(state, udfRuntimes) {
 			state.udfRuntimes = udfRuntimes;
 		},
-		predefinedProcesses(state, data) {
-			state.predefinedProcesses = data.processes
-				.map(p => Object.assign(p, {native: true}))
-				.filter(p => (typeof p.id === 'string'))
-				.sort(Utils.sortById);
+		updateProcesses(state) {
+			state.processesUpdated++;
+		},
+		addProcessNamespacesToRequest(state, namespaces) {
+			if (typeof namespaces === 'string') {
+				namespaces = namespaces.split(',');
+			}
+			if (!Array.isArray(namespaces)) {
+				return;
+			}
+
+			for(let namespace of namespaces) {
+				if (namespace && !state.processNamespaces.includes(namespace)) {
+					state.processNamespaces.push(namespace);
+				}
+			}
 		},
 		fillCollection(state, data) {
 			let index = state.collections.findIndex(c => c.id === data.id);
diff --git a/src/store/jobs.js b/src/store/jobs.js
index cc86bca09..9f92bcc7f 100644
--- a/src/store/jobs.js
+++ b/src/store/jobs.js
@@ -34,6 +34,8 @@ export default storeFactory({
 					throw new Error("Canceling a batch job is not supported by the server.");
 				}
 			}
+		},
+		mutations: {
 		}
 	}
 });
\ No newline at end of file
diff --git a/src/store/userProcesses.js b/src/store/userProcesses.js
index 8c8f81921..b94eeb335 100644
--- a/src/store/userProcesses.js
+++ b/src/store/userProcesses.js
@@ -1,7 +1,5 @@
 import storeFactory from './storeFactory';
 import Utils from '../utils';
-import Process from '../process.js';
-import { Formula } from '@openeo/js-client';
 
 export default storeFactory({
 	namespace: 'userProcesses',
@@ -12,65 +10,14 @@ export default storeFactory({
 	readFn: 'describeUserProcess',
 	readFnById: 'getUserProcess',
 	customizations: {
-		state: {
-			operatorMapping: Formula.operatorMapping,
-			arrayOperatorMapping: {
-				'product': '*',
-				'sum': '+'
-			}
-		},
 		getters: {
-			reverseOperatorMapping(state) {
-				let mapping = {};
-				for(var op in state.operatorMapping) {
-					mapping[state.operatorMapping[op]] = op;
-				}
-				return Object.assign(mapping, state.arrayOperatorMapping);
-			},
-			getAllById: (state, getters, rootState) => (id) => {
-				let customProcess = getters.getById(id);
-				if (customProcess !== null) {
-					return customProcess;
-				}
-				for(let process of rootState.predefinedProcesses) {
-					if (process.id === id) {
-						return process;
-					}
-				}
-				return null;
-			},
-			supportsMath: (state, getters) => {
-				for(let i in state.operatorMapping) {
-					let processId = state.operatorMapping[i];
-					if (!getters.getAllById(processId)) {
-						return false;
-					}
-				}
-				return true;
-			},
-			isMathProcess: (state, getters) => (process) => {
-				if (!Utils.isObject(process) || Utils.size(process.process_graph) === 0) {
-					return null;
-				}
-				let unsupportedFuncs = Object.values(process.process_graph).find(node => !getters.readableMathProcesses.includes(node.process_id));
-				if (unsupportedFuncs !== undefined) {
-					return false;
-				}
-				return true;
-			},
-			mathProcesses(state, getters, rootState, rootGetters) {
-				return rootGetters.processRegistry.all().filter(Process.isMathProcess);
-			},
-			readableMathProcesses(state, getters) {
-				return getters.mathProcesses.map(p => p.id)
-						.concat(Object.values(state.operatorMapping))
-						.concat(Object.keys(state.arrayOperatorMapping))
-						.concat(['array_element']);
-			}
+		},
+		actions: {
 		},
 		mutations: {
 			data(state, data) {
 				state.userProcesses = data
+					.map(p => Object.assign(p, {namespace: 'user'}))
 					.filter(p => (typeof p.id === 'string'))
 					.sort(Utils.sortById);
 			}

From dce3d36f5d4eff64fa30f15b2efd8540aaf227f9 Mon Sep 17 00:00:00 2001
From: Matthias Mohr <m.mohr@uni-muenster.de>
Date: Thu, 12 Aug 2021 15:28:13 +0200
Subject: [PATCH 2/3] Update dependencies + version number

---
 package.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index dde0195c6..c51f525fa 100644
--- a/package.json
+++ b/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",

From eafd37fefc98cd4262a466cc68869b59297eeedd Mon Sep 17 00:00:00 2001
From: Matthias Mohr <m.mohr@uni-muenster.de>
Date: Wed, 18 Aug 2021 15:23:35 +0200
Subject: [PATCH 3/3] Fix reading user processes

---
 src/store/storeFactory.js | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/store/storeFactory.js b/src/store/storeFactory.js
index bc441b9af..200b30cfe 100644
--- a/src/store/storeFactory.js
+++ b/src/store/storeFactory.js
@@ -1,3 +1,5 @@
+import { UserProcess } from '@openeo/js-client';
+import { Utils } from '@openeo/js-commons';
 import Vue from 'vue';
 
 export default ({namespace, listFn, createFn, updateFn, deleteFn, readFn, readFnById, customizations, primaryKey}) => {
@@ -56,19 +58,18 @@ export default ({namespace, listFn, createFn, updateFn, deleteFn, readFn, readFn
 			},
 			async read(cx, {data}) {
 				let updated = null;
-				if (typeof data === 'string' || typeof data === 'number') {
-					let obj = cx.getters.get(data);
-					// Read by id into a new object
-					if (obj === null) {
+				debugger;
+				if (!(data instanceof UserProcess)) {
+					let id = Utils.isObject(data) ? data[primaryKey] : data;
+					// Try to get UserProcess from store
+					data = cx.getters.getById(id);
+					if (!data) {
+						// Try to load UserProcess from Connection
 						updated = await cx.rootState.connection[readFnById](data);
 					}
-					// Update existing object by id
-					else {
-						data = obj;
-					}
 				}
-				// Update existing object by reference
-				if (updated === null) {
+				if (!updated) {
+					// Try to update UserProcess
 					updated = await data[readFn]();
 				}
 				// Update or insert, depending on previous state