Fix #1571: Display available lake data (#1573)

* display available data range

* handle period picker callback

* handle data period selection update for feeds and predictoors pages

* connect home page charts to new period picker and UI updates

pdr_backend/pdr_dashboard/assets/styles.css

@@ -6,7 +6,7 @@ body,
 }
 
 body {
-  padding: 10px;
+  padding: 0;
 }
 
 .main-container {
@@ -26,7 +26,7 @@ body {
 #page-content {
   display: flex;
   flex: 1;
-  height: calc(100vh - 100px);
+  height: calc(100vh - 125px);
   margin: 0px;
   padding: 0px;
   width: 100%;
@@ -49,8 +49,12 @@ body {
   display: none;
 }
 
+.date-period-radio-items{
+  margin-right: 2px;
+}
+
 /* Hide the default radio circle */
-#date-period-radio-items input[type="radio"] {
+.date-period-radio-items input[type="radio"] {
   display: none;
 }
 
@@ -113,19 +117,20 @@ button {
 }
 
 /* Style the label as buttons */
-#date-period-radio-items label {
+.date-period-radio-items label {
   display: inline-block;
-  padding: 5px 14px;
-  margin-right: 10px;
+  padding: 8px 16px;
+  margin-right: 0 !important;
+  margin-left: 10px;
   background-color: #007bff;
   color: white;
   border: 1px solid #007bff;
-  border-radius: 4px;
+  border-radius: 5px;
   cursor: pointer;
 }
 
 /* Style for selected label */
-#date-period-radio-items label:has(input:checked) {
+.date-period-radio-items label:has(input:checked) {
   background-color: #00254d;
   border-color: #0056b3;
 }
@@ -205,11 +210,10 @@ button {
 
 .metrics_row {
   display: flex;
-  border: 1px solid grey;
   border-radius: 10px;
   justify-content: space-between;
-  padding: 10px 40px;
-  margin-bottom: 10px;
+  padding: 0 40px;
+  margin-bottom: 20px;
 }
 
 .filters-container {
@@ -304,26 +308,35 @@ button {
   border-radius: 5px;
 }
 
+.header-container{
+  height: 100px;
+  margin-bottom: 25px;
+  border-bottom: 1px solid #adadad;
+}
+
 #navbar-container {
   display: flex;
   justify-content: center;
 }
 
+#navbar-container .container{
+  padding: 0;
+}
+
+.nav-link{
+  padding: 0 !important;
+  font-size: 28px;
+  font-weight: bold; 
+  margin-right: 20px;
+}
+
 .page-layout {
   height: 100%;
   display: flex;
   width: 100%;
   flex-direction: column;
 }
 
-.metrics_row {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  text-align: center;
-  margin-bottom: 40px;
-}
-
 .search-bar-row {
   display: flex;
   flex-direction: row;
@@ -367,3 +380,9 @@ button {
 #predictoors_modal-body .modal-graph-item, #feeds_modal-body .modal-graph-item{
     margin-bottom: 30px;
 }
+
+#available-data-text{
+  font-weight: bold;
+  font-size: 20px;
+  margin-right: 10px;
+}

pdr_backend/pdr_dashboard/callbacks/callbacks_common.py

@@ -3,9 +3,14 @@
     get_navbar,
     NAV_ITEMS,
 )
+from pdr_backend.util.time_types import UnixTimeMs, UnixTimeS
 from pdr_backend.pdr_dashboard.pages.home import HomePage
 from pdr_backend.pdr_dashboard.pages.feeds import FeedsPage
 from pdr_backend.pdr_dashboard.pages.predictoors import PredictoorsPage
+from pdr_backend.pdr_dashboard.util.data import (
+    get_date_period_text_header,
+    get_start_date_from_period,
+)
 
 
 def get_callbacks_common(app):
@@ -21,6 +26,30 @@ def display_page(pathname):
         result = get_page(pathname), get_navbar(NAV_ITEMS)
         return result
 
+    @app.callback(
+        Output("start-date", "data"),
+        [Input("general-lake-date-period-radio-items", "value")],
+    )
+    def set_period_start_date(selected_period_start):
+        start_date = (
+            get_start_date_from_period(int(selected_period_start))
+            if int(selected_period_start) > 0
+            else None
+        )
+        app.data.start_date = (
+            UnixTimeMs(UnixTimeS(start_date).to_milliseconds()) if start_date else None
+        )
+        return app.data.start_date
+
+    @app.callback(
+        Output("available-data-text", "children"),
+        [Input("page-content", "children")],
+    )
+    def display_available_data(_):
+        return get_date_period_text_header(
+            app.data.min_timestamp, app.data.max_timestamp
+        )
+
     def get_page(pathname):
         if pathname not in ["/", "/feeds", "/predictoors"]:
             return "404 - Page not found"

pdr_backend/pdr_dashboard/callbacks/callbacks_feeds.py

@@ -1,8 +1,11 @@
 import dash
 from dash import Input, Output, State
 
+from pdr_backend.pdr_dashboard.pages.feeds import get_metric
+from pdr_backend.pdr_dashboard.util.data import (
+    get_feed_column_ids,
+)
 from pdr_backend.pdr_dashboard.dash_components.modal import ModalContent
-from pdr_backend.pdr_dashboard.util.data import get_feed_column_ids
 from pdr_backend.pdr_dashboard.util.filters import (
     check_condition,
     filter_table_by_range,
@@ -12,6 +15,26 @@
 
 
 def get_callbacks_feeds(app):
+    @app.callback(
+        Output("feeds_page_table", "data", allow_duplicate=True),
+        Output("feeds_page_metrics_row", "children"),
+        [Input("start-date", "data")],
+        prevent_initial_call=True,
+    )
+    def update_page_data(_start_date):
+        app.data.refresh_feeds_data()
+
+        metrics_children_data = [
+            get_metric(
+                label=key,
+                value=value,
+                value_id=f"feeds_page_{key}_metric",
+            )
+            for key, value in app.data.feeds_metrics_data.items()
+        ]
+
+        return app.data.feeds_table_data, metrics_children_data
+
     @app.callback(
         Output("feeds_page_table", "data"),
         [

pdr_backend/pdr_dashboard/callbacks/callbacks_home.py

@@ -2,13 +2,14 @@
 from dash import Input, Output, State
 
 from pdr_backend.cli.arg_feeds import ArgFeeds
+from pdr_backend.util.time_types import UnixTimeMs, UnixTimeS
 from pdr_backend.pdr_dashboard.dash_components.plots import get_figures_and_metrics
 from pdr_backend.pdr_dashboard.dash_components.view_elements import get_graph
 from pdr_backend.pdr_dashboard.util.data import (
     filter_objects_by_field,
-    get_date_period_text,
-    get_start_date_from_period,
+    get_date_period_text_for_selected_predictoors,
     select_or_clear_all_by_table,
+    get_start_date_from_period,
 )
 from pdr_backend.pdr_dashboard.util.format import format_value
 
@@ -30,7 +31,7 @@ def get_callbacks_home(app):
             Input("predictoors_table", "selected_rows"),
             Input("feeds_table", "data"),
             Input("predictoors_table", "data"),
-            Input("date-period-radio-items", "value"),
+            Input("general-lake-date-period-radio-items", "value"),
         ],
     )
     def get_display_data_from_db(
@@ -62,7 +63,11 @@ def get_display_data_from_db(
             payouts = app.data.payouts(
                 [row["contract"] for row in selected_feeds],
                 predictoors_addrs,
-                start_date,
+                (
+                    UnixTimeMs(UnixTimeS(start_date).to_milliseconds())
+                    if start_date
+                    else None
+                ),
             )
 
         # get figures
@@ -74,14 +79,7 @@ def get_display_data_from_db(
         )
 
         # get available period date text
-        date_period_text = (
-            get_date_period_text(payouts)
-            if (
-                int(date_period) == 0
-                and (len(selected_feeds) > 0 or len(selected_predictoors) > 0)
-            )
-            else dash.no_update
-        )
+        date_period_text = get_date_period_text_for_selected_predictoors(payouts)
 
         return (
             get_graph(figs_metrics.fig_accuracy),
@@ -146,7 +144,7 @@ def update_predictoors_table_on_search(
         return (filtered_data, selected_predictoor_indices)
 
     @app.callback(
-        Output("feeds_table", "data", allow_duplicate=True),
+        Output("feeds_table", "data"),
         Output("feeds_table", "selected_rows"),
         [
             Input("search-input-Feeds", "value"),

pdr_backend/pdr_dashboard/callbacks/callbacks_predictoors.py

@@ -9,9 +9,34 @@
 )
 from pdr_backend.pdr_dashboard.util.format import format_table
 from pdr_backend.pdr_dashboard.util.helpers import toggle_modal_helper
+from pdr_backend.pdr_dashboard.pages.predictoors import (
+    get_metric,
+    key_id_name,
+)
 
 
 def get_callbacks_predictoors(app):
+    @app.callback(
+        Output("predictoors_page_table", "data", allow_duplicate=True),
+        Output("predictoors_page_metrics_row", "children"),
+        [Input("start-date", "data")],
+        prevent_initial_call=True,
+    )
+    def update_page_data(_start_date):
+        app.data.refresh_predictoors_data()
+        stats = app.data.predictoors_metrics()
+
+        metrics_children_data = [
+            get_metric(
+                label=key,
+                value=value,
+                value_id=key_id_name(key),
+            )
+            for key, value in stats.items()
+        ]
+
+        return app.data.predictoors_table_data, metrics_children_data
+
     @app.callback(
         Output("predictoors_page_table", "data"),
         [

pdr_backend/pdr_dashboard/dash_components/modal.py

@@ -2,7 +2,6 @@
 
 import dash_bootstrap_components as dbc
 from dash import html
-
 from pdr_backend.cli.arg_feeds import ArgFeed
 from pdr_backend.pdr_dashboard.dash_components.plots import (
     get_feed_figures,
@@ -21,7 +20,11 @@ def get_modal(
 
 
 class ModalContent:
-    def __init__(self, modal_id: str, data_manager=None):
+    def __init__(
+        self,
+        modal_id: str,
+        data_manager=None,
+    ):
         self.modal_id = modal_id
         self.data_manager = data_manager
 
@@ -79,7 +82,9 @@ def create_figures(self):
         )
 
         if not selected_row:
-            figures_args = [[], []] if self.modal_id == "feeds_modal" else [[]]
+            figures_args: List[List] = (
+                [[], []] if self.modal_id == "feeds_modal" else [[]]
+            )
             self.figures = figures_func(*figures_args).get_figures()
             return
 
@@ -92,7 +97,9 @@ def create_figures(self):
                 contract=selected_row["full_addr"],
             )
 
-            payouts = self.data_manager.payouts([feed.contract], None, 0)
+            payouts = self.data_manager.payouts(
+                [feed.contract], None, self.data_manager.start_date
+            )
             subscriptions = self.data_manager.feed_daily_subscriptions_by_feed_id(
                 feed.contract
             )
@@ -101,7 +108,7 @@ def create_figures(self):
             payouts = self.data_manager.payouts(
                 feed_addrs=[],
                 predictoor_addrs=[selected_row["full_addr"]],
-                start_date=0,
+                start_date=self.data_manager.start_date,
             )
             figures_args = [payouts]
 

pdr_backend/pdr_dashboard/dash_components/plots.py

@@ -526,9 +526,6 @@ def get_feed_figures(payouts: Optional[List], subscriptions: List) -> FeedModalF
     # Initialize empty figures with default settings
     result = FeedModalFigures()
 
-    if not payouts or not subscriptions:
-        return result
-
     # Process subscription data
     for subscription in subscriptions:
         result.subscription_purchases.append(subscription["count"])
@@ -540,10 +537,14 @@ def get_feed_figures(payouts: Optional[List], subscriptions: List) -> FeedModalF
         result.subscription_dates.append(unix_timestamp)
 
     # Sort payouts by slots and group by slot
-    payouts.sort(key=itemgetter("slot"))
-    grouped_payouts = {
-        slot: list(group) for slot, group in groupby(payouts, key=itemgetter("slot"))
-    }
+    if payouts and len(payouts) > 0:
+        payouts.sort(key=itemgetter("slot"))
+        grouped_payouts = {
+            slot: list(group)
+            for slot, group in groupby(payouts, key=itemgetter("slot"))
+        }
+    else:
+        grouped_payouts = {}
 
     correct_predictions = 0
     total_predictions = 0