ivoryos 1.2.7__py3-none-any.whl → 1.3.0__py3-none-any.whl

ivoryos/routes/data/templates/components/step_card.html

@@ -1,13 +1,42 @@
-<div class="card mb-2 {{ 'border-danger text-danger bg-light' if step.run_error else 'border-secondary' }}">
-  <div class="card-body p-2">
-    <strong>{{ step.method_name | format_name }}</strong>
-    <small class="text-muted">
-      <i class="fas fa-play-circle me-1"></i> Start: {{ step.start_time.strftime('%H:%M:%S') if step.start_time else 'N/A' }}
-      <i class="fas fa-stop-circle ms-2 me-1"></i> End: {{ step.end_time.strftime('%H:%M:%S') if step.end_time else 'N/A' }}
-      <!-- {% if step.run_error %}
-        <i class="fas fa-stop-circle ms-2 me-1"></i> Error: {{ step.run_error if step.run_error else 'N/A' }}
-      {% endif %} -->
-    </small>
-    <!-- <small>Error: {{ step.run_error }}</small> -->
-  </div>
-</div>
+<div class="card mb-2 {{ 'border-danger text-danger bg-light' if phase.run_error else 'border-secondary' }}">
+    <div class="card-body p-2">
+        <small class="text-muted">
+            <i class="fas fa-play-circle me-1"></i> Start: {{ phase.start_time.strftime('%H:%M:%S') if phase.start_time else 'N/A' }}
+            <i class="fas fa-stop-circle ms-2 me-1"></i> End: {{ phase.end_time.strftime('%H:%M:%S') if phase.end_time else 'N/A' }}
+        </small>
+            {% if phase.parameters %}
+            <div class="mt-2">
+                <strong>Parameters: </strong>
+                    {% for key, value in phase.parameters.items() %}
+                    <span class="badge bg-secondary me-1">{{ key }}: {{ value }}</span>
+                    {% endfor %}
+            </div>
+            {% endif %}
+        {% if phase.steps %}
+            <div class="mt-2">
+                <strong>Steps:</strong>
+                <ul class="mb-0">
+                    {% for step in phase.steps %}
+                        <li class="{{ 'text-danger' if step.run_error else '' }}">
+                            {{ step.method_name }}
+                            <small class="text-muted">
+                              ({{ step.start_time.strftime('%H:%M:%S') if step.start_time else 'N/A' }} –
+                              {{ step.end_time.strftime('%H:%M:%S') if step.end_time else 'N/A' }})
+                            </small>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
+        {% endif %}
+        {% if phase.outputs %}
+            <div class="mt-1">
+                <strong>Outputs:</strong>
+                <ul class="mb-0">
+                    {% for key, value in phase.outputs.items() %}
+                        <li>{{ key }}: {{ value }}</li>
+                    {% endfor %}
+                </ul>
+            </div>
+        {% endif %}
+    </div>
+</div>

ivoryos/routes/data/templates/workflow_view.html

@@ -4,127 +4,348 @@
 
 {% block body %}
 <style>
-  .vis-time-axis .vis-text.vis-minor,
-  .vis-time-axis .vis-text.vis-major {
-    color: #666;
-  }
-  .vis-item.stop {
-    background-color: red;
-    color: white;
-    border: none;
-    font-weight: bold;
-  }
+    .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 id="timeline"></div>
 
+    <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>
 
