Option to hide experimental elements from lists #92

CHANGELOG.md

@@ -8,7 +8,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Support to rename dynamic tab titles (enable via prop `allowTabRename`)
+- `Tabs`: Support to rename dynamic tab titles (enable via prop `allowTabRename`)
+- `Collections`, `FileFormats`, `Items`, `Processes`, `ServiceTypes` and `UdfRuntimes`: New props `hideDeprecated` and `deprecatedFilter`
+- `SearchableList`: New props `externalHideDeprecated` and `deprecatedFilter`
 
 ## [2.15.1] - 2024-05-22
 

README.md

@@ -193,8 +193,10 @@ Shows an (expandable) list of all STAC-based collections available at a back-end
 - `showKeywords` / `show-keywords` (boolean): Adds the keywords to the third line of the summary if set to `true`. Defaults to `false`.
 - `federation` (object): The data of the `federation` property obtained from the capabilities.
 - `missing` (array): The identifiers of the federated back-ends that are not providing data for the list of collections due to an issue.
-- `hideDeprecated` / `hide-deprecated` (boolean): See the prop `externalHideDeprecated` in [`SearchableList`](#searchablelist). 
-- `deprecatedFilter` / `deprecated-filter` (boolean): See the prop `deprecatedFilter` in [`SearchableList`](#searchablelist). 
+- `hideDeprecated` / `hide-deprecated` (boolean): See the prop `externalHideDeprecated` in [`SearchableList`](#searchablelist).
+- `deprecatedFilter` / `deprecated-filter` (boolean): See the prop `deprecatedFilter` in [`SearchableList`](#searchablelist).
+- `hideExperimental` / `hide-experimental` (boolean): See the prop `externalHideExperimental` in [`SearchableList`](#searchablelist).
+- `experimentalFilter` / `experimental-filter` (boolean): See the prop `experimentalFilter` in [`SearchableList`](#searchablelist).
 
 **Slots:**
 
@@ -313,8 +315,10 @@ Visualizes all supported file formats of the back-end.
 - `heading` (string|null): Specifies the title of the component. If set to `null`, the title is hidden. Defaults to `File Formats`.
 - `federation` (object): The data of the `federation` property obtained from the capabilities.
 - `missing` (array): The identifiers of the federated back-ends that are not providing data for the list of file formats due to an issue.
-- `hideDeprecated` / `hide-deprecated` (boolean): See the prop `externalHideDeprecated` in [`SearchableList`](#searchablelist). 
+- `hideDeprecated` / `hide-deprecated` (boolean): See the prop `externalHideDeprecated` in [`SearchableList`](#searchablelist).
 - `deprecatedFilter` / `deprecated-filter` (boolean): See the prop `deprecatedFilter` in [`SearchableList`](#searchablelist).
+- `hideExperimental` / `hide-experimental` (boolean): See the prop `externalHideExperimental` in [`SearchableList`](#searchablelist).
+- `experimentalFilter` / `experimental-filter` (boolean): See the prop `experimentalFilter` in [`SearchableList`](#searchablelist).
 
 *Note: At least one of `showInput` or `showOutput` must be set to `true`. Otherwise, the list will be empty.*
 
@@ -384,8 +388,10 @@ Shows an (expandable) list of STAC-based Items.
 - `loadAdditionalData` / `load-additional-data` (function|null): See the corresponding prop in [`SearchableList`](#searchablelist).
 - `federation` (object): The data of the `federation` property obtained from the capabilities.
 - `missing` (array): The identifiers of the federated back-ends that are not providing data for the list of items due to an issue.
-- `hideDeprecated` / `hide-deprecated` (boolean): See the prop `externalHideDeprecated` in [`SearchableList`](#searchablelist). 
+- `hideDeprecated` / `hide-deprecated` (boolean): See the prop `externalHideDeprecated` in [`SearchableList`](#searchablelist).
 - `deprecatedFilter` / `deprecated-filter` (boolean): See the prop `deprecatedFilter` in [`SearchableList`](#searchablelist).
+- `hideExperimental` / `hide-experimental` (boolean): See the prop `externalHideExperimental` in [`SearchableList`](#searchablelist).
+- `experimentalFilter` / `experimental-filter` (boolean): See the prop `experimentalFilter` in [`SearchableList`](#searchablelist).
 
 **Slots:**
 
@@ -583,8 +589,10 @@ Shows an (expandable) list of all processes available at a back-end.
 - `loadAdditionalData` / `load-additional-data` (function|null): See the corresponding prop in [`SearchableList`](#searchablelist).
 - `federation` (object): The data of the `federation` property obtained from the capabilities.
 - `missing` (array): The identifiers of the federated back-ends that are not providing data for the list of processes due to an issue.
-- `hideDeprecated` / `hide-deprecated` (boolean): See the prop `externalHideDeprecated` in [`SearchableList`](#searchablelist). 
+- `hideDeprecated` / `hide-deprecated` (boolean): See the prop `externalHideDeprecated` in [`SearchableList`](#searchablelist).
 - `deprecatedFilter` / `deprecated-filter` (boolean): See the prop `deprecatedFilter` in [`SearchableList`](#searchablelist).
+- `hideExperimental` / `hide-experimental` (boolean): See the prop `externalHideExperimental` in [`SearchableList`](#searchablelist).
+- `experimentalFilter` / `experimental-filter` (boolean): See the prop `experimentalFilter` in [`SearchableList`](#searchablelist).
 
 **Slots:**
 
@@ -613,6 +621,8 @@ A template to implement searchable, sortable and collapsible lists (all optional
 - `externalSearchTerm` / `external-search-term` (string|null): Pass a string if a search term is injected from an external source and no search box should be shown. Setting to the empty string `""` effectively disables searching. Defaults to `null`, which will show a search box in the component itself so that users can filter the data by identifier and summary.
 - `externalHideDeprecated` / `external-hide-deprecated` (boolean): Whether to hide deprecated items (`true`) or not (`false`).
 - `deprecatedFilter` / `deprecated-filter` (boolean): Whether to show the deprecated filter checkbox (`true`) or not (`false`).
+- `externalHideExperimental` / `external-hide-experimental` (boolean): Whether to hide experimental items (`true`) or not (`false`).
+- `experimentalFilter` / `experimental-filter` (boolean): Whether to show the experimental filter checkbox (`true`) or not (`false`).
 - `searchPlaceholder` / `search-placeholder` (string): A text to show as a placeholder in the search box. Defaults to `Search`.
 - `sort` (boolean): Sort the data by identifier. Defaults to `true`.
 - `offerDetails` / `offer-details` (boolean): If set to `false`, the data can't be expanded and no details will be shown. Defaults to `true`, which will show what has been defined in the `details` slot after a user has expanded the element.
@@ -724,8 +734,10 @@ Visualizes all secondary web service types supported by the back-end.
 - `collapsed` (boolean|null): See the corresponding prop in [`SearchableList`](#searchablelist).
 - `heading` (string|null): Specifies the title of the component. If set to `null`, the title is hidden. Defaults to `Secondary Web Services`.
 - `federation` (object): The data of the `federation` property obtained from the capabilities.
-- `hideDeprecated` / `hide-deprecated` (boolean): See the prop `externalHideDeprecated` in [`SearchableList`](#searchablelist). 
+- `hideDeprecated` / `hide-deprecated` (boolean): See the prop `externalHideDeprecated` in [`SearchableList`](#searchablelist).
 - `deprecatedFilter` / `deprecated-filter` (boolean): See the prop `deprecatedFilter` in [`SearchableList`](#searchablelist).
+- `hideExperimental` / `hide-experimental` (boolean): See the prop `externalHideExperimental` in [`SearchableList`](#searchablelist).
+- `experimentalFilter` / `experimental-filter` (boolean): See the prop `experimentalFilter` in [`SearchableList`](#searchablelist).
 
 **Slots:**
 
@@ -964,8 +976,10 @@ Visualizes all UDF (user-defined function) runtimes supported by the back-end.
 - `collapsed` (boolean|null): See the corresponding prop in [`SearchableList`](#searchablelist).
 - `heading` (string|null): Specifies the title of the component. If set to `null`, the title is hidden. Defaults to `UDF Runtimes`.
 - `federation` (object): The data of the `federation` property obtained from the capabilities.
-- `hideDeprecated` / `hide-deprecated` (boolean): See the prop `externalHideDeprecated` in [`SearchableList`](#searchablelist). 
+- `hideDeprecated` / `hide-deprecated` (boolean): See the prop `externalHideDeprecated` in [`SearchableList`](#searchablelist).
 - `deprecatedFilter` / `deprecated-filter` (boolean): See the prop `deprecatedFilter` in [`SearchableList`](#searchablelist).
+- `hideExperimental` / `hide-experimental` (boolean): See the prop `externalHideExperimental` in [`SearchableList`](#searchablelist).
+- `experimentalFilter` / `experimental-filter` (boolean): See the prop `experimentalFilter` in [`SearchableList`](#searchablelist).
 
 **Slots:**
 

components/Collections.vue

@@ -1,6 +1,24 @@
 <template>
 	<div class="vue-component collections">
-		<SearchableList :data="collections" identifierKey="id" summaryKey="title" keywordsKey="keywords" :showKeywords="showKeywords"  :showSummaryOnExpand="false" :externalSearchTerm="searchTerm" :externalHideDeprecated="hideDeprecated" :deprecatedFilter="deprecatedFilter" :sort="sort" :offerDetails="offerDetails" :heading="heading" :collapsed="collapsed" :loadAdditionalData="loadAdditionalData" @detailsToggled="detailsToggled" allowCopy>
+		<SearchableList
+			:data="collections"
+			identifierKey="id"
+			summaryKey="title"
+			keywordsKey="keywords"
+			:showKeywords="showKeywords"
+			:showSummaryOnExpand="false"
+			:externalSearchTerm="searchTerm"
+			:externalHideDeprecated="hideDeprecated"
+			:deprecatedFilter="deprecatedFilter"
+			:externalHideExperimental="hideExperimental"
+			:experimentalFilter="experimentalFilter"
+			:sort="sort"
+			:offerDetails="offerDetails"
+			:heading="heading"
+			:collapsed="collapsed"
+			:loadAdditionalData="loadAdditionalData"
+			@detailsToggled="detailsToggled"
+			allowCopy>
 			<template #heading="scope"><slot name="heading" v-bind="scope" /></template>
 			<template v-if="missing" #content-start><FederationMissingNotice :missing="missing" :federation="federation" /></template>
 			<template #summary="scope"><slot name="summary" v-bind="scope" /></template>
@@ -75,6 +93,14 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		hideExperimental: {
+			type: Boolean,
+			default: false
+		},
+		experimentalFilter: {
+			type: Boolean,
+			default: false
+		},
 		missing: {
 			type: Array,
 			default: null

components/FileFormats.vue

@@ -1,6 +1,20 @@
 <template>
 	<div class="vue-component file-formats">
-		<SearchableList :data="fileFormats" summaryKey="title" keywordsKey="gis_data_types" :showSummaryOnExpand="false" :externalSearchTerm="searchTerm" :externalHideDeprecated="hideDeprecated" :deprecatedFilter="deprecatedFilter" :sort="sort" :offerDetails="offerDetails" :heading="heading" :collapsed="collapsed" @detailsToggled="detailsToggled">
+		<SearchableList
+			:data="fileFormats"
+			summaryKey="title"
+			keywordsKey="gis_data_types"
+			:showSummaryOnExpand="false"
+			:externalSearchTerm="searchTerm"
+			:externalHideDeprecated="hideDeprecated"
+			:deprecatedFilter="deprecatedFilter"
+			:externalHideExperimental="hideExperimental"
+			:experimentalFilter="experimentalFilter"
+			:sort="sort"
+			:offerDetails="offerDetails"
+			:heading="heading"
+			:collapsed="collapsed"
+			@detailsToggled="detailsToggled">
 			<template #heading="scope"><slot name="heading" v-bind="scope" /></template>
 			<template v-if="missing" #content-start><FederationMissingNotice :missing="missing" :federation="federation" /></template>
 			<template #summary="slot">
@@ -82,6 +96,14 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		hideExperimental: {
+			type: Boolean,
+			default: false
+		},
+		experimentalFilter: {
+			type: Boolean,
+			default: false
+		},
 		missing: {
 			type: Array,
 			default: null

components/Items.vue

@@ -1,6 +1,22 @@
 <template>
 	<div class="vue-component items">
-		<SearchableList :data="data" summaryKey="title" :showSummaryOnExpand="false" :externalSearchTerm="searchTerm" :externalHideDeprecated="hideDeprecated" :deprecatedFilter="deprecatedFilter" :sort="sort" :offerDetails="offerDetails" :heading="heading" :collapsed="collapsed" :loadAdditionalData="loadAdditionalData" @summaries="updateFeatures" @detailsToggled="detailsToggled" ref="list">
+		<SearchableList
+			:data="data"
+			summaryKey="title"
+			:showSummaryOnExpand="false"
+			:externalSearchTerm="searchTerm"
+			:externalHideDeprecated="hideDeprecated"
+			:deprecatedFilter="deprecatedFilter"
+			:externalHideExperimental="hideExperimental"
+			:experimentalFilter="experimentalFilter"
+			:sort="sort"
+			:offerDetails="offerDetails"
+			:heading="heading"
+			:collapsed="collapsed"
+			:loadAdditionalData="loadAdditionalData"
+			@summaries="updateFeatures"
+			@detailsToggled="detailsToggled"
+			ref="list">
 			<template #heading="scope"><slot name="heading" v-bind="scope" /></template>
 			<template #after-search-box>
 				<slot v-if="showMap" name="map" :geojson="geojson" :mapOptions="mapOptions">
@@ -77,6 +93,14 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		hideExperimental: {
+			type: Boolean,
+			default: false
+		},
+		experimentalFilter: {
+			type: Boolean,
+			default: false
+		},
 		loadAdditionalData: {
 			type: Function,
 			default: null

components/Processes.vue

@@ -1,6 +1,22 @@
 <template>
 	<div class="vue-component processes">
-		<SearchableList :data="processes" keywordsKey="categories" :showKeywords="showCategories" :showSummaryOnExpand="false" :externalSearchTerm="searchTerm" :externalHideDeprecated="hideDeprecated" :deprecatedFilter="deprecatedFilter" :sort="sort" :offerDetails="offerDetails" :heading="heading" :collapsed="collapsed" :loadAdditionalData="loadAdditionalData" @detailsToggled="detailsToggled" allowCopy>
+		<SearchableList
+			:data="processes"
+			keywordsKey="categories"
+			:showKeywords="showCategories"
+			:showSummaryOnExpand="false"
+			:externalSearchTerm="searchTerm"
+			:externalHideDeprecated="hideDeprecated"
+			:deprecatedFilter="deprecatedFilter"
+			:externalHideExperimental="hideExperimental"
+			:experimentalFilter="experimentalFilter"
+			:sort="sort"
+			:offerDetails="offerDetails"
+			:heading="heading"
+			:collapsed="collapsed"
+			:loadAdditionalData="loadAdditionalData"
+			@detailsToggled="detailsToggled"
+			allowCopy>
 			<template #heading="scope"><slot name="heading" v-bind="scope" /></template>
 			<template #content-start v-if="missing"><FederationMissingNotice :missing="missing" :federation="federation" /></template>
 			<template #summary="scope"><slot name="summary" v-bind="scope" /></template>
@@ -74,6 +90,14 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		hideExperimental: {
+			type: Boolean,
+			default: false
+		},
+		experimentalFilter: {
+			type: Boolean,
+			default: false
+		},
 		loadAdditionalData: {
 			type: Function,
 			default: null

components/SearchableList.vue

@@ -19,6 +19,10 @@
 						<input type="checkbox" v-model="hideDeprecated" :true-value="false" :false-value="true">
 						Show deprecated
 					</label>
+					<label v-if="experimentalFilter" class="experimental" title="Show experimental elements?">
+						<input type="checkbox" v-model="hideExperimental" :true-value="false" :false-value="true">
+						Show experimental
+					</label>
 				</section>
 				<slot name="after-search-box" :filteredCount="filteredCount" :summaries="summaries"></slot>
 				<p v-if="filteredCount === 0">No search results found.</p>
@@ -130,6 +134,14 @@ export default {
 		deprecatedFilter: {
 			type: Boolean,
 			default: false
+		},
+		externalHideExperimental: {
+			type: Boolean,
+			default: false
+		},
+		experimentalFilter: {
+			type: Boolean,
+			default: false
 		}
 	},
 	data() {
@@ -143,6 +155,7 @@ export default {
 			showDetails: {},
 			showList: this.collapsed ? null : true,
 			hideDeprecated: this.externalHideDeprecated,
+			hideExperimental: this.externalHideExperimental,
 			summaries: []
 		};
 	},
@@ -176,6 +189,12 @@ export default {
 				this.hideDeprecated = value;
 			}
 		},
+		externalHideExperimental: {
+			immediate: true,
+			handler(value) {
+				this.hideExperimental = value;
+			}
+		},
 		summaries: {
 			immediate: true,
 			handler() {
@@ -190,6 +209,11 @@ export default {
 				this.filter();
 			}
 		},
+		hideExperimental() {
+			if (this.hideExperimentalByDefault !== null) {
+				this.filter();
+			}
+		},
 		collapsed(newState) {
 			if (newState === false) {
 				this.showList = true;
@@ -217,7 +241,8 @@ export default {
 	methods: {
 		hasActiveFilter() {
 			return this.searchTerm.length >= this.searchMinLength
-				|| (this.hideDeprecatedByDefault !== null && this.hideDeprecated);
+				|| (this.hideDeprecatedByDefault !== null && this.hideDeprecated)
+				|| (this.hideExperimentalByDefault !== null && this.hideExperimental);
 		},
 		filter() {
 			const doSearch = this.searchTerm.length >= this.searchMinLength;
@@ -226,6 +251,9 @@ export default {
 				if (this.hideDeprecatedByDefault !== null && this.hideDeprecated && item.deprecated) {
 					show = false;
 				}
+				else if (this.hideExperimentalByDefault !== null && this.hideExperimental && item.experimental) {
+					show = false;
+				}
 				else if (doSearch) {
 					show = Utils.search(this.searchTerm, [item.identifier, item.summary].concat(item.keywords))
 				}
@@ -352,7 +380,8 @@ export default {
 			margin: 0;
 		}
 
-		> .deprecated {
+		> .deprecated,
+		> .experimental {
 			white-space: nowrap;
 			align-content: center;
 		}

components/ServiceTypes.vue

@@ -1,6 +1,18 @@
 <template>
 	<div class="vue-component service-types">
-		<SearchableList :data="services" summaryKey="title" :externalSearchTerm="searchTerm" :externalHideDeprecated="hideDeprecated" :deprecatedFilter="deprecatedFilter" :sort="sort" :offerDetails="offerDetails" :heading="heading" :collapsed="collapsed" @detailsToggled="detailsToggled">
+		<SearchableList
+			:data="services"
+			summaryKey="title"
+			:externalSearchTerm="searchTerm"
+			:externalHideDeprecated="hideDeprecated"
+			:deprecatedFilter="deprecatedFilter"
+			:externalHideExperimental="hideExperimental"
+			:experimentalFilter="experimentalFilter"
+			:sort="sort"
+			:offerDetails="offerDetails"
+			:heading="heading"
+			:collapsed="collapsed"
+			@detailsToggled="detailsToggled">
 			<template #heading="scope"><slot name="heading" v-bind="scope" /></template>
 			<template #summary="scope"><slot name="summary" v-bind="scope" /></template>
 			<template #details="slot">
@@ -60,6 +72,14 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		hideExperimental: {
+			type: Boolean,
+			default: false
+		},
+		experimentalFilter: {
+			type: Boolean,
+			default: false
+		},
 		...FederationMixin.props
 	},
 	beforeCreate() {