Make toggleable table

cubedash/_pages.py

@@ -322,7 +322,11 @@ def region_page(
     limit = _HARD_SEARCH_LIMIT
     datasets = list(
         _model.STORE.find_datasets_for_region(
-            product_name, region_code, year, month, day, limit=limit + 1, offset=offset
+            product_name,
+            region_code,
+            year,
+            month,
+            day,  # limit=limit + 1, offset=offset
         )
     )
 
@@ -333,20 +337,20 @@ def region_page(
         )
     )
 
-    def url_with_offset(new_offset: int):
-        """Currently request url with a different offset."""
-        page_args = dict(flask.request.view_args)
-        page_args["_o"] = new_offset
-        return url_for(".region_page", **page_args)
+    # def url_with_offset(new_offset: int):
+    #     """Currently request url with a different offset."""
+    #     page_args = dict(flask.request.view_args)
+    #     page_args["_o"] = new_offset
+    #     return url_for(".region_page", **page_args)
 
-    next_page_url = None
-    if len(datasets) > limit:
-        datasets = datasets[:limit]
-        next_page_url = url_with_offset(offset + limit)
+    # next_page_url = None
+    # if len(datasets) > limit:
+    #     datasets = datasets[:limit]
+    #     next_page_url = url_with_offset(offset + limit)
 
-    previous_page_url = None
-    if offset > 0:
-        previous_page_url = url_with_offset(max(offset - _HARD_SEARCH_LIMIT, 0))
+    # previous_page_url = None
+    # if offset > 0:
+    #     previous_page_url = url_with_offset(max(offset - _HARD_SEARCH_LIMIT, 0))
 
     if len(datasets) == 1 and "feelinglucky" in flask.request.args:
         return flask.redirect(url_for("dataset.dataset_page", id_=datasets[0].id))
@@ -370,8 +374,8 @@ def url_with_offset(new_offset: int):
         selected_summary=selected_summary,
         datasets=datasets,
         same_region_products=same_region_products,
-        previous_page_url=previous_page_url,
-        next_page_url=next_page_url,
+        # previous_page_url=previous_page_url,
+        # next_page_url=next_page_url,
         time_selector_summary=time_selector_summary,
         year_selector_summary=year_selector_summary,
     )

cubedash/summary/_extents.py

@@ -595,8 +595,8 @@ def datasets_by_region(
     product_name: str,
     region_code: str,
     time_range: Range,
-    limit: int,
-    offset: int = 0,
+    # limit: int,
+    # offset: int = 0,
 ) -> Generator[Dataset, None, None]:
     product = index.products.get_by_name(product_name)
     query = (
@@ -615,9 +615,9 @@ def datasets_by_region(
             DATASET_SPATIAL.c.center_time > bindparam("from_time", time_range.begin)
         ).where(DATASET_SPATIAL.c.center_time < bindparam("to_time", time_range.end))
     query = (
-        query.order_by(DATASET_SPATIAL.c.center_time)
-        .limit(bindparam("limit", limit))
-        .offset(bindparam("offset", offset))
+        query.order_by(DATASET_SPATIAL.c.center_time.desc())
+        # .limit(bindparam("limit", limit))
+        # .offset(bindparam("offset", offset))
     )
 
     return (

cubedash/summary/_stores.py

@@ -1640,8 +1640,8 @@ def find_datasets_for_region(
         year: int,
         month: int,
         day: int,
-        limit: int,
-        offset: int = 0,
+        # limit: int,
+        # offset: int = 0,
     ) -> Iterable[Dataset]:
         time_range = _utils.as_time_range(
             year, month, day, tzinfo=self.grouping_timezone
@@ -1652,8 +1652,8 @@ def find_datasets_for_region(
             product_name,
             region_code,
             time_range,
-            limit,
-            offset=offset,
+            # limit,
+            # offset=offset,
         )
 
     def find_products_for_region(

cubedash/templates/region.html

@@ -20,6 +20,13 @@
             min-height: calc(200px - 60px);
         }
     </style>
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
+        integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>
+    <script type="text/javascript" language="javascript"
+        src="https://cdn.datatables.net/responsive/2.4.0/js/dataTables.responsive.min.js"></script>
 {% endblock %}
 
 {% block content %}
@@ -52,16 +59,22 @@ <h1><strong>{{ product_region_info.region_label(region_code) }}</strong> {{ prod
     <div class="panel odd overflowable">
         {% if datasets %}
 
-            {% if previous_page_url %}
+            <!-- {% if previous_page_url %}
                 <p>
                     <a href="{{ previous_page_url }}" class="muted">
                         <i class="fa-solid fa-arrow-circle-left" aria-hidden="true"></i>
                         Previous
                     </a>
                 </p>
-            {% endif %}
+            {% endif %} -->
 
-            <table class="data-table">
+            <table id="dataset-table" class="data-table">
+                <thead>
+                    <tr>
+                        <th>Time (local)</th>
+                        <th>Label</th>
+                    </tr>
+                </thead>
                 {% for dataset in datasets %}
                     <tr class="search-result collapse-when-small">
                         <td>{{ dataset | metadata_center_time | printable_time }}</td>
@@ -72,14 +85,14 @@ <h1><strong>{{ product_region_info.region_label(region_code) }}</strong> {{ prod
                 {% endfor %}
             </table>
 
-            {% if next_page_url %}
+            <!-- {% if next_page_url %}
                 <p>
                     <a href="{{ next_page_url }}" class="muted">
                         Next
                         <i class="fa-solid fa-arrow-circle-right" aria-hidden="true"></i>
                     </a>
                 </p>
-            {% endif %}
+            {% endif %} -->
         {% endif %}
         {{ back_to_product_overview }}
     </div>
@@ -126,6 +139,19 @@ <h1><strong>{{ product_region_info.region_label(region_code) }}</strong> {{ prod
         map.fitBounds(dataset_data.getBounds(), {animate: false, maxZoom: 5});
 
         window.MAP = map;
+
+        $(document).ready(function () {
+            $('#dataset-table').DataTable({
+                searching: false,
+                autoWidth: false,
+                responsive: true,
+                pageLength: 100,
+                columnDefs: [
+                    { orderable: false, targets: 1 }
+                ],
+                order: [[0, 'desc']]
+            });
+        });
     </script>
 
 {% endblock %}