Show descriptions for BackendGroups

[m-mohr]

The back-end descriptions are missing and should be shown, similarly to your screenshot in #14:

Da die Beschreibungen länger sein können (und Markdown unterstützen -> Description component in vue-components), sollten nur ein paar Zeilen (zw. 3 und 5?) angezeigt werden und der Rest erst beim ausklappen. Das mehr Beschreibung zur Verfügung steht sollte in der UI sichtbar sein (... oder langsames Ausblenden, wie man es von einigen Zeitungen kennt).

[m-mohr]

Here's code for fading out, which I am using in the new UdfRuntimes component.

<template>
	<ul class="vue-component runtimes">
		<li @click.stop="expand(name)" v-for="(runtime, name) in udfRuntimes" :key="name" :class="{runtime: true, collapsible: initiallyCollapsed, collapsed: collapsed[name]}">
			<a class="anchor" :name="name"></a>
			<header @click.stop="toggle(name)">
				<span class="toggle">▸</span>{{ name }}
			</header>
			<article class="runtime-details">
				<Description v-if="runtime.description" :compact="true" :description="runtime.description" />
				...
			</article>
		</li>
	</ul>
</template>

<script>
import Utils from '../utils.js';
import Description from './Description.vue';
import LinkList from './LinkList.vue';
import { MigrateCapabilities } from '@openeo/js-commons';
import './base.css';

export default {
	name: 'UdfRuntimes',
	components: {
		Description,
		LinkList
	},
	props: {
		version: String,
		runtimes: Object,
		initiallyCollapsed: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			collapsed: {},
			udfRuntimes: {}
		};
	},
	created() {
		this.updateData();
	},
	beforeMount() {
		for (var name in this.runtimes) {
			this.$set(this.collapsed, name, this.initiallyCollapsed);
		}
	},
	watch: {
		runtimes() {
			this.updateData();
		},
		version() {
			this.updateData();
		}
	},
	methods: {
		updateData() {
			// MigrateCapabilities.convertUdfRuntimesToLatestSpec was not implemented in openeo-js-commons <= 0.4.5.
			// Once we upgraded the js-commons dependency, we can remove this check.
			if (typeof MigrateCapabilities.convertUdfRuntimesToLatestSpec === 'function') {
				this.udfRuntimes = MigrateCapabilities.convertUdfRuntimesToLatestSpec(this.runtimes, this.version);
			}
			else {
				this.udfRuntimes = this.runtimes;
			}
		},
		toggle(name) {
			console.log(name, this.collapsed[name]);
			if (this.initiallyCollapsed) {
				this.$set(this.collapsed, name, !this.collapsed[name]);
			}
			console.log(name, this.collapsed[name]);
		},
		expand(name) {
			if (this.initiallyCollapsed && this.collapsed[name]) {
			console.log("expand");
				this.toggle(name);
			}
		}
	}
}
</script>

<style>
ul.runtimes:empty::after {
	content: 'None';
	font-style: italic;
}
.vue-component.runtimes .collapsible {
	margin-left: 0;
}
.vue-component.runtimes .collapsible.collapsed .runtime-details {
	max-height: 3em;
	overflow-y: hidden;
	position: relative;
	cursor: pointer;
}
.vue-component.runtimes .collapsible.collapsed .runtime-details:before {
	content: '';
	width: 100%;
	height: 100%;	
	position: absolute;
	left: 0;
	top: 0;
	background: linear-gradient(rgba(255,255,255,0) 1em, white);
}
.runtimes header {
	font-size: 1.1em;
	font-weight: bold;
}
.runtimes li.runtime {
	list-style-type: none;
	margin-bottom: 1.5em;
}
.runtimes li.runtime:last-of-type {
	margin-bottom: 0;
}
</style>

Looks like this:

Maybe I should make a Collapsible component, we are using collapse things in quite some components now ;-)

[christophfriedrich]

Since implementing the grouping of backends (with tabs for each version), the "top-level component" within the DiscoverySection (and thus the component that is visible when opening the site) is BackendGroup. The individual Backends are hidden within the BackendGroups' collapse areas.

To implement a start screen like in the screenshot, it must be decided which description should be displayed by such a BackendGroup? It may contain multiple backends with different descriptions...

[m-mohr]

Until Open-EO/openeo-api#202 is available in 1.0, we could use the most recent one (i.e. the description of the back-end with the highest version number).

[christophfriedrich]

With 29affc2, backends now show descriptions.

But backend groups (i.e. those components you see when you open the Hub) don't - because @m-mohr and I didn't like that the description would be shown in the initial state, but disappear upon expanding. We can again think about that for Hub v0.4 ➡️ changing title and milestone.

Long descriptions are (for now) not handled via a fancy fade-out or what not, but a simple scrollbar via overflow-y: auto once their height exceeds 15em. Please open another issue if you'd like to change this.

[m-mohr]

Looking again over the Hub homepage, I think it's cleaner to not show the descriptions directly. It would really clutter the overview page. Let's open an issue whenever it becomes an actual issue. This is good for now, so closing.

[christophfriedrich]

IMO the screenshot at the top looks quite neat, not overly cluttered. I would've been fine with realising this for the new field from Open-EO/openeo-api#202. But I'm also not overly sad if it's not included 🤷‍♂️