Merge remote-tracking branch 'origin/dev', release 1.0.0-rc.1

README.md

@@ -2,7 +2,7 @@
 
 A set of [Vue](https://vuejs.org) components for [openEO](http://openeo.org).
 
-This library's version is **1.0.0-beta.6** and supports **openEO API versions 0.4.x and 1.0.x**. Legacy versions are available as releases.
+This library's version is **1.0.0-rc.1** and supports **openEO API versions 0.4.x and 1.0.x**. Legacy versions are available as releases.
 
 ## Components
 
@@ -55,8 +55,8 @@ Visualizes a collection following the STAC-based collection description.
 - `collection-after-summary`
 - `collection-before-details`
 - `collection-after-details`
-- `collection-spatial-extent` - Custom HTML to display the spatial extent, e.g. a map. The variable `extent` is provides an array containing four elements (west, south, east, north) with the WGS84 coordinates.
-- `collection-temporal-extent` - Custom HTML to display the temporal extent. The variable `extent` is provides an array with two elements (start, end). Each is a RFC3339 compatible `date-time` or `null` to indicate an open range.
+- `collection-spatial-extents` - Custom HTML to display the spatial extents, e.g. a map. The variable `extents` provides an array of arrays, each containing four elements (west, south, east, north) with the WGS84 coordinates.
+- `collection-temporal-extents` - Custom HTML to display the temporal extents. The variable `extents` provides an array of arrays, each with two elements (start, end). Both are RFC3339 compatible `date-time`, or `null` to indicate an open range.
 
 
 ### `Description`
@@ -355,7 +355,7 @@ Visualizes the supported UDF (user-defined function) runtimes of the back-end.
 **Properties:**
 
 - `version` (string): openEO version
-- `udfRuntimes` (object): Supported UDF runtimes as defined by the openEO API.
+- `runtimes` (object): Supported UDF runtimes as defined by the openEO API.
 
 **Methods:**
 

components/Collection.vue

@@ -46,24 +46,25 @@
 				<span class="value" v-else>{{ collection.license }}</span>
 			</section>
 
-			<section class="extent" v-if="temporalInterval || boundingBox">
-				<template v-if="temporalInterval">
+			<section class="extent" v-if="temporalIntervals.length || boundingBoxes.length">
+				<template v-if="temporalIntervals.length">
 					<h3>Temporal Extent</h3>
-					<slot name="collection-temporal-extent" :extent="temporalInterval">
-						<p>{{ stac.formatTemporalExtent(temporalInterval) }}</p>
+					<slot name="collection-temporal-extents" :extents="temporalIntervals">
+						<ul v-for="(interval, i) in temporalIntervals" :key="i">
+							<li>{{ stac.formatTemporalExtent(interval) }}</li>
+						</ul>
 					</slot>
 				</template>
 
-				<template v-if="boundingBox">
+				<template v-if="boundingBoxes.length">
 				<h3>Spatial Extent</h3>
-					<slot name="collection-spatial-extent" :extent="boundingBox">
+					<slot name="collection-spatial-extents" :extents="boundingBoxes">
 						<div :id="'map-' + collection.id" class="map" ref="mapContainer">
-							<ul v-if="!map">
-								<li>North: {{boundingBox[3]}}</li>
-								<li>South: {{boundingBox[1]}}</li>
-								<li>East: {{boundingBox[2]}}</li>
-								<li>West: {{boundingBox[0]}}</li>
-							</ul>
+							<template v-if="!map">
+								<ul v-for="(bbox, i) in boundingBoxes" :key="i">
+									<li>Latitudes: {{ bbox[1] }} / {{ bbox[3] }}, Longitudes: {{ bbox[0] }} / {{ bbox[2] }}</li>
+								</ul>
+							</template>
 						</div>
 					</slot>
 				</template>
@@ -205,19 +206,19 @@ export default {
 		}
 	},
 	computed: {
-		temporalInterval() {
+		temporalIntervals() {
 			let e = this.collection.extent;
-			if (CommonUtils.isObject(e) && CommonUtils.isObject(e.temporal) && CommonUtils.size(e.temporal.interval) > 0 && e.temporal.interval[0].length >= 2) {
-				return e.temporal.interval[0];
+			if (CommonUtils.isObject(e) && CommonUtils.isObject(e.temporal) && CommonUtils.size(e.temporal.interval) > 0) {
+				return e.temporal.interval.filter(interval => interval.length >= 2);
 			}
-			return null;
+			return [];
 		},
-		boundingBox() {
+		boundingBoxes() {
 			let e = this.collection.extent;
-			if (CommonUtils.isObject(e) && CommonUtils.isObject(e.spatial) && CommonUtils.size(e.spatial.bbox) > 0 && e.spatial.bbox[0].length >= 4) {
-				return e.spatial.bbox[0];
+			if (CommonUtils.isObject(e) && CommonUtils.isObject(e.spatial) && CommonUtils.size(e.spatial.bbox) > 0) {
+				return e.spatial.bbox.filter(bbox => bbox.length >= 4);
 			}
-			return null;
+			return [];
 		},
 		leafletOptions() {
 			return {  // keep in sync with Readme
@@ -288,7 +289,7 @@ export default {
 			return Array.isArray(asset.roles) && asset.roles.includes('thumbnail') && IMAGE_MEDIA_TYPES.includes(asset.type);
 		},
 		initMap() {
-			if (!!this.$slots['collection-spatial-extent'] || this.map !== null) {
+			if (!!this.$slots['collection-spatial-extents'] || this.map !== null) {
 				return;
 			}
 			try {

components/JsonSchema.vue

@@ -3,31 +3,32 @@
 		<template v-if="visible">
 			<div v-if="isProcessGraph" class="schemaProcessGraph">
 				<div class="process-graph-parameters">
+					<p class="schema-attrs">{{ formatKey('type') }}: <span class="data-type">process</span></p>
 					<template v-if="Array.isArray(schema.parameters) && schema.parameters.length > 0">
-						<strong>The following parameters are passed to the process:</strong>
+						<p>The following parameters are passed to the process:</p>
 						<ProcessParameter v-for="(param, i) in schema.parameters" :key="i" :parameter="param" :processReferenceParser="processReferenceParser" />
 					</template>
 					<strong v-else>No parameters are passed to the process.</strong>
 				</div>
 			</div>
 			<div v-else-if="showRow('object')" class="schemaObjectElement">
-				<div v-if="filteredObjectSchema !== null" class="inline-schema-attrs">
-					<JsonSchema :schema="filteredObjectSchema" :nestingLevel="nestingLevel+1" />
+				<div class="inline-schema-attrs">
+					<JsonSchema v-if="filteredObjectSchema !== null" :schema="filteredObjectSchema" :nestingLevel="nestingLevel+1" />
+					<table class="object-properties">
+						<tr>
+							<th colspan="2" class="object-prop-heading">Object Properties:</th>
+						</tr>
+						<tr v-for="(val, key) in schema.properties" :key="key">
+							<td class="propKey">
+								{{ key }}
+								<strong class="required" v-if="schema.required && schema.required.indexOf(key) !== -1" title="required">*</strong>
+							</td>
+							<td class="value">
+								<JsonSchema :schema="val" :nestingLevel="nestingLevel+1" :processReferenceParser="processReferenceParser" />
+							</td>
+						</tr>
+					</table>
 				</div>
-				<table class="object-properties">
-					<tr>
-						<th colspan="2" class="object-prop-heading">Object Properties:</th>
-					</tr>
-					<tr v-for="(val, key) in schema.properties" :key="key">
-						<td class="propKey">
-							{{ key }}
-							<strong class="required" v-if="schema.required && schema.required.indexOf(key) !== -1" title="required">*</strong>
-						</td>
-						<td class="value">
-							<JsonSchema :schema="val" :nestingLevel="nestingLevel+1" :processReferenceParser="processReferenceParser" />
-						</td>
-					</tr>
-				</table>
 			</div>
 			<table v-else class="schema-attrs">
 				<tr v-if="typeof schema.title == 'string'">
@@ -174,53 +175,40 @@ export default {
 		formatKey(key) {
 			switch(key) {
 				case 'items':
-					key = 'Array items';
-					break;
+					return 'Array items';
 				case 'minItems':
-					key = 'Min. number of items';
-					break;
+					return 'Min. number of items';
 				case 'const':
-					key = 'Constant value';
-					break;
+					return 'Constant value';
 				case 'maxItems':
-					key = 'Max. number of items';
-					break;
+					return 'Max. number of items';
 				case 'minimum':
-					key = 'Minimum value (inclusive)';
-					break;
+					return 'Minimum value (inclusive)';
 				case 'maximum':
-					key = 'Maximum value (inclusive)';
-					break;
+					return 'Maximum value (inclusive)';
 				case 'exclusiveMinimum':
-					key = 'Minimum value (exclusive)';
-					break;
+					return 'Minimum value (exclusive)';
 				case 'exclusiveMinimum':
-					key = 'Maximum value (exclusive)';
-					break;
+					return 'Maximum value (exclusive)';
 				case 'enum':
-					key = 'Allowed values';
-					break;
+					return 'Allowed values';
 				case 'default':
-					key = 'Default value';
-					break;
+					return 'Default value';
 				case 'type':
-					key = 'Data type';
-					break;
+					return 'Data type';
 				case 'allOf':
-					key = 'Composite data type';
-					break;
+					return 'Composite data type';
 				case 'contentMediaType':
-					key = 'Media Type';
-					break;
+					return 'Media Type';
 				case 'contentEncoding':
-					key = 'Encoding';
-					break;
+					return 'Encoding';
 				case 'deprecated':
-					key = 'Deprecated';
-					break;
+					return 'Deprecated';
+				case 'additionalProperties':
+					return "Each property";
 				default:
 					if (key.length > 1) {
-						key = key.charAt(0).toUpperCase() + key.slice(1);
+						return key.charAt(0).toUpperCase() + key.slice(1);
 					}
 			}
 			return key;
@@ -257,6 +245,9 @@ export default {
 </style>
 
 <style scoped>
+.data-type {
+	font-weight: bold;
+}
 .json-schema {
 	border-left: 7px solid #ccc;
 	border-bottom: 1px dotted #ccc;
@@ -267,12 +258,16 @@ export default {
 	border-left: 1px solid #ccc;
 	border-bottom: 1px dotted #ccc;
 	margin-top: 0.5em;
+	margin-left: 1em;
 }
-.json-schema td, .schemaProcessGraph {
+.json-schema td, .json-schema th, .schemaProcessGraph {
 	padding: 0.25em;
 }
 .inline-schema-attrs .json-schema {
 	border: 0;
+	padding: 0;
+	width: 100%;
+	background-color: transparent;
 }
 .schema-name {
 	display: inline-block;
@@ -282,16 +277,15 @@ export default {
 	width: 100%;
 }
 .schema-attrs .key {
-	min-width: 8em;
-	width: 18%;
+	white-space: nowrap;
 }
 .schema-attrs .value {
-	width: 82%;
+	width: 90%;
 }
-
-.inline-schema-attrs .json-schema {
-	background-color: transparent;
+p.schema-attrs {
+	padding: 0 0 1em 0;
 }
+
 .object-prop-heading, .data-types-heading {
 	padding: 0.5em 0em;
 	text-align: left;

components/Process.vue

@@ -74,7 +74,7 @@
 			<section class="examples" v-if="hasElements(process.examples)">
 				<h3>Examples</h3>
 				<ProcessExample v-for="(example, key) in process.examples" :key="key" :id="key" :example="example" :processId="process.id" :processParameters="process.parameters" :processReferenceParser="processReferenceParser" />
-				<LinkList :links="exampleLinks" heading="More examples (full processes)" headingTag="h4" />
+				<LinkList :links="exampleLinks" heading="Processes" headingTag="h4" />
 			</section>
 
 			<section class="links">

components/ProcessExample.vue

@@ -5,11 +5,8 @@
 		<div class="content">
 			<Description v-if="example.description" :description="example.description" :preprocessor="processReferenceParser" />
 
-			<div class="process-graph" v-if="example.process_graph">
-				<Description :description="renderedGraph()" />
-			</div>
 			<div class="arguments" v-if="example.arguments">
-				<code v-html="renderedArguments()"></code>
+				<code v-html="renderedArguments"></code>
 			</div>
 		</div>
 	</div>
@@ -39,16 +36,6 @@ export default {
 		},
 		title() {
 			return this.example.title ? this.example.title + " (" + this.identifier + ")" : "Example " + this.identifier;
-		}
-	},
-	methods: {
-		// deprecated
-		renderedGraph() {
-			var md = "##### Process Graph\n```json\n" + JSON.stringify(this.example.process_graph, null, 2) + "\n```";
-			if (typeof this.example.returns !== 'undefined') {
-				md += "\n##### Result\n```json\n" + JSON.stringify(this.example.returns, null, 2) + "\n```";
-			}
-			return md;
 		},
 		renderedArguments() {
 			var params = [];

components/UdfRuntime.vue

@@ -81,7 +81,7 @@ export default {
 			return this.runtimeData.title || this.runtimeId;
 		},
 		isDocker() {
-			return Boolean(this.runtimeData.docker && this.runtimeData.tags);
+			return Boolean(this.runtimeData.type === 'docker' || (this.runtimeData.docker && this.runtimeData.tags));
 		},
 		selectVersion() {
 			if ((Utils.isObject(this.runtimeData.versions) && this.runtimeData.versions[this.runtimeVersion]) || (Array.isArray(this.runtimeData.tags) && this.runtimeData.tags[this.runtimeVersion])) {

components/UdfRuntimes.vue

@@ -4,8 +4,8 @@
 			<strong>{{ name }}</strong>
 			<template v-if="env.title"> - {{ env.title }}</template>
 			<ul class="badges small">
-				<template v-if="env.docker">
-					<li class="badge docker">Docker</li>
+				<template v-if="env.type === 'docker' || (env.docker && env.tags)">
+					<li class="badge docker">Docker: {{ env.docker }}</li>
 					<li class="badge version" :class="{default: tag === env.default}" v-for="tag in env.tags" :key="tag">{{ tag }}</li>
 				</template>
 				<template v-else>

index.html

@@ -23,7 +23,7 @@
 				render: h => h(window['openeo-vue'].Collection, { 
 					props: {
 						collectionData: {
-							"stac_version": "0.9.0-rc2",
+							"stac_version": "0.9.0",
 							"id": "COPERNICUS/S2",
 							"title": "Sentinel-2 MSI: MultiSpectral Instrument, Level-1C",
 							"description": "...",

main.js

@@ -16,6 +16,7 @@ import StacCollectionUtils from './stacutils';
 import SupportedFeatures from './components/SupportedFeatures.vue';
 import Tab from './components/Tab.vue';
 import Tabs from './components/Tabs.vue';
+import UdfRuntime from './components/UdfRuntime.vue';
 import UdfRuntimes from './components/UdfRuntimes.vue';
 import Utils from './utils.js';
 
@@ -41,6 +42,7 @@ export {
 	SupportedFeatures,
 	Tab,
 	Tabs,
+	UdfRuntime,
 	UdfRuntimes,
 	Utils
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openeo/vue-components",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-rc.1",
   "author": "openEO Consortium",
   "contributors": [
     {
@@ -33,7 +33,7 @@
     "utils.js"
   ],
   "dependencies": {
-    "@openeo/js-commons": "^1.0.0-rc.4",
+    "@openeo/js-commons": "^1.0.0",
     "commonmark": "^0.29.0",
     "core-js": "^3.6.5"
   },