From 093b8954cf70d141679c8865d4340d1d33eb73ba Mon Sep 17 00:00:00 2001
From: Oliver Roick <oliver@roick.email>
Date: Fri, 18 Jul 2025 09:38:39 +1000
Subject: [PATCH 1/2] Update collections page with updated options layout

---
 .../stac/eoapi/stac/templates/collection.html | 49 ++++++++++++++-----
 1 file changed, 38 insertions(+), 11 deletions(-)

diff --git a/runtimes/eoapi/stac/eoapi/stac/templates/collection.html b/runtimes/eoapi/stac/eoapi/stac/templates/collection.html
index a3ff5d1..e5b0bc0 100644
--- a/runtimes/eoapi/stac/eoapi/stac/templates/collection.html
+++ b/runtimes/eoapi/stac/eoapi/stac/templates/collection.html
@@ -59,17 +59,42 @@ <h1 class="my-4">
     <h2>Item Assets</h2>
     <ul class="list-unstyled">
       {% for key, asset in response.item_assets.items() %}
-      <li class="mb-2">
-        <p class="small text-monospace text-muted mb-0">{{ key }}</p>
-        <p class="mb-0"><b>{{ asset.title }}</b></p>
-        <p class="mb-0">{{ asset.type }}</p>
-        {% if asset.roles|length > 0 %}
+      <li class="mb-4">
+        <p class="mb-0 font-weight-bold ">
+          <span class="text-muted text-monospace">{{ key }}</span>
+          {% if asset.title and not key == asset.title %} &bull; {{ asset.title }}{% endif %}
+        </p>
+        {% if asset.type %}<p class="mb-0">{{ asset.type }}</p>{% endif %}
+        {% if asset.description %}<p class="mb-0">{{ asset.description }}</p>{% endif %}
+        <ul class="list-inline">
+          <li class="list-inline-item"><a href="{{ asset.href }}">Asset link</a></li>
+          {% if asset.alternate %}
+          {% for alternate_key, alternate_link in asset.alternate.items() %}
+          <li class="list-inline-item"><a href="{{ alternate_link.href }}">{{ alternate_link.title or alternate_key }}</a></li>
+          {% endfor %}
+          {% endif %}
+        </ul>
+        {% if asset.roles and asset.roles|length > 0 %}
         <ul class="list-inline">
           {% for role in asset.roles %}
           <li class="list-inline-item badge badge-light">{{ role }}</li>
           {% endfor %}
         </ul>
         {% endif %}
+
+        <details class="mt-2">
+          <summary>Asset Properties</summary>
+          {% for asset_key, asset_opt in asset | dictsort if asset_key not in ["title", "type", "description", "href", "roles", "alternate"] %}
+          <div class="row mb-1 small">
+            <div class="col-3 font-weight-bold">{{ asset_key }}</div>
+            <div class="col-9">
+              <pre class="mb-0">{{ asset_opt | tojson(2) | trim('"') }}</pre>
+            </div>
+          </div>
+          {% else %}
+          No additional properties for this asset.
+          {% endfor %}
+        </details>
       </li>
       {% endfor %}
     </ul>
@@ -77,7 +102,7 @@ <h2>Item Assets</h2>
 
     {% if response.renders and response.renders.items()|length > 0 %}
     <h2>Render Options</h2>
-    <ul class="list-unstyled">
+    <ul class="list-unstyled small">
       {% for key, option in response.renders.items() %}
       <li class="mb-2">
         <p class="small text-monospace text-muted mb-0">{{ key }}</p>
@@ -85,14 +110,18 @@ <h2>Render Options</h2>
 
         <div class="row">
           <div class="col-3">assets</div>
-          <div class="col-9">{% for asset in option.assets %}{{ asset }}{% if not loop.last %}, {% endif%}{% endfor %}</div>
+          <div class="col-9">
+            <pre class="mb-0">{% for asset in option.assets %}{{ asset }}{% if not loop.last %}, {% endif%}{% endfor %}</pre>
+          </div>
         </div>
 
         {% for render_key, render_opt in option.items() %}
         {% if render_key != 'title' and render_key != 'assets' %}
         <div class="row">
           <div class="col-3">{{ render_key }}</div>
