From 098ace6090f3e4366eb818100c828697bb9f89cc Mon Sep 17 00:00:00 2001
From: Matthias Mohr <m.mohr@uni-muenster.de>
Date: Wed, 19 Apr 2023 12:05:55 +0200
Subject: [PATCH 1/2] Draft for app mode (#303)

---
 README.md                               |  3 +-
 config.js                               |  1 +
 src/Page.vue                            | 12 +++-
 src/components/IDE.vue                  | 29 ++++++--
 src/components/Viewer.vue               | 46 +++++++++---
 src/components/maps/ChannelControl.vue  | 22 ++++--
 src/components/maps/GeoTiffMixin.vue    |  8 +++
 src/components/maps/MapMixin.vue        |  9 ++-
 src/components/modals/ShareModal.vue    |  2 +-
 src/components/share/CopyUrl.vue        | 12 +++-
 src/components/share/ShareEditor.vue    | 74 +++++++++++++++++++
 src/components/share/ShareInterface.vue | 94 ++++++++++++++++++-------
 src/components/share/TwitterShare.vue   |  2 +-
 src/components/viewer/MapViewer.vue     |  4 +-
 src/store/editor.js                     | 72 ++++++++++++++++++-
 src/store/index.js                      | 11 ++-
 src/utils.js                            | 26 ++++++-
 17 files changed, 369 insertions(+), 58 deletions(-)
 create mode 100644 src/components/share/ShareEditor.vue

diff --git a/README.md b/README.md
index 3d3a7417f..9ce87c065 100644
--- a/README.md
+++ b/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>
 
diff --git a/config.js b/config.js
index 0e67a8a7b..b7eb7d582 100644
--- a/config.js
+++ b/config.js
@@ -46,6 +46,7 @@ export default {
 
 	// List of supported batch job sharing services
 	supportedBatchJobSharingServices: [
+		'ShareEditor',
 		'CopyUrl',
 		'TwitterShare'
 	],
diff --git a/src/Page.vue b/src/Page.vue
index 4bbc84ce0..d79eead96 100644
--- a/src/Page.vue
+++ b/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) {
diff --git a/src/components/IDE.vue b/src/components/IDE.vue
index fe4e336f4..773fe6ec5 100644
--- a/src/components/IDE.vue
+++ b/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,7 +101,15 @@ 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 {
@@ -109,11 +117,14 @@ export default {
 			}
 		},
 		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;
 
diff --git a/src/components/Viewer.vue b/src/components/Viewer.vue
index f14e84658..4ed88dd85 100644
--- a/src/components/Viewer.vue
+++ b/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]) {
diff --git a/src/components/maps/ChannelControl.vue b/src/components/maps/ChannelControl.vue
index 1f6d637dc..35168dd83 100644
--- a/src/components/maps/ChannelControl.vue
+++ b/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) {
diff --git a/src/components/maps/GeoTiffMixin.vue b/src/components/maps/GeoTiffMixin.vue
index 43a041960..16c440fc0 100644
--- a/src/components/maps/GeoTiffMixin.vue
+++ b/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();
diff --git a/src/components/maps/MapMixin.vue b/src/components/maps/MapMixin.vue
index dfc6c58de..e1fa3c1de 100644
--- a/src/components/maps/MapMixin.vue
+++ b/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);
 		},
