Hide deprecated entities by default, add filter for it

Open-EO · May 22, 2024 · 26e3a3c · 26e3a3c
1 parent 9d20cdf
commit 26e3a3c
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -51,7 +51,7 @@
     "@openeo/js-client": "^2.5.1",
     "@openeo/js-commons": "^1.4.1",
     "@openeo/js-processgraphs": "^1.3.0",
-    "@openeo/vue-components": "^2.14.0",
+    "@openeo/vue-components": "^2.15.1",
     "@tmcw/togeojson": "^5.5.0",
     "ajv": "^6.12.6",
     "axios": "^0.24.0",

diff --git a/src/components/DiscoveryToolbar.vue b/src/components/DiscoveryToolbar.vue
@@ -1,8 +1,12 @@
 <template>
 	<div class="discovery-toolbar">
 		<SearchBox v-model="searchTerm" />
+		<label class="show-deprecated" title="Show deprecated elements?">
+			<input type="checkbox" v-model="showDeprecated">
+			Show deprecated
+		</label>
 		<div class="search-results">
-			<Collections class="category" :collections="collections" :searchTerm="searchTerm" :offerDetails="false" :collapsed="collapsed">
+			<Collections class="category" :collections="collections" :searchTerm="searchTerm" :offerDetails="false" :collapsed="collapsed" :hideDeprecated="!showDeprecated">
 				<template #summary="{ item }">
 					<div class="discovery-entity" :draggable="supportsLoadCollection" @dragstart="onDrag($event, 'collection', item)">
 						<div class="discovery-info" @click="showCollectionInfo(item.id)">
@@ -14,7 +18,7 @@
 				</template>
 			</Collections>
 
-			<Processes class="category" :processes="allProcesses" :searchTerm="searchTerm" :offerDetails="false" :collapsed="collapsed">
+			<Processes class="category" :processes="allProcesses" :searchTerm="searchTerm" :offerDetails="false" :collapsed="collapsed" :hideDeprecated="!showDeprecated">
 				<template #summary="{ item }">
 					<div class="discovery-entity" draggable="true" @dragstart="onDrag($event, 'process', item)">
 						<div class="discovery-info" @click="showProcess(item)">
@@ -27,7 +31,7 @@
 				</template>
 			</Processes>
 
-			<UdfRuntimes v-if="hasUdfRuntimes" class="category" :runtimes="udfRuntimes" :searchTerm="searchTerm" :offerDetails="false" :collapsed="collapsed">
+			<UdfRuntimes v-if="hasUdfRuntimes" class="category" :runtimes="udfRuntimes" :searchTerm="searchTerm" :offerDetails="false" :collapsed="collapsed" :hideDeprecated="!showDeprecated">
 				<template #summary="{ summary, item }">
 					<div class="discovery-entity" :draggable="supportsRunUdf" @dragstart="onDrag($event, 'udf', {runtime: summary.identifier, version: item.default})">
 						<div class="discovery-info" @click="showUdfInfo(summary.identifier, item)">
@@ -38,7 +42,7 @@
 				</template>
 			</UdfRuntimes>
 
-			<FileFormats class="category" :formats="fileFormats" :showInput="false" heading="Export File Formats" :searchTerm="searchTerm" :offerDetails="false" :collapsed="collapsed">
+			<FileFormats class="category" :formats="fileFormats" :showInput="false" heading="Export File Formats" :searchTerm="searchTerm" :offerDetails="false" :collapsed="collapsed" :hideDeprecated="!showDeprecated">
 				<template #summary="{ item }">
 					<div class="discovery-entity" :draggable="supportsSaveResult" @dragstart="onDrag($event, 'fileformat', item)">
 						<div class="discovery-info" @click="showFileFormatInfo(item)">
@@ -88,7 +92,8 @@ export default {
 	data() {
 		return {
 			internalSearchTerm: '',
-			collapsed: true
+			collapsed: true,
+			showDeprecated: false
 		};
 	},
 	computed: {
@@ -218,15 +223,26 @@ export default {
 .search-results {
 	overflow-y: auto;
 	flex-grow: 1;
+	margin: 0.25rem 0 0 0;
 }
 
-.category {
-	padding: 5px;
+.search-box {
+	margin: 1rem 1rem 0.25rem 1rem;
 }
-.category strong {
-	cursor: pointer;
-	overflow: hidden;
-	white-space: nowrap;
+.show-deprecated {
+	margin: 0.25rem 1rem 0.25rem 1rem;
+	text-align: center;
+	font-size: 0.9em;
+}
+
+.category {
+	margin: 0.75rem 1rem 0.5rem 1rem;
+
+	strong {
+		cursor: pointer;
+		overflow: hidden;
+		white-space: nowrap;
+	}
 }
 
 .discovery-entity {

diff --git a/src/components/IDE.vue b/src/components/IDE.vue
@@ -321,13 +321,6 @@ export default {
 #discovery {
 	height: 100%;
 	overflow: auto;
-
-	.search-box {
-		margin: 1rem;
-	}
-	.category {
-		padding: 5px 1em;
-	}
 }
 #user {
 	min-height: 2.5em;