Common Vue components for openEO.
npm install @openeo/vue-componentsA set of Vue components for openEO.
This library's version is 2.22.0 and supports openEO API versions 1.x.x.
Legacy versions supporting API version 0.x are available as releases.
Examples:
Table of Contents:
- Usage
- HTML
- FontAwesome
- Vue
- Components
- BillingPlans
- Capabilities
- Collection
- Collections
- DataTable
- DeprecationNotice
- FederationMissingNotice
- Description
- ExperimentalNotice
- FileFormat
- FileFormats
- JsonSchema
- Item
- Items
- Job
- JobEstimate
- LinkList
- Logs
- ModelBuilder
- ObjectTree
- Process
- Processes
- ProcessingParameters
- SearchableList
- SearchBox
- Service
- ServiceType
- ServiceTypes
- Stac
- SupportedFeatures
- Tabs and Tab
- Tabs
- Tab
- Examples
- Simple example with three static tabs
- Dynamically adding tabs + custom tab names appearance
- UdfRuntime
- UdfRuntimes
- Other features
- FeatureList
- Utils
All components listed below can be used in two different environments:
Directly as HTML tag in an HTML page or in a Vue environment as normal Single File Components (SFC).
To use the components in HTML (as so-called 'Web Components'), simply include the following into the head of your HTML page:
``html`
All components can be used as HTML tags in kebab-case, prefixed with openeo-. Also, ALL parameters must be converted to kebab-case too!BillingPlans
For example, the component can be used as .script
Props can be passed as HTML attributes if the value is a scalar.
For arrays and objects, you have to specify them as child tags with the attributes prop="..." and type="application/json".
For example, the Capabilities component can be used as follows:
`html`
The components are async web components, which means only the components you are actually using are requested. This keeps page loading times at a minimum.
Note for Contributors: Web Components must be built via npm run build and will be placed in the assets folder. Examples can be generated using npm run wc-examples and will be placed in the examples folder. You can also serve the examples via HTTP with the command npm run wc-serve.
To display a nice user interface, some components use icons from the project Font Awesome.
Unfortunately, fonts can't be loaded in Web Components so you need to embed them directly in the head of your HTML page as follows:
`html`
The components that use such icons and need these additional files mention it in their descriptions below.
Note: This is not required in Vue environments, which will load the required files automatically.
In a Vue environment, you can just import the Single File Components (SFC) directly. I.e., they must be imported from the components folder as demonstrated below.
First, you need to install the package: npm install @openeo/vue-components --save
Now, you can import the Vue components with the or require, depending on the module system you are using.
For example, the Capabilities component can be imported as follows:
* const Capabilities = require('@openeo/vue-components/components/Capabilities.vue'); (Node.js require)import Capabilities from '@openeo/vue-components/components/Capabilities.vue';
* (ES6 modules)
Afterwards, you need to declare the component in the components section of your SFC, e.g. components: { Capabilities }.
In the Template of your SFC you can now include the component as shown in the example below. Please note that the values myUrl and myCapabilities must be defined in the SFC, e.g. in the data property or as a computed property.
`html`
Note for Contributors: This usage mode doesn't require the initial build step npm run build. The Vue Components can simply be imported from the components folder. You can also serve examples via HTTP with the command npm run serve.
Note: Methods, properties and slots not listed here are not meant to be used as public and stable API. They can change at any time without prior notice.
Visualizes the billing information of the back-end.
Properties:
- billing (object, required): Billing information as defined by the openEO API (GET /, property billing).heading
- (string|null): Specifies the title of the component. If set to null, the title is hidden. Defaults to Billing.headingTag
- / heading-tag (string): HTML Tag to use for the heading. Defaults to h2.
Visualizes fundamental server information of the back-end. Shows the URL, title, description, version numbers, links, the production flag, SupportedFeatures and BillingPlans.
Properties:
- capabilities (object, required): Capabilities response as defined by the openEO API (GET /).url
- (string): URL to the API. If not set, the URL from the link with relation type self is shown. If neither is available, no URL is shown.
Visualizes a single collection following the STAC-based collection description.
Properties:
- data (object, required): A single STAC-based collection object as defined by the openEO API (GET /collections/{collection_id}).onStacNavigation
- / on-stac-navigation (function|null): A function to override opening STAC JSON files in a new tab. Defaults to null (opens in a new tab).mapOptions
- / map-options (object): For fine-tuning the behavior of the map that displays the collection's spatial extent. Entirely optional. Possible keys:height
- (string): Height of the map container div. Defaults to 250px.width
- (string): Width of the map container div. Defaults to auto.basemap
- (string): Templated URI for the XYZ basemap. Default to https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png. Please make sure that your usage complies with the OpenStreetMap Tile Usage Policy!attribution
- (string): Attributon for the basemap. HTML is allowed. Default to Map data © OpenStreetMap.wrapAroundAntimeridian
- (boolean): Whether the world map wraps around the antimeridian (defined the other way round it's also known as "noWrap"). Defaults to false.scrollWheelZoom
- (boolean): Whether zooming via the mouse scroll wheel is enabled (regardless of this setting, buttons for + and - are _always_ displayed). Defaults to false.onAfterMapInit
- (function|null): Callback function with two parameters map (Leaflet Map) and geometries (Bounding Boxes as Leaflet Rectangle or Leaflet Wrapped Polygon in a Leaflet FeatureGroup) that is called after the map has been initialized. Can be used to further customize the map behavior. Defaults to null (no callback).federation
- (object): The data of the federation property obtained from the capabilities.
Slots:
- title: HTML to display as the main heading. The component properties are passed through as slot properties with the same names.before-description
- : HTML to display before the description. The component properties are passed through as slot properties with the same names.end
- : HTML to display after the component. The component properties are passed through as slot properties with the same names.spatial-extents
- : HTML to display the spatial extents, e.g. a map. The slot property extents provides an array of arrays, each containing four elements (west, south, east, north) with the WGS84 coordinates. The properties mapOptions and worldwide are also available as slot property.temporal-extents
- : HTML to display the temporal extents. The slot property 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.
Shows an (expandable) list of all STAC-based collections available at a back-end.
Properties:
- collections (array, required): An array of STAC-based collection objects as defined by the openEO API (GET /collections, property collections).mapOptions
- / map-options (object): See the corresponding prop in Collection.searchTerm
- / search-term (string|null): See the prop externalSearchTerm in SearchableList. sort
- (boolean): See the corresponding prop in SearchableList. offerDetails
- / offer-details (string): See the corresponding prop in SearchableList.collapsed
- (boolean|null): See the corresponding prop in SearchableList.heading
- (string|null): Specifies the title of the component. If set to null, the title is hidden. Defaults to Collections.loadAdditionalData
- / load-additional-data (function|null): See the corresponding prop in SearchableList.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.deprecatedFilter
- / deprecated-filter (boolean): See the prop deprecatedFilter in SearchableList.hideExperimental
- / hide-experimental (boolean): See the prop externalHideExperimental in SearchableList.experimentalFilter
- / experimental-filter (boolean): See the prop experimentalFilter in SearchableList.
Slots:
- heading: See the corresponding slot in SearchableList.summary
- : See the corresponding slot in SearchableList.content-start
- : See the corresponding slot in SearchableList.after-search-box
- : See the corresponding slot in SearchableList.collection-before-description
- : See the corresponding slot before-description in Collection.collection-end
- : See the corresponding slot end in Collection.collection-spatial-extents
- : See the corresponding slot spatial-extents in Collection.collection-temporal-extents
- : See the corresponding slot temporal-extents in Collection.
Events:
- headingToggled(expanded): See the corresponding event in SearchableList.detailsToggled(expanded, key, identifier, data)
- : See the corresponding event in SearchableList.
A relatively simple table component to show a list of data.
Warning: This component is experimental and may change in future releases!
Properties:
- columns (object, required): The columns to show in the table.data
- (array, required): An array of objects containing the data to show.next
- (function): Indicates whether more data is available to be loaded/shown and how. Shows a button to load more data into the table and executes the given (async) function. Defaults to null (i.e. no more data available).fa
- (boolean): Whether to use Font Awesome icons or not. 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 table due to an issue.
Slots:
- toolbar: A place on the top left to show a toolbar, e.g. for "Add" buttons.row
- column-id: A slot for the column with the name being the column identifer. Can be used to better visualize the values in the column. Passes the slot properties , col and id.
Show a message that something has been deprecated.
Properties:
- entity (string): A noun that describes the entity that has been deprecated, e.g. process or collection.
Show a message that a response is incomplete due to missing data from an inaccessible service in the federation.
Properties:
- missing (array, required): The identifiers of the federated back-ends that are not providing data for the list of processes due to an issue.federation
- (object): The data of the federation property obtained from the capabilities.retry
- (function): Displays a "retry" button which executes the given function. compact
- (boolean): Renders the notice more compact if set to true. Defaults to false.
Slots:
- button-text: The content (e.g. text) of the retry button.
A simple text renderer, which supports CommonMark.
Properties:
- description (string, required): The text to show.preprocessor
- (function|null): A function that further processes the text, before CommonMark is parsed. Defaults to null.processor
- (function|null): A function that further processes the text, after CommonMark is parsed. Defaults to null.processUrl
- / process-url (string): The URL to point process references ( `process_id() ) to. ${} gets replaced with the process id. Set to null (default) to disable process links. Example: https://processes.openeo.org/#${}
- compact (boolean): Renders the description more compact if set to true. Defaults to false.
- allowHTML / allow-html (boolean): By default (false), HTML is removed from the rendered version. To show HTML set this to true. Only set to true if you trust the content, it may contain insecure elements.
Show a message that something is experimental.
Properties:
- entity (string): A noun that describes the entity that is still experimental, e.g. process or collection.
Visualizes a single supported file format of the back-end.
Properties:
The properties must be filled with parts of the response for supported file formats as defined by the openEO API (GET /file_formats). Returned is an object like { input: { GTiff: {...} }, output: { PNG: {...} } } and some of the keys and values must be passed.
- id (string, required): The identifier of the file format (i.e. the key of the second level; GTiff or PNG in the example above)
- format (object, required): The file format specification (i.e. the value of the second level; {...} in the example above)
- type (boolean, required): Either input or output (i.e. the key of the first level)
- federation (object): The data of the federation property obtained from the capabilities.
Slots:
- title: HTML to display as the main heading.
- badges: HTML to display as the badges.
- before-description: HTML to display before the description.
- end: HTML to display after the component.
For all slots, the component properties are passed through as slot properties with the same names.
Visualizes all supported file formats of the back-end.
Properties:
- formats (object, required): Supported file formats as defined by the openEO API (GET /file_formats).
- showInput / show-input (boolean): Show the input file formats. Defaults to true.
- showOutput / show-output (boolean): Show the output file formats. Defaults to true.
- searchTerm / search-term (string|null): See the prop externalSearchTerm in SearchableList.
- sort (boolean): See the corresponding prop in SearchableList.
- offerDetails / offer-details (string): See the corresponding prop in SearchableList.
- collapsed (boolean|null): See the corresponding prop in SearchableList.
- 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.
- deprecatedFilter / deprecated-filter (boolean): See the prop deprecatedFilter in SearchableList.
- hideExperimental / hide-experimental (boolean): See the prop externalHideExperimental in SearchableList.
- experimentalFilter / experimental-filter (boolean): See the prop experimentalFilter in SearchableList.
Note: At least one of showInput or showOutput must be set to true. Otherwise, the list will be empty.
Slots:
- heading: See the corresponding slot in SearchableList.
- summary: See the corresponding slot in SearchableList.
- file-format-before-description: See the corresponding slot before-description in FileFormat.
- file-format-end: See the corresponding slot end in FileFormat.
Events:
- headingToggled(expanded): See the corresponding event in SearchableList.
- detailsToggled(expanded, key, identifier, data): See the corresponding event in SearchableList.
Renders JSON Schemas in a way that it's a bit easier for humans to read.
Properties:
- schema (object|array\
Visualizes a single STAC Item, e.g. a batch job result.
Warning: This component is experimental and may change in future releases!
Properties:
- data (object, required): A single STAC-based Item object as defined by the openEO API (GET /jobs/{job_id}/results).
- onStacNavigation / on-stac-navigation (function|null): A function to override opening STAC JSON files in a new tab. Defaults to null (opens in a new tab).
- mapOptions / map-options (object): For fine-tuning the behavior of the map that displays the item's geometry. Entirely optional. Possible keys:
- height (string): Height of the map container div. Defaults to "250px".
- width (string): Width of the map container div. Defaults to "auto".
- wrapAroundAntimeridian (boolean): Whether the world map wraps around the antimeridian (defined the other way round it's also known as "noWrap"). Defaults to false.
- scrollWheelZoom (boolean): Whether zooming via the mouse scroll wheel is enabled (regardless of this setting, buttons for + and - are _always_ displayed). Defaults to false.
- onAfterMapInit (function|null): Callback function with two parameters map (Leaflet Map) and geometries (Geometry as Leaflet Geometry or Leaflet Wrapped Geometry in a Leaflet FeatureGroup) that is called after the map has been initialized. Can be used to further customize the map behavior. Defaults to null (no callback).
- federation (object): The data of the federation property obtained from the capabilities.
Slots:
- title: HTML to display as the main heading. The component properties are passed through as slot properties with the same names.
- before-description: HTML to display before the description. The component properties are passed through as slot properties with the same names.
- end: HTML to display after the component. The component properties are passed through as slot properties with the same names.
- location: HTML to display the geometry and/or bbox, e.g. a map. The slot property geometry provides a GeoJSON geometry and the slot property bbox contains an array with four elements (west, south, east, north) with the WGS84 coordinates. The component property mapOptions is also available as slot property.
Shows an (expandable) list of STAC-based Items.
Warning: This component is experimental and may change in future releases!
Properties:
- items (array|object, required): An array of STAC-based Item objects or a GeoJSON FeatureCollection containins STAC Items.
- showMap / show-map (boolean): Show an overview map with all items. Default to false.
- mapOptions / map-options (object): See the corresponding prop in Item.
- searchTerm / search-term (string|null): See the prop externalSearchTerm in SearchableList.
- sort (boolean): See the corresponding prop in SearchableList.
- offerDetails / offer-details (string): See the corresponding prop in SearchableList.
- collapsed (boolean|null): See the corresponding prop in SearchableList.
- heading (string|null): Specifies the title of the component. If set to null, the title is hidden. Defaults to Items.
- loadAdditionalData / load-additional-data (function|null): See the corresponding prop in 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.
- deprecatedFilter / deprecated-filter (boolean): See the prop deprecatedFilter in SearchableList.
- hideExperimental / hide-experimental (boolean): See the prop externalHideExperimental in SearchableList.
- experimentalFilter / experimental-filter (boolean): See the prop experimentalFilter in SearchableList.
Slots:
- heading: See the corresponding slot in SearchableList.
- summary: See the corresponding slot in SearchableList.
- content-start: See the corresponding slot in SearchableList.
- after-search-box: See the corresponding slot in SearchableList.
- item-before-description: See the corresponding slot before-description in Item.
- item-end: See the corresponding slot end in Item.
- item-location: See the corresponding slot location in Item.
Events:
- headingToggled(expanded): See the corresponding event in SearchableList.
- detailsToggled(expanded, key, identifier, data): See the corresponding event in SearchableList.
Visualizes a single batch job.
Properties:
- job (object, required): Batch Job details as defined by the openEO API (Either one of the array elements in the property jobs returned by GET /jobs or the response from GET /jobs/{job_id}).
- currency (string|null): The currency of the service (see openEO API endpoint GET /).
- parameters (array): An array of processing parameters as defined by the openEO API (GET /processing_parameters). From the response of the endpoint, you have to pass the value of the property create_job_parameters (i.e. an array of parameters).
- federation (object): The data of the federation property obtained from the capabilities.
Slots:
- title: HTML to display the main heading.
- before-description: HTML to display before the description.
- process-graph: See the corresponding slot process-graph in Process.
- end: HTML to display after the component.
For all slots, the component properties are passed through as slot properties with the same names.
Visualizes an estimate for a batch job.
Properties:
- estimate (object, required): Batch Job estimate as defined by the openEO API (response from GET /jobs/{job_id}/estimate).
- currency (string|null): The currency of the service (see openEO API endpoint GET /).
A simple list of links.
Properties:
- links (array\
Show log messages.
Properties:
- logs (array\
Show a process (graph) nicely visualized, includes support for basic editing.
Note: This may require to load FontAwesome. Also, you should assign the height and width for the Model Builder in the parent HTML tag.
Warning: This component is experimental and may change in future releases!
Properties:
- id (string, required): A document-wide unique identifier for the ModelBuilder instance.
- editable (boolean): Allows to edit the model (defaults to false). You need to use the editArguments event to implement parameter editing.
- value / v-model (boolean): The process to show/edit (defaults to an empty object).
- collections (array): Allows to add the collections from the API for better visualizations (defaults to an empty array).
- processes (array|ProcessRegistry): Allows to add the processes from the API for better visualizations (defaults to an empty array). Can be given as a ProcessRegistry.
- parent (object): The parent Block if a Model Builder is shown for a child process (defaults to null).
- parentSchema / parent-schema (object): The schema for the parent parameter if a Model Builder is shown for a child process (defaults to null).
- historySize / history-size (integer): The amount of steps for undo/redo (defaults to 30)
- explicitZoom / explicit-zoom (boolean): If set to true: The control zooms only if the control has focus or one of the keys STRG (Win/*nix) or Meta (Mac) has been pressed. Default to false, which always scrolls on mouse wheel interaction over the control.
- height (string): Set the height of the component as CSS-compatible value, e.g. 400px or 10rem. This is especially useful for web components if you can't set a size for the surrounding elements.
Events:
- input(value) / v-model: Fired when the process has been updated.
- error(message, title): Informs about an error, e.g. to show error messages in the UI.
- message (string): The error message.
- title (string|null): Some errors provide a title, too.
- showProcess(id, namespace): Providing this event will enable a button on each process so that user can click it to get more details. This event is fired when the user has clicked the button. The UI can then show the process details to the user.
- id (string): ID of the process to show
- namespace (string): Namespace of the process
- showCollection(id): Providing this event will enable a button on each collection so that user can click it to get more details. This event is fired when the user has clicked the button. The UI can then show the collection details to the user.
- id (string): ID of a collection to show
- showParameter(parameter, origin): Providing this event will enable a button on each parameter so that user can click it to get more details about the parameter and its schema. This event is fired when the user has clicked the button. The UI can then show the parameter details to the user.
- parameter (object): A process parameter compliant to the openEO API.
- origin (string): Indicates who made the parameter available:
- user if the parameter has been added by the user
- schema if the parameter is coming from the parent process
- Might return other values in the future.
- editParameter(parameter, title, saveCallback): Providing this event will enable a button on each parameter so that user can click it to edit the parameter. This event is fired when the user has clicked the button. The UI can then show the parameter editor to the user.
- parameter (object): A process parameter compliant to the openEO API.
- editArguments(parameters, values, title, isEditable, selectParameterName , saveCallback, parentBlock): Providing this event will enable a button on each block so that user can click it to get more details about the parameters and corresponding values. This event is fired when the user has clicked the button. The UI can then show the parameter viewer or editor to the user.
- parameters (array\ProcessParameter for details.
- values (object): An object with values for the parameters. The keys are the parameter names (parameters.name) and the objects are the values for the corresponding parameter.
- title (string): A title for the UI
- isEditable (boolean): Indicates whether the ModelBuilder is editable or not, see property editable.
- selectParameterName (string|null): If the user has not clicked the general button for the parameter viewer / editor, but instead clicked a specific parameter in the block, it passes the parameter name so that a UI can jump directly to the specific parameter or highlight it.
- saveCallback (function|null): A callback function that is called when the parameter editor indicates that a user wants to persist/save the data. The callback will receive one parameter with the new values in the same format as the values parameter above.
- parentBlock (object): The Vue Block instance that is the origin of this event.
- compactMode(enabled): Informs about the current state of compact mode.
- enabled (boolean): true when compact mode is active, false otherwise.
- historyChanged(history, index): The history has been changed, e.g. using redo, undo or by editing the process in the model builder.
- history (array): The full history.
- index (intener): The index of the element in the history that is currently shown.
Methods:
- async clear() -> boolean: Clears the process shown (similar effect as setting v-model to {}, but also reset edge/block counters).
- async undo(): Go one step back in history if available. Otherwise does nothing.
- async redo(): Go one step forward in history if available. Otherwise does nothing.
- async deleteSelected() -> boolean: Deletes all selected blocks and edges. Returns true on success and false on faile or if nothing has been selected.
- async toggleCompact(): Toggles compact mode (e.g. doesn't show parameter values).
- perfectScale(): Fits the view to the blocks and edges so that it is fully shown.
- getPgParameters() -> array: Returns all process parameters blocks.
- async addPgParameter(parameter, origin, position): Adds a process parameter block to the model builder.
- parameter (object): The parameter to add, should at least include a name and a schema as defined by the openEO API.
- origin (string): The origin of the parameter, defaults to user for user-defined parameters.
- position (array|null): The position to show the newly created block. Use getPositionForPageXY to get the position from a Browser event. Set to null (default value) to place it automatically.
- getPositionForPageXY(x, y) -> array: Get's the local position in the model builder from the page coordinates (pageX, pageY) of a Browser event (e.g. mouse). Useful e.g. for the position parameters of addPgParameter or addProcess. Returns the computed x and y coordinates as array.
- x (number): The x coordinate on the page, usually the pageX property of the Browser event.
- y (number): The y coordinate on the page, usually the pageY property of the Browser event.
- addProcess(name, args, position, namespace) -> object: Adds a process block to the model builder.
- name (string): The ID of the process to add.
- args (object): The arguments for the process. The keys are the parameter names and the objects are the values for the corresponding parameter. Defaults to no arguments (empty object).
- position (array|null): The position to show the newly created block. Use getPositionForPageXY to get the position from a Browser event. Set to null to place it automatically.
- namespace (string|null): The namespace of the process to add, defaults to null.
Renders JavaScript objects in a more human-readable form.
Often used as a fallback if no other form of presentation is known by the client.
Properties:
- data (object): Any object (i.e. object, array or null)
- collapseAfter / collapse-after (integer|null): The number of elements to display for each object or array until a "show all" button is shown. Set to null to show all elements. Defaults to 10.
Visualizes a single process following the openEO process description.
Properties:
- process (object, required): Process specification as defined by the openEO API (Either one of the array elements in the property processes returned by GET /process or the response from GET /process_graphs/{process_graph_id}).
- provideDownload / provide-download (boolean): Provide a link to download the JSON file (defaults to true).
- processUrl / process-url (string): See the corresponding prop in Description.
- showGraph / show-graph (boolean): Show and visualize the process graph (defaults to false).
- federation (object): The data of the federation property obtained from the capabilities.
Slots:
- title: HTML to display the main heading.
- before-description: HTML to display before the description.
- process-graph: HTML to visualize the process graph.
- end: HTML to display after the component.
For all slots, the component properties are passed through as slot properties with the same names. In the slot title, you can additionally access displayableNamespace.
Shows an (expandable) list of all processes available at a back-end.
Properties:
- processes (array, required): An array of processes as defined by the openEO API (GET /processes or GET /process_graphs although the latter is usually not complete).
- provideDownload / provide-download (boolean): See the corresponding prop in Process.
- processUrl / process-url (string): See the corresponding prop in Description.
- searchTerm / search-term (string|null): See the prop externalSearchTerm in SearchableList.
- sort (boolean): See the corresponding prop in SearchableList.
- offerDetails / offer-details (string): See the corresponding prop in SearchableList.
- collapsed (boolean|null): See the corresponding prop in SearchableList.
- heading (string|null): Specifies the title of the component. If set to null, the title is hidden. Defaults to Processes.
- showGraph / show-graph (boolean): See the corresponding prop in Process.
- showCategories / show-categories (boolean): Adds the categories to the third line of the summary if set to true. Defaults to false.
- loadAdditionalData / load-additional-data (function|null): See the corresponding prop in 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.
- deprecatedFilter / deprecated-filter (boolean): See the prop deprecatedFilter in SearchableList.
- hideExperimental / hide-experimental (boolean): See the prop externalHideExperimental in SearchableList.
- experimentalFilter / experimental-filter (boolean): See the prop experimentalFilter in SearchableList.
Slots:
- heading: See the corresponding slot in SearchableList.
- summary: See the corresponding slot in SearchableList.
- process-before-description: See the corresponding slot before-description in Process.
- process-end: See the corresponding slot end in Process.
Events:
- headingToggled(expanded): See the corresponding event in SearchableList.
- detailsToggled(expanded, key, identifier, data): See the corresponding event in SearchableList.
Shows a list of processing parameters, e.g. for batch jobs, synchronous processing, or secondary web services.
Properties:
- parameters (array, required): An array of processing parameters as defined by the openEO API (GET /processing_parameters). From the response of the endpoint, you have to pass either the value of the property create_job_parameters, create_service_parameters, or create_synchronous_parameters (i.e. an array of parameters).
- title (string): Title for the component. An empty string hides a header. Defaults to 'Additional Processing Parameters'.
- 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.
Slots:
- title: HTML to display as the main heading.
A template to implement searchable, sortable and collapsible lists (all optional).
Properties:
- data (array\
Slots:
- heading: HTML to display the heading, which by default consists of a title (see property heading) and the count of elements available in total. Will also show the count of elements matching the search term, if a search term has been given. The following slot properties are made available:
- filteredCount (integer|null): The count of elements matching the search term. null if no filters are applied and all elements are shown.
- totalCount (integer): The total count of elements.
- content-start: After heading, before searchbox and list.
- after-search-box:
- filteredCount (integer|null): see above
- summaries (array\
Events:
- headingToggled(expanded): Emits if the component has been expanded or collapsed by the user via the heading.
- expanded (boolean): Is true if the component is expanded, false otherwise.
- detailsToggled(expanded, key, identifier, data): Emits if an element has been expanded or collapsed by the user.
- expanded (boolean): Is true if the component is expanded, false otherwise.
- key (integer): Gives the index (for arrays) or the key (for objects) of the toggled element in the array or object given in the prop data.
- identifier (number|string): Gives the identifier of the toggled element (corresponds to the values selected via the prop identifierKey).
- data (object): Gives the toggled element from the array or object given in the prop data. This is equal to accessing the array/object given in data with the key from above directly.
- summaries(summaries): Emits if the summaries have changed.
- summaries (array\
A simple input field for searching.
Properties:
- value / v-model (string, required): The search term given by the user.
- placeholder (string): A placeholder string to show in the input field if no search term has been typed in. Defaults to Search.
- minLength / min-length (number): Minimum length required for the search term. Defaults to 1.
- compact (boolean): Renders the search box more compact if set to true. Defaults to false.
Events:
- @input / v-model: Fired when the value has changed.
Visualizes a single secondary web service.
Properties:
- service (object, required): Service details as defined by the openEO API (Either one of the array elements in the property services returned by GET /services or the response from GET /services/{service_id}).
- currency (string|null): The currency of the service (see openEO API endpoint GET /).
- parameters (array): An array of processing parameters as defined by the openEO API (GET /processing_parameters). From the response of the endpoint, you have to pass the value of the property create_service_parameters (i.e. an array of parameters).
- federation (object): The data of the federation property obtained from the capabilities.
Slots:
- title: HTML to display the main heading.
- before-description: HTML to display before the description.
- process-graph: See the corresponding slot process-graph in Process.
- end: HTML to display after the component.
For all slots, the component properties are passed through as slot properties with the same names.
Visualizes a single secondary web service type supported by the back-end.
Properties:
The properties must be filled with parts of the response for supported secondary web services as defined by the openEO API (GET /service_types). Returned is an object like { WMS: {...}, WFS: {...} } and one of the keys and values must be passed to the component.
- id (string, required): The identifier of the secondary web service (i.e. a key of the object; WMS or WFS in the example above)
- service (object, required): The secondary web service specification (i.e. the value for the corresponding key; {...} in the example above)
- federation (object): The data of the federation property obtained from the capabilities.
Slots:
- title: HTML to display as the main heading.
- before-description: HTML to display before the description.
- end: HTML to display after the component.
For all slots, the component properties are passed through as slot properties with the same names.
Visualizes all secondary web service types supported by the back-end.
Properties:
- services (object, required): Supported secondary web services as defined by the openEO API (GET /service_types).
- searchTerm / search-term (string|null): See the prop externalSearchTerm in SearchableList.
- sort (boolean): See the corresponding prop in SearchableList.
- offerDetails / offer-details (string): See the corresponding prop in SearchableList.
- collapsed (boolean|null): See the corresponding prop in 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.
- deprecatedFilter / deprecated-filter (boolean): See the prop deprecatedFilter in SearchableList.
- hideExperimental / hide-experimental (boolean): See the prop externalHideExperimental in SearchableList.
- experimentalFilter / experimental-filter (boolean): See the prop experimentalFilter in SearchableList.
Slots:
- heading: See the corresponding slot in SearchableList.
- summary: See the corresponding slot in SearchableList.
- service-type-before-description: See the corresponding slot before-description in ServiceType.
- service-type-end: See the corresponding slot end in ServiceType.
Events:
- headingToggled(expanded): See the corresponding event in SearchableList.
- detailsToggled(expanded, key, identifier, data): See the corresponding event in SearchableList.
Simple component to browse STAC catalogs, collections, and items.
This is a very simple interface to be embedded in other pages.
If you need a full fledged solution for browsing STAC, please check out
STAC Browser.
Warning: This component is experimental and may change in future releases!
Properties:
- url (string): The URL to the STAC catalog or collection to browse.
- data (object): The STAC object to show by default.
- mapOptions (object): Map configuration options, identical to the mapOptions property of the Collection and Item components.
Visualizes the supported functionalities of the back-end.
Properties:
- endpoints (array, required): Supported endpoints as defined by the openEO API (GET /capabilities, property endpoints).
- heading (string|null): Specifies the title of the component. If set to null, the title is hidden. Defaults to Supported Functionalities.
- headingTag / heading-tag (string): HTML Tag to use for the heading. Defaults to h2.
Creates a tab interface.
#### Tabs
Properties:
- id (string, required): A unique identifier for the tab container, preferrably only using a-z (upper- and lower-case), 0-9, - and _.
- pills (boolean, default false): Switch between normal boxed tabs and tabs with pills styling.
- pillsMultiline / pills-multiline (boolean, default false): If pills are active, the pills in the tabs header can be shown in multiple lines instead of squeezing all pills into a single line.
- position (string, default top): Position of the tabs/pills, either top or bottom.
- allowTabRename (boolean, default: false): Enables that dynamic tabs can be renamed by a user
Methods:
- addTab(name, icon = null, data = null, id = null, selected = false, closable = false, show = null, hide = null, close = null, allowShow = null): Adds a new dynamic tab programatically, which is enabled by default.
- name (string): The title of the tab.
- icon (string): A FontAwesome icon identifier, e.g. fa-address-book. This may require to load FontAwesome. Defaults to null, which shows no icon.
- data (any): Additional data that is passed to the tab.
- id (string|null): An id for the tab, preferrably only using a-z (upper- and lower-case), 0-9, - and _. Specifying null generates an id.
- selected (boolean): If set to true, the tab is getting selected and the active tab is set hidden.
- closable (boolean): Set to true to show a close symbol, which can be used to close/remove the tab.
- show (function): Function that is called when the tab is about to be shown. The tab is passed as a parameter to the function.
- hide (function): Function that is called when the tab is about to be hidden. The tab is passed as a parameter to the function.
- close (function): Function that is called when the tab is about to be closed. The tab is passed as a parameter to the function.
- allowShow (function): Asynchronous function that determines whether a tab can be shown. The function must true to allow switching the active tab. If false is returned, switching the tab is prevented. The tab to be shown is passed as a parameter.
- getTab(id) -> object|null: Get the Vue Tab instance by id. Returns null if not found.
- getActiveTab() -> object: Get the Vue Tab instance that is currently active.
- getActiveTabId() -> string: Get the id of the tab that is currently active.
- async selectTab(tab): Set the currently active tab. tab can be either a Vue Tab instance or the id of a tab.
- resetActiveTab(force = false): Selects the first tab if no tab is selected yet or force is set to true.
- closeTab(tab): Removes the specified tab. tab can be either a Vue Tab instance or the id of a tab.
Slots:
- default: Place for Tab components to be added by default. Must only contain children of type Tab which contain the content for each of the tabs. The slot property tabs holds a reference to the Tabs component.
- empty: Content that is shown when no tab is available to be shown.
- tabName: A slot that can be used to customize the appearance of the tab name for each tab. The slot applies to all tabs. The slot property tab holds an object with the properties of the tab set with the addTab method.
- dynamic: Default content for dynamic tabs. The slot property tab holds an object with the properties of the tab set with the addTab method.
- The content for each dynamic tab that is added programmatically via the addTab method can also be filled with a slot that has the id of the tab (see example below). Otherwise the content of the dynamic slot is used. The slot property tab holds an object with the properties of the tab set with the addTab method.
Events:
- @selected: Fired when a Tab has been selected. The selected tab is passed as a parameter to the listener.
- @empty: Fired when no tab is available to be shown. The first parameter is true when no tab is available, otherwise false.
Notes:
The component allows to hide the tab label texts if an icon is specified and not enough space is available. Therefore, the component listens to a windowResized event. To react on window size changes, you have to add the following code into the mounted() method of your central Vue component:
``js`
window.addEventListener('resize', event => {
this.$root.$emit('windowResized', event);
});
#### Tab
Properties:
- id (string, required): A unique identifier for the tab.name
- (string, required): The title of the tab.icon
- (string, default null): A FontAwesome icon identifier, e.g. fa-address-book. This may require to load FontAwesome. Defaults to null, which shows no icon.selected
- (boolean, default false): A single tab of a group should be selected by default by setting this property to true.enabled
- (boolean, default true): Set to false to hide the tab completely from the user.closable
- (boolean, default false): Set to true to show a close symbol, which can be used to close/remove the tab.allowShow
- / allow-show (function, default null): Asynchronous function that determines whether a tab can be shown. The function must true to allow switching the active tab. If false is returned, switching the tab is prevented. The tab to be shown is passed as a parameter.
Slots:
- default: Place for the content of your tab. The slot property tab holds a reference to this component.
Events:
- @show: Fired when the tab is shown. The tab is passed as a parameter to the listener.@hide
- : Fired when the tab was hidden. The tab is passed as a parameter to the listener.@close
- : Fired when the tab has been closed. The tab is passed as a parameter to the listener.
#### Examples
##### Simple example with three static tabs
`html
Add the most recent news here.
Add the documentation here.
Contact me at abc@mailprovider.com.
`
##### Dynamically adding tabs + custom tab names appearance
`html
{{ tab.name.toUpperCase() }}
`
Visualizes a single UDF (user-defined function) runtime supported by the back-end.
Properties:
The properties must be filled with parts of the response for supported UDF runtime as defined by the openEO API (GET /udf_runtimes). Returned is an object like { R: {...}, Python: {...} } and one of the keys and values must be passed to the component.
- id (string, required): The identifier of the UDF runtime (i.e. a key of the object; R or Python in the example above)runtime
- (object, required): The UDF runtime specification (i.e. the value for the corresponding key; {...} in the example above)version
- (string|null): If one of the versions or tags available for the runtime should be pre-selected and shown, specify the version or tag here. By default (null), the default version or tag specified by the back-end will be shown.federation
- (object): The data of the federation property obtained from the capabilities.
Slots:
- title: HTML to display as the main heading.badges
- : HTML to display as the badges.before-description
- : HTML to display before the description.
For all slots, the component properties are passed through as slot properties with the same names.
Visualizes all UDF (user-defined function) runtimes supported by the back-end.
Properties:
- runtimes (object, required): Supported UDF runtimes as defined by the openEO API (GET /udf_runtimes).searchTerm
- / search-term (string|null): See the prop externalSearchTerm in SearchableList. sort
- (boolean): See the corresponding prop in SearchableList. offerDetails
- / offer-details (string): See the corresponding prop in SearchableList.collapsed
- (boolean|null): See the corresponding prop in 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.deprecatedFilter
- / deprecated-filter (boolean): See the prop deprecatedFilter in SearchableList.hideExperimental
- / hide-experimental (boolean): See the prop externalHideExperimental in SearchableList.experimentalFilter
- / experimental-filter (boolean): See the prop experimentalFilter in SearchableList.
Slots:
- heading: See the corresponding slot in SearchableList.summary
- : See the corresponding slot in SearchableList.udf-runtime-badges
- : See the corresponding slot badges in UdfRuntime.udf-runtime-before-description
- : See the corresponding slot before-description in UdfRuntime.
Events:
- headingToggled(expanded): See the corresponding event in SearchableList.detailsToggled(expanded, key, identifier, data)
- : See the corresponding event in SearchableList.
Attention: The following features may get (partially) moved to @openeo/js-commons in one of the next beta releases. The documentation may be incomplete, too.
A list of categorized features with their corresponding endpoints as used by the components SupportedFeatures.
* compareStringCaseInsensitive(string a, string b) -> integer: Compares both strings (a) case-insensitive and (b) in natural order. Returns -1 if a is sorted before b, 0 if they are equal and 1 otherwise.friendlyLinks(array linkList, boolean sort = true, array ignoreRel = ['self']) -> array`: Accepts an array of links as def
*