load_collection: details button and give select list of bands #125

src/components/ConnectForm.vue

@@ -270,7 +270,7 @@ export default {
 
 			this.loading = true;
 			try {
-				if (await this.connect({url: this.serverUrl})) {
+				if (await this.connect(this.serverUrl)) {
 					this.addServer(this.serverUrl);
 					if (!programmatically) {
 						window.history.pushState({reset: true, serverUrl: this.serverUrl, autoConnect: true}, "", ".?server=" + this.serverUrl);

src/components/IDE.vue

@@ -142,7 +142,7 @@ export default {
 		}
 	},
 	methods: {
-		...Utils.mapActions(['describeAccount']),
+		...Utils.mapActions(['describeAccount', 'describeCollection']),
 		...Utils.mapActions('userProcesses', {readUserProcess: 'read'}),
 		...Utils.mapMutations('editor', ['setContext', 'setProcess']),
 
@@ -212,7 +212,7 @@ export default {
 		},
 
 		showCollectionInfo(id) {
-			this.connection.describeCollection(id)
+			this.describeCollection(id)
 				.then(info => this.$refs.collectionModal.show(info, this.apiVersion))
 				.catch(error => Utils.error(this, "Sorry, can't load collection details for " + id + "."));
 		},

src/components/ParameterDataType.vue

@@ -21,7 +21,7 @@
 		<!-- Null -->
 		<div class="description" v-else-if="type === 'null'"><i class="fas fa-info-circle"></i> This is set to <strong><tt>null</tt></strong>, which is usually used as placeholder for no-data values or a default value.</div>
 		<!-- Select Boxes (collection id, job id, epsg code, in/output format, service type, billing plan, enums) -->
-		<SelectBox v-else-if="isSelection" v-model="state" :key="type" :type="type" :editable="editable" :schema="schema" :context="dependency"></SelectBox>
+		<SelectBox v-else-if="isSelection" v-model="state" :key="type" :type="type" :editable="editable" :schema="schema" :context="dependency" @onDetails="onSelectDetails"></SelectBox>
 		<!-- Temporal (date, time, date-time, temporal-interval) -->
 		<TemporalPicker v-else-if="isTemporal" v-model="state" :key="type" :type="type" :editable="editable"></TemporalPicker>
 		<!-- Bounding Box -->
@@ -51,7 +51,7 @@
 		<!-- URL -->
 		<input class="fieldValue" v-else-if="type === 'url' || type === 'uri'" v-model="state" type="url" :name="name" :disabled="!editable" />
 		<!-- Objects / Arrays -->
-		<ObjectEditor  v-else-if="nativeType === 'object' || nativeType === 'array'" :editable="editable" :parameter="parameter" :schema="schema" :isObject="nativeType === 'object'" v-model="state" />
+		<ObjectEditor  v-else-if="nativeType === 'object' || nativeType === 'array'" :editable="editable" :parameter="parameter" :schema="schema" :isObject="nativeType === 'object'" v-model="state" :context="context" />
 		<!-- String and all other -->
 		<input class="fieldValue" v-else v-model="state" type="text" :name="name" :disabled="!editable" />
 	</div>
@@ -142,6 +142,8 @@ export default {
 				case 'udf-runtime':
 				case 'udf-runtime-version':
 					return true;
+				case 'band-name':
+					return !!this.dependency;
 				default:
 					return this.schema.isEnum();
 			}
@@ -195,6 +197,8 @@ export default {
 				case 'udf-runtime-version':
 				case 'udf-code':
 					return this.getValueFromOtherParameterByDataType('udf-runtime');
+				case 'band-name':
+					return this.getValueFromOtherParameterByDataType('collection-id');
 				default:
 					return undefined;
 			}
@@ -227,6 +231,11 @@ export default {
 			this.state = [this.state];
 			this.$emit('input', this.state);
 			this.$emit('changeType', 'array');
+		},
+		onSelectDetails() {
+			if (this.type === 'collection-id') {
+				this.emit('showCollection', this.state);
+			}
 		}
 	}
 };

src/components/VisualEditor.vue

@@ -94,7 +94,7 @@ export default {
 	},
 	computed: {
 		...Utils.mapState(['collections']),
-		...Utils.mapGetters(['processRegistry', 'collectionDefaults']),
+		...Utils.mapGetters(['processRegistry']),
 		...Utils.mapGetters('userProcesses', ['supportsMath', 'isMathProcess'])
 	},
 	data() {

src/components/datatypes/ObjectEditor.vue

@@ -15,7 +15,7 @@
 					<input v-if="isObject" v-model="e.key" type="text" :disabled="!editable"/>
 					<template v-else>{{ k }}</template>
 				</label>
-				<ParameterDataTypes :editable="editable" :parameter="elementSchema(k, e.key)" :isItem="true" v-model="e.value" />
+				<ParameterDataTypes :editable="editable" :parameter="elementSchema(k, e.key)" :isItem="true" :context="context" v-model="e.value" />
 				<button v-if="editable" class="deleteBtn" type="button" @click="remove(k)"><i class="fas fa-trash"></i></button>
 				<button v-show="editable && !isObject" class="mover" type="button"><i class="fas fa-arrows-alt"></i></button>
 			</div>
@@ -46,7 +46,8 @@ export default {
 		isObject: {
 			type: Boolean,
 			default: false
-		}
+		},
+		context: {}
 	},
 	data() {
 		return {

src/components/datatypes/SelectBox.vue

@@ -1,5 +1,8 @@
 <template>
-	<MultiSelect v-model="selected" :key="type" ref="htmlElement" label="label" track-by="id" :multiple="multiple" :options="selectOptions" :allowEmpty="false" :preselectFirst="preselect" :disabled="!editable" :deselectLabel="deselectLabel" :taggable="taggable" :tagPlaceholder="tagPlaceholder" @tag="addValue"></MultiSelect>
+	<div class="select-container">
+		<MultiSelect v-model="selected" :key="type" ref="htmlElement" label="label" track-by="id" :multiple="multiple" :options="selectOptions" :allowEmpty="false" :preselectFirst="preselect" :disabled="!editable" :deselectLabel="deselectLabel" :taggable="taggable" :tagPlaceholder="tagPlaceholder" @tag="addValue"></MultiSelect>
+		<button v-if="showDetails" type="button" title="Details" @click="$emit('onDetails')"><i class="fas fa-info"></i></button>
+	</div>
 </template>
 
 <script>
@@ -31,9 +34,26 @@ export default {
 		context: {}
 	},
 	computed: {
+		...Utils.mapGetters(['collectionDefaults']),
 		selectOptions() {
 			let state = [];
 			switch(this.type) {
+				case 'band-name':
+					let collection = this.$store.state.collections.find(c => c.id == this.context);
+					if (Utils.isObject(collection)) {
+						try {
+							state = collection.summaries['eo:bands'].map(band => band.name);
+						} catch (error) {}
+						if (state.length === 0 && Utils.isObject(collection['cube:dimensions'])) {
+							try {
+								let bandDimension = Object.values(collection['cube:dimensions']).find(d => d.type === 'bands');
+								if (bandDimension && Array.isArray(bandDimension.values)) {
+									state = bandDimension.values;
+								}
+							} catch (error) { console.log(error);}
+						}
+					}
+					break;
 				case 'collection-id':
 					state = this.$store.state.collections;
 					break;
@@ -116,6 +136,7 @@ export default {
 						}
 					}
 					return years;
+				case 'band-name':
 				case 'udf-runtime':
 				case 'udf-runtime-version':
 					return state.map(val => this.e(val));
@@ -131,6 +152,9 @@ export default {
 					}
 			}
 		},
+		showDetails() {
+			return (this.type === 'collection-id');
+		},
 		deselectLabel() {
 			return this.multiple ? 'Press enter to remove' : '';
 		},
@@ -197,10 +221,14 @@ export default {
 					this.selected = null;
 					this.preselectFirst();
 					break;
+				case 'band-name':
+					this.describeCollection(this.context);
+					break;
 			}
 		}
 	},
 	methods: {
+		...Utils.mapActions(['describeCollection']),
 		...Utils.mapActions('editor', ['loadEpsgCodes']),
 		e(val) {
 			return {
@@ -216,6 +244,10 @@ export default {
 					this.preselectFirst();
 				}
 			}
+			else if (this.type === 'band-name') {
+				await this.describeCollection(this.context);
+				this.setSelected();
+			}
 			else {
 				this.setSelected();
 			}
@@ -259,4 +291,17 @@ export default {
 }
 </script>
 
-<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
+<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
+
+<style scoped>
+.select-container {
+	display: flex;
+	flex-grow: 1;
+}
+.select-container > div {
+	flex-grow: 1;
+}
+.select-container > button {
+	margin-left: 10px;
+}
+</style>

src/store/index.js

@@ -68,37 +68,27 @@ export default new Vuex.Store({
 			return registry;
 		},
 		collectionDefaults: (state) => (id) => {
-			var collection = state.collections.filter(c => c.id === id);
-			if (collection.length === 0) {
+			var collection = state.collections.find(c => c.id === id);
+			if (!Utils.isObject(collection)) {
 				return {};
 			}
 
 			var spatial_extent = null;
 			try {
-				spatial_extent = Utils.extentToBBox(collection[0].extent.spatial.bbox[0]);
-			} catch (error) {
-				// Catch invalid responses from back-ends
-			}
+				spatial_extent = Utils.extentToBBox(collection.extent.spatial.bbox[0]);
+			} catch (error) {}
 
 			var temporal_extent = null;
 			try {
-				temporal_extent = collection[0].extent.temporal.interval[0];
-			} catch (error) {
-				// Catch invalid responses from back-ends
-			}
+				temporal_extent = collection.extent.temporal.interval[0];
+			} catch (error) {}
 
 			var bands = null;
-			try {
-				bands = collection[0].summaries['eo:bands'].map(band => band.name);
-			} catch (error) {
-				// Catch invalid responses from back-ends
-			}
-
 			return {id, spatial_extent, temporal_extent, bands};
 		},
 	},
 	actions: {
-		async connect(cx, {url}) {
+		async connect(cx, url) {
 			await cx.dispatch('logout');
 
 			// Connect and request capabilities
@@ -203,6 +193,15 @@ export default new Vuex.Store({
 			}
 		},
 
+		async describeCollection(cx, id) {
+			let collection = cx.state.collections.find(c => c.id === id);
+			if (!collection || !collection._loaded) {
+				collection = await cx.state.connection.describeCollection(id);
+				cx.commit('fillCollection', collection);
+			}
+			return collection;
+		},
+
 		async logout(cx) {
 			if (cx.getters.isAuthenticated) {
 				// Logout (mostly for OIDC)
@@ -257,6 +256,13 @@ export default new Vuex.Store({
 				.filter(p => (typeof p.id === 'string'))
 				.sort(Utils.sortById);
 		},
+		fillCollection(state, data) {
+			let index = state.collections.findIndex(c => c.id === data.id);
+			if (index !== -1) {
+				data._loaded = true;
+				Vue.set(state.collections, index, data);
+			}
+		},
 		collections(state, data) {
 			state.collections = data.collections
 				.filter(c => (typeof c.id === 'string'))