Quick view mode for web services #277

Author: m-mohr

package.json

@@ -45,7 +45,7 @@
     "@openeo/js-client": "^2.5.1",
     "@openeo/js-commons": "^1.4.1",
     "@openeo/js-processgraphs": "^1.3.0",
-    "@openeo/vue-components": "^2.10.1",
+    "@openeo/vue-components": "^2.10.3",
     "ajv": "^6.12.6",
     "axios": "^0.24.0",
     "chart.js": "^3.7.1",

src/components/ServicePanel.vue

@@ -1,7 +1,8 @@
 <template>
 	<DataTable ref="table" :data="data" :columns="columns" class="ServicePanel">
 		<template slot="toolbar">
-			<button title="Add new service" @click="createServiceFromScript()" v-show="supportsCreate" :disabled="!this.hasProcess"><i class="fas fa-plus"></i> Create</button>
+			<button title="Add new permanently stored web service" @click="createServiceFromScript()" v-show="supportsCreate" :disabled="!this.hasProcess"><i class="fas fa-plus"></i> Create</button>
+			<button title="Quickly show the process on map without storing it permanently" @click="quickViewServiceFromScript()" v-show="supportsQuickView" :disabled="!this.hasProcess"><i class="fas fa-map"></i> Show on Map</button>
 		</template>
 		<template #actions="p">
 			<button title="Details" @click="serviceInfo(p.row)" v-show="supportsRead"><i class="fas fa-info"></i></button>
@@ -69,6 +70,23 @@ export default {
 		},
 		supportsDebug() {
 			return this.supports('debugService');
+		},
+		supportsQuickView() {
+			return this.supportsCreate && this.supportsDelete && this.mapService !== null;
+		},
+		mapService() {
+			for(let key in this.serviceTypes) {
+				if (!Utils.isMapServiceSupported(key)) {
+					continue;
+				}
+				let service = this.serviceTypes[key];
+				let hasRequiredParam = Object.values(service.configuration).some(param => param.required === true);
+				if (hasRequiredParam) {
+					continue;
+				}
+				return key;
+			}
+			return null;
 		}
 	},
 	mounted() {
@@ -185,13 +203,17 @@ export default {
 			}
 			return data;
 		},
-		async createService(script, data) {
+		async createService(script, data, quiet = false) {
 			data = this.normalizeToDefaultData(data);
 			try {
 				let service = await this.create({parameters: [script, data.type, data.title, data.description, data.enabled, data.configuration, data.plan, data.budget]});
-				this.serviceCreated(service);
+				if (!quiet) {
+					this.serviceCreated(service);
+				}
+				return service;
 			} catch(error) {
 				Utils.exception(this, error, 'Create Service Error: ' + (data.title || ''));
+				return null;
 			}
 		},
 		createServiceFromScript() {
@@ -206,6 +228,19 @@ export default {
 			];
 			this.emit('showDataForm', "Create new web service", fields, data => this.createService(this.process, data));
 		},
+		async quickViewServiceFromScript() {
+			try {
+				let settings = {
+					title: 'Quick view',
+					type: this.mapService,
+					enabled: true
+				};
+				let service = await this.createService(this.process, settings, true);
+				this.viewService(service, () => this.deleteService(service, true));
+			} catch(error) {
+				Utils.exception(this, error, "Show on Map Error");
+			}
+		},
 		editMetadata(oldService) {
 			this.refreshElement(oldService, service => {
 				var fields = [
@@ -243,19 +278,24 @@ export default {
 				Utils.exception(this, error, "Update Service Error: " + Utils.getResourceTitle(service));
 			}
 		},
-		async deleteService(service) {
-			if (!confirm(`Do you really want to delete the service "${Utils.getResourceTitle(service)}"?`)) {
+		async deleteService(service, quiet = false) {
+			if (!quiet && !confirm(`Do you really want to delete the service "${Utils.getResourceTitle(service)}"?`)) {
 				return;
 			}
 			try {
 				await this.delete({data: service});
 				this.emit('removeWebService', service.id);
 			} catch(error) {
-				Utils.exception(this, error, 'Delete Service Error: ' + Utils.getResourceTitle(service));
+				if (quiet) {
+					console.error(error);
+				}
+				else {
+					Utils.exception(this, error, 'Delete Service Error: ' + Utils.getResourceTitle(service));
+				}
 			}
 		},
-		viewService(service) {
-			this.emit('viewWebService', service);
+		viewService(service, onClose = null) {
+			this.emit('viewWebService', service, onClose);
 		},
 		async shareResults(service) {
 			if (this.canShare) {

src/components/Viewer.vue

@@ -109,8 +109,8 @@ export default {
 			let title = Utils.getResourceTitle(collection, true);
 			this.showMapViewer(service, service.id, title, true);
 		},
-		showWebService(service) {
-			this.showMapViewer(service, service.id, null, true);
+		showWebService(service, onClose = null) {
+			this.showMapViewer(service, service.id, null, true, onClose);
 		},
 		showLogs(resource, defaultTitle = 'Logs', selectTab = true, faIcon = 'fa-bug') {
 			let title = Array.isArray(resource) ? defaultTitle : Utils.getResourceTitle(resource, "Logs");
@@ -169,7 +169,7 @@ export default {
 			this.showViewer(files, title, file => `${job.id}-${file.getUrl()}`, true)
 				.catch(error => Utils.exception(this, error));
 		},
-		showMapViewer(resource, id = null, title = null, reUseExistingTab = false) {
+		showMapViewer(resource, id = null, title = null, reUseExistingTab = false, onClose = null) {
 			if (!title) {
 				title = Utils.getResourceTitle(resource, true);
 			}
@@ -189,7 +189,8 @@ export default {
 			this.$refs.tabs.addTab(
 				title, "fa-map", resource, id, true, true,
 				tab => this.onShow(tab),
-				tab => this.onHide(tab)
+				tab => this.onHide(tab),
+				onClose
 			);
 		},
 		async showViewer(files, title = null, id = null, reUseExistingTab = false) {

src/events.md

@@ -31,7 +31,7 @@ Shows the result of a synchronous job.
 ### viewJobResults(object $jobResult, object $job = null)
 Shows data from a job result document.
 
-### viewWebService(object $service)
+### viewWebService(object $service, function $onClose = null)
 Shows a web service on the map.
 
 ### removeWebService(string $id)