algomancy-quickstart 0.7.0__py3-none-any.whl

algomancy_quickstart/templates/assets/style.css

@@ -0,0 +1,421 @@
+@import url('/example/assets/css/theme_colors.css');
+@import url('/example/assets/css/sidebar_layout.css');
+@import url('/example/assets/css/button_colors.css');
+@import url('/example/assets/css/cqm_loader.css');
+
+/* =========================
+   Base elements & utilities
+   ========================= */
+hr {
+    border-top: 2px solid gray;
+}
+
+/*todo buttons on scenario page should be styled separately*/
+
+.btn {
+    border-color: var(--theme-secondary);   /* todo this should respond to unified button colors */
+    background-color: var(--theme-secondary);
+    color: var(--text-selected)
+}
+
+.btn:hover {
+    border-color: var(--theme-tertiary);
+    background-color: var(--theme-tertiary);
+    color: var(--text-highlight);
+}
+
+.rc-slider-track {
+    background-color: var(--theme-secondary);
+}
+
+.rc-slider-dot-active, .rc-slider-handle, .rc-slider-handle:focus {
+    border-color: var(--theme-secondary);
+}
+
+.rc-slider-handle:active {
+    border-color: var(--theme-secondary);
+    box-shadow: 0 0 0 2px rgb(from var(--theme-secondary) r g b /0.3) ;
+}
+
+.CalendarDay__selected, .CalendarDay__selected:active, .CalendarDay__selected:hover {
+    background: var(--theme-primary);
+    border: 1px double var(--theme-primary);
+    color: var(--text-selected);
+}
+
+.CalendarDay__selected_span {
+    background: var(--theme-secondary);
+    border: 1px double var(--theme-secondary);
+    color: var(--text-selected);
+}
+
+.DayPickerKeyboardShortcuts_show {
+  display: none;
+}
+
+.DateInput_input__focused {
+    border-bottom: 2px solid var(--theme-primary);
+}
+
+/* =========================
+   Layout containers
+   ========================= */
+.page-content {
+    padding: 2rem;
+    transition: margin-left 0.3s ease-in-out;
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+.page-content.collapsed {
+    margin-left: 80px; /* Width of the collapsed sidebar */
+}
+
+.page-content.expanded {
+    margin-left: 270px; /* Width of the expanded sidebar */
+}
+
+.layout-container {
+    background-color: var(--background-color);
+    min-height: 100vh;
+}
+
+/* =========================
+   Controls & components
+   ========================= */
+/* Accordion styling */
+.accordion-button {
+    background-color: var(--card-surface);
+    color: var(--text-color);
+}
+
+.accordion-item {
+    background-color: var(--card-surface);
+    border-radius: 6px;
+    transition: background-color 0.2s ease-in-out;
+    border: 1px solid rgba(0,0,0,0.1);
+    border-left: 0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    color: var(--text-color);
+}
+
+/* Styling for dropdown menus */
+.Select-control, .Select-menu-outer, .Select-input {
+    background-color: var(--card-surface);
+    color: var(--text-color);
+    transition: box-shadow 0.2s ease-in-out;
+}
+
+.Select-value-label, .Select-option {
+    color: var(--text-color);
+}
+
+.Select--single > .Select-control .Select-value, .Select-placeholder {
+    background-color: var(--card-surface);
+    color: var(--text-color);
+}
+
+.VirtualizedSelectOption {
+    background-color: var(--card-surface);
+    color: var(--text-color);
+}
+
+.VirtualizedSelectFocusedOption {
+    background-color: var(--theme-secondary);
+    color: var(--text-selected);
+}
+
+.Select--multi .Select-value-icon {
+    color: var(--text-color);
+    /*background-color: rgb(from var(--theme-secondary) r g b /0.2);*/
+    border-right-color: var(--theme-secondary);
+}
+
+.Select--multi .Select-value-icon:hover {
+    color: var(--text-selected);
+    background-color: rgb(from var(--theme-secondary) r g b /0.5);
+    border-right-color: var(--theme-secondary);
+    transition: background-color 0.2s ease-in-out;
+}
+
+.Select--multi .Select-value {
+    color: var(--text-color);
+    background-color: rgb(from var(--theme-secondary) r g b /0.2);
+    border-color: var(--theme-secondary);
+}
+
+.is-focused:not(.is-open)>.Select-control {
+    border-color: var(--theme-secondary);
+    box-shadow: 0 0 0 2px rgb(from var(--theme-secondary) r g b /0.3) ;
+}
+
+.is-open>.Select-control {
+    background-color: var(--card-surface);
+}
+
+/* styling for input groups */
+.form-control, input.form-control {
+    background-color: var(--card-surface);
+    color: var(--text-color);
+}
+
+.form-control:focus, input.form-control:focus {
+    background-color: var(--card-surface);
+    color: var(--text-color);
+    border-color: var(--theme-secondary);
+    box-shadow: 0 0 0 0.2rem rgb(from var(--theme-secondary) r g b /0.3);
+}
+
+.form-control::placeholder, input.form-control::placeholder {
+    color: var(--text-color);
+    opacity: 0.6;
+}
+
+/* styling for checkboxes */
+.form-check-input {
+    background-color: var(--card-surface);
+    border-color: var(--text-color);
+    color: var(--text-color);
+    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+    cursor: pointer;
+}
+
+.form-check-input:checked {
+    background-color: var(--toggle-active-color);
+    border-color: var(--toggle-active-color);
+}
+
+.form-check-input:focus {
+    box-shadow: 0 0 0 0.2rem var(--toggle-shadow-color);
+    border-color: var(--toggle-active-color);
+}
+
+.form-switch .form-check-input {
+    background-color: var(--toggle-background-color);
+    background-image: var(--toggle-handle-inactive);
+}
+
+.form-switch .form-check-input:checked {
+    background-color: var(--toggle-active-color);
+    background-image: var(--toggle-handle-selected);
+}
+
+.form-switch .form-check-input:focus, .form-check-input:active{
+    background-image: var(--toggle-handle-focussed)
+}
+
+.form-switch .form-check-input:checked:focus {
+    box-shadow: 0 0 0 0.2rem var(--toggle-shadow-color);
+    background-image: var(--toggle-handle-selected)
+}
+
+/* daq.BooleanSwitch background color */
+.gJuplL {
+    background-color: var(--toggle-active-color) !important;
+}
+
+/* =========================
+   Scenario cards & new scenario controls
+   ========================= */
+.scenario-card {
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+    background-color: var(--card-surface);
+    border-radius: 6px;
+    border: 1px solid #ddd;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    padding : 8px 12px;
+    margin-bottom: 10px;
+}
+
+.scenario-card.selected {
+    background-color: var(--theme-secondary);
+    color: var(--text-selected);
+    border-color: var(--theme-secondary);
+    transition: all 0.25s ease-in-out;
+}
+
+.scenario-card.hidden {
+    display: none;
+}
+
+.scenario-progress-bar .progress-bar{
+    background-color: var(--theme-secondary) !important;
+    animation: progress-bar-stripes 1s linear infinite;
+}
+
+/* =========================
+   Admin page log window
+   ========================= */
+.admin-log-card {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 380px); /* Adjust based on other content */
+    min-height: 300px; /* Set a reasonable minimum */
+    overflow-y: auto; /* Allow scrolling if content exceeds height */
+}
+
+
+.admin-log-window {
+    flex: 1;
+    overflow-y: auto;
+    font-family: monospace;
+    white-space: pre-wrap;
+    background-color: #f8f9fa;
+    padding: 10px;
+    border-radius: 5px;
+}
+
+/* =========================
+   Themed modals & their contents
+   ========================= */
+.themed-modal {
+    color: var(--text-color);
+}
+
+.themed-modal .modal-header {
+    background-color: var(--theme-primary); /* issue: the modal does not respond to the variable update */
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+}
+
+.themed-modal .modal-title {
+    color: var(--text-selected);
+    font-weight: 600;
+}
+
+.themed-modal .modal-body, .modal-footer{
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+.themed-modal .uploaded-files-card,
+.themed-modal .uploaded-files-table {
+    background-color: var(--background-color);
+}
+
+.themed-modal .uploaded-files-table {
+    color: var(--text-color);
+}
+
+.themed-modal .uploaded-files-table .uploaded-files-header {
+    color: var(--text-color);
+}
+
+.themed-modal .uploaded-files-table .uploaded-file-good{
+    color: var(--text-color);
+}
+
+.themed-modal .uploaded-files-table .uploaded-file-bad{
+    color: #b92629;
+    text-decoration: line-through;
+}
+
+/* =========================
+   Scenario page specifics
+   ========================= */
+
+.scenario-multi-btn-created { /* process */
+    background-color: #1b9e08;
+    border: 0;
+    color: #FFFFFF;
+    min-width: 80px;
+    pointer-events: all;
+    transition: background-color 0.2s ease-in-out;
+}
+
+.scenario-multi-btn-created:hover { /* process */
+    background-color: #105906;
+    color: #FFFFFF;
+}
+
+
+.scenario-multi-btn-completed { /* refresh */
+    background-color: #4487d5;
+    border: 0;
+    color: #FFFFFF;
+    min-width: 80px;
+    pointer-events: all;
+}
+
+.scenario-multi-btn-completed:hover, .scenario-multi-btn-completed:focus {
+    background-color: #2b5688;
+    color: #FFFFFF;
+}
+
+.scenario-multi-btn-queued, .scenario-delete-btn-created, .scenario-delete-btn-completed { /* cancel */
+    background-color: #bd1414;
+    border: 0;
+    color: #FFFFFF;
+    min-width: 80px;
+    pointer-events: all;
+}
+
+.scenario-multi-btn-queued:hover, .scenario-multi-btn-queued:focus,
+.scenario-delete-btn-created:hover, .scenario-delete-btn-created:focus,
+.scenario-delete-btn-completed:hover, .scenario-delete-btn-completed:focus {
+    background-color: #770d0d;
+    color: #FFFFFF;
+}
+
+.scenario-delete-btn-queued { /* delete */
+    background-color: #a14a4a;
+    border: 0;
+    color: #FFFFFF;
+    min-width: 80px;
+    pointer-events: none;
+}
+
+
+/* =========================
+   Compare page (mirrors performance page styles)
+   ========================= */
+.compare-page {
+
+}
+
+.compare-page .side-by-side-viewer,
+.compare-page .compare-view,
+.compare-page .details-view{
+    margin-bottom: 10px;
+}
+
+.compare-page .kpi-cards{
+    margin-bottom: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+}
+
+.compare-page .kpi-cards .kpi-card-wrapper{
+    flex: 1 1 300px;
+    width: 400px;
+    height: 200px;
+    margin: 10px;
+    display: flex;
+    flex-direction: column;
+}
+
+/* details/compare view margin moved into grouped rule above */
+
+/* =========================
+   Page content min-heights
+   ========================= */
+.data-page-content {
+    min-height: 500px;
+}
+
+.scenario-page-content {
+    min-height: 500px;
+}
+
+/* Prevent initial flash of loading spinner */
+.loading-wrapper > div:first-child {
+    opacity: 0;
+    animation: fadeInSpinner 0.1s ease-in 2s forwards;
+}
+
+@keyframes fadeInSpinner {
+    to {
+        opacity: 1;
+    }
+}

algomancy_quickstart/templates/compare_page.py.jinja

@@ -0,0 +1,133 @@
+"""
+Custom compare page template for {{ project_name }}.
+
+This module defines a custom compare page for side-by-side scenario comparison.
+"""
+
+from dash import html
+from algomancy_content import BaseComparePage
+from algomancy_scenario import Scenario
+
+
+class {{ class_name }}ComparePage(BaseComparePage):
+    """
+    Custom compare page implementation for {{ project_name }}.
+
+    TODO: Customize the compare page layout and behavior.
+    """
+
+    @staticmethod
+    def create_side_by_side_content(scenario: Scenario, side: str) -> html.Div:
+        """
+        Create content for one side of the side-by-side comparison view.
+
+        Args:
+            scenario: The Scenario object to display.
+            side: Identifier for which side ("left" or "right").
+
+        Returns:
+            A Dash html.Div containing the scenario content.
+
+        TODO: Customize the side-by-side scenario display.
+        """
+        return html.Div(
+            [
+                html.H3(f"{scenario.tag} ({side.capitalize()})"),
+                html.P(f"Scenario ID: {scenario.id}"),
+                html.P(f"Status: {scenario.status}"),
+                # TODO: Add scenario-specific content (parameters, results, charts)
+            ],
+            className=f"compare-side-{side}",
+            style={"padding": "15px", "border": "1px solid #ddd"},
+        )
+
+    @staticmethod
+    def create_compare_section(left: Scenario, right: Scenario) -> html.Div:
+        """
+        Create a consolidated comparison section for both scenarios.
+
+        Args:
+            left: The left scenario.
+            right: The right scenario.
+
+        Returns:
+            A Dash html.Div containing the comparison content.
+
+        TODO: Implement comparison logic and visualizations.
+        """
+        return html.Div(
+            [
+                html.H3("Scenario Comparison"),
+                html.Table(
+                    [
+                        html.Tr([
+                            html.Th("Metric"),
+                            html.Th(left.tag),
+                            html.Th(right.tag),
+                        ]),
+                        html.Tr([
+                            html.Td("Status"),
+                            html.Td(left.status),
+                            html.Td(right.status),
+                        ]),
+                        # TODO: Add more comparison metrics
+                    ],
+                    style={"width": "100%", "borderCollapse": "collapse"},
+                ),
+            ],
+            style={"padding": "20px"},
+        )
+
+    @staticmethod
+    def create_details_section(left: Scenario, right: Scenario) -> html.Div:
+        """
+        Create a detailed analysis section comparing both scenarios.
+
+        Args:
+            left: The left scenario.
+            right: The right scenario.
+
+        Returns:
+            A Dash html.Div containing the detailed comparison content.
+
+        TODO: Implement detailed analysis and insights.
+        """
+        return html.Div(
+            [
+                html.H3("Detailed Analysis"),
+                html.Div(
+                    [
+                        html.H4("Key Differences"),
+                        html.Ul(
+                            [
+                                html.Li(f"Left scenario: {left.tag}"),
+                                html.Li(f"Right scenario: {right.tag}"),
+                                # TODO: Add detailed difference analysis
+                            ]
+                        ),
+                    ]
+                ),
+                html.Hr(),
+                html.Div(
+                    [
+                        html.H4("Performance Analysis"),
+                        html.P("TODO: Add charts and statistical comparisons"),
+                        # TODO: Add graphs, KPI comparisons, etc.
+                    ]
+                ),
+            ],
+            style={"padding": "20px"},
+        )
+
+    @staticmethod
+    def register_callbacks() -> None:
+        """
+        Register Dash callbacks for this page if needed.
+
+        TODO: Add any interactive behavior for the compare page.
+        """
+        # Example:
+        # @app.callback(...)
+        # def compare_scenarios(...):
+        #     pass
+        pass

algomancy_quickstart/templates/data_page.py.jinja

@@ -0,0 +1,94 @@
+"""
+Custom data page template for {{ project_name }}.
+
+This module defines a custom data page for viewing and managing raw data.
+"""
+
+from dash import html
+from algomancy_content import BaseDataPage
+from algomancy_data import DataSource
+
+
+class {{ class_name }}DataPage(BaseDataPage):
+    """
+    Custom data page implementation for {{ project_name }}.
+
+    TODO: Customize the data page layout and behavior.
+    """
+
+    @staticmethod
+    def create_content(data: DataSource) -> html.Div:
+        """
+        Define the layout and content of the data page based on the provided data.
+
+        Args:
+            data: The DataSource object containing the data to display.
+
+        Returns:
+            A Dash html.Div containing the page content.
+
+        TODO: Implement your custom data page layout.
+        """
+        # Check if data has tables attribute
+        data_info = []
+        if hasattr(data, "tables") and isinstance(data.tables, dict):
+            data_info.append(html.H3("Available Data Tables"))
+            table_list = []
+            for key, table in data.tables.items():
+                table_list.append(
+                    html.Li(
+                        f"{key}: {len(table)} rows × {len(table.columns)} columns"
+                    )
+                )
+            data_info.append(html.Ul(table_list))
+        else:
+            data_info.append(html.P("Data structure information not available."))
+
+        return html.Div(
+            [
+                html.H1("{{ project_name }} Data View"),
+                html.P(
+                    "This page displays the raw data loaded into the application."
+                ),
+                html.Hr(),
+                html.Div(data_info),
+                html.Hr(),
+                html.Div(
+                    [
+                        html.H3("Data Management Features"),
+                        html.Ul(
+                            [
+                                html.Li("View and filter raw data tables"),
+                                html.Li("Export data to various formats"),
+                                html.Li("Validate data quality and completeness"),
+                                html.Li("Customize this page in src/pages/data_page.py"),
+                            ]
+                        ),
+                    ]
+                ),
+                # TODO: Add data table components (e.g., dash_table.DataTable), filters, export buttons
+                # Example:
+                # html.Div([
+                #     dash_table.DataTable(
+                #         id='data-table',
+                #         columns=[{"name": i, "id": i} for i in data.tables['your_table'].columns],
+                #         data=data.tables['your_table'].to_dict('records'),
+                #         page_size=10,
+                #     )
+                # ])
+            ],
+            style={"padding": "20px"},
+        )
+
+    @staticmethod
+    def register_callbacks() -> None:
+        """
+        Register Dash callbacks for this page if needed.
+
+        TODO: Add any interactive behavior for the data page.
+        """
+        # Example:
+        # @app.callback(...)
+        # def filter_data(...):
+        #     pass
+        pass