From 47254d241cd1afe8aa2381e98b6d6c22f79d360c Mon Sep 17 00:00:00 2001
From: Matthias Mohr <webmaster@mamo-net.de>
Date: Tue, 10 Oct 2023 22:39:55 +0200
Subject: [PATCH 01/11] Create is not required for showing the work panels

---
 src/components/WorkPanelMixin.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/WorkPanelMixin.js b/src/components/WorkPanelMixin.js
index 06686f8be..cce37dd4f 100644
--- a/src/components/WorkPanelMixin.js
+++ b/src/components/WorkPanelMixin.js
@@ -70,9 +70,6 @@ export default (namespace, singular, plural, loadInitially = true) => {
 				else if (!this.supportsList) {
 					table.setNoData("Sorry, listing stored " + plural + " is not supported by the server.");
 				}
-				else if (!this.supportsCreate) {
-					table.setNoData("Sorry, this feature is not supported by the server.");
-				}
 				else {
 					var isUpdate = this.data.length > 0;
 					if (!isUpdate) {

From dd7845a3893ed8d8f0a698af62adee9fb100f01b Mon Sep 17 00:00:00 2001
From: Matthias Mohr <webmaster@mamo-net.de>
Date: Tue, 10 Oct 2023 23:45:43 +0200
Subject: [PATCH 02/11] Async drag and drop for toolbar/viewer

---
 src/components/DiscoveryToolbar.vue    | 41 +++++---------------
 src/components/Viewer.vue              | 11 +++---
 src/components/VisualEditor.vue        | 11 +++---
 src/components/datatypes/SelectBox.vue |  1 -
 src/store/editor.js                    | 53 +++++++++++++++++++++++++-
 5 files changed, 72 insertions(+), 45 deletions(-)

diff --git a/src/components/DiscoveryToolbar.vue b/src/components/DiscoveryToolbar.vue
index 98e2e1e71..4c4057134 100644
--- a/src/components/DiscoveryToolbar.vue
+++ b/src/components/DiscoveryToolbar.vue
@@ -94,7 +94,7 @@ export default {
 	computed: {
 		...Utils.mapState(['collections', 'udfRuntimes']),
 		...Utils.mapState('editor', ['discoverySearchTerm']),
-		...Utils.mapGetters(['supports', 'collectionDefaults', 'fileFormats', 'processes']),
+		...Utils.mapGetters(['supports', 'fileFormats', 'processes']),
 		supportsLoadCollection() {
 			return this.processes.has('load_collection');
 		},
@@ -143,15 +143,17 @@ export default {
 		}
 	},
 	methods: {
-		...Utils.mapMutations('editor', ['setDiscoverySearchTerm']),
+		...Utils.mapMutations('editor', ['setDiscoverySearchTerm', 'setModelDnd']),
 		...Utils.mapActions(['loadProcess']),
-		async onDrag(event, type, data) {
+		onDrag(event, type, data) {
+			let fn = (loading) => this.setModelDnd({type, data, loading});
 			if (type === 'process') {
-				this.loadProcess(data);
+				fn(true);
+				this.loadProcess(data).then(() => fn(false));
+			}
+			else {
+				fn(false);
 			}
-			let node = this.getNode(type, data);
-			event.dataTransfer.setData("application/vnd.openeo-node", JSON.stringify(node));
-			event.dataTransfer.setData("text/plain", JSON.stringify(node, null, 2));
 		},
 		showCollectionInfo(id) {
 			this.broadcast('showCollection', id);
@@ -175,31 +177,6 @@ export default {
 				type: "output"
 			};
 			this.broadcast('showModal', 'FileFormatModal', props);
-		},
-		getNode(type, data) {
-			switch(type) {
-				case 'collection':
-					return {
-						process_id: 'load_collection',
-						arguments: this.collectionDefaults(data.id)
-					};
-				case 'process':
-					return {
-						process_id: data.id,
-						namespace: data.namespace,
-						arguments: {}
-					};
-				case 'udf':
-					return {
-						process_id: 'run_udf',
-						arguments: data
-					};
-				case 'fileformat':
-					return {
-						process_id: 'save_result',
-						arguments: {format: data.name, options: {}}
-					};
-			}
 		}
 	}
 }
diff --git a/src/components/Viewer.vue b/src/components/Viewer.vue
index a7c631fe7..225e4705a 100644
--- a/src/components/Viewer.vue
+++ b/src/components/Viewer.vue
@@ -70,13 +70,14 @@ export default {
 	computed: {
 		...Utils.mapState(['connection']),
 		...Utils.mapState('editor', ['appMode']),
+		...Utils.mapGetters('editor', ['getModelNodeFromDnD']),
 		nextTabId() {
 			return `viewer~${this.tabIdCounter}`;
 		}
 	},
 	methods: {
 		...Utils.mapActions(['describeCollection']),
-		...Utils.mapMutations('editor', ['setViewerOptions']),
+		...Utils.mapMutations('editor', ['setViewerOptions', 'setModelDnD']),
 		isCollectionPreview(data) {
 			return (data instanceof Service && Utils.isObject(data.attributes) && data.attributes.preview === true);
 		},
@@ -278,11 +279,9 @@ export default {
 			}
 		},
 		async onDrop(event) {
-			var json = event.dataTransfer.getData("application/vnd.openeo-node");
-			if (!json) {
-				return;
-			}
-			let node = JSON.parse(json);
+			const node = await this.getModelNodeFromDnD();
+			this.setModelDnD();
+
 			if (node.process_id === 'load_collection') {
 				event.preventDefault();
 				let id = Utils.isObject(node.arguments) ? node.arguments.id : null;
diff --git a/src/components/VisualEditor.vue b/src/components/VisualEditor.vue
index 003278344..1ec988955 100644
--- a/src/components/VisualEditor.vue
+++ b/src/components/VisualEditor.vue
@@ -129,6 +129,7 @@ export default {
 		...Utils.mapState(['connection', 'collections']),
 		...Utils.mapGetters(['processes', 'supportsMath']),
 		...Utils.mapState('editor', ['initialNode']),
+		...Utils.mapGetters('editor', ['getModelNodeFromDnD']),
 		isMath() {
 			return (this.supportsMath && this.processes.isMath(this.value));
 		}
@@ -172,7 +173,7 @@ export default {
 		this.canPaste = navigator && navigator.clipboard && typeof navigator.clipboard.readText === 'function';
 	},
 	methods: {
-		...Utils.mapMutations('editor', ['setInitialNode']),
+		...Utils.mapMutations('editor', ['setInitialNode', 'setModelDnD']),
 		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) {
@@ -209,11 +210,11 @@ export default {
 			this.showHelpOverlay = false;
 			event.preventDefault();
 		},
-		onDrop(event) {
-			var editorNodeJson = event.dataTransfer.getData("application/vnd.openeo-node");
-			if (editorNodeJson) {
-				let node = JSON.parse(editorNodeJson);
+		async onDrop(event) {
+			const node = await this.getModelNodeFromDnD();
+			if (node) {
 				this.insertProcess(node, event.pageX, event.pageY);
+				this.setModelDnD();
 				return event.preventDefault();
 			}
 
diff --git a/src/components/datatypes/SelectBox.vue b/src/components/datatypes/SelectBox.vue
index 2f321b696..0132cc83f 100644
--- a/src/components/datatypes/SelectBox.vue
+++ b/src/components/datatypes/SelectBox.vue
@@ -40,7 +40,6 @@ export default {
 		}
 	},
 	computed: {
-		...Utils.mapGetters(['collectionDefaults']),
 		selectOptions() {
 			let state = [];
 			switch(this.type) {
diff --git a/src/store/editor.js b/src/store/editor.js
index 320dca412..f7f9261e9 100644
--- a/src/store/editor.js
+++ b/src/store/editor.js
@@ -19,7 +19,8 @@ const getDefaultState = () => {
 		openWizard: null,
 		openWizardProps: {},
 		collectionPreview: null,
-		viewerOptions: {}
+		viewerOptions: {},
+		modelDnD: null
 	};
 };
 
@@ -28,6 +29,53 @@ export default {
 	state: getDefaultState(),
 	getters: {
 		hasProcess: state => Utils.isObject(state.process) && Utils.size(state.process) > 0 && Utils.size(state.process.process_graph),
+		getModelNodeFromDnD: (state, getters, rootState, rootGetters) => () => {
+			return new Promise((resolve, reject) => {
+				if (!state.modelDnD) {
+					resolve(null);
+					return;
+				}
+				const getterFn = () => {
+					switch(state.modelDnD.type) {
+						case 'collection':
+							return {
+								process_id: 'load_collection',
+								arguments: rootGetters.collectionDefaults(state.modelDnD.data.id)
+							};
+						case 'process':
+							return {
+								process_id: state.modelDnD.data.id,
+								namespace: state.modelDnD.data.namespace,
+								arguments: {}
+							};
+						case 'udf':
+							return {
+								process_id: 'run_udf',
+								arguments: state.modelDnD.data
+							};
+						case 'fileformat':
+							return {
+								process_id: 'save_result',
+								arguments: {format: state.modelDnD.data.name, options: {}}
+							};
+						default:
+							return null;
+					}
+				};
+				if (state.modelDnD.loading) {
+					let id = setInterval(() => {
+						if (!state.modelDnD || state.modelDnD.loading) {
+							return;
+						}
+						clearInterval(id);
+						resolve(getterFn());
+					}, 50);
+				}
+				else {
+					resolve(getterFn());
+				}
+			});
+		}
 	},
 	actions: {
 		async loadEpsgCodes(cx) {
@@ -84,6 +132,9 @@ export default {
 		}
 	},
 	mutations: {
+		setModelDnd(state, obj = null) {
+			state.modelDnD = obj;
+		},
 		setDiscoverySearchTerm(state, searchTerm) {
 			state.discoverySearchTerm = typeof searchTerm === 'string' ? searchTerm : '';
 		},

From 84d76f2b6fc22773a9314b8983e1962a4fd07576 Mon Sep 17 00:00:00 2001
From: Matthias Mohr <webmaster@mamo-net.de>
Date: Wed, 25 Oct 2023 22:01:54 +0200
Subject: [PATCH 03/11] Fix UDP loading with authentication

---
 src/Page.vue                                   |  6 +++++-
 src/components/ConnectForm.vue                 |  3 +++
 src/components/wizards/SpectralIndices.vue     |  2 +-
 src/components/wizards/UDP.vue                 |  6 +++++-
 .../wizards/tabs/ChooseProcessParameters.vue   |  9 ++++++++-
 src/utils.js                                   | 18 ++++++++++++++----
 6 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/Page.vue b/src/Page.vue
index d79eead96..a1bbea05b 100644
--- a/src/Page.vue
+++ b/src/Page.vue
@@ -78,9 +78,13 @@ export default {
 			});
 		}
 
-		if (Utils.param('discover') || resultUrl) {
+		const discover = Utils.param('discover');
+		if (discover === "1" || resultUrl) {
 			this.skipLogin = true;
 		}
+		else if (discover === "0") {
+			this.skipLogin = false;
+		}
 
 		// Count active requests
 		axios.interceptors.request.use(config => {
diff --git a/src/components/ConnectForm.vue b/src/components/ConnectForm.vue
index 8fab30b58..01e2c9bba 100644
--- a/src/components/ConnectForm.vue
+++ b/src/components/ConnectForm.vue
@@ -406,6 +406,9 @@ export default {
 			if (discover && !this.$config.skipLogin) {
 				params.set('discover', 1);
 			}
+			else if (!discover && this.$config.skipLogin) {
+				params.set('discover', 0);
+			}
 			else {
 				params.delete('discover');
 			}
diff --git a/src/components/wizards/SpectralIndices.vue b/src/components/wizards/SpectralIndices.vue
index 895b3bd29..2f197889e 100644
--- a/src/components/wizards/SpectralIndices.vue
+++ b/src/components/wizards/SpectralIndices.vue
@@ -90,7 +90,7 @@ export default {
 			temporal_extent: null
 		};
 	},
-	created() {
+	beforeMount() {
 		this.scale = this.processes.has('apply') && this.processes.has('linear_scale_range') ? false : null;
 	},
 	computed: {
diff --git a/src/components/wizards/UDP.vue b/src/components/wizards/UDP.vue
index 4f0a0db2b..b1da29374 100644
--- a/src/components/wizards/UDP.vue
+++ b/src/components/wizards/UDP.vue
@@ -57,8 +57,12 @@ export default {
 			};
 		}
 	},
-	async created() {
+	async beforeMount() {
 		this.loading = true;
+		if (typeof this.process !== 'string' || this.process.length === 0) {
+			this.$emit('close', `Sorry, no process specified.`);
+			return;
+		}
 		let [id, namespace] = Utils.extractUDPParams(this.process);
 		try {
 			this.processSpec = await this.loadProcess({id, namespace});
diff --git a/src/components/wizards/tabs/ChooseProcessParameters.vue b/src/components/wizards/tabs/ChooseProcessParameters.vue
index f8f43909d..116845aab 100644
--- a/src/components/wizards/tabs/ChooseProcessParameters.vue
+++ b/src/components/wizards/tabs/ChooseProcessParameters.vue
@@ -1,6 +1,9 @@
 <template>
 	<div class="step choose-process-parameters">
-		<p v-if="process.parameters.length === 0">No editable parameters available.</p>
+		<p v-if="parameters.length === 0">
+			This process doesn't expose any parameters.
+			You can skip this step.
+		</p>
 		<Parameters v-else v-model="value" :parameters="parameters" :parent="process" />
 	</div>
 </template>
@@ -8,6 +11,7 @@
 <script>
 import { ProcessParameter } from '@openeo/js-commons';
 import Parameters from '../../Parameters.vue';
+import Utils from '../../../utils';
 
 export default {
 	name: 'ChooseProcessParameters',
@@ -26,6 +30,9 @@ export default {
 	},
 	computed: {
 		parameters() {
+			if (!Utils.isObject(this.process) || !Array.isArray(this.process.parameters)) {
+				return [];
+			}
 			return this.process.parameters.map(p => new ProcessParameter(p)).filter(p => p.isEditable());
 		}
 	}
diff --git a/src/utils.js b/src/utils.js
index 0ebc68125..6f3a46cdc 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -208,8 +208,11 @@ class Utils extends VueUtils {
 	}
 
 	static param(name) {
-		const urlParams = new URLSearchParams(window.location.search); 
-		return urlParams.get(name); 
+		const urlParams = new URLSearchParams(window.location.search);
+		if (urlParams.has(name)) {
+			return urlParams.get(name);
+		}
+		return undefined;
 	}
 
 	static isBboxInWebMercator(bboxes) {
@@ -407,8 +410,15 @@ class Utils extends VueUtils {
 		return resolver(schema);
 	}
 	static extractUDPParams(process) {
-		let [id, ...namespace] = process.split('@');
-		return [id, namespace.join('@')];
+		const pos = process.indexOf('@');
+		if (pos < 0) {
+			return [process, undefined];
+		}
+		else {
+			const id = process.substring(0, pos);
+			const namespace = process.substring(pos + 1);
+			return [id, namespace];
+		}
 	}
 	static getProcessingExpression(stac) {
 		let key = 'processing:expression';

From b9e348db3848da764a432d2e07380f6a5102de86 Mon Sep 17 00:00:00 2001
From: Matthias Mohr <webmaster@mamo-net.de>
Date: Wed, 25 Oct 2023 22:03:30 +0200
Subject: [PATCH 04/11] v0.12.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6dc9907c7..78e4d7043 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openeo/web-editor",
-  "version": "0.12.4",
+  "version": "0.12.5",
   "apiVersions": [
     "1.0.0-rc.2",
     "1.0.0",

From 754752a30b7908aeb0bc432d0332d54fdb7c525f Mon Sep 17 00:00:00 2001
From: Matthias Mohr <webmaster@mamo-net.de>
Date: Thu, 2 Nov 2023 19:01:39 +0100
Subject: [PATCH 05/11] Simple Wizard for running UDPs without URL manipulation

---
 src/components/modals/WizardModal.vue         | 11 ++-
 src/components/wizards/UDP.vue                | 73 +++++++++++++-----
 .../wizards/tabs/ChooseUserDefinedProcess.vue | 76 +++++++++++++++++++
 3 files changed, 135 insertions(+), 25 deletions(-)
 create mode 100644 src/components/wizards/tabs/ChooseUserDefinedProcess.vue

diff --git a/src/components/modals/WizardModal.vue b/src/components/modals/WizardModal.vue
index d65ab0b64..c783b7268 100644
--- a/src/components/modals/WizardModal.vue
+++ b/src/components/modals/WizardModal.vue
@@ -81,17 +81,16 @@ export default {
 			show: true,
 			selected: null,
 			usecases: [
-				{
-					component: 'UDP',
-					title: () => typeof this.options.process === 'string' ? this.options.process.replace(/@.+/, '') : 'Run UDP',
-					description: 'Executes a user-defined process',
-					hide: true
-				},
 				{
 					component: 'Download',
 					title: 'Download Data',
 					description: 'Just download a small portion of data.'
 				},
+				{
+					component: 'UDP',
+					title: () => typeof this.options.process === 'string' ? this.options.process.replace(/@.+/, '') : 'Run UDP',
+					description: 'Executes a user-defined process'
+				},
 				...(Config.supportedWizards || []) // ToDo: only show usecases that are supported based on processes (requiredProcesses)
 			],
 			activeTabIndex: 0,
diff --git a/src/components/wizards/UDP.vue b/src/components/wizards/UDP.vue
index b1da29374..bf71868bf 100644
--- a/src/components/wizards/UDP.vue
+++ b/src/components/wizards/UDP.vue
@@ -1,11 +1,14 @@
 <template>
 	<div class="wizard-tab-content">
-		<WizardTab :pos="0" :parent="parent" title="Parameters" :beforeChange="checkRequirements">
+		<WizardTab v-if="!noProcessSelection" :pos="tabPos[0]" :parent="parent" title="Process" :beforeChange="checkProcessRequirements">
+			<ChooseUserDefinedProcess :value="process" :namespace="processNamespace" @input="submitProcess" />
+		</WizardTab>
+		<WizardTab :pos="tabPos[1]" :parent="parent" title="Parameters" :beforeChange="checkParameterRequirements">
 			<ChooseProcessParameters v-if="processSpec" v-model="args" :process="processSpec" />
 			<p class="center" v-else-if="loading"><i class="fas fa-spinner fa-spin"></i> Loading process...</p>
 			<p v-else>Process not available.</p>
 		</WizardTab>
-		<WizardTab :pos="1" :parent="parent" title="Finish">
+		<WizardTab :pos="tabPos[2]" :parent="parent" title="Finish">
 			<ChooseProcessingMode v-model="mode" :title.sync="jobTitle" />
 		</WizardTab>
 	</div>
@@ -14,6 +17,7 @@
 <script>
 import ChooseProcessingMode from './tabs/ChooseProcessingMode.vue';
 import ChooseProcessParameters from './tabs/ChooseProcessParameters.vue';
+import ChooseUserDefinedProcess from './tabs/ChooseUserDefinedProcess.vue';
 import WizardMixin from './WizardMixin';
 import Utils from '../../utils';
 import { ProcessGraph } from '@openeo/js-processgraphs';
@@ -24,14 +28,17 @@ export default {
 		WizardMixin
 	],
 	components: {
+		ChooseUserDefinedProcess,
 		ChooseProcessingMode,
 		ChooseProcessParameters
 	},
 	data() {
 		return {
-			loading: true,
+			loading: false,
+			noProcessSelection: false,
 			process: null,
 			processSpec: null,
+			processNamespace: 'user',
 			args: {},
 			jobTitle: "",
 			mode: "",
@@ -39,6 +46,14 @@ export default {
 	},
 	computed: {
 		...Utils.mapGetters(['processes']),
+		tabPos() {
+			if (this.noProcessSelection) {
+				return [null, 0, 1];
+			}
+			else {
+				return [0, 1, 2];
+			}
+		},
 		graph() {
 			if (!this.process || !this.processSpec) {
 				return null;
@@ -58,27 +73,47 @@ export default {
 		}
 	},
 	async beforeMount() {
-		this.loading = true;
-		if (typeof this.process !== 'string' || this.process.length === 0) {
-			this.$emit('close', `Sorry, no process specified.`);
-			return;
-		}
-		let [id, namespace] = Utils.extractUDPParams(this.process);
-		try {
-			this.processSpec = await this.loadProcess({id, namespace});
-			if (this.processSpec) {
-				this.jobTitle = this.processSpec.id;
+		if (typeof this.process === 'string' && this.process.length > 0) {
+			const [id, ns] = Utils.extractUDPParams(this.process);
+			this.noProcessSelection = true;
+			this.process = id;
+			if (ns) {
+				this.processNamespace = ns;
+			}
+			let loaded = await this.checkProcessRequirements();
+			if (!loaded) {
+				this.$emit('close', `Sorry, the wizard can't load the requested process.`);
 			}
-		} catch (error) {
-			console.warn(error);
-			this.$emit('close', `Sorry, the wizard can't load the requested process.`);
-		} finally {
-			this.loading = false;
 		}
 	},
 	methods: {
 		...Utils.mapActions(['loadProcess']),
-		checkRequirements() {
+		submitProcess(item) {
+			this.process = item.id;
+			if (item.namespace) {
+				this.processNamespace = item.namespace;
+			}
+			this.parent.nextTab();
+		},
+		async checkProcessRequirements() {
+			this.loading = true;
+			try {
+				this.processSpec = await this.loadProcess({
+					id: this.process,
+					namespace: this.processNamespace
+				});
+				this.loading = false;
+				if (this.processSpec) {
+					this.jobTitle = this.processSpec.id;
+				}
+				return true;
+			} catch (error) {
+				this.loading = false;
+				console.warn(error);
+				return false;
+			}
+		},
+		checkParameterRequirements() {
 			if (this.graph) {
 				var pg = new ProcessGraph(this.graph, this.processes);
 				return pg.validate();
diff --git a/src/components/wizards/tabs/ChooseUserDefinedProcess.vue b/src/components/wizards/tabs/ChooseUserDefinedProcess.vue
new file mode 100644
index 000000000..e120f20d0
--- /dev/null
+++ b/src/components/wizards/tabs/ChooseUserDefinedProcess.vue
@@ -0,0 +1,76 @@
+<template>
+	<div class="step choose-process">
+		<p>Please select the user-defined process to execute.</p>
+		<Processes heading="" :processes="filteredProcesses" :offerDetails="false">
+			<template #summary="{ item }">
+				<div :class="{element: true, selected: item.id == value}">
+					<div class="summary" @click="update(item)">
+						<strong :title="item.id">{{ item.id }}</strong>
+						<small v-if="item.title" :title="item.title">{{ item.title }}</small>
+					</div>
+					<button class="button" type="button" @click="showProcess(item)" title="Show process details"><i class="fas fa-info"></i></button>
+				</div>
+			</template>
+		</Processes>
+	</div>
+</template>
+
+<script>
+import Processes from '@openeo/vue-components/components/Processes.vue';
+import Utils from '../../../utils';
+import EventBusMixin from '../../EventBusMixin';
+
+export default {
+	name: 'ChooseUserDefinedProcess',
+	mixins: [
+		EventBusMixin
+	],
+	components: {
+		Processes
+	},
+	props: {
+		value: {
+			type: String,
+			default: null
+		},
+		namespace: {
+			type: String,
+			default: 'user'
+		}
+	},
+	computed: {
+		...Utils.mapGetters(['processes']),
+		filteredProcesses() {
+			return this.processes.namespace(this.namespace);
+		}
+	},
+	methods: {
+		...Utils.mapActions(['describeUserProcess']),
+		async update(id) {
+			this.$emit('input', id);
+		},
+		showProcess(item) {
+			this.broadcast('showProcess', item);
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.choose-process {
+	.vue-component.searchable-list ul.list > li {
+		margin-bottom: 0;
+
+		> summary {
+			margin: 0;
+			line-height: inherit;
+
+			&:before {
+				content: '';
+				margin-left: 0;
+				float: none;
+			}
+		}
+	}
+}
+</style>
\ No newline at end of file

From 893d62a3f7c1d74fec1eb701c8f00fe017b6df66 Mon Sep 17 00:00:00 2001
From: Matthias Mohr <webmaster@mamo-net.de>
Date: Fri, 3 Nov 2023 01:06:35 +0100
Subject: [PATCH 06/11] Allow to specify a URL in the UDP wizard

---
 src/components/modals/ImportProcessModal.vue  |  7 +-
 src/components/modals/WizardModal.vue         |  2 +-
 src/components/wizards/UDP.vue                | 93 ++++++++++++++-----
 .../wizards/tabs/ChooseUserDefinedProcess.vue | 28 +++++-
 4 files changed, 101 insertions(+), 29 deletions(-)

diff --git a/src/components/modals/ImportProcessModal.vue b/src/components/modals/ImportProcessModal.vue
index d6b770b75..49d2806cb 100644
--- a/src/components/modals/ImportProcessModal.vue
+++ b/src/components/modals/ImportProcessModal.vue
@@ -108,8 +108,11 @@ export default {
 			if (!Utils.isObject(data)) {
 				throw new Error('Process does not contain any data');
 			}
-			if (typeof data.id !== 'string' && !Utils.isObject(data.process_graph)) {
-				throw new Error('Process does not contain `id` or `process graph`');
+			if (!Utils.hasText(data.id)) {
+				throw new Error('Process does not contain an id');
+			}
+			if (!Utils.isObject(data.process_graph)) {
+				throw new Error('Process does not contain a process graph');
 			}
 			return data;
 		},
diff --git a/src/components/modals/WizardModal.vue b/src/components/modals/WizardModal.vue
index c783b7268..0d7430c5f 100644
--- a/src/components/modals/WizardModal.vue
+++ b/src/components/modals/WizardModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<Modal id="WizardModal" :show="show" :width="width" :title="title" @closed="$emit('closed')">
+	<Modal id="WizardModal" :show="show" :width="width" :title="title" :submitFunction="nextTab" @closed="$emit('closed')">
 		<template #default>
 			<div v-if="selected" class="wizard">
 				<div class="wizard-navigation">
diff --git a/src/components/wizards/UDP.vue b/src/components/wizards/UDP.vue
index bf71868bf..608363279 100644
--- a/src/components/wizards/UDP.vue
+++ b/src/components/wizards/UDP.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="wizard-tab-content">
 		<WizardTab v-if="!noProcessSelection" :pos="tabPos[0]" :parent="parent" title="Process" :beforeChange="checkProcessRequirements">
-			<ChooseUserDefinedProcess :value="process" :namespace="processNamespace" @input="submitProcess" />
+			<ChooseUserDefinedProcess :value="process" :namespace="processNamespace" :url="processUrl" @input="submitProcess" />
 		</WizardTab>
 		<WizardTab :pos="tabPos[1]" :parent="parent" title="Parameters" :beforeChange="checkParameterRequirements">
 			<ChooseProcessParameters v-if="processSpec" v-model="args" :process="processSpec" />
@@ -37,6 +37,7 @@ export default {
 			loading: false,
 			noProcessSelection: false,
 			process: null,
+			processUrl: null,
 			processSpec: null,
 			processNamespace: 'user',
 			args: {},
@@ -58,16 +59,20 @@ export default {
 			if (!this.process || !this.processSpec) {
 				return null;
 			}
-			let [id, namespace] = Utils.extractUDPParams(this.process);
+			let node = {
+				process_id: this.process,
+				arguments: this.args,
+				result: true
+			};
+			if (Utils.hasText(this.processNamespace)) {
+				node.namespace = this.processNamespace;
+			}
+			if (Utils.hasText(this.processSpec.summary)) {
+				node.description = this.processSpec.summary;
+			}
 			return {
 				process_graph: {
-					[id]: {
-						process_id: id,
-						namespace,
-						description: this.processSpec.summary,
-						arguments: this.args,
-						result: true
-					}
+					[this.process]: node
 				}
 			};
 		}
@@ -88,30 +93,70 @@ export default {
 	},
 	methods: {
 		...Utils.mapActions(['loadProcess']),
-		submitProcess(item) {
-			this.process = item.id;
-			if (item.namespace) {
-				this.processNamespace = item.namespace;
+		submitProcess(item, isUrl = false) {
+			if (isUrl) {
+				this.processUrl = item;
+			}
+			else {
+				this.process = item.id;
+				if (item.namespace) {
+					this.processNamespace = item.namespace;
+				}
+				this.parent.nextTab();
 			}
-			this.parent.nextTab();
+		},
+		async loadFromUrl(url) {
+			if (!Utils.isUrl(url)) {
+				throw new Error('Please provide a valid URL!');
+			}
+			let data;
+			try {
+				const response = await axios(url);
+				data = response.data;
+			} catch(error) {
+				throw new Error('Failed to load process from the given URL');
+			}
+			if (typeof data === 'string') {
+				try {
+					data = JSON.parse(data);
+				} catch(error) {
+					throw new Error('Process is not valid JSON');
+				}
+			}
+			if (!Utils.isObject(data)) {
+				throw new Error('Process does not contain any data');
+			}
+			if (!Utils.hasText(data.id)) {
+				throw new Error('Process does not contain an id');
+			}
+			if (!Utils.isObject(data.process_graph)) {
+				throw new Error('Process does not contain a process graph');
+			}
+			return data;
 		},
 		async checkProcessRequirements() {
 			this.loading = true;
-			try {
+			if (this.processUrl) {
+				const process = await this.loadFromUrl(this.processUrl);
+				this.processes.add(process, this.processUrl);
+				this.processNamespace = this.processUrl;
+				this.process = process.id;
+				this.processSpec = process;
+			}
+			else if (this.process) {
 				this.processSpec = await this.loadProcess({
 					id: this.process,
 					namespace: this.processNamespace
 				});
-				this.loading = false;
-				if (this.processSpec) {
-					this.jobTitle = this.processSpec.id;
-				}
-				return true;
-			} catch (error) {
-				this.loading = false;
-				console.warn(error);
-				return false;
 			}
+			else {
+				throw new Error('Please select a user-defined process');
+			}
+			this.loading = false;
+			if (this.processSpec) {
+				this.jobTitle = this.processSpec.id;
+			}
+			return true;
 		},
 		checkParameterRequirements() {
 			if (this.graph) {
diff --git a/src/components/wizards/tabs/ChooseUserDefinedProcess.vue b/src/components/wizards/tabs/ChooseUserDefinedProcess.vue
index e120f20d0..75381a3ff 100644
--- a/src/components/wizards/tabs/ChooseUserDefinedProcess.vue
+++ b/src/components/wizards/tabs/ChooseUserDefinedProcess.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="step choose-process">
-		<p>Please select the user-defined process to execute.</p>
+		<p>Please select the user-defined process to execute:</p>
 		<Processes heading="" :processes="filteredProcesses" :offerDetails="false">
 			<template #summary="{ item }">
 				<div :class="{element: true, selected: item.id == value}">
@@ -12,6 +12,9 @@
 				</div>
 			</template>
 		</Processes>
+		<hr />
+		<p>Alternatively, provide a URL to a user-defined process:</p>
+		<input type="url" name="url" class="url" :value="url" @blur="updateUrl" />
 	</div>
 </template>
 
@@ -36,6 +39,10 @@ export default {
 		namespace: {
 			type: String,
 			default: 'user'
+		},
+		url: {
+			type: String,
+			default: null
 		}
 	},
 	computed: {
@@ -46,9 +53,21 @@ export default {
 	},
 	methods: {
 		...Utils.mapActions(['describeUserProcess']),
-		async update(id) {
+		update(id) {
 			this.$emit('input', id);
 		},
+		updateUrl(event) {
+			const url = event.target.value;
+			if (!url) {
+				return;
+			}
+			else if (Utils.isUrl(url)) {
+				this.$emit('input', url, true);
+			}
+			else {
+				throw new Error('The provided URL is not valid.');
+			}
+		},
 		showProcess(item) {
 			this.broadcast('showProcess', item);
 		}
@@ -58,6 +77,11 @@ export default {
 
 <style lang="scss">
 .choose-process {
+	input.url {
+		width: 100%;
+		box-sizing: border-box;
+	}
+
 	.vue-component.searchable-list ul.list > li {
 		margin-bottom: 0;
 

From eb0ed11c674b7ca9b0ee4ff73616e3337fca39cd Mon Sep 17 00:00:00 2001
From: Matthias Mohr <webmaster@mamo-net.de>
Date: Fri, 3 Nov 2023 01:55:17 +0100
Subject: [PATCH 07/11] Fix issue in loadProcess

---
 src/store/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/store/index.js b/src/store/index.js
index f2c514e3b..af316d203 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -279,6 +279,9 @@ export default new Vuex.Store({
 
 		async loadProcess(cx, {id, namespace}) {
 			process = cx.getters.processes.get(id, namespace);
+			if (!Utils.isObject(process)) {
+				return null;
+			}
 			if (process.namespace !== 'backend') {
 				if (process.namespace === 'user') {
 					await cx.dispatch('userProcesses/read', {data: process});

From 4293e9ea1cce1ee049b5b3e131442a4083e3e39e Mon Sep 17 00:00:00 2001
From: Matthias Mohr <webmaster@mamo-net.de>
Date: Fri, 3 Nov 2023 14:36:37 +0100
Subject: [PATCH 08/11] Make namespaces more tolerant

---
 src/components/wizards/UDP.vue                           | 2 +-
 src/components/wizards/tabs/ChooseUserDefinedProcess.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/wizards/UDP.vue b/src/components/wizards/UDP.vue
index 608363279..5bdd814a5 100644
--- a/src/components/wizards/UDP.vue
+++ b/src/components/wizards/UDP.vue
@@ -39,7 +39,7 @@ export default {
 			process: null,
 			processUrl: null,
 			processSpec: null,
-			processNamespace: 'user',
+			processNamespace: null,
 			args: {},
 			jobTitle: "",
 			mode: "",
diff --git a/src/components/wizards/tabs/ChooseUserDefinedProcess.vue b/src/components/wizards/tabs/ChooseUserDefinedProcess.vue
index 75381a3ff..0a55422b4 100644
--- a/src/components/wizards/tabs/ChooseUserDefinedProcess.vue
+++ b/src/components/wizards/tabs/ChooseUserDefinedProcess.vue
@@ -38,7 +38,7 @@ export default {
 		},
 		namespace: {
 			type: String,
-			default: 'user'
+			default: null
 		},
 		url: {
 			type: String,
@@ -48,7 +48,7 @@ export default {
 	computed: {
 		...Utils.mapGetters(['processes']),
 		filteredProcesses() {
-			return this.processes.namespace(this.namespace);
+			return this.processes.namespace(this.namespace || 'user');
 		}
 	},
 	methods: {

From 7e583e44188e34c94c5cebfdb3039fb6338560e9 Mon Sep 17 00:00:00 2001
From: Matthias Mohr <webmaster@mamo-net.de>
Date: Tue, 19 Dec 2023 17:18:22 +0100
Subject: [PATCH 09/11] Allow free text input if data is missing for select
 boxes

---
 src/components/datatypes/SelectBox.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/datatypes/SelectBox.vue b/src/components/datatypes/SelectBox.vue
index 0132cc83f..aa8cb3792 100644
--- a/src/components/datatypes/SelectBox.vue
+++ b/src/components/datatypes/SelectBox.vue
@@ -212,7 +212,8 @@ export default {
 			return (this.type === 'file-paths');
 		},
 		taggable() {
-			return (this.type === 'year');
+			let freeInputIfEmpty = ['band-name', 'collection-id', 'job-id', 'input-format', 'output-format'];
+			return (this.type === 'year' || (this.selectOptions.length === 0 && freeInputIfEmpty.includes(this.type)));
 		},
 		preselect() {
 			if (this.multiple) {

From 6f410d7132741e46e9625080c5c426d5c63bedfb Mon Sep 17 00:00:00 2001
From: Matthias Mohr <webmaster@mamo-net.de>
Date: Tue, 9 Jan 2024 13:04:20 +0100
Subject: [PATCH 10/11] Cancellable request improvements

---
 src/components/JobPanel.vue           | 52 +++++-------------
 src/components/cancellableRequest.js  | 76 +++++++++++++++++++++++++++
 src/components/modals/WizardModal.vue | 18 ++++++-
 3 files changed, 105 insertions(+), 41 deletions(-)
 create mode 100644 src/components/cancellableRequest.js

diff --git a/src/components/JobPanel.vue b/src/components/JobPanel.vue
index b076b9fb9..0233a5ffa 100644
--- a/src/components/JobPanel.vue
+++ b/src/components/JobPanel.vue
@@ -26,7 +26,8 @@ import EventBusMixin from './EventBusMixin';
 import WorkPanelMixin from './WorkPanelMixin';
 import SyncButton from './SyncButton.vue';
 import Utils from '../utils.js';
-import { AbortController, Job } from '@openeo/js-client';
+import { Job } from '@openeo/js-client';
+import { cancellableRequest, showCancellableRequestError, CancellableRequestError } from './cancellableRequest';
 
 const WorkPanelMixinInstance = WorkPanelMixin('jobs', 'batch job', 'batch jobs');
 
@@ -39,8 +40,7 @@ export default {
 	data() {
 		return {
 			watchers: {},
-			jobUpdater: null,
-			runId: 0
+			jobUpdater: null
 		};
 	},
 	mounted() {
@@ -145,48 +145,20 @@ export default {
 			await this.queueJob(job);
 		},
 		async executeProcess() {
-			let abortController = new AbortController();
-			let snotifyConfig = {
-				timeout: 0,
-				type: 'async',
-				buttons: [{
-					text: 'Cancel',
-					action: toast => {
-						abortController.abort();
-						this.$snotify.remove(toast.id, true);
-					}
-				}]
+			const callback = async (abortController) => {
+				const result = await this.connection.computeResult(this.process, null, null, abortController);
+				this.broadcast('viewSyncResult', result);
 			};
-			let toast;
 			try {
-				this.runId++;
-				let message = "A process is currently executed synchronously...";
-				let title = `Run #${this.runId}`;
-				let endlessPromise = () => new Promise(() => {}); // Pass a promise to snotify that never resolves as we manually close the toast
-				toast = this.$snotify.async(message, title, endlessPromise, snotifyConfig);
-				let result = await this.connection.computeResult(this.process, null, null, abortController);
-				this.broadcast('viewSyncResult', result);
-			} catch(error) {
-				if (axios.isCancel(error)) {
-					// Do nothing, we expected the cancellation
-				}
-				else if (typeof error.message === 'string' && Utils.isObject(error.response) && [400,500].includes(error.response.status)) {
-					this.broadcast('viewLogs', [{
-						id: error.id,
-						code: error.code,
-						level: 'error',
-						message: error.message,
-						links: error.links || []
-					}]);
-					Utils.error(this, "Synchronous processing failed. Please see the logs for details.", "Processing Error");
+				await cancellableRequest(this, callback, 'Run');
+			} catch (error) {
+				if (error instanceof CancellableRequestError) {
+					showCancellableRequestError(this, error);
 				}
 				else {
-					Utils.exception(this, error, "Server Error");
-				}
-			} finally {
-				if (toast) {
-					this.$snotify.remove(toast.id, true);
+					Utils.exception(this, error);
 				}
+
 			}
 		},
 		jobCreated(job) {
diff --git a/src/components/cancellableRequest.js b/src/components/cancellableRequest.js
new file mode 100644
index 000000000..58601259d
--- /dev/null
+++ b/src/components/cancellableRequest.js
@@ -0,0 +1,76 @@
+import { AbortController } from '@openeo/js-client';
+import Utils from '../utils';
+
+export class CancellableRequestError extends Error {
+  constructor(message, title = null, cause = null, close = true, isError = true) {
+    super(message, {cause});
+    this.title = title;
+    this.close = close;
+    this.isError = isError;
+  }
+}
+
+export function showCancellableRequestError(vm, error) {
+  if (error instanceof CancellableRequestError) {
+    if (error.isError) {
+      Utils.error(vm, error.message, error.title);
+    }
+    else {
+      Utils.ok(vm, error.message, error.title);
+    }
+  }
+}
+
+let runIds = {};
+export async function cancellableRequest(vm, callback, entity) {
+  if (!runIds[entity]) {
+    runIds[entity] = 1;
+  }
+  else {
+    runIds[entity]++;
+  }
+
+  const abortController = new AbortController();
+  const snotifyConfig = Object.assign({}, vm.$config.snotifyDefaults, {
+    timeout: 0,
+    type: 'async',
+    buttons: [{
+      text: 'Cancel',
+      action: () => {
+        abortController.abort();
+      }
+    }]
+  });
+
+  let toast;
+  const toastTitle = `${entity} #${runIds[entity]}`;
+  try {
+    const message = `Processing in progress, please wait...`;
+    // Pass a promise to snotify that never resolves as we manually close the toast
+    const endlessPromise = () => new Promise(() => {});
+    toast = vm.$snotify.async(message, toastTitle, endlessPromise, snotifyConfig);
+
+    await callback(abortController);
+  } catch(error) {
+    if (axios.isCancel(error)) {
+      throw new CancellableRequestError(`Cancelled successfully`, toastTitle, error, false, false);
+    }
+    else if (typeof error.message === 'string' && Utils.isObject(error.response) && [400,500].includes(error.response.status)) {
+      vm.broadcast('viewLogs', [{
+        id: error.id,
+        code: error.code,
+        level: 'error',
+        message: error.message,
+        links: error.links || []
+      }]);
+      Utils.error(vm, `${entity} failed. Please see the logs for details.`, toastTitle);
+    }
+    else {
+      throw new CancellableRequestError(error.message, toastTitle, error, false);
+    }
+  } finally {
+    if (toast) {
+      vm.$snotify.remove(toast.id, true);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/modals/WizardModal.vue b/src/components/modals/WizardModal.vue
index 0d7430c5f..0487a32cc 100644
--- a/src/components/modals/WizardModal.vue
+++ b/src/components/modals/WizardModal.vue
@@ -60,6 +60,7 @@ import WizardStep from '../wizards/components/WizardStep.vue';
 import Utils from '../../utils';
 import Config from '../../../config';
 import EventBusMixin from '../EventBusMixin';
+import { CancellableRequestError } from '../cancellableRequest';
 
 const wizards = Config.supportedWizards || [];
 let components = {
@@ -248,7 +249,22 @@ export default {
 				else if (this.isLastStep) {
 					this.$refs.component.finish()
 						.then(this.close)
-						.catch(error => Utils.exception(this, error));
+						.catch(error => {
+							if (error instanceof CancellableRequestError) {
+								if (error.isError) {
+									Utils.exception(this, error, error.title);
+								}
+								else {
+									Utils.ok(this, error.message, error.title);
+								}
+								if (error.close) {
+									this.close();
+								}
+							}
+							else {
+								Utils.exception(this, error);
+							}
+						});
 				}
 			}
 			this.beforeTabChange(this.activeTabIndex, cb);

From 145af2b872ce37644af2f17b01b507e145fe1dcb Mon Sep 17 00:00:00 2001
From: Matthias Mohr <webmaster@mamo-net.de>
Date: Wed, 14 Feb 2024 13:06:28 +0100
Subject: [PATCH 11/11] Add funding info

---
 package.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/package.json b/package.json
index 78e4d7043..d28e9d13e 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,10 @@
     "type": "git",
     "url": "https://github.com/Open-EO/openeo-web-editor.git"
   },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/m-mohr"
+  },
   "scripts": {
     "build:database": "node src/build-database.js",
     "start": "npm run build:database && npx vue-cli-service serve",