algomancy-gui 0.3.16__py3-none-any.whl

algomancy_gui/compare_page/kpicard.py

@@ -0,0 +1,236 @@
+"""
+kpicard.py - KPI Card Component
+
+This module defines functions for creating and formatting KPI cards that display
+performance metrics and comparisons between scenarios.
+"""
+
+from dash import html
+import dash_bootstrap_components as dbc
+
+from algomancy_scenario import ImprovementDirection, BASE_KPI
+from algomancy_utils import Measurement
+
+
+def is_improvement_good(better_when, left, right):
+    """
+    Determine if the change between left and right values is positive according to the measurement direction.
+
+    Args:
+        better_when: Direction in which improvement is measured (higher or lower)
+        left: Left value to compare
+        right: Right value to compare
+
+    Returns:
+        bool or None: True if the change is positive, False if negative, None if can't determine
+    """
+    if left is None or right is None:
+        return None
+    if better_when == ImprovementDirection.HIGHER:
+        return right > left
+    if better_when == ImprovementDirection.LOWER:
+        return right < left
+    return None
+
+
+def get_delta_binary(left_kpi: BASE_KPI, right_kpi: BASE_KPI):
+    left_value = 1 if left_kpi.success else 0
+    right_value = 1 if right_kpi.success else 0
+
+    delta = right_value - left_value
+    is_good = delta > 0
+
+    if abs(delta) < 1e-10:  # Handle floating point precision
+        return "No change", "-", "text-muted"
+
+    arrow = "🡅" if is_good else "🡇"
+
+    # Create delta measurement with same unit as scaled measurements
+    delta_str = f"{left_kpi.pretty()}     {arrow}     {right_kpi.pretty()}"
+
+    if is_good:
+        details = "Right passes but left does not"
+    else:
+        details = "Left passes but right does not"
+
+    color_class = "text-success" if is_good else "text-danger"
+    return delta_str, details, color_class
+
+
+def get_delta_default(left_kpi: BASE_KPI, right_kpi: BASE_KPI):
+    """
+    Determine difference, percentage, and color between two measurements.
+    Scales left measurement and matches right to the same unit.
+
+    Args:
+        left_kpi: The left measurement to compare
+        right_kpi: The right measurement to compare
+
+    Returns:
+        tuple: A tuple containing (delta string, percentage string, color class)
+    """
+    left_measurement: Measurement = left_kpi.measurement
+    right_measurement: Measurement = right_kpi.measurement
+    better_when: ImprovementDirection = left_kpi.better_when
+
+    # Handle None or uninitialized measurements
+    if (
+        left_measurement is None
+        or right_measurement is None
+        or left_measurement.value == Measurement.INITIAL_VALUE
+        or right_measurement.value == Measurement.INITIAL_VALUE
+    ):
+        return "No data", "-", "text-muted"
+
+    # Scale left measurement first
+    left_scaled = left_measurement.scale()
+
+    # Match right measurement to left's scaled unit
+    try:
+        right_scaled = right_measurement.scale_to_unit(left_scaled.unit)
+    except ValueError:
+        # Units are incompatible
+        return "Incompatible units", "-", "text-warning"
+
+    # Get the actual values for comparison
+    left_value = left_scaled.value
+    right_value = right_scaled.value
+
+    delta = right_value - left_value
+    is_good = is_improvement_good(better_when, left_value, right_value)
+
+    if abs(delta) < 1e-10:  # Handle floating point precision
+        return "No change", "-", "text-muted"
+
+    arrow = "🡅" if delta > 0 else "🡇"
+
+    # Create delta measurement with same unit as scaled measurements
+    delta_measurement = Measurement(left_scaled.base_measurement, abs(delta))
+    delta_str = f"{arrow} {delta_measurement.pretty()}"
+
+    try:
+        delta_perc = (delta / left_value * 100) if abs(left_value) > 1e-10 else 0
+    except ZeroDivisionError:
+        delta_perc = 0
+
+    verdict = "better" if is_good else "worse"
+    delta_perc_str = f"Right is relatively {abs(delta_perc):.1f}% {verdict} than left"
+
+    color_class = "text-success" if is_good else "text-danger"
+    return delta_str, delta_perc_str, color_class
+
+
+def get_delta_infos(left_kpi: BASE_KPI, right_kpi: BASE_KPI):
+    if left_kpi.is_binary_kpi:
+        return get_delta_binary(left_kpi, right_kpi)
+    else:
+        return get_delta_default(left_kpi, right_kpi)
+
+
+def kpi_card(
+    left_kpi: BASE_KPI,
+    right_kpi: BASE_KPI,
+):
+    """
+    Create a compact KPI comparison card without excessive height.
+    Automatically scales the left measurement and matches the right to the same unit.
+
+    Args:
+        left_kpi
+        right_kpi
+
+    Returns:
+        dbc.Card: A Dash Bootstrap card component displaying the KPI comparison
+    """
+
+    # Extract unit symbol for display
+    unit = left_kpi.get_pretty_unit()
+
+    kpi_type = str(left_kpi.better_when).capitalize().replace("_", " ") + (
+        f" {left_kpi.get_threshold_str(unit)}"
+        if left_kpi.is_binary_kpi
+        else " is better"
+    )
+
+    header = html.Div(
+        [
+            # Left group: name + optional unit
+            html.Div(
+                [
+                    html.Span(str(left_kpi.name), className="fw-bold"),
+                    # html.Span(f" ({unit_symbol})", className="text-secondary ms-1") if unit_symbol else None,
+                ],
+                style={"display": "flex", "alignItems": "center", "gap": "0.25rem"},
+            ),
+            # Right-aligned kpi_type (same muted style as unit)
+            html.Div(
+                html.Span(kpi_type, className="text-secondary"),
+                style={
+                    "display": "flex",
+                    "alignItems": "center",
+                    "justifyContent": "flex-end",
+                    "fontSize": "0.7rem",
+                },
+            ),
+        ],
+        # Make the header take full width and push the right group to the far right
+        style={
+            "fontSize": "1rem",
+            "display": "flex",
+            "alignItems": "center",
+            "justifyContent": "space-between",
+            "width": "100%",
+            "marginBottom": "10px",
+        },
+    )
+
+    values = html.Div(
+        [
+            html.Small(
+                f"Left: {left_kpi.details(unit)}",
+                style={"flex": "1", "textAlign": "left"},
+            ),
+            html.Small(
+                f"Right: {right_kpi.details(unit)}",
+                style={"flex": "1", "textAlign": "right"},
+            ),
+        ],
+        className="text-muted",
+        style={
+            "fontSize": "0.85rem",
+            "lineHeight": "1",
+            "marginBottom": "2px",
+            "display": "flex",
+            "width": "100%",
+        },
+    )
+
+    delta_str, delta_perc_str, color_class = get_delta_infos(left_kpi, right_kpi)
+    delta = html.Div(
+        [
+            # Second row: Change, centered
+            html.Div(
+                html.H2(f"{delta_str}", className=color_class),
+                style={"width": "100%", "textAlign": "center", "marginTop": "0.3em"},
+            ),
+            # Third row: Change percent, centered
+            html.Div(
+                html.H6(f"{delta_perc_str}", className=color_class),
+                style={"width": "100%", "textAlign": "center", "marginTop": "0.0em"},
+            ),
+        ]
+    )
+
+    return dbc.Card(
+        dbc.CardBody(
+            [header, values, delta], className="p-2", style={"display": "block"}
+        ),
+        className="shadow-sm bg-light",
+        style={
+            "margin": "2px",
+            "borderRadius": "0.5rem",
+            "boxShadow": "0 1px 2px rgba(0,0,0,0.07)",
+            "height": "auto",
+            "display": "block",
+        },
+    )

