Skip to content

Commit 31248c9

Browse files
committed
refining platform explorer component
1 parent 7803bab commit 31248c9

File tree

11 files changed

+78
-115
lines changed

11 files changed

+78
-115
lines changed

.vitepress/data/platforms/cdse-openeo.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
"WorldCover"
1414
],
1515
"languages": ["Python", "R", "JavaScript"],
16-
"access": ["openEO"]
16+
"features": [
17+
"openEO",
18+
"CDSE Jupyter Notebooks"
19+
]
1720
}
18-

.vitepress/data/platforms/cocalc-edc.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,5 @@
2020
"SRTM"
2121
],
2222
"languages": ["Python"],
23-
"access": ["OGC API Processes", "Jupyter"]
23+
"features": ["OGC API Processes", "Jupyter"]
2424
}
25-

.vitepress/data/platforms/deepesdl.json

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,22 @@
44
"logo": "/img/platforms/platform_logos/deepesdl.webp",
55
"href": "/Technical%20Documentation/Platforms/DeepESDL",
66
"datasets": [
7-
"Sentinel-1",
8-
"Sentinel-2",
9-
"Sentinel-3",
10-
"Sentinel-5P",
11-
"CLMS",
12-
"SPOT 4/5",
13-
"Proba-V"
7+
"Copernicus Climate Data Store (CDS)",
8+
"Copernicus Marine Service (CMEMS)",
9+
"Copernicus Land Monitoring Service (CLMS)",
10+
"DeepESDL Public Data Cubes",
11+
"EOPF Sample Service",
12+
"ESA Climate Change Initiative (CCI)",
13+
"ESA SMOS",
14+
"GEDI"
1415
],
1516
"languages": ["Python"],
16-
"access": ["OGC API Processes", "Jupyter"]
17+
"features": [
18+
"xcube",
19+
"STAC",
20+
"Sentinel Hub",
21+
"Jupyter",
22+
"Conda",
23+
"Git"
24+
]
1725
}
18-

.vitepress/data/platforms/edc-eoxhub.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,5 @@
2020
"SRTM"
2121
],
2222
"languages": ["Python"],
23-
"access": ["OGC API Processes", "Jupyter"]
23+
"features": ["OGC API Processes", "Jupyter"]
2424
}
25-

.vitepress/data/platforms/pangeo-edc.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,5 @@
2020
"SRTM"
2121
],
2222
"languages": ["Python"],
23-
"access": ["Dask Gateway", "Jupyter"]
23+
"features": ["Dask Gateway", "Jupyter"]
2424
}
25-

.vitepress/data/platforms/polar-tep-edc.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,5 @@
2020
"SRTM"
2121
],
2222
"languages": ["Python"],
23-
"access": ["OGC API Processes", "Jupyter"]
23+
"features": ["OGC API Processes", "Jupyter"]
2424
}
25-

