Statistics don't render correctly #91

Open-EO · May 22, 2024 · 70f8dff · 70f8dff
1 parent e8af4b3
commit 70f8dff
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Improved look of field badges
   - Make sure internal state doesn't conflict
   - Use better delete symbol
+- Complex tabular STAC data gets rendered correctly
 
 ## [2.14.1] - 2023-05-08
 

diff --git a/components/internal/StacFields.vue b/components/internal/StacFields.vue
@@ -17,7 +17,15 @@
 								<tbody>
 									<tr v-for="(row, r) in prop.formatted" :key="r">
 										<th v-if="!Array.isArray(prop.formatted)">{{ r }}</th>
-										<td v-for="col in prop.itemOrder" :key="`${col}_${r}`" v-html="row[col]" />
+										<td v-for="col in prop.itemOrder" :key="`${col}_${r}`">
+											<ol class="array" v-if="Array.isArray(row[col])">
+												<li v-for="(v, k) in row[col]" :key="k"><span v-html="v" /></li>
+											</ol>
+											<ul class="object" v-else-if="row[col] && typeof row[col] === 'object'">
+												<li v-for="(v, k) in row[col]" :key="k"><strong>{{ k | key }}</strong>: <span v-html="v" /></li>
+											</ul>
+											<div v-else v-html="row[col]" />
+										</td>
 									</tr>
 								</tbody>
 							</table>
@@ -35,6 +43,7 @@
 <script>
 import StacFields from '@radiantearth/stac-fields';
 import Utils from '../../utils'
+import ObjectTree from '../ObjectTree.vue';
 
 const CORE_COLLECTION_FIELDS = [
 	// Catalog and Collection fields that are handled directly
@@ -63,7 +72,8 @@ StacFields.Registry.externalRenderer = true;
 export default {
 	name: 'StacFields',
 	components: {
-		Process: () => import('../Process.vue')
+		Process: () => import('../Process.vue'),
+		ObjectTree
 	},
 	props: {
 		metadata: {
@@ -87,6 +97,9 @@ export default {
 			default: () => ({})
 		}
 	},
+	filters: {
+		key: Utils.prettifyString
+	},
 	computed: {
 		ignoreFn() {
 			if (this.ignore.length > 0) {
@@ -145,6 +158,11 @@ export default {
 		td, th {
 			border: 1px solid rgba(0, 0, 0, 0.2);
 			padding: 3px;
+
+			> .object {
+				list-style-type: none;
+				padding-left: 0;
+			}
 		}
 		td {
 			vertical-align: top;

diff --git a/dev/examples.js b/dev/examples.js
@@ -2,6 +2,7 @@ let collectionGee = require('./examples/collection-gee-s2.json');
 let collectionEurac = require('./examples/collection-eurac.json');
 let collections = require('./examples/collections-gee.json');
 let item = require('./examples/item.json');
+let itemCeos = require('./examples/item-ceos.json');
 let items = require('./examples/items-ard-eodc.json');
 let job = require('./examples/job.json');
 let logs = require('./examples/logs.json');
@@ -196,6 +197,9 @@ if (a == b) console.log("Hello World");
 	"item": {
 		"batch-job": {
 			"data": item
+		},
+		"ceos": {
+			"data": itemCeos
 		}
 	},
 	"items": {

diff --git a/dev/examples/item-ceos.json b/dev/examples/item-ceos.json
@@ -0,0 +1,83 @@
+{
+  "assets": {
+    "timeseries.json": {
+      "eo:bands": [
+        {
+          "name": "temperature_mean"
+        }
+      ],
+      "file:nodata": [
+        null
+      ],
+      "file:size": 5948642,
+      "href": "https://openeo.vito.be/openeo/1.1/jobs/j-2eefc4cbde81425d8ef8ea614ca8a75f/results/assets/ZGZhNjc4Y2I5YWIxN2Y2NWQ0ZjAyNWUzMGZhYzVlMGQ5MDExNjE3NmU0NGZkMTdkNzAzNDE5MzIyNzQ3Y2JiZEBlZ2kuZXU%3D/4ba18c2fb39f0b05987c5bda8b963bf7/timeseries.json?expires=1682933585",
+      "raster:bands": [
+        {
+          "statistics": {
+            "maximum": 30571.25,
+            "mean": 28275.299176092813,
+            "minimum": 25375.33333333333,
+            "stddev": 872.2911603581424,
+            "valid_percent": 99.58355484671274
+          }
+        }
+      ],
+      "roles": [
+        "data"
+      ],
+      "title": "timeseries.json",
+      "type": "application/json"
+    }
+  },
+  "description": "Results for batch job j-2eefc4cbde81425d8ef8ea614ca8a75f",
+  "extent": {
+    "spatial": {
+      "bbox": [
+        [
+          -10.113295143026754,
+          34.76265766563015,
+          31.96104751317609,
+          70.25714431094598
+        ]
+      ]
+    },
+    "temporal": {
+      "interval": [
+        [
+          "2021-01-01T00:00:00Z",
+          "2021-12-31T00:00:00Z"
+        ]
+      ]
+    }
+  },
+  "id": "j-2eefc4cbde81425d8ef8ea614ca8a75f",
+  "license": "proprietary",
+  "links": [
+    {
+      "href": "/data/MTDA/AgERA5/2021/20211231/AgERA5_dewpoint-temperature_20211231.tif",
+      "rel": "derived_from",
+      "title": "Derived from /data/MTDA/AgERA5/2021/20211231/AgERA5_dewpoint-temperature_20211231.tif"
+    },
+    {
+      "href": "https://openeo.vito.be/openeo/1.1/jobs/j-2eefc4cbde81425d8ef8ea614ca8a75f/results",
+      "rel": "self",
+      "type": "application/json"
+    },
+    {
+      "href": "https://openeo.vito.be/openeo/1.1/jobs/j-2eefc4cbde81425d8ef8ea614ca8a75f/results/ZGZhNjc4Y2I5YWIxN2Y2NWQ0ZjAyNWUzMGZhYzVlMGQ5MDExNjE3NmU0NGZkMTdkNzAzNDE5MzIyNzQ3Y2JiZEBlZ2kuZXU%3D/31b58e8466e22b0f1b7580cfa98b3ef7?expires=1682933585",
+      "rel": "canonical",
+      "type": "application/json"
+    },
+    {
+      "href": "http://ceos.org/ard/files/PFS/SR/v5.0/CARD4L_Product_Family_Specification_Surface_Reflectance-v5.0.pdf",
+      "rel": "card4l-document",
+      "type": "application/pdf"
+    }
+  ],
+  "stac_extensions": [
+    "eo",
+    "file"
+  ],
+  "stac_version": "1.0.0",
+  "type": "Collection"
+}