algomancy_gui/compare_page/scenarioselector.py

@@ -0,0 +1,99 @@
+"""
+scenarioselector.py - Scenario Selection Component
+
+This module defines the scenario selector component for the compare dashboard page.
+It allows users to select and compare two different scenarios side by side.
+"""
+
+import dash_bootstrap_components as dbc
+from dash import html, dcc, get_app
+
+from algomancy_scenario import ScenarioManager
+
+from ..layouthelpers import create_wrapped_content_div
+from ..componentids import (
+    LEFT_SCENARIO_DROPDOWN,
+    RIGHT_SCENARIO_DROPDOWN,
+    LEFT_SCENARIO_OVERVIEW,
+    RIGHT_SCENARIO_OVERVIEW,
+    PERF_SBS_LEFT_COLLAPSE,
+    PERF_SBS_RIGHT_COLLAPSE,
+)
+from ..settingsmanager import SettingsManager
+
+
+# === Helper ===
+def get_completed_scenarios(scenario_manager: ScenarioManager):
+    return [
+        {"label": s.tag, "value": s.id}
+        for s in scenario_manager.list_scenarios()
+        if s.is_completed()
+    ]
+
+
+def create_side_by_side_selector(scenario_manager: ScenarioManager):
+    selector = dbc.Row(
+        [
+            dbc.Col(
+                [
+                    html.Label("Left Scenario"),
+                    dcc.Dropdown(
+                        id=LEFT_SCENARIO_DROPDOWN,
+                        options=get_completed_scenarios(scenario_manager),
+                        placeholder="Select completed scenario",
+                    ),
+                ],
+                width=6,
+            ),
+            dbc.Col(
+                [
+                    html.Label("Right Scenario"),
+                    dcc.Dropdown(
+                        id=RIGHT_SCENARIO_DROPDOWN,
+                        options=get_completed_scenarios(scenario_manager),
+                        placeholder="Select completed scenario",
+                    ),
+                ],
+                width=6,
+            ),
+        ],
+        className="mb-4",
+    )
+
+    return selector
+
+
+def create_side_by_side_viewer():
+    settings: SettingsManager = get_app().server.settings
+    left_overview = create_wrapped_content_div(
+        html.Div(id=LEFT_SCENARIO_OVERVIEW, className="mt-3 compare-sbs-content"),
+        show_loading=settings.show_loading_on_comparepage,
+        cqm=settings.use_cqm_loader,
+        spinner_scale=1.5,
+    )
+    right_overview = create_wrapped_content_div(
+        html.Div(id=RIGHT_SCENARIO_OVERVIEW, className="mt-3"),
+        show_loading=settings.show_loading_on_comparepage,
+        cqm=settings.use_cqm_loader,
+        spinner_scale=1.5,
+    )
+
+    viewer = dbc.Row(
+        [
+            dbc.Col(
+                [
+                    dbc.Collapse(left_overview, id=PERF_SBS_LEFT_COLLAPSE),
+                ],
+                width=6,
+            ),
+            dbc.Col(
+                [
+                    dbc.Collapse(right_overview, id=PERF_SBS_RIGHT_COLLAPSE),
+                ],
+                width=6,
+            ),
+        ],
+        className="side-by-side-viewer",
+    )
+
+    return viewer