.vitepress/theme/components/PlatformExplorer.vue

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const platforms = ref(Object.values(modules) || [])
99
// Filters
1010
const q = ref('')
1111
const language = ref('')
12-
const access = ref('')
12+
const feature = ref('')
1313
const dataset = ref('')
1414
1515
// Helpers
@@ -21,7 +21,7 @@ const buildHaystack = p => (
2121
p.href,
2222
...(p.datasets || []),
2323
...(p.languages || []),
24-
...(p.access || []),
24+
...(p.features || []),
2525
...(p.hardware || []),
2626
...(p.workflows || [])
2727
]
@@ -32,25 +32,25 @@ const buildHaystack = p => (
3232
3333
// Facets
3434
const languages = computed(() => uniqueSorted(platforms.value.flatMap(p => p.languages || [])))
35-
const accesses = computed(() => uniqueSorted(platforms.value.flatMap(p => p.access || [])))
35+
const featureOptions = computed(() => uniqueSorted(platforms.value.flatMap(p => p.features || [])))
3636
const datasets = computed(() => uniqueSorted(platforms.value.flatMap(p => p.datasets || [])))
3737
3838
// Derived state
39-
const hasAnyFilter = computed(() => !!(q.value || language.value || access.value || dataset.value))
39+
const hasAnyFilter = computed(() => !!(q.value || language.value || feature.value || dataset.value))
4040
4141
// Filtered results
4242
const filtered = computed(() => {
4343
const term = q.value.trim().toLowerCase()
4444
return platforms.value.filter(p => {
4545
const matchQ = !term || buildHaystack(p).includes(term)
4646
const matchLang = !language.value || (p.languages || []).includes(language.value)
47-
const matchAccess = !access.value || (p.access || []).includes(access.value)
47+
const matchFeature = !feature.value || (p.features || []).includes(feature.value)
4848
const matchDataset = !dataset.value || (p.datasets || []).includes(dataset.value)
49-
return matchQ && matchLang && matchAccess && matchDataset
49+
return matchQ && matchLang && matchFeature && matchDataset
5050
})
5151
})
5252
53-
const clear = () => { q.value = ''; language.value = ''; access.value = ''; dataset.value = '' }
53+
const clear = () => { q.value = ''; language.value = ''; feature.value = ''; dataset.value = '' }
5454
</script>
5555

5656
<template>
@@ -68,15 +68,15 @@ const clear = () => { q.value = ''; language.value = ''; access.value = ''; data
6868
<div class="pe-filters-bottom">
6969
<select v-model="language" class="pe-select" aria-label="Filter by language">
7070
<option value="">Language: Any</option>
71-
<option v-for="l in languages" :key="l" :value="l">{{ l }}</option>
71+
<option v-for="l in languages" :key="l" :value="l" :title="l">{{ l }}</option>
7272
</select>
73-
<select v-model="access" class="pe-select" aria-label="Filter by access method">
74-
<option value="">Access: Any</option>
75-
<option v-for="a in accesses" :key="a" :value="a">{{ a }}</option>
73+
<select v-model="feature" class="pe-select" aria-label="Filter by features">
74+
<option value="">Features: Any</option>
75+
<option v-for="f in featureOptions" :key="f" :value="f" :title="f">{{ f }}</option>
7676
</select>
7777
<select v-model="dataset" class="pe-select" aria-label="Filter by dataset">
7878
<option value="">Dataset: Any</option>
79-
<option v-for="d in datasets" :key="d" :value="d">{{ d }}</option>
79+
<option v-for="d in datasets" :key="d" :value="d" :title="d">{{ d }}</option>
8080
</select>
8181
<button class="pe-btn" @click="clear" :disabled="!hasAnyFilter">Clear</button>
8282
</div>
@@ -91,7 +91,7 @@ const clear = () => { q.value = ''; language.value = ''; access.value = ''; data
9191
<h3 class="pe-title">{{ p.name }}</h3>
9292
<div class="pe-meta">
9393
<div v-if="p.languages?.length"><strong>Languages:</strong> {{ p.languages.join(', ') }}</div>
94-
<div v-if="p.access?.length"><strong>Access:</strong> {{ p.access.join(', ') }}</div>
94+
<div v-if="p.features?.length"><strong>Features:</strong> {{ p.features.join(', ') }}</div>
9595
<div v-if="p.datasets?.length">
9696
<strong>Datasets:</strong>
9797
<span>
@@ -113,7 +113,8 @@ const clear = () => { q.value = ''; language.value = ''; access.value = ''; data
113113
.pe-filters-top { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; }
114114
.pe-input, .pe-select { height: 36px; line-height: 34px; padding: 0 .6rem; font-size: .95rem; border: 1px solid var(--vp-c-divider, #d0d7de); border-radius: 8px; background: var(--vp-c-bg, #fff); color: var(--vp-c-text-1, #1f2328); }
115115
.pe-input { flex: 1 1 auto; min-width: 200px; }
116-
.pe-select { flex: 0 0 auto; white-space: nowrap; }
116+
.pe-select { flex: 1 1 160px; min-width: 140px; max-width: 220px; width: auto; white-space: normal; }
117+
.pe-select option { white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.2; }
117118
.pe-btn { height: 36px; padding: 0 .8rem; border-radius: 8px; border: 1px solid transparent; background: var(--vp-c-brand-1, #3e63dd); color: #fff; cursor: pointer; }
118119
.pe-btn:disabled { opacity: .6; cursor: default; }
119120
.pe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
@@ -124,5 +125,6 @@ const clear = () => { q.value = ''; language.value = ''; access.value = ''; data
124125
.pe-actions { margin-top: auto; display: flex; justify-content: center; }
125126
.pe-link { text-decoration: none; color: var(--vp-c-brand-1, #3e63dd); font-weight: 600; }
126127
.pe-empty { text-align: center; color: var(--vp-c-text-2, #57606a); padding: .75rem 0; }
127-
.pe-filters-bottom { display: flex; flex-wrap: nowrap; gap: .5rem; align-items: center; margin: .5rem 0 1rem; overflow-x: auto; padding: .25rem 0; }
128+
.pe-filters-bottom { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0 1rem; overflow-x: visible; padding: .25rem 0; }
129+
.pe-filters-bottom .pe-btn { margin-left: auto; order: 99; }
128130
</style>

pages/Integrating New Platforms to EarthCODE/User Documentation for Platforms Guide.md

Lines changed: 37 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -32,40 +32,10 @@ Make a pull merge request back to main
3232
We will manually review and merge
3333

3434

35-
# Format
36-
Please follow the format guidelines below when creating EarthCODE platform documentation pages. Consistency across platform entries helps users easily compare capabilities and navigate the documentation site.
37-
38-
This does not aim to be an extensive documentation about your platform, just a summary of its key features and its integrations which EarthCODE users will use.
39-
40-
## Title and File name
41-
Each platform documentation page must begin with a properly formatted title and use a consistent file naming convention:
42-
- The Markdown file should be named after your platform, using **PascalCase with no spaces**.
43-
Example: `EDC.md`, `DeepESDL.md`, `OpenEO.md`
44-
- The first line of the document should be a `#` level heading with the **exact same name** as the file.
45-
Example:
46-
```markdown
47-
# EDC
48-
49-
## About
50-
Add your platform description inside the `<FeatureCard>` block provided in the template - this will render as a styled summary section at the top of your documentation page.
5135

52-
The **About** section should include a short overview of your platform, this can include:
53-
- Who the platform is primarily designed for (e.g. scientists for polar science, EO data scientists, etc..)
54-
- The types of science or domains it supports best (e.g. climate, land monitoring, atmospheric studies)
55-
- What kind of workflows it enables (e.g. datacube analytics, ML inference, EO product generation)
56-
57-
Upload your logo to the following path:
58-
`/public/img/platforms/platform_logos/your-platform-name.png`
59-
60-
```markdown
61-
<FeatureCard img="/img/platforms/platform_logos/deepesdl.webp" alt="DeepESDL Logo">
62-
DeepESDL is designed for interactive Earth System Data Lab exploration and analytics. It provides ready-to-use EO datacubes and powerful cloud-based tooling for data scientists and researchers. Ideal for climate, land, and atmosphere research, the platform supports datacube-driven workflows and reproducible experiment design.
63-
</FeatureCard>
64-
```
65-
66-
## Summary
36+
## Platform Summary
6737

68-
This should be a summary of your platform’s capabilities. Be concise, accurate, and focus on how your platform supports FAIR, open, and reproducible science. These details feed both the platform’s page and the interactive platform explorer at the top of the [Platforms section](../Technical%20Documentation/Platforms/index.md)
38+
This should be a summary of your platform’s capabilities. These details feed the interactive platform explorer at the top of the [Platforms section](../Technical%20Documentation/Platforms/index.md)
6939

7040
Add a JSON file for your platform in the repository at:
7141

@@ -78,7 +48,7 @@ Required fields
7848
- `href` (string): link to your platform documentation page, use an ext‑less path (e.g. `/Technical%20Documentation/Platforms/EDC/`).
7949
- `datasets` (string[]): describe which datasets are available on your platform (e.g. `Sentinel-1`, `Landsat-8`, `MODIS`).
8050
- `languages` (string[]): supported languages (e.g. `Python`, `R`, `JavaScript`).
81-
- `access` (string[]): primary access/processing interfaces (e.g. `openEO`, `OGC API Processes`, `Dask Gateway`).
51+
- `features` (string[]): primary access/processing interfaces (e.g. `openEO`, `OGC API Processes`, `Dask Gateway`).
8252

8353
Example
8454
```json
@@ -97,7 +67,7 @@ Example
9767
"WorldCover"
9868
],
9969
"languages": ["Python", "R", "JavaScript"],
100-
"access": ["openEO"],
70+
"features": ["openEO"],
10171
}
10272
```
10373

@@ -106,6 +76,39 @@ Notes
10676
- Use consistent names for datasets (e.g. `Sentinel-5P` not `S5P`)
10777
- Check consistency with other json files.
10878

79+
80+
# Format
81+
Please follow the format guidelines below when creating EarthCODE platform documentation pages. Consistency across platform entries helps users easily compare capabilities and navigate the documentation site.
82+
83+
This does not aim to be an extensive documentation about your platform, just a summary of its key features and its integrations which EarthCODE users will use.
84+
85+
86+
## Title and File name
87+
Each platform documentation page must begin with a properly formatted title and use a consistent file naming convention:
88+
- The Markdown file should be named after your platform, using **PascalCase with no spaces**.
89+
Example: `EDC.md`, `DeepESDL.md`, `OpenEO.md`
90+
- The first line of the document should be a `#` level heading with the **exact same name** as the file.
91+
Example:
92+
```markdown
93+
# EDC
94+
95+
## About
96+
Add your platform description inside the `<FeatureCard>` block provided in the template - this will render as a styled summary section at the top of your documentation page.
97+
98+
The **About** section should include a short overview of your platform, this can include:
99+
- Who the platform is primarily designed for (e.g. scientists for polar science, EO data scientists, etc..)
100+
- The types of science or domains it supports best (e.g. climate, land monitoring, atmospheric studies)
101+
- What kind of workflows it enables (e.g. datacube analytics, ML inference, EO product generation)
102+
103+
Upload your logo to the following path:
104+
`/public/img/platforms/platform_logos/your-platform-name.png`
105+
106+
```markdown
107+
<FeatureCard img="/img/platforms/platform_logos/deepesdl.webp" alt="DeepESDL Logo">
108+
DeepESDL is designed for interactive Earth System Data Lab exploration and analytics. It provides ready-to-use EO datacubes and powerful cloud-based tooling for data scientists and researchers. Ideal for climate, land, and atmosphere research, the platform supports datacube-driven workflows and reproducible experiment design.
109+
</FeatureCard>
110+
```
111+
109112
## Developing and Publishing Workflows & Data
110113

111114
In this section, explain how users create, manage, test and publish their workflows and data products using your platform, and how these integrate with EarthCODE.

pages/Technical Documentation/Platforms/DeepESDL.md

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,22 +17,6 @@ and scalable processing resources.
1717

1818
</FeatureCard>
1919

20-
## Summary
21-
22-
**Infrastructure Capabilities**
23-
24-
| Platform | Data Access | Specialised Hardware & Services | Compatible Workflows |
25-
| ------------------------------------------------------------------------------------------------------ |--------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------|-----------------------------------------------------|
26-
| [DeepESDL](https://esa-earthcode.github.io/documentation/Technical%20Documentation/Platforms/DeepESDL) | CDS, CMEMS, CLMS, EOPF Sample Service, ESA CCI, ESA SMOS, GEDI, Sentinel Hub, STAC, Zenodo | GPU, CPU, Dask cluster, [geodb](https://xcube-dev.github.io/xcube-geodb/), MLflow, TensorFlow | Jupyter notebooks |
27-
28-
**FAIR Open Science Development Capabilities**
29-
30-
| Platform | Development Tools | Supported Languages | Visualization Tools | Produced Workflow Type |
31-
| -------- |---------------------------------------------------| ---------------------- |-----------------------------------------------------------------------------------------------------------------------------------------------------------| ----------------------------- |
32-
| [DeepESDL](https://esa-earthcode.github.io/documentation/Technical%20Documentation/Platforms/DeepESDL) | JupyterLab, conda environments, [xcube](https://xcube.readthedocs.io/en/latest/), Git | Python | [xcube Viewer](https://viewer.earthsystemdatalab.net/), [Lexcube](https://earthsystemdatalab.net/guide/visualisation/lexcube-viewer/), [4D Viewer](https://4dviewer.com/), Jupyter | Jupyter notebooks |
33-
34-
---
35-
3620
### Developing Workflows
3721

3822
**Learn By Example**

pages/Technical Documentation/Platforms/EDC/Pangeo.md

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,6 @@
88
On EarthCODE, Pangeo is provided through the **Euro Data Cube (EDC) EOxHub Workspace**. Pangeo offers a powerful, interactive environment for scalable geoscience, built on an open-source ecosystem of key Python tools including Jupyter, Xarray, Dask, STAC, and Zarr. It is designed for scientists to scale to massive, cloud-based Earth Observation datasets with little to no changes to your python workflows.
99
</FeatureCard>
1010

11-
## Summary
12-
13-
**Infrastructure Capabilities**
14-
15-
| Platform | Data Access | Specialised Hardware & Services | Compatible Workflows |
16-
|------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------|-------------------------------------------|
17-
| [Pangeo](./Pangeo.md) | | On-demand, scalable Dask clusters via Dask Gateway. | Jupyter Notebooks, Python scripts, containerized applications. |
18-
19-
<br>
20-
21-
**FAIR Open Science Development Capabilities**
22-
23-
| Platform | Development Tools | Supported Languages | Visualization Tools | Produced Workflow Type |
24-
|------------------------------------------|----------------------------------------------------------------------------------|----------------------------------------------------|------------------------------------------------------------------------------------------------------------------------|---------------------------------------------|
25-
| [Pangeo](./Pangeo.md) | JupyterLab and Jupyter Notebooks are the primary interactive development environment. | Python with core libraries like Xarray, Dask, and NumPy. | In-notebook visualization using libraries like Matplotlib and the HoloViz suite (hvPlot, GeoViews). | Reproducible Jupyter Notebooks and containerized Python applications. |
26-
2711
## Developing and Publishing Workflows & Data
2812

2913
You develop workflows within the managed EDC EOxHub Workspace, an interactive JupyterLab environment. This setup allows you to use Dask Gateway to seamlessly scale your analysis from a single notebook to a powerful compute cluster.

0 commit comments

Comments
 (0)