Merge remote-tracking branch 'origin/master'

README.md

@@ -34,7 +34,8 @@ You can use some query parameters to set initial state to the Editor.
   * Otherwise, the value must correspond to the node identifier without `#` at the beginning.
 * `wizard`: Opens a specific wizard on start-up. The value must correspond to the component name of the wizard. Wizard options can be set by provding them as query parameter prefixed with `wizard~`, e.g. `&wizard~collection=SENTINEL2-L2A`.
   * Usecase "Run UDP": For `wizard=UDP` you can provide a process in the query parameter `wizard~process` which has the same format as in `process` above and will open a wizard for this UDP.
-* `preview-collection` Shows the preview of a Collection on the map upon start.
+* `preview-collection`: Shows the preview of a Collection on the map upon start.
+* `result`: Loads a STAC Item or Collection in "App mode".
 
 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

@@ -46,6 +46,7 @@ export default {
 
 	// List of supported batch job sharing services
 	supportedBatchJobSharingServices: [
+		'ShareEditor',
 		'CopyUrl',
 		'TwitterShare'
 	],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openeo/web-editor",
-  "version": "0.12.2",
+  "version": "0.12.3",
   "apiVersions": [
     "1.0.0-rc.2",
     "1.0.0",

src/Page.vue

@@ -70,7 +70,15 @@ export default {
 		});
 		this.setCollectionPreview(Utils.param('preview-collection'));
 
-		if (Utils.param('discover')) {
+		let resultUrl = Utils.param('result');
+		if (resultUrl) {
+			this.setAppMode({
+				resultUrl,
+				...Utils.paramsForPrefix('app')
+			});
+		}
+
+		if (Utils.param('discover') || resultUrl) {
 			this.skipLogin = true;
 		}
 
@@ -121,7 +129,7 @@ export default {
 	methods: {
 		...Utils.mapActions(['describeAccount', 'describeCollection', 'loadProcess']),
 		...Utils.mapMutations(['startActiveRequest', 'endActiveRequest', 'addProcessNamespacesToRequest']),
-		...Utils.mapMutations('editor', ['setInitialProcess', 'setInitialNode', 'setOpenWizard', 'setCollectionPreview']),
+		...Utils.mapMutations('editor', ['setInitialProcess', 'setInitialNode', 'setOpenWizard', 'setAppMode', 'setCollectionPreview']),
 		setTitle(subtitle) {
 			var title = `${this.$config.serviceName} ${this.$config.appName}`;
 			if (subtitle) {

src/components/IDE.vue

@@ -1,6 +1,6 @@
 <template>
 	<div id="wrapper">
-		<div id="ide" :class="{authenticated: isAuthenticated}">
+		<div id="ide" :class="{authenticated: isAuthenticated, appMode: Boolean(appMode)}">
 			<header class="navbar">
 				<Logo />
 				<ul id="menu">
@@ -78,7 +78,7 @@ export default {
 	},
 	computed: {
 		...Utils.mapState(['connection', 'isAuthenticated']),
-		...Utils.mapState('editor', ['context', 'process', 'collectionPreview', 'openWizard', 'openWizardProps']),
+		...Utils.mapState('editor', ['appMode', 'context', 'process', 'collectionPreview', 'openWizard', 'openWizardProps']),
 		...Utils.mapGetters(['title', 'apiVersion', 'supports']),
 		...Utils.mapGetters('editor', ['hasProcess']),
 		...Utils.mapGetters('jobs', {supportsJobUpdate: 'supportsUpdate'}),
@@ -101,19 +101,30 @@ export default {
 			return this.supports('validateProcess');
 		},
 		splitpaneSizeH() {
-			if (this.showViewer) {
+			if (this.appMode) {
+				if (this.process) {
+					return [0, 50, 50];
+				}
+				else {
+					return [0, 0, 100];
+				}
+			}
+			else if (this.showViewer) {
 				return [20, 40, 40];
 			}
 			else {
 				return [25, 75, 0];
 			}
 		},
 		splitpaneSizeV() {
-			if (this.isAuthenticated) {
-				return [50,50];
+			if (this.appMode) {
+				return [100, 0];
+			}
+			else if (this.isAuthenticated) {
+				return [50, 50];
 			}
 			else {
-				return [99,1];
+				return [99, 1];
 			}
 		}
 	},
@@ -304,6 +315,9 @@ export default {
 #workspace {
 	min-width: 400px;
 }
+.appMode #workspace {
+	min-width: 0;
+}
 #discovery {
 	height: 100%;
 	overflow: auto;
@@ -321,6 +335,9 @@ export default {
 #editor, .authenticated #user {
 	min-height: 150px;
 }
+.appMode #user {
+	min-height: 0;
+}
 #editor {
 	padding-bottom: 0.5rem;
 

src/components/Viewer.vue

@@ -3,9 +3,9 @@
 		<Tabs id="viewerTabs" ref="tabs" @empty="onTabsEmpty">
 			<template #empty>Nothing to show right now...</template>
 			<template #dynamic="{ tab }">
-				<LogViewer v-if="logViewerIcons.includes(tab.icon)" :data="tab.data" @mounted="onMounted" />
-				<MapViewer v-else-if="tab.icon === 'fa-map'" :data="tab.data" :removableLayers="isCollectionPreview(tab.data)" @mounted="onMounted" /> <!-- for services -->
-				<component v-else-if="tab.data.component" :is="tab.data.component" v-on="tab.data.events" v-bind="tab.data.props" @mounted="onMounted" /> <!-- for file formats -->
+				<LogViewer v-if="logViewerIcons.includes(tab.icon)" :data="tab.data" @mounted="onMounted" @options="onOptionsChanged" />
+				<MapViewer v-else-if="tab.icon === 'fa-map'" :data="tab.data" :removableLayers="isCollectionPreview(tab.data)" @mounted="onMounted" @options="onOptionsChanged" /> <!-- for services -->
+				<component v-else-if="tab.data.component" :is="tab.data.component" v-on="tab.data.events" v-bind="tab.data.props" @mounted="onMounted" @options="onOptionsChanged" /> <!-- for file formats -->
 				<div class="unsupported" v-else>
 					Sorry, the viewer doesn't support showing this type of data.
 					<template v-if="isFormat(tab.data)">
@@ -45,6 +45,14 @@ export default {
 		this.listen('viewLogs', this.showLogs);
 		this.listen('removeWebService', this.closeTabWithLogs);
 		this.listen('removeBatchJob', this.closeTabWithLogs);
+
+		if (this.appMode) {
+			this.showJobResults(this.appMode.data, null, this.appMode.title);
+			if (typeof this.appMode.expires === 'string') {
+				let expires = this.appMode.expires.replace('T', '').replace(/(\.\d)?(Z|[+-]\d\d:\d\d])$/, ''); // todo: improve date rendering
+				Utils.info(this, `The shared data is available until ${expires}`);
+			}
+		}
 	},
 	data() {
 		return {
@@ -55,17 +63,20 @@ export default {
 				'fa-bug',
 				'fa-bomb',
 				'fa-tasks'
-			]
+			],
+			options: null
 		}
 	},
 	computed: {
 		...Utils.mapState(['connection']),
+		...Utils.mapState('editor', ['appMode']),
 		nextTabId() {
 			return `viewer~${this.tabIdCounter}`;
 		}
 	},
 	methods: {
 		...Utils.mapActions(['describeCollection']),
+		...Utils.mapMutations('editor', ['setViewerOptions']),
 		isCollectionPreview(data) {
 			return (data instanceof Service && Utils.isObject(data.attributes) && data.attributes.preview === true);
 		},
@@ -156,17 +167,31 @@ export default {
 					}
 				});
 		},
-		showJobResults(stac, job) {
+		showJobResults(stac, job = null, title = null) {
+			if (title === null) {
+				if (stac.title) {
+					title = stac.title;
+				}
+				else if (stac.properties && stac.properties.title) {
+					title = stac.properties.title
+				}
+				else {
+					title = Utils.getResourceTitle(job, true);
+				}
+			}
+			let id = stac.id;
+			if (job && job.id) {
+				id = job.id;
+			}
 			let files = this.registry.createFilesFromSTAC(stac, job);
 			if (files.length === 0) {
-				Utils.error(this, 'No results available for job "' + Utils.getResourceTitle(job) + '".');
+				Utils.error(this, 'No results available for "' + title + '".');
 				return;
 			}
 			else if (files.length > 5 && !confirm(`You are about to open ${files.length} individual files / tabs, which could slow down the web browser. Are you sure you want to open all of them?`)) {
 				return;
 			}
-			let title = Utils.getResourceTitle(job, true);
-			this.showViewer(files, title, file => `${job.id}-${file.getUrl()}`, true)
+			this.showViewer(files, title, file => `${id}-${file.getUrl()}`, true)
 				.catch(error => Utils.exception(this, error));
 		},
 		showMapViewer(resource, id = null, title = null, reUseExistingTab = false, onClose = null) {
@@ -274,12 +299,17 @@ export default {
 		},
 		onMounted(component) {
 			this.callChildFunction(component, 'onShow');
+			this.setViewerOptions();
 		},
 		onHide(tab) {
 			this.callChildFunction(tab, 'onHide');
 		},
 		onTabsEmpty(hasNone) {
 			this.$emit('empty', hasNone);
+			this.setViewerOptions();
+		},
+		onOptionsChanged(options) {
+			this.setViewerOptions(options);
 		},
 		uniqueTitle(title) {
 			if (!this.tabTitleCounter[title]) {

src/components/maps/ChannelControl.vue

@@ -44,6 +44,10 @@ export default {
 		bands: {
 			type: Array,
 			default: () => []
+		},
+		defaultChannels: {
+			type: Array,
+			default: () => []
 		}
 	},
 	computed: {
@@ -62,8 +66,8 @@ export default {
 	},
 	data() {
 		return {
-			channels: [],
-			isGray: this.bands.length === 1
+			channels: this.defaultChannels,
+			isGray: this.defaultChannels.length === 1 || this.bands.length === 1
 		}
 	},
 	watch: {
@@ -92,9 +96,17 @@ export default {
 			return (typeof value === 'number');
 		},
 		updateChannels() {
-			this.channels = this.bands
-				.slice(0, this.isGray ? 1 : 3)
-				.map(band => Object.assign({}, band));
+			if (this.defaultChannels.length > 0) {
+				this.channels = this.defaultChannels;
+				if (this.defaultChannels.length === 1) {
+					this.isGray = true;
+				}
+			}
+			else {
+				this.channels = this.bands
+					.slice(0, this.isGray ? 1 : 3)
+					.map(band => Object.assign({}, band));
+			}
 			// If only two channels are available, add a third one so that we have enough for RGB
 			// If we only have one channel it is grayscale
 			if (this.channels.length === 2) {

src/components/maps/GeoTiffMixin.vue

@@ -19,10 +19,14 @@ export default {
 			source: null,
 			colorMap: null,
 			noData: [],
+			defaultChannels: [],
 			channels: [],
 			bands: []
 		}
 	},
+	computed: {
+		...Utils.mapState('editor', ['appMode'])
+	},
 	methods: {
 		getBandVar(i) {
 			return ['band', ['var', `${i}band`]];
@@ -43,6 +47,9 @@ export default {
 		},
 		async addGeoTiff(geotiff, title = "GeoTiff") {
 			this.bands = geotiff.getBands();
+			if (this.appMode && this.appMode.channels) {
+				this.defaultChannels = this.appMode.channels;
+			}
 			this.colorMap = geotiff.getColorMap();
 			this.noData = geotiff.getNoData();
 
@@ -122,6 +129,7 @@ export default {
 			switch(type) {
 				case 'channels':
 					this.channels = data;
+					this.setOptions('channels', data);
 					break;
 			}
 			this.setStyle();

src/components/maps/MapMixin.vue

@@ -43,7 +43,8 @@ export default {
 	data() {
 		return {
 			map: null,
-			id: `map_` + idCounter++
+			id: `map_` + idCounter++,
+			options: {}
 		};
 	},
 	watch: {
@@ -59,6 +60,7 @@ export default {
 			if (this.show) {
 				await this.$nextTick();
 				await this.renderMap();
+				this.$emit('options', this.options);
 			}
 		},
 		async createMap(opts = 'EPSG:3857') {
@@ -166,6 +168,11 @@ export default {
 			return baselayers;
 		},
 
+		setOptions(key, value) {
+			this.options[key] = value;
+			this.$emit('options', this.options);
+		},
+
 		onShow() {
 			this.listen('windowResized', this.updateMapSize);
 		},

src/components/modals/ShareModal.vue

@@ -1,5 +1,5 @@
 <template>
-	<Modal minWidth="50%" title="Export / Share" @closed="$emit('closed')">
+	<Modal width="70%" title="Export / Share" @closed="$emit('closed')">
 		<ul class="share-list">
 			<li v-for="component in components" :key="component">
 				<component :is="component" v-bind="componentProps" />

src/components/share/CopyUrl.vue

@@ -1,6 +1,6 @@
 <template>
 	<ShareInterface v-if="canCopy"
-		id="share-copy" title="Copy" :description="description" :action="copy"
+		id="share-copy" icon="fa-file-code" title="STAC metadata" :description="description" :action="copy"
 		actionDefaultIcon="fa-clipboard" actionSuccessIcon="fa-clipboard-check" @stateChanged="state => this.state = state">
 	</ShareInterface>
 </template>
@@ -32,7 +32,7 @@ export default {
 				return 'Copied to clipboard';
 			}
 			else {
-				return 'Copy the public URL to your clipboard';
+				return 'Copy the public URL of the STAC metadata to your clipboard';
 			}
 		}
 	},
@@ -43,6 +43,14 @@ export default {
 	},
 	mounted() {
 		this.canCopy = navigator && navigator.clipboard && typeof navigator.clipboard.writeText === 'function';
+
+		let link = document.createElement('link');
+		link.as = "font";
+		link.type = "font/woff2";
+		link.crossOrigin = "";
+		link.href = "https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-brands-400.woff2";
+		let head = document.getElementsByTagName("head")[0];
+		head.appendChild(link);
 	}
 }
 </script>