ivoryos 1.0.9__py3-none-any.whl → 1.4.4__py3-none-any.whl

ivoryos/routes/data/templates/workflow_view.html

@@ -0,0 +1,360 @@
+{% extends 'base.html' %}
+
+{% block title %}IvoryOS | Experiment Results{% endblock %}
+
+{% block body %}
+<style>
+    .vis-time-axis .vis-text.vis-minor,
+    .vis-time-axis .vis-text.vis-major {
+        color: #666;
+    }
+    .vis-item.stop {
+        background-color: #dc3545;
+        color: white;
+        border: none;
+        font-weight: bold;
+    }
+    .vis-item.prep {
+        background-color: #17a2b8;
+        border-color: #138496;
+    }
+    .vis-item.script {
+        background-color: #28a745;
+        border-color: #1e7e34;
+    }
+    .vis-item.cleanup {
+        background-color: #ffc107;
+        border-color: #d39e00;
+        color: #212529;
+    }
+    #visualization {
+        border: 1px solid #dee2e6;
+        border-radius: 0.375rem;
+        background-color: #fff;
+        min-height: 200px;
+    }
+
+    .section-header {
+        border-bottom: 2px solid #dee2e6;
+        padding-bottom: 0.5rem;
+        margin-bottom: 1rem;
+        color: #495057;
+    }
+    .loading-spinner {
+        display: none;
+    }
+</style>
+
+
+    <div class="timeline-section" style="margin-bottom: 2rem;">
+        <h3 class="section-header">
+            <i class="fas fa-clock me-2"></i>Execution Timeline
+        </h3>
+        <div class="alert alert-info" role="alert">
+            <i class="fas fa-info-circle me-2"></i>
+            <strong>Tip:</strong> Click on timeline items to navigate to detailed views. Use Ctrl+scroll to zoom.
+        </div>
+        <div id="visualization"></div>
+    </div>
+
+    <!-- Phase Output Plot Section -->
+
+    <div class="data-section" style="margin-bottom: 2rem;">
+        <h3 class="section-header">
+            <div class="col-md-6">
+                <label for="output-select" class="form-label">Select Data Type:</label>
+                <select id="output-select" class="form-select">
+                    <option value="">Loading data types...</option>
+                </select>
+            </div>
+        </h3>
+
+        <div class="plot-controls">
+            <div>
+                <div class="col-md-6 text-md-end">
+                    <div class="loading-spinner">
+                        <div class="spinner-border spinner-border-sm text-primary me-2" role="status">
+                            <span class="visually-hidden">Loading...</span>
+                        </div>
+                        Loading plot data...
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="phase-plot" style="height:450px;" class="border rounded bg-white shadow-sm"></div>
+    </div>
+
+    <!-- Workflow Details Section -->
+
+    <div>
+        <h2 class="section-header">
+            <i class="fas fa-project-diagram me-2"></i>Workflow: {{ workflow.name }}
+        </h2>
+
+        <!-- Prep Phase -->
+        {% if grouped.prep %}
+            <div class="mb-4">
+                <h4 class="text-info mb-3">
+                    <i class="fas fa-tools me-2"></i>Prep
+                </h4>
+                <div class="row">
+                    {% for phase in grouped.prep %}
+                        <div class="col-lg-6 mb-3">
+                            {% include "components/step_card.html" %}
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+        {% endif %}
+
+        <!-- Script Iterations -->
+        {% for repeat_index, phase_list in grouped.script.items()|sort %}
+            <div class="mb-4" id="card-iter{{ repeat_index }}">
+                <h4 class="text-success mb-3">
+                    <i class="fas fa-redo me-2"></i>Iteration {{ repeat_index }}
+                </h4>
+                <div class="row">
+                    {% for phase in phase_list %}
+                        <div class="col-lg-6 mb-3">
+                            {% include "components/step_card.html" %}
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+        {% endfor %}
+
+        <!-- Cleanup Phase -->
+        {% if grouped.cleanup %}
+            <div>
+                <h4 class="text-warning mb-3">
+                    <i class="fas fa-broom me-2"></i>Cleanup
+                </h4>
+                <div class="row">
+                    {% for phase in grouped.cleanup %}
+                        <div class="col-lg-6 mb-3">
+                            {% include "components/step_card.html" %}
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+        {% endif %}
+    </div>
+
+
+
+<!-- External Dependencies -->
+<script src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>
+<link href="https://unpkg.com/vis-timeline@latest/styles/vis-timeline-graph2d.min.css" rel="stylesheet"/>
+<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+
+<script type="text/javascript">
+    document.addEventListener('DOMContentLoaded', function() {
+        // ---------------- Timeline Setup ----------------
+        const container = document.getElementById('visualization');
+        const groups = [
+            { id: 'all', content: 'Workflow Execution' }
+        ];
+
+        const items = [
+            {% if grouped.prep %}
+                {
+                    id: 'prep',
+                    content: 'Prep',
+                    start: '{{ grouped.prep[0].start_time }}',
+                    end: '{{ grouped.prep[-1].end_time }}',
+                    className: 'prep',
+                    group: 'all',
+                },
+            {% endif %}
+
+            {% for repeat_index, step_list in grouped.script.items()|sort %}
+                {
+                    id: 'iter{{ repeat_index }}',
+                    content: 'Iteration {{ repeat_index }}',
+                    start: '{{ step_list[0].start_time }}',
+                    end: '{{ step_list[-1].end_time }}',
+                    className: 'script',
+                    group: 'all',
+                },
+                {% for step in step_list %}
+                    {% if step.method_name == "stop" %}
+                        {
+                            id: 'stop-{{ step.id }}',
+                            content: '🛑 Stop',
+                            start: '{{ step.start_time }}',
+                            type: 'point',
+                            className: 'stop',
+                            group: 'all',
+                            title: 'Stop event at {{ step.start_time }}'
+                        },
+                    {% endif %}
+                {% endfor %}
+            {% endfor %}
+
+            {% if grouped.cleanup %}
+                {
+                    id: 'cleanup',
+                    content: 'Cleanup ',
+                    start: '{{ grouped.cleanup[0].start_time }}',
+                    end: '{{ grouped.cleanup[-1].end_time }}',
+                    className: 'cleanup',
+                    group: 'all',
+                },
+            {% endif %}
+        ];
+
+        var timeline = new vis.Timeline(container, items, groups, {
+            clickToUse: true,
+            stack: false,        // keep items from overlapping vertically
+            horizontalScroll: true,
+            zoomKey: 'ctrlKey'
+        });
+
+        timeline.on('select', function (props) {
+            const id = props.items[0];
+            if (id && id.startsWith('iter')) {
+                const card = document.getElementById('card-' + id);
+                if (card) {
+                    const yOffset = -80;
+                    const y = card.getBoundingClientRect().top + window.pageYOffset + yOffset;
+                    window.scrollTo({ top: y, behavior: 'smooth' });
+                }
+            }
+        });
+
+        // ---------------- Phase Data Plot ----------------
+        const loadingSpinner = document.querySelector('.loading-spinner');
+        const select = document.getElementById('output-select');
+
+        loadingSpinner.style.display = 'block';
+
+
+        fetch("{{ url_for('data.workflow_phase_data', workflow_id=workflow.id) }}")
+            .then(res => {
+                if (!res.ok) {
+                    throw new Error(`HTTP error! status: ${res.status}`);
+                }
+                return res.json();
+            })
+            .then(data => {
+                loadingSpinner.style.display = 'none';
+
+                const repeatKeys = Object.keys(data).sort((a, b) => a - b);
+                const dataSection = document.querySelector('.data-section'); // Get the entire section
+
+                if (!repeatKeys.length) {
+                    // Hide the entire data section if no data
+                    dataSection.style.display = 'none';
+                    return;
+                }
+
+                const allKeys = new Set();
+                repeatKeys.forEach(k => {
+                    Object.keys(data[k]).forEach(key => allKeys.add(key));
+                });
+
+                // If no keys found, also hide the section
+                if (allKeys.size === 0) {
+                    dataSection.style.display = 'none';
+                    return;
+                }
+
+                // Show the data section since we have data
+                dataSection.style.display = 'block';
+
+                // Clear and populate select options
+                select.innerHTML = '';
+                allKeys.forEach(k => {
+                    const option = new Option(k, k);
+                    select.appendChild(option);
+                });
+
+                function plotData(selectedKey) {
+                    const x = [];
+                    const y = [];
+
+                    repeatKeys.forEach(repeat_index => {
+                        const arr = data[repeat_index][selectedKey];
+                        if (arr && arr.length) {
+                            const batchCount = arr.length;
+
+                            arr.forEach((d, batchIdx) => {
+                                // Compute fractional x for batch indexing: e.g. 1.1, 1.2, 1.3
+                                const xVal = parseFloat(repeat_index) + (batchIdx + 1) / (batchCount + 1);
+
+                                if (typeof d === 'object' && d.x !== undefined && d.y !== undefined) {
+                                    x.push(xVal);
+                                    y.push(d.y);
+                                } else if (typeof d === 'number') {
+                                    x.push(xVal);
+                                    y.push(d);
+                                }
+                            });
+                        }
+                    });
+
+                    const trace = {
+                        x: x,
+                        y: y,
+                        mode: 'markers',
+                        name: selectedKey,
+                        marker: { size: 8 },
+                        line: { shape: 'linear', width: 1 },
+                    };
+
+                    const layout = {
+                        xaxis: {
+                            title: 'Trial (Batch Sub-index)',
+                            gridcolor: '#e9ecef',
+                            tickvals: repeatKeys.map(k => parseFloat(k)),
+                            ticktext: repeatKeys.map(k => `Trial ${k}`),
+                        },
+                        yaxis: {
+                            title: selectedKey,
+                            gridcolor: '#e9ecef'
+                        },
+                        plot_bgcolor: '#ffffff',
+                        paper_bgcolor: '#ffffff',
+                        margin: { t: 60, r: 40, b: 60, l: 80 }
+                    };
+
+                    const config = {
+                        responsive: true,
+                        displayModeBar: true,
+                        modeBarButtonsToRemove: ['lasso2d', 'select2d']
+                    };
+
+                    Plotly.newPlot('phase-plot', [trace], layout, config);
+                }
+
+                select.addEventListener('change', e => {
+                    if (e.target.value) {
+                        plotData(e.target.value);
+                    }
+                });
+
+                // Plot first available data type
+                if (allKeys.size > 0) {
+                    plotData([...allKeys][0]);
+                }
+            })
+            .catch(error => {
+                loadingSpinner.style.display = 'none';
+                console.error('Error loading phase data:', error);
+
+                const dataSection = document.querySelector('.data-section');
+                // Hide the section on error as well
+                dataSection.style.display = 'none';
+
+                // Optionally, you could show an error message instead:
+                // dataSection.innerHTML = `
+                //     <div class="alert alert-danger m-3" role="alert">
+                //         <i class="fas fa-exclamation-triangle me-2"></i>
+                //         <strong>Error:</strong> Unable to load phase data. ${error.message}
+                //     </div>
+                // `;
+            });
+    });
+</script>
+
+{% endblock %}

ivoryos/routes/design/__init__.py

@@ -0,0 +1,4 @@
+from .design import design
+# from ivoryos.routes.execute.socket_handlers import socketio
+
+__all__ = ['design', ]