algomancy_gui/componentids.py

@@ -0,0 +1,177 @@
+"""
+componentids.py - Component ID Constants
+
+This module defines constants for all component IDs used in the dashboard application.
+These IDs are used for callbacks and to reference components in the Dash application.
+"""
+
+# === Session IDs ===
+ACTIVE_SESSION = "active-session-id"
+
+# === Styling ===
+GLOBAL_STYLING_STORE = "global-styling"
+PAGE_CONTENT = "page-content"
+
+# === Home IDs ===
+HOME_PAGE_CONTENT = "home-page-content"
+
+# === Data IDs ===
+DATA_PAGE = "data-page"
+DM_LIST_UPDATER_STORE = "dm-list-updater"
+
+DATA_PAGE_CONTENT = "data-page-content"
+DATA_SELECTOR_DROPDOWN = "data-selector-dropdown"
+
+DATA_MAN_SUCCESS_ALERT = "data-man-success-alert"
+DATA_MAN_ERROR_ALERT = "data-man-error-alert"
+
+DM_DERIVE_OPEN_BTN = "dm-derive-open-btn"
+DM_DERIVE_MODAL = "dm-derive-modal"
+DM_DERIVE_MODAL_CLOSE_BTN = "dm-derive-modal-close-btn"
+DM_DERIVE_MODAL_SUBMIT_BTN = "dm-derive-modal-submit-btn"
+DM_DERIVE_SET_SELECTOR = "dm-derive-set-selector"
+DM_DERIVE_SET_NAME_INPUT = "dm-derive-set-name-input"
+
+DM_DELETE_OPEN_BUTTON = "dm-delete-open-btn"
+DM_DELETE_SUBMIT_BUTTON = "DATA_MAN_DELETE_BTN"
+DM_DELETE_SET_SELECTOR = "data-man-delete-selector"
+DM_DELETE_CLOSE_BUTTON = "data-man-delete-close-btn"
+DM_DELETE_MODAL = "data-man-delete-modal"
+DM_DELETE_COLLAPSE = "data-man-delete-collapse"
+DM_DELETE_CONFIRM_INPUT = "data-man-delete-confirm-input"
+
+DM_SAVE_MODAL = "dm-save-modal"
+DM_SAVE_OPEN_BUTTON = "dm-save-open-btn"
+DM_SAVE_SUBMIT_BUTTON = "dm-save-submit-btn"
+DM_SAVE_MODAL_CLOSE_BTN = "dm-save-modal-close-btn"
+DM_SAVE_SET_SELECTOR = "dm-save-set-selector"
+
+DM_IMPORT_MODAL = "dm-import-modal"
+DM_IMPORT_OPEN_BUTTON = "dm-load-open-btn"
+DM_IMPORT_UPLOADER = "dm-load-uploader"
+DM_IMPORT_SUBMIT_BUTTON = "dm-load-submit-btn"
+DM_IMPORT_MODAL_CLOSE_BTN = "dm-load-modal-close-btn"
+DM_IMPORT_MODAL_FILEVIEWER_COLLAPSE = "dm-load-modal-fileviewer-collapse"
+DM_IMPORT_MODAL_FILEVIEWER_CARD = "dm-load-modal-fileviewer-card"
+DM_IMPORT_MODAL_NAME_INPUT = "dm-load-modal-name-input"
+DM_IMPORT_MODAL_FILEVIEWER_ALERT = "dm-load-modal-fileviewer-alert"
+
+DM_UPLOAD_OPEN_BUTTON = "dm-upload-open-btn"
+DM_UPLOAD_MODAL = "dm-upload-modal"
+DM_UPLOAD_UPLOADER = "dm-upload-uploader"
+DM_UPLOAD_SUBMIT_BUTTON = "dm-upload-submit-btn"
+DM_UPLOAD_MODAL_CLOSE_BTN = "dm-upload-modal-close-btn"
+DM_UPLOAD_MODAL_FILEVIEWER_CARD = "dm-upload-modal-fileviewer-card"
+DM_UPLOAD_MODAL_FILEVIEWER_COLLAPSE = "dm-upload-modal-fileviewer-collapse"
+DM_UPLOAD_MODAL_FILEVIEWER_ALERT = "dm-upload-modal-fileviewer-alert"
+DM_UPLOAD_DATA_STORE = "dm-upload-data-store"
+DM_UPLOAD_SUCCESS_ALERT = "dm-upload-success-alert"
+
+DM_DOWNLOAD_OPEN_BUTTON = "dm-download-open-btn"
+DM_DOWNLOAD_MODAL = "dm-download-modal"
+DM_DOWNLOAD_CHECKLIST = "dm-download-checklist"
+DM_DOWNLOAD_SUBMIT_BUTTON = "dm-download-submit-btn"
+DM_DOWNLOAD_MODAL_CLOSE_BTN = "dm-download-modal-close-btn"
+
+# === Scenario IDs ===
+SCENARIO_PAGE = "scenario-page"
+
+SCENARIO_LIST = "scenario-list"
+SCENARIO_DELETE_MODAL = "delete-modal"
+SCENARIO_CREATE_STATUS = "create-status"
+SCENARIO_TO_DELETE = "scenario-to-delete"
+SCENARIO_SELECTED = "selected-scenario"
+SCENARIO_SELECTED_ID_STORE = "selected-scenario-id"
+
+SCENARIO_CREATOR_MODAL = "scenario-creator-modal"
+SCENARIO_CREATOR_OPEN_BUTTON = "scenario-creator-open-btn"
+
+SCENARIO_NEW_BUTTON = "create-scenario-button"
+SCENARIO_PROCESS_BUTTON = "scenario-process-button"
+SCENARIO_DELETE_BUTTON = "scenario-delete-button"
+SCENARIO_CONFIRM_DELETE_BUTTON = "scenario-confirm-delete-button"
+SCENARIO_CANCEL_DELETE_BUTTON = "scenario-cancel-delete-button"
+
+SCENARIO_STATUS_UPDATE_EVENT = "scenario-status-update-event"
+SCENARIO_STATUS_BADGE = "scenario-status-badge"
+
+SCENARIO_CARD = "scenario-card"
+SCENARIO_TAG_INPUT = "scenario-tag-input"
+SCENARIO_DATA_INPUT = "scenario-data-input"
+SCENARIO_ALGO_INPUT = "scenario-algo-input"
+SCENARIO_PARAMS_INPUT = "scenario-params-input"
+
+SCENARIO_STATUS_SNAPSHOT = "scenario-status-snapshot"
+SCENARIO_STATUS_UPDATE = "scenario-status-update"
+
+SCENARIO_ALERT = "scenario-alert"
+
+ALGO_PARAMS_WINDOW_ID = "algo-params-window"
+ALGO_PARAMS_ENTRY_TAB = "algo-params-entry"
+ALGO_PARAMS_UPLOAD_TAB = "algo-params-upload"
+ALGO_PARAMS_ENTRY_CARD = "algo-params-entry-card"
+ALGO_PARAM_INPUT = "algo-param-input"
+ALGO_PARAM_DATE_INPUT = "algo-param-date-input"
+ALGO_PARAM_INTERVAL_INPUT = "algo-param-interval-input"
+
+SCENARIO_PROG_INTERVAL = "scenario-progress-polling-interval"
+SCENARIO_PROG_BAR = "scenario-progress-bar"
+SCENARIO_PROG_TEXT = "scenario-progress-text"
+SCENARIO_PROG_COLLAPSE = "scenario-progress-collapse"
+SCENARIO_CURRENTLY_RUNNING_STORE = "scenario-currently-running"
+
+SCENARIO_LIST_UPDATE_STORE = "scenario-list-update-store"
+
+# === Component IDs ===
+LEFT_SCENARIO_DROPDOWN = "left-scenario-dropdown"
+RIGHT_SCENARIO_DROPDOWN = "right-scenario-dropdown"
+
+LEFT_SCENARIO_OVERVIEW = "left-scenario-overview"
+RIGHT_SCENARIO_OVERVIEW = "right-scenario-overview"
+
+KPI_IMPROVEMENT_SECTION = "kpi-improvement-section"
+PERF_PRIMARY_RESULTS = "perf-primary-results"
+PERF_SECONDARY_RESULTS = "perf-secondary-results"
+
+PERF_DETAILS_COLLAPSE = "secondary-results-collapse"
+LEFT_SECONDARY_RESULTS = "left-secondary-results"
+RIGHT_SECONDARY_RESULTS = "right-secondary-results"
+
+PERF_TOGGLE_CHECKLIST_LEFT = "toggle-checklist-left"
+PERF_TOGGLE_CHECKLIST_RIGHT = "toggle-checklist-right"
+PERF_SBS_LEFT_COLLAPSE = "perf-sbs-left-collapse"
+PERF_SBS_RIGHT_COLLAPSE = "perf-sbs-right-collapse"
+PERF_KPI_COLLAPSE = "perf-kpi-collapse"
+PERF_COMPARE_COLLAPSE = "perf-compare-collapse"
+HOW_TO_CREATE_NEW_SESSION = "how-to-create-new-session"
+
+
+# === Compare Page IDs ===
+COMPARE_PAGE = "compare-page"
+COMPARE_DETAIL_VIEW = "compare-detail-view"
+
+# === Overview Page IDs ===
+# OVERVIEW_TABLE = "overview-table"
+# OVERVIEW_UPDATE_INTERVAL = "overview-update-interval"
+OVERVIEW_PAGE_CONTENT = "overview-page-content"
+
+# === Admin Page IDs ===
+ADMIN_PAGE = "admin-page"
+ADMIN_NEW_SESSION = "admin-new-session"
+ADMIN_COPY_SESSION = "admin-copy-session"
+ADMIN_SELECT_SESSION = "admin-select-session"
+ADMIN_LOG_WINDOW = "admin-log-window"
+ADMIN_LOG_INTERVAL = "admin-log-interval"
+ADMIN_LOG_FILTER = "admin-log-filter"
+NEW_SESSION_BUTTON = "new-session-button"
+SESSION_CREATOR_MODAL = "session-creator-modal"
+NEW_SESSION_NAME = "new-session-name"
+
+# === Layout IDs ===
+SIDEBAR = "sidebar"
+SIDEBAR_TOGGLE = "sidebar-toggle"
+SIDEBAR_COLLAPSED = "sidebar-collapsed"
+
+# === Notification related ===
+SCENARIO_NOTIFICATION = "scenario-notification"
+SCENARIO_NOTIFICATION_STORE = "scenario-notification-store"