diff --git a/src/components/modals/ShareModal.vue b/src/components/modals/ShareModal.vue
index f4a3120c0..a129e0f28 100644
--- a/src/components/modals/ShareModal.vue
+++ b/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" />
diff --git a/src/components/share/CopyUrl.vue b/src/components/share/CopyUrl.vue
index 29421dfea..905458176 100644
--- a/src/components/share/CopyUrl.vue
+++ b/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>
diff --git a/src/components/share/ShareEditor.vue b/src/components/share/ShareEditor.vue
new file mode 100644
index 000000000..f73b5011f
--- /dev/null
+++ b/src/components/share/ShareEditor.vue
@@ -0,0 +1,74 @@
+<template>
+	<ShareInterface v-if="canCopy"
+		id="share-editor-copy" icon="fa-columns" :title="name" :description="description" :action="copy"
+		actionDefaultIcon="fa-clipboard" actionSuccessIcon="fa-clipboard-check" @stateChanged="state => this.state = state">
+	</ShareInterface>
+</template>
+
+<script>
+import ShareMixin from './ShareMixin';
+import ShareInterface from './ShareInterface.vue';
+import Utils from '../../utils';
+
+export default {
+	name: 'ShareEditor',
+	components: {
+		ShareInterface
+	},
+	mixins: [
+		ShareMixin
+	],
+	data() {
+		return {
+			state: 'default',
+			canCopy: false
+		};
+	},
+	computed: {
+		...Utils.mapState('editor', ['viewerOptions']),
+		description() {
+			if (this.state === 'error') {
+				return 'Copying to clipboard failed';
+			}
+			else if (this.state === 'success') {
+				return 'Copied to clipboard';
+			}
+			else {
+				return `Publish as an interactive app and copy the URL of the app to the clipboard — experimental`;
+			}
+		},
+		name() {
+			return this.$config.appName;
+		},
+		editorUrl() {
+			let url = new URL(window.location.href);
+			let query = new URLSearchParams(url.search);
+			query.set('result', this.url); // Pass canonical link, implies discover = 1
+			if (Array.isArray(this.viewerOptions.channels) && this.viewerOptions.channels.length > 0) {
+				let channels = this.viewerOptions.channels.map(ch => `${ch.id}|${ch.name}|${ch.min}|${ch.max}`).join(',');
+				query.set('app~channels', channels);
+			}
+			url.search = query;
+			return url.toString();
+		}
+	},
+	methods: {
+		copy() {
+			return this.$clipboard(this.editorUrl);
+		}
+	},
+	mounted() {
+		this.canCopy = navigator && navigator.clipboard && typeof navigator.clipboard.writeText === 'function';
+	}
+}
+</script>
+
+<style lang="scss">
+@import '../../../theme.scss';
+
+#share-editor-copy {
+	&.shareable > .entry {
+		color: $mainColor;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/components/share/ShareInterface.vue b/src/components/share/ShareInterface.vue
index bcdfd404e..8f9411843 100644
--- a/src/components/share/ShareInterface.vue
+++ b/src/components/share/ShareInterface.vue
@@ -1,14 +1,23 @@
 <template>
 	<div :class="classes" :id="id">
 		<div class="entry" @click="toggle">
-			<span v-if="icon" class="toggle">
-				<img v-if="iconIsImage" :src="icon" />
-				<i v-else :class="['fas', icon]"></i>
+			<span v-if="actionIcon" class="toggle">
+				<img v-if="actionIconIsImage" :src="actionIcon" />
+				<i v-else :class="faActionIcon"></i>
 			</span>
 			<slot name="summary" v-bind="$props" :expanded="expanded" :state="state" :icon="icon">
 				<div class="summary">
-					<strong>{{ title }}</strong>
-					<small v-if="description">{{ description }}</small>
+					<strong>
+						<span v-if="icon" class="icon">
+							<img v-if="iconIsImage" :src="icon" />
+							<i v-else :class="faIcon"></i>
+						</span>
+						{{ title }}
+					</strong>
+					<template v-if="description">
+						<small class="sep">—</small>
+						<small class="description" v-if="description">{{ description }}</small>
+					</template>
 				</div>
 			</slot>
 		</div>
@@ -47,20 +56,24 @@ export default {
 			default: null
 		},
 		// Font Awesome Icon identifiers or a URL to an image (png, jpeg, gif, webp)
+		icon: { // Primary icon
+			type: [String, Array],
+			default: null
+		},
 		actionDefaultIcon: { // Default
-			type: String,
+			type: [String, Array],
 			default: 'fa-share'
 		},
-		actionLoadingIcon: { // When loding
-			type: String,
+		actionLoadingIcon: { // When loading
+			type: [String, Array],
 			default: 'fa-spinner fa-spin'
 		},
 		actionSuccessIcon: { // on success (for a couple of seconds)
-			type: String,
+			type: [String, Array],
 			default: 'fa-check'
 		},
 		actionErrorIcon: { // on error (for a couple of seconds)
-			type: String,
+			type: [String, Array],
 			default: 'fa-times'
 		}
 	},
@@ -87,7 +100,18 @@ export default {
 		iconIsImage() {
 			return this.icon.includes('/');
 		},
-		icon() {
+		faIcon() {
+			if (Array.isArray(this.icon)) {
+				return this.icon;
+			}
+			else {
+				return ['fas', this.icon];
+			}
+		},
+		actionIconIsImage() {
+			return this.actionIcon.includes('/');
+		},
+		actionIcon() {
 			if (typeof this.action === 'function') {
 				let fn = this.state[0].toUpperCase() + this.state.substr(1);
 				return this[`action${fn}Icon`];
@@ -98,6 +122,14 @@ export default {
 			else {
 				return this.expanded ? 'fa-caret-down' : 'fa-caret-right';
 			}
+		},
+		faActionIcon() {
+			if (Array.isArray(this.actionIcon)) {
+				return this.actionIcon;
+			}
+			else {
+				return ['fas', this.actionIcon];
+			}
 		}
 	},
 	watch: {
@@ -138,11 +170,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../../../theme.scss';
+
 .shareable {
 	> .entry {
 		display: flex;
-		color: #1665B6;
-		align-items: center;
+		color: $mainColor;
+		align-items: top;
 		padding: 0.5em;
 		font-size: 1.2em;
 		line-height: 1.5em;
@@ -156,21 +190,22 @@ export default {
 			cursor: pointer;
 			flex-grow: 1;
 			display: flex;
-			align-items: center;
+			align-items: top;
 
-			> small {
-				&:before {
-					content: ' — ';
-					margin-left: 0.6em;
-					margin-right: 0.4em;
-				}
+			> strong {
+				white-space: nowrap;
+			}
+
+			> small.sep {
+				padding: 0 0.5em;
 			}
 		}
 
-		> .toggle {
+		> .toggle,
+		.icon {
+			display: inline-block;
 			user-select: none;
 			width: 1.5em;
-			margin-right: 0.5rem;
 			text-align: center;
 
 			img {
@@ -178,18 +213,25 @@ export default {
 				max-width: 1.5em;
 			}
 		}
+		> .toggle {
+			margin-right: 0.5rem;
+		}
 	}
 	> .customize {
 		padding: 1em;
 	}
-	&.expanded > .entry {
+	.entry > .toggle {
+		color: #555;
+	}
+	&.expanded > .entry,
+	&.expanded > .entry > .toggle {
 		color: white;
-		background-color: #1665B6;
+		background-color: $mainColor;
 	}
-	&.success > .entry {
+	&.success > .entry > .toggle {
 		color: green !important;
 	}
-	&.error > .entry {
+	&.error > .entry > .toggle {
 		color: maroon !important;
 	}
 }
diff --git a/src/components/share/TwitterShare.vue b/src/components/share/TwitterShare.vue
index 604782586..edfa492e3 100644
--- a/src/components/share/TwitterShare.vue
+++ b/src/components/share/TwitterShare.vue
@@ -1,5 +1,5 @@
 <template>
-	<ShareInterface id="share-twitter" title="Twitter" description="Share your data as a tweet">
+	<ShareInterface id="share-twitter" :icon="['fab', 'fa-twitter']" title="Twitter" description="Share your STAC metadata as a tweet">
 		<template #customize>
 			<textarea v-model="text"></textarea><br />
 			<button @click="tweet">Open Twitter</button>
diff --git a/src/components/viewer/MapViewer.vue b/src/components/viewer/MapViewer.vue
index c28bfac8b..fde8e9084 100644
--- a/src/components/viewer/MapViewer.vue
+++ b/src/components/viewer/MapViewer.vue
@@ -5,7 +5,7 @@
 				<ProgressControl ref="progress" :map="map" />
 				<UserLocationControl :map="map" />
 				<TextControl v-if="isGeoTiff" :text="textControlText" />
-				<ChannelControl v-if="isGeoTiff && !colorMap" :bands="bands" @update="updateGeoTiffStyle" />
+				<ChannelControl v-if="isGeoTiff && !colorMap" :bands="bands" :defaultChannels="defaultChannels" @update="updateGeoTiffStyle" />
 				<div v-if="loading" class="map-loading">
 					<i class="fas fa-spinner fa-spin"></i>
 					<span>Loading map...</span>
@@ -195,11 +195,11 @@ export default {
 					if (proj.basemap || ['EPSG:3857', 'EPSG:4326'].includes(proj.getCode())) {
 						this.addBasemaps();
 					}
+					this.addGeoTiff(data);
 					let stac = this.data.getContext();
 					if (stac) {
 						this.addExtent(stac, false);
 					}
-					this.addGeoTiff(data);
 				}
 				else if (this.isWebService && Utils.isMapServiceSupported(this.data.type)) {
 					this.addBasemaps();
diff --git a/src/store/editor.js b/src/store/editor.js
index 7020af530..320dca412 100644
--- a/src/store/editor.js
+++ b/src/store/editor.js
@@ -1,3 +1,4 @@
+import Vue from 'vue';
 import Utils from '../utils';
 import { Job, Service, UserProcess } from '@openeo/js-client';
 import { ProcessGraph } from '@openeo/js-processgraphs';
@@ -6,6 +7,7 @@ const serverStorage = "serverUrls";
 
 const getDefaultState = () => {
 	return {
+		appMode: null,
 		storedServers: JSON.parse(localStorage.getItem(serverStorage) || "[]"),
 		context: null,
 		process: null,
@@ -16,7 +18,8 @@ const getDefaultState = () => {
 		initialNode: null,
 		openWizard: null,
 		openWizardProps: {},
-		collectionPreview: null
+		collectionPreview: null,
+		viewerOptions: {}
 	};
 };
 
@@ -63,6 +66,21 @@ export default {
 					}
 				});
 			}
+		},
+		async loadForAppMode(cx) {
+			if (!cx.state.appMode) {
+				return;
+			}
+
+			try {
+				let response = await axios(cx.state.appMode.resultUrl);
+				if (Utils.isObject(response.data)) {
+					cx.commit('setAppModeData', response.data);
+				}
+			} catch (error) {
+				console.error(error);
+				throw new Error("Sorry, the shared data is not available anymore!");
+			}
 		}
 	},
 	mutations: {
@@ -75,6 +93,58 @@ export default {
 		setInitialNode(state, node) {
 			state.initialNode = node;
 		},
+		setAppMode(state, appMode) {
+			if (appMode.channels) {
+				try {
+					appMode.channels = appMode.channels
+						.split(',')
+						.map((row, i) => {
+							let parts = row.split('|');
+							return {
+								id: parseInt(parts[0], 10),
+								name: parts[1],
+								min: parts[2] ? parseFloat(parts[2]) : undefined,
+								max: parts[3] ? parseFloat(parts[3]) : undefined
+							};
+						});
+				} catch (error) {
+					console.error(error);
+					delete appMode.channels;
+				}
+			}
+			state.appMode = {
+				...appMode,
+				title: 'Results',
+				data: null,
+				expires: null
+			};
+		},
+		setAppModeData(state, data) {
+			Vue.set(state.appMode, 'data', data);
+
+			let process, title, expires;
+			if (data.type === 'Collection') {
+				process = Utils.getProcessingExpression(data) || Utils.getProcessingExpression(data.summaries);
+				title = data.title;
+				expires = data.expires;
+			}
+			else if (data.type === 'Feature') {
+				process = Utils.getProcessingExpression(data.properties);
+				title = data.properties?.title;
+				expires = data.properties?.expires;
+			}
+			if (process) {
+				state.process = process;
+			}
+			if (title) {
+				Vue.set(state.appMode, 'title', title);
+				Vue.set(state.appMode, 'expires', expires);
+				state.context = title;
+			}
+		},
+		setViewerOptions(state, options) {
+			state.viewerOptions = options || {};
+		},
 		setOpenWizard(state, {component, options}) {
 			state.openWizard = component;
 			if (component) {
diff --git a/src/store/index.js b/src/store/index.js
index 44f688d7a..f2c514e3b 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -240,7 +240,16 @@ export default new Vuex.Store({
 				try {
 					await cx.dispatch('editor/loadInitialProcess');
 				} catch (error) {
-					errors.push(error)
+					errors.push(error);
+				}
+			}
+
+			// Request batch job result for app mode
+			if (!refresh) {
+				try {
+					await cx.dispatch('editor/loadForAppMode');
+				} catch (error) {
+					errors.push(error);
 				}
 			}
 
diff --git a/src/utils.js b/src/utils.js
index 3584c1901..0ebc68125 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -323,7 +323,10 @@ class Utils extends VueUtils {
 	static getResourceTitle(obj, showType = false) {
 		let title;
 		let isObj = Utils.isObject(obj);
-		if (obj instanceof UserProcess) {
+		if (typeof obj === 'string') {
+			title = obj;
+		}
+		else if (obj instanceof UserProcess) {
 			title = obj.id;
 		}
 		else if (obj instanceof UserFile) {
@@ -407,6 +410,27 @@ class Utils extends VueUtils {
 		let [id, ...namespace] = process.split('@');
 		return [id, namespace.join('@')];
 	}
+	static getProcessingExpression(stac) {
+		let key = 'processing:expression';
+		if (!Utils.isObject(stac) || !stac[key]) {
+			return null;
+		}
+		let obj = stac[key];
+		if (Array.isArray(obj)) {
+			if (obj.length > 0) {
+				obj = obj[0];
+			}
+			else {
+				return null;
+			}
+		}
+		if (Utils.isObject(obj) && obj.format === 'openeo' && Utils.isObject(obj.expression)) {
+			return obj.expression;
+		}
+		else {
+			return null;
+		}
+	}
 
 };
 

From 1e8de71f5fd8f97582ff58c834d2a97d189b50c5 Mon Sep 17 00:00:00 2001
From: Matthias Mohr <m.mohr@uni-muenster.de>
Date: Wed, 19 Apr 2023 12:08:10 +0200
Subject: [PATCH 2/2] v0.12.3

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

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