-<h1>Experiment Step View</h1>
+<script type="text/javascript">
+    document.addEventListener('DOMContentLoaded', function() {
+        // ---------------- Timeline Setup ----------------
+        const container = document.getElementById('visualization');
+        const groups = [
+            { id: 'all', content: 'Workflow Execution' }
+        ];
 
-<div id="visualization"></div>
+        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 %}
 
-<script type="text/javascript">
-  var container = document.getElementById('visualization');
-
-  const items = [
-    {% if grouped.prep %}
-      {
-        id: 'prep',
-        content: 'Prep Phase',
-        start: '{{ grouped.prep[0].start_time }}',
-        end: '{{ grouped.prep[-1].end_time }}',
-        className: 'prep',
-        group: 'prep'
-      },
-    {% 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: 'iter{{ repeat_index }}'
-      },
-      {% 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: 'iter{{ repeat_index }}'
-          },
-        {% endif %}
-      {% endfor %}
-    {% endfor %}
-
-    {% if grouped.cleanup %}
-      {
-        id: 'cleanup',
-        content: 'Cleanup Phase',
-        start: '{{ grouped.cleanup[0].start_time }}',
-        end: '{{ grouped.cleanup[-1].end_time }}',
-        className: 'cleanup',
-        group: 'cleanup'
-
-      },
-    {% endif %}
-  ];
-
-  const groups = [
-      {% if grouped.prep %}{ id: 'prep', content: 'Prep' },{% endif %}
-      {% for repeat_index in grouped.script.keys()|sort %}{ id: 'iter{{ repeat_index }}', content: 'Iteration {{ repeat_index }}' },{% endfor %}
-      {% if grouped.cleanup %}{ id: 'cleanup', content: 'Cleanup' },{% endif %}
-  ];
-
-  var options = {
-      clickToUse: true,
-      stack: false,  // important to keep point within group row
-      horizontalScroll: true,
-      zoomKey: 'ctrlKey'
-  };
-
-  // Initialize your timeline with the sorted groups
-  const timeline = new vis.Timeline(container, items, groups, options);
-
-  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' });
-      }
-    }
-  });
+            {% 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) {
+                            arr.forEach(d => {
+                                if (typeof d === 'object' && d.x !== undefined && d.y !== undefined) {
+                                    x.push(d.x);
+                                    y.push(d.y);
+                                } else if (typeof d === 'number') {
+                                    x.push(parseInt(repeat_index));
+                                    y.push(d);
+                                }
+                            });
+                        }
+                    });
+
+                    const trace = {
+                        x: x,
+                        y: y,
+                        mode: 'markers',
+                        name: selectedKey,
+                    };
+
+                    const layout = {
+                        xaxis: {
+                            title: 'Iteration Index',
+                            gridcolor: '#e9ecef'
+                        },
+                        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>
 
-<h2>Workflow: {{ workflow.name }}</h2>
-
-{% if grouped.prep %}
-  <h4 class="mt-4">Prep Phase</h4>
-  {% for step in grouped.prep %}
-    {% include "components/step_card.html" %}
-  {% endfor %}
-{% endif %}
-
-{% for repeat_index, step_list in grouped.script.items()|sort %}
-  <h4 class="mt-4" id="card-iter{{ repeat_index }}">Iteration {{ repeat_index }}</h4>
-  {% for step in step_list %}
-    {% include "components/step_card.html" %}
-  {% endfor %}
-{% endfor %}
-
-{% if grouped.cleanup %}
-  <h4 class="mt-4">Cleanup Phase</h4>
-  {% for step in grouped.cleanup %}
-    {% include "components/step_card.html" %}
-  {% endfor %}
-{% endif %}
 {% endblock %}

ivoryos/routes/design/design.py

@@ -35,6 +35,9 @@ def _create_forms(instrument, script, autofill, pseudo_deck = None):
         _object = global_config.defined_variables.get(instrument)
         functions = utils._inspect_class(_object)
         forms = create_form_from_pseudo(pseudo=functions, autofill=autofill, script=script)
+    elif instrument.startswith("blocks"):
+        forms = create_form_from_pseudo(pseudo=global_config.building_blocks[instrument], autofill=autofill, script=script)
+        functions = global_config.building_blocks[instrument]
     else:
         if deck:
             functions = global_config.deck_snapshot.get(instrument, {})
@@ -92,7 +95,7 @@ def experiment_builder():
 
     return render_template('experiment_builder.html', off_line=off_line, history=deck_list,
                            script=script, defined_variables=deck_variables, buttons_dict=design_buttons,
-                           local_variables=global_config.defined_variables)
+                           local_variables=global_config.defined_variables, block_variables=global_config.building_blocks)
 
 
 @design.route("/draft/meta", methods=["PATCH"])
@@ -192,7 +195,8 @@ def update_ui_state():
         deck_variables = list(pseudo_deck.keys()) if pseudo_deck else []
         deck_variables.remove("deck_name") if len(deck_variables) > 0 else deck_variables
         html = render_template("components/sidebar.html", history=deck_list,
-                               defined_variables=deck_variables, local_variables = global_config.defined_variables)
+                               defined_variables=deck_variables, local_variables = global_config.defined_variables,
+                               block_variables=global_config.building_blocks)
         return jsonify({"html": html})
     return jsonify({"error": "Invalid request"}), 400
 
@@ -310,6 +314,7 @@ def methods_handler(instrument: str = ''):
 
     success = True
     msg = ""
+    request.form
     if "hidden_name" in request.form:
         method_name = request.form.get("hidden_name", None)
         form = forms.get(method_name) if forms else None
@@ -322,7 +327,7 @@ def methods_handler(instrument: str = ''):
                 primitive_arg_types = utils.get_arg_type(kwargs, functions[function_name])
 
                 # todo
-                print(primitive_arg_types)
+                # print(primitive_arg_types)
 
                 script.eval_list(kwargs, primitive_arg_types)
                 kwargs = script.validate_variables(kwargs)
@@ -422,7 +427,9 @@ def get_operation_sidebar(instrument: str = ''):
         # edit_action_info = session.get("edit_action")
         html = render_template("components/sidebar.html", off_line=off_line, history=deck_list,
                                defined_variables=deck_variables,
-                               local_variables=global_config.defined_variables)
+                               local_variables=global_config.defined_variables,
+                               block_variables=global_config.building_blocks,
+                               )
     return jsonify({"html": html})
 
 

ivoryos/routes/design/templates/components/action_form.html

@@ -1,6 +1,6 @@
 {# Action form component #}
-<div class="accordion-item design-control" draggable="true">
-    <h2 class="accordion-header">
+<div class="accordion-item design-control">
+    <h2 class="accordion-header" >
         <button class="accordion-button collapsed draggable-action"
                 type="button" data-bs-toggle="collapse"
                 data-bs-target="#{{name}}" aria-expanded="false"

ivoryos/routes/design/templates/components/instruments_panel.html

@@ -39,7 +39,29 @@
             </ul>
         </div>
     </div>
-
+    {% if block_variables %}
+        <div class="accordion-item  design-control">
+            <h5 class="accordion-header">
+                <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#block" role="button" aria-expanded="false" aria-controls="collapseExample">
+                    Methods
+                </button>
+            </h5>
+            <div class="accordion-collapse collapse show" id="block">
+                <ul class="list-group">
+                    {% for category in block_variables %}
+                        <button class="list-group-item list-group-item-action"
+                                type="button"
+                                name="device"
+                                value="{{category}}"
+                                data-get-url="{{ url_for('design.get_operation_sidebar', instrument=category) }}"
+                                onclick="updateInstrumentPanel(this)">
+                            {{ category|format_name }}
+                        </button>
+                    {% endfor%}
+                </ul>
+            </div>
+        </div>
+    {% endif %}
     {% if local_variables %}
         <div class="accordion-item  design-control">
             <h5 class="accordion-header">