algomancy_gui/contentregistry.py

@@ -0,0 +1,167 @@
+from typing import Callable, List
+
+from dash import html
+
+from algomancy_data import BASE_DATA_BOUND
+from algomancy_content.pages.page import (
+    HomePage,
+    DataPage,
+    ScenarioPage,
+    ComparePage,
+    OverviewPage,
+)
+from algomancy_scenario import Scenario
+
+
+class ContentRegistry:
+    def __init__(self):
+        self._home_content: Callable[[], html.Div] | None = None
+        self._data_content: Callable[[BASE_DATA_BOUND], html.Div] | None = None
+        self._scenario_content: Callable[[Scenario], html.Div] | None = None
+        self._compare_side_by_side: Callable[[Scenario, str], html.Div] | None = None
+        self._compare_compare: Callable[[Scenario, Scenario], html.Div] | None = None
+        self._compare_details: Callable[[Scenario, Scenario], html.Div] | None = None
+        self._overview_content: Callable[[List[Scenario]], html.Div] | None = None
+
+    def register_pages(
+        self,
+        home_page: HomePage,
+        data_page: DataPage,
+        scenario_page: ScenarioPage,
+        compare_page: ComparePage,
+        overview_page: OverviewPage,
+    ) -> None:
+        self._register_home_page(home_page)
+        self._register_data_page(data_page)
+        self._register_scenario_page(scenario_page)
+        self._register_compare_page(compare_page)
+        self._register_overview_page(overview_page)
+
+    def _register_home_page(self, page: HomePage) -> None:
+        self._home_content = page.create_content
+        page.register_callbacks()
+
+    def _register_data_page(self, page: DataPage) -> None:
+        self._data_content = page.create_content
+        page.register_callbacks()
+
+    def _register_scenario_page(self, page: ScenarioPage) -> None:
+        self._scenario_content = page.create_content
+        page.register_callbacks()
+
+    def _register_compare_page(self, page: ComparePage) -> None:
+        self._compare_side_by_side = page.create_side_by_side_content
+        self._compare_compare = page.create_compare_section
+        self._compare_details = page.create_details_section
+        page.register_callbacks()
+
+    def _register_overview_page(self, page: OverviewPage) -> None:
+        self._overview_content = page.create_content
+        page.register_callbacks()
+
+    @property
+    def home_content(self) -> Callable[[], html.Div]:
+        if self._home_content:
+            return self._home_content
+        else:
+
+            def default_content():
+                return html.Div(
+                    [
+                        html.H1("Home content was not filled."),
+                    ]
+                )
+
+            return default_content
+
+    @property
+    def data_content(self) -> Callable[[BASE_DATA_BOUND], html.Div]:
+        if self._data_content:
+            return self._data_content
+        else:
+
+            def default_content(data: BASE_DATA_BOUND):
+                return html.Div(
+                    [
+                        html.H1("Data content was not filled."),
+                        html.H2(f"Data source: {data.name}"),
+                    ]
+                )
+
+            return default_content
+
+    @property
+    def scenario_content(self) -> Callable[[Scenario], html.Div]:
+        if self._scenario_content:
+            return self._scenario_content
+        else:
+
+            def default_content(scenario: Scenario):
+                return html.Div(
+                    [
+                        html.H1("Scenario content was not filled."),
+                        html.H2(f"Scenario: {scenario.tag}"),
+                    ]
+                )
+
+            return default_content
+
+    @property
+    def compare_side_by_side(self) -> Callable[[Scenario, str], html.Div]:
+        if self._compare_side_by_side:
+            return self._compare_side_by_side
+        else:
+
+            def default_content(scenario: Scenario, side: str):
+                return html.Div(
+                    [
+                        html.H1("Compare side by side content was not filled."),
+                    ]
+                )
+
+            return default_content
+
+    @property
+    def compare_compare(self) -> Callable[[Scenario, Scenario], html.Div]:
+        if self._compare_compare:
+            return self._compare_compare
+        else:
+
+            def default_content(scenario1: Scenario, scenario2: Scenario):
+                return html.Div(
+                    [
+                        html.H1("Compare content was not filled."),
+                    ]
+                )
+
+            return default_content
+
+    @property
+    def compare_details(self) -> Callable[[Scenario, Scenario], html.Div]:
+        if self._compare_details:
+            return self._compare_details
+        else:
+
+            def default_content(scenario1: Scenario, scenario2: Scenario):
+                return html.Div(
+                    [
+                        html.H1("Compare details content was not filled."),
+                    ]
+                )
+
+            return default_content
+
+    @property
+    def overview_content(self) -> Callable[[List[Scenario]], html.Div]:
+        if self._overview_content:
+            return self._overview_content
+        else:
+
+            def default_content(scenarios: List[Scenario]):
+                return html.Div(
+                    [
+                        html.H1("Overview content was not filled."),
+                    ]
+                )
+
+            return default_content