-          <div class="col-9">{{ render_opt }}</div>
+          <div class="col-9">
+            <pre class="mb-0">{{ render_opt | tojson(2) | trim('"') }}</pre>
+          </div>
         </div>
         {% endif %}
         {% endfor %}
@@ -110,9 +139,7 @@ <h2>Links</h2>
   </div>
   <div class="col-md-5">
     {% if response.extent and response.extent.spatial %}
-    <div id="map" class="rounded" style="width: 100%; height: 400px">
-      Loading...
-    </div>
+    <div id="map" class="rounded" style="width:100%; height:calc(-6rem + 100vh); position: sticky; top: 5rem;">Loading...</div>
     {% endif %}
   </div>
 </div>

From 749802028c980bce50f98a074cb4974a0084f912 Mon Sep 17 00:00:00 2001
From: Felix Delattre <felix@developmentseed.org>
Date: Tue, 14 Jul 2026 18:16:09 +0200
Subject: [PATCH 2/2] fix: streamline collection page item asset and render
 display.

---
 .../stac/eoapi/stac/templates/collection.html   | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/runtimes/eoapi/stac/eoapi/stac/templates/collection.html b/runtimes/eoapi/stac/eoapi/stac/templates/collection.html
index e5b0bc0..677c8e6 100644
--- a/runtimes/eoapi/stac/eoapi/stac/templates/collection.html
+++ b/runtimes/eoapi/stac/eoapi/stac/templates/collection.html
@@ -66,14 +66,18 @@ <h2>Item Assets</h2>
         </p>
         {% if asset.type %}<p class="mb-0">{{ asset.type }}</p>{% endif %}
         {% if asset.description %}<p class="mb-0">{{ asset.description }}</p>{% endif %}
+        {% if asset.href or asset.alternate %}
         <ul class="list-inline">
+          {% if asset.href %}
           <li class="list-inline-item"><a href="{{ asset.href }}">Asset link</a></li>
+          {% endif %}
           {% if asset.alternate %}
           {% for alternate_key, alternate_link in asset.alternate.items() %}
           <li class="list-inline-item"><a href="{{ alternate_link.href }}">{{ alternate_link.title or alternate_key }}</a></li>
           {% endfor %}
           {% endif %}
         </ul>
+        {% endif %}
         {% if asset.roles and asset.roles|length > 0 %}
         <ul class="list-inline">
           {% for role in asset.roles %}
@@ -88,7 +92,7 @@ <h2>Item Assets</h2>
           <div class="row mb-1 small">
             <div class="col-3 font-weight-bold">{{ asset_key }}</div>
             <div class="col-9">
-              <pre class="mb-0">{{ asset_opt | tojson(2) | trim('"') }}</pre>
+              <pre class="mb-0">{{ asset_opt | tojson(2) }}</pre>
             </div>
           </div>
           {% else %}
@@ -108,19 +112,12 @@ <h2>Render Options</h2>
         <p class="small text-monospace text-muted mb-0">{{ key }}</p>
         {% if option.title %}<p class="mb-0"><b>{{ option.title }}</b></p>{% endif %}
 
-        <div class="row">
-          <div class="col-3">assets</div>
-          <div class="col-9">
-            <pre class="mb-0">{% for asset in option.assets %}{{ asset }}{% if not loop.last %}, {% endif%}{% endfor %}</pre>
-          </div>
-        </div>
-
         {% for render_key, render_opt in option.items() %}
-        {% if render_key != 'title' and render_key != 'assets' %}
+        {% if render_key != 'title' %}
         <div class="row">
           <div class="col-3">{{ render_key }}</div>
           <div class="col-9">
-            <pre class="mb-0">{{ render_opt | tojson(2) | trim('"') }}</pre>
+            <pre class="mb-0">{{ render_opt | tojson(2) }}</pre>
           </div>
         </div>
         {% endif %}