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

ivoryos/routes/design/design_file.py

@@ -0,0 +1,57 @@
+import csv
+import json
+import os
+from flask import Blueprint, send_file, request, flash, redirect, url_for, session, current_app
+from werkzeug.utils import secure_filename
+from ivoryos.utils import utils
+
+files = Blueprint('design_files', __name__)
+
+
+
+@files.route('/download/data/<filename>')
+def download_results(filename):
+    """Download a workflow data file"""
+    filepath = os.path.join(current_app.config["DATA_FOLDER"], filename)
+    return send_file(os.path.abspath(filepath), as_attachment=True)
+
+@files.route('/upload/json', methods=['POST'])
+def load_json():
+    """Upload a workflow design file (.JSON)"""
+    if request.method == "POST":
+        f = request.files['file']
+        if 'file' not in request.files:
+            flash('No file part')
+        if f.filename.endswith("json"):
+            script_dict = json.load(f)
+            utils.post_script_file(script_dict, is_dict=True)
+        else:
+            flash("Script file need to be JSON file")
+    return redirect(url_for("design.experiment_builder"))
+
+@files.route('/download/script/<filetype>')
+def download(filetype):
+    """Download a workflow design file"""
+    script = utils.get_script_file()
+    run_name = script.name if script.name else "untitled"
+    
+    if filetype == "configure":
+        filepath = os.path.join(current_app.config['SCRIPT_FOLDER'], f"{run_name}_config.csv")
+        with open(filepath, 'w', newline='') as f:
+            writer = csv.writer(f)
+            cfg, cfg_types = script.config("script")
+            writer.writerow(cfg)
+            writer.writerow(list(cfg_types.values()))
+    elif filetype == "script":
+        script.sort_actions()
+        json_object = json.dumps(script.as_dict())
+        filepath = os.path.join(current_app.config['SCRIPT_FOLDER'], f"{run_name}.json")
+        with open(filepath, "w") as outfile:
+            outfile.write(json_object)
+    elif filetype == "python":
+        filepath = os.path.join(current_app.config["SCRIPT_FOLDER"], f"{run_name}.py")
+    else:
+        return "Unsupported file type", 400
+    return send_file(os.path.abspath(filepath), as_attachment=True)
+
+

ivoryos/routes/design/design_step.py

@@ -0,0 +1,43 @@
+from flask import Blueprint, request, session, flash, redirect, url_for
+from ivoryos.utils import utils
+from ivoryos.utils.form import create_form_from_action
+
+steps = Blueprint('design_steps', __name__)
+
+@steps.route("/step/edit/<uuid>", methods=['GET', 'POST'])
+def edit_action(uuid: str):
+    """Edit parameters of an action step on canvas"""
+    script = utils.get_script_file()
+    action = script.find_by_uuid(uuid)
+    session['edit_action'] = action
+
+    if request.method == "POST" and action is not None:
+        forms = create_form_from_action(action, script=script)
+        if "back" not in request.form:
+            kwargs = {field.name: field.data for field in forms if field.name != 'csrf_token'}
+            if forms and forms.validate_on_submit():
+                save_as = kwargs.pop('return', '')
+                kwargs = script.validate_variables(kwargs)
+                script.update_by_uuid(uuid=uuid, args=kwargs, output=save_as)
+            else:
+                flash(forms.errors)
+        session.pop('edit_action')
+    return redirect(url_for('design.experiment_builder'))
+
+@steps.route("/step/delete/<id>")
+def delete_action(id: int):
+    """Delete an action step on canvas"""
+    back = request.referrer
+    script = utils.get_script_file()
+    script.delete_action(id)
+    utils.post_script_file(script)
+    return redirect(back)
+
+@steps.route("/step/duplicate/<id>")
+def duplicate_action(id: int):
+    """Duplicate an action step on canvas"""
+    back = request.referrer
+    script = utils.get_script_file()
+    script.duplicate_action(id)
+    utils.post_script_file(script)
+    return redirect(back) 

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

@@ -0,0 +1,52 @@
+{# Action form component #}
+<div class="accordion-item design-control" draggable="true">
+    <h2 class="accordion-header">
+        <button class="accordion-button collapsed draggable-action"
+                type="button" data-bs-toggle="collapse"
+                data-bs-target="#{{name}}" aria-expanded="false"
+                aria-controls="collapseExample"
+                 data-action="{{ name }}">
+            {{ format_name(name) }}
+        </button>
+    </h2>
+    <div id="{{name}}" class="accordion-collapse collapse" data-bs-parent="#accordionActions">
+        <div class="accordion-body">
+            <form role="form" method='POST' name="add" id="add-{{name}}">
+                <div class="form-group">
+                    {{ form.hidden_tag() }}
+                    {% for field in form %}
+                        {% if field.type not in ['CSRFTokenField', 'HiddenField'] %}
+                            <div class="input-group mb-3">
+                                <label class="input-group-text">{{ field.label.text }}</label>
+                                {% if field.type == "SubmitField" %}
+                                    {{ field(class="btn btn-dark") }}
+                                {% elif field.type == "BooleanField" %}
+                                    {{ field(class="form-check-input") }}
+                                {% elif field.type == "FlexibleEnumField" %}
+                                   <input type="text" id="{{ field.id }}" name="{{ field.name }}" value="{{ field.data }}"
+                                      list="{{ field.id }}_options" placeholder="{{ field.render_kw.placeholder if field.render_kw and field.render_kw.placeholder }}"
+                                      class="form-control">
+                                   <datalist id="{{ field.id }}_options">
+                                      {% for key in field.choices %}
+                                         <option value="{{ key }}">{{ key }}</option>
+                                      {% endfor %}
+                                   </datalist>
+                                {% else %}
+                                    {{ field(class="form-control") }}
+                                {% endif %}
+                            </div>
+                        {% endif %}
+                    {% endfor %}
+                </div>
+                <button type="submit" class="btn btn-dark">Add</button>
+                {% if 'hidden_name' in form %}
+                    <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" data-bs-placement="top"
+                       title='{{ form.hidden_name.description or "Docstring is not available" }}'>
+                    </i>
+                {% else %}
+                    <!-- handle info tooltip for flow control / workflows -->
+                {% endif %}
+            </form>
+        </div>
+    </div>
+</div> 

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

@@ -0,0 +1,15 @@
+{# Action list component #}
+<div class="list-group" id="list" style="margin-top: 20px">
+    <ul class="reorder">
+    {% for button in buttons %}
+        <li id="{{ button['id'] }}" style="list-style-type: none;">
+            <span class="line-number d-none">{{ button['id'] }}.</span>
+            <a href="{{ url_for('design.design_steps.edit_action', uuid=button['uuid']) }}" type="button" class="btn btn-light" style="{{ button['style'] }}">{{ button['label'] }}</a>
+            {% if not button["instrument"] in ["if","while","repeat"] %}
+                <a href="{{ url_for('design.design_steps.duplicate_action', id=button['id']) }}" type="button" class="btn btn-light"><span class="bi bi-copy"></span></a>
+            {% endif %}
+            <a href="{{ url_for('design.design_steps.delete_action', id=button['id']) }}" type="button" class="btn btn-light"><span class="bi bi-trash"></span></a>
+        </li>
+    {% endfor %}
+    </ul>
+</div> 

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

@@ -0,0 +1,14 @@
+{# Autofill toggle component #}
+<div class="d-flex justify-content-between align-items-center " style="margin-bottom: 1vh;margin-top: 1vh;">
+    <div></div>
+    <form role="form" method='POST' name="autoFill" id="autoFill">
+        <div class="form-check form-switch">
+            <input type="hidden" id="autofill" name="autofill" value="temp_value">
+            <input class="form-check-input" type="checkbox" id="autoFillCheck" name="autoFillCheck" onchange="document.getElementById('autoFill').submit();"
+                   value="temp_value"
+                    {{ "checked" if session["autofill"] else "" }}>
+            <label class="form-check-label" for="autoFillCheck">Auto fill</label>
+        </div>
+        <button type="submit" class="btn btn-default" style="display: none;">Auto fill </button>
+    </form>
+</div> 

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

@@ -0,0 +1,14 @@
+{# Canvas component for experiment builder #}
+<div class="col-md-9 scroll-column">
+    {% include 'components/canvas_header.html' %}
+    
+    <div class="canvas-wrapper position-relative">
+        <div class="canvas" droppable="true">
+            {% include 'components/script_info.html' %}
+            {% include 'components/action_list.html' %}
+            {% include 'components/python_code_overlay.html' %}
+        </div>
+    </div>
+    
+    {% include 'components/canvas_footer.html' %}
+</div> 

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

@@ -0,0 +1,5 @@
+{# Canvas footer component #}
+<div>
+    <a class="btn btn-dark {{ 'disabled' if not script.name or script.status == "finalized" else ''}}" href="{{url_for('library.publish')}}">Quick Save</a>
+    <a class="btn btn-dark " href="{{ url_for('execute.experiment_run') }}">Compile and Run</a>
+</div> 

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

@@ -0,0 +1,54 @@
+{# Canvas header component #}
+<div class="d-flex align-items-center justify-content-between">
+    <!-- Left: Script Info -->
+    <div>
+        <span class="fw-bold">{{ script.name or "Untitled Script" }}</span>
+        <span class="badge bg-secondary">{{ script.status }}</span>
+    </div>
+
+    <!-- Center: Main Actions -->
+    <div class="btn-toolbar" role="toolbar">
+        <button class="btn btn-primary btn-sm me-1" data-bs-toggle="modal" data-bs-target="#newScriptModal">New</button>
+        <button class="btn btn-secondary btn-sm me-1" data-bs-toggle="modal" data-bs-target="#jsonModal">Import</button>
+        <a class="btn btn-secondary btn-sm me-1" href="{{url_for('design.design_files.download', filetype='script')}}">Export</a>
+        <button class="btn btn-secondary btn-sm me-1" data-bs-toggle="modal" data-bs-target="#saveasModal">Save as</button>
+        <div class="btn-group">
+            <button class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">More</button>
+            <ul class="dropdown-menu">
+                <li>
+                    <button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#renameModal">Rename</button>
+                </li>
+                <li>
+                    <a class="dropdown-item {% if not script.name or script.status == 'finalized' %}disabled{% endif %}" href="{% if script.name and script.status != 'finalized' %}{{url_for('library.publish')}}{% else %}#{% endif %}">Save</a>
+                </li>
+                {% if not script.status == 'finalized' %}
+                <li>
+                    <a class="dropdown-item" href="{{url_for('library.finalize')}}">Disable editing</a>
+                </li>
+                {% endif %}
+            </ul>
+        </div>
+    </div>
+</div>
+
+<!-- Tabs for Info/Prep/Experiment/Cleanup below header -->
+<div class="d-flex align-items-center mt-2 justify-content-between">
+    <ul class="nav nav-tabs mb-0">
+        <li class="nav-item"><a class="{{'nav-link active' if script.editing_type=='prep' else 'nav-link'}}" href="{{url_for('design.toggle_script_type', stype='prep') }}">Prep</a></li>
+        <li class="nav-item"><a class="{{'nav-link active' if script.editing_type=='script' else 'nav-link'}}" href="{{url_for('design.toggle_script_type', stype='script') }}">Experiment</a></li>
+        <li class="nav-item"><a class="{{'nav-link active' if script.editing_type=='cleanup' else 'nav-link'}}" href="{{url_for('design.toggle_script_type', stype='cleanup') }}">Clean up</a></li>
+    </ul>
+    <div class="d-flex align-items-center ms-auto">
+        <form method="POST" action="{{ url_for('design.toggle_show_code') }}" class="mb-0 me-3">
+            <div class="form-check form-switch">
+                <input class="form-check-input" type="checkbox" id="showPythonCodeSwitch" name="show_code"
+                       onchange="this.form.submit()" {% if session.get('show_code') %}checked{% endif %}>
+                <label class="form-check-label" for="showPythonCodeSwitch">Show Code</label>
+            </div>
+        </form>
+        <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" id="toggleLineNumbers" onchange="toggleLineNumbers()">
+            <label class="form-check-label" for="toggleLineNumbers">Show Line Numbers</label>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,12 @@
+{# Deck selector component #}
+<form id="select-deck" method="POST" action="{{ url_for('design.temp.import_pseudo') }}" enctype="multipart/form-data">
+    <div class="input-group mb-3">
+        <select class="form-select" name="pkl_name" id="pkl_name" required onchange="document.getElementById('select-deck').submit();">
+            <option {{ '' if 'pseudo_deck' in session else 'selected' }} disabled hidden style="overflow-wrap: break-word;" name="pkl_name" id="pkl_name" value=""> -- choose deck --</option>
+            {% for connection in history %}
+                <option {{ 'selected' if session['pseudo_deck']==connection else '' }} style="overflow-wrap: break-word;" name="pkl_name" id="pkl_name" value="{{connection}}">{{connection.split('.')[0]}}</option>
+            {% endfor %}
+        </select>
+    </div>
+</form>
+<hr> 

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

@@ -0,0 +1,29 @@
+{# Edit action form component #}
+{% with action = session["edit_action"] %}
+    <h5> {{ format_name(action['action']) }} </h5>
+    <form role="form" method='POST' name="{{instrument}}" action="{{ url_for('design.design_steps.edit_action', uuid=session["edit_action"]['uuid']) }}">
+        {% if not action['args'] == None %}
+        <div class="form-group">
+            {% if not action['args'].__class__.__name__ == 'dict' %}
+                <div class="input-group mb-3">
+                    <label class="input-group-text">{{ action['action'] }}</label>
+                    <input class="form-control" type="text" id="arg" name="arg" placeholder="{{ action['arg_types']}}" value="{{ action['args'] }}" aria-labelledby="variableHelpBlock">
+                </div>
+            {% else %}
+                {{ forms.hidden_tag() }}
+                {% for field in forms %}
+                    {% if field.type not in ['CSRFTokenField'] %}
+                        <div class="input-group mb-3">
+                            <label class="input-group-text">{{ field.label.text }}</label>
+                            {{ field(class="form-control") }}
+                            <div class="form-text">{{ field.description }} </div>
+                        </div>
+                    {% endif %}
+                {% endfor %}
+            {% endif %}
+        </div>
+        {% endif %}
+        <button class="btn btn-primary" type="submit">Save</button>
+        <button class="btn btn-primary" type="submit" name="back" id="back" value="back">Back</button>
+    </form>
+{% endwith %} 

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

@@ -0,0 +1,23 @@
+{# Instrument panel component #}
+<div>
+    <div class="d-flex justify-content-between align-items-center " style="margin-bottom: 1vh;margin-top: 1vh;">
+        <a class="btn btn-primary" role="button" type="button" href="{{url_for('design.experiment_builder')}}"><i class="bi bi-arrow-return-left"></i></a>
+        {{ format_name(instrument) }}
+    </div>
+
+    {% if script.editing_type == "script" %}
+        {# Auto Fill Toggle #}
+        {% include 'components/autofill_toggle.html' %}
+    {% endif %}
+
+    {# accordion for instrument #}
+    <div class="accordion accordion-flush" id="accordionActions" >
+        {% if use_llm and not instrument == "flow_control" %}
+            {% include 'components/text_to_code_panel.html' %}
+        {% endif %}
+
+        {% for name, form in forms.items() %}
+            {% include 'components/action_form.html' %}
+        {% endfor %}
+    </div>
+</div> 

ivoryos/routes/design/templates/components/modals/drop_modal.html

@@ -0,0 +1,19 @@
+{# Drop modal component #}
+<div class="modal fade" id="dropModal" tabindex="-1" aria-labelledby="dropModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="dropModalLabel">Configure Action</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p>Drop Position ID: <strong id="modalDropTarget"></strong></p>
+                <!-- Form will be dynamically inserted here -->
+                <div id="modalFormFields"></div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+            </div>
+        </div>
+    </div>
+</div> 

ivoryos/routes/design/templates/components/modals/json_modal.html

@@ -0,0 +1,22 @@
+{# JSON import modal component #}
+<div class="modal fade" id="jsonModal" tabindex="-1" aria-labelledby="jsonModal" aria-hidden="true" >
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-5" id="jsonModal">Import from JSON</h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <form method="POST" action="{{ url_for('design.design_files.load_json') }}" enctype="multipart/form-data">
+                <div class="modal-body">
+                    <div class="input-group mb-3">
+                        <input class="form-control" type="file" name="file" required="required">
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> Close </button>
+                    <button type="submit" class="btn btn-primary"> Upload </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div> 

ivoryos/routes/design/templates/components/modals/new_script_modal.html

@@ -0,0 +1,18 @@
+{# New script modal component #}
+<div class="modal fade" id="newScriptModal" tabindex="-1" aria-labelledby="newScriptModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-5" id="newScriptModalLabel">Save your current editing!</h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                The current editing won't be saved. Are you sure you want to proceed?
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> Continue editing </button>
+                <a role="button" class="btn btn-primary" href="{{url_for('design.clear')}}"> Already saved, clear all </a>
+            </div>
+        </div>
+    </div>
+</div> 

ivoryos/routes/design/templates/components/modals/rename_modal.html

@@ -0,0 +1,23 @@
+{# Rename modal component #}
+<div class="modal fade" id="renameModal" tabindex="-1" aria-labelledby="renameModal" aria-hidden="true" >
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-5" id="renameModal">Rename your script</h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <form method="POST" name="run_name" action="{{ url_for('library.edit_run_name') }}">
+                <div class="modal-body">
+                    <div class="input-group mb-3">
+                        <label class="input-group-text" for="run_name">Run Name</label>
+                        <input class="form-control" type="text" name="run_name" id="run_name" placeholder="{{script['name']}}" required="required">
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> Close </button>
+                    <button type="submit"  class="btn btn-primary"> Save </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div> 

ivoryos/routes/design/templates/components/modals/saveas_modal.html

@@ -0,0 +1,27 @@
+{# Save as modal component #}
+<div class="modal fade" id="saveasModal" tabindex="-1" aria-labelledby="saveasModal" aria-hidden="true" >
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-5" id="saveasModal">Save your script as </h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <form method="POST" name="run_name" action="{{ url_for('library.save_as') }}">
+                <div class="modal-body">
+                    <div class="input-group mb-3">
+                        <label class="input-group-text" for="run_name">Run Name</label>
+                        <input class="form-control" type="text" name="run_name" id="run_name" placeholder="{{script['name']}}" required="required">
+                    </div>
+                    <div class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" name="register_workflow" id="register_workflow">
+                        <label class="input-group-label" for="register_workflow">Register this workflow</label>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> Close </button>
+                    <button type="submit"  class="btn btn-primary"> Save </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div> 

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

@@ -0,0 +1,6 @@
+{# Modals component for experiment builder #}
+{% include 'components/modals/new_script_modal.html' %}
+{% include 'components/modals/saveas_modal.html' %}
+{% include 'components/modals/rename_modal.html' %}
+{% include 'components/modals/json_modal.html' %}
+{% include 'components/modals/drop_modal.html' %} 

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

@@ -0,0 +1,43 @@
+{# Operations panel component #}
+<div style="margin-bottom: 4vh;"></div>
+<div class="accordion accordion-flush">
+    <div class="accordion-item design-control">
+        <h5 class="accordion-header">
+            <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#deck" role="button" aria-expanded="false" aria-controls="collapseExample">
+                Operations
+            </button>
+        </h5>
+        <div class="accordion-collapse collapse show" id="deck">
+            <ul class="list-group">
+                {% for instrument in defined_variables %}
+                    <form role="form" method='GET' name="{{instrument}}" action="{{url_for('design.experiment_builder',instrument=instrument)}}">
+                        <div>
+                            <button class="list-group-item list-group-item-action" type="submit">{{format_name(instrument)}}</button>
+                        </div>
+                    </form>
+                {% endfor %}
+            </ul>
+        </div>
+    </div>
+
+    {% if local_variables %}
+        <div class="accordion-item  design-control">
+            <h5 class="accordion-header">
+                <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#local" role="button" aria-expanded="false" aria-controls="collapseExample">
+                    Local Operations
+                </button>
+            </h5>
+            <div class="accordion-collapse collapse show" id="local">
+                <ul class="list-group">
+                    {% for instrument in local_variables %}
+                        <form role="form" method='GET' name="{{instrument}}" action="{{url_for('design.experiment_builder',instrument=instrument)}}">
+                            <div>
+                                <button class="list-group-item list-group-item-action" type="submit"  name="device" value="{{instrument}}" >{{instrument}}</button>
+                            </div>
+                        </form>
+                    {% endfor%}
+                </ul>
+            </div>
+        </div>
+    {% endif %}
+</div> 

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

@@ -0,0 +1,17 @@
+{# Python code overlay component #}
+{% if session.get('show_code') %}
+<div id="pythonCodeOverlay" class="code-overlay bg-light border-start show">
+    <div class="overlay-header d-flex justify-content-between align-items-center px-3 py-2 border-bottom">
+        <strong>Python Code</strong>
+        <button class="btn btn-sm btn-outline-secondary" onclick="toggleCodeOverlay(false)">
+            <i class="bi bi-x-lg"></i>
+        </button>
+    </div>
+    <div class="overlay-content p-3">
+        {% for stype, script in session['python_code'].items() %}
+            <pre><code class="language-python">{{ script }}</code></pre>
+        {% endfor %}
+        <a href="{{ url_for('design.design_files.download', filetype='python') }}">Download <i class="bi bi-download"></i></a>
+    </div>
+</div>
+{% endif %} 

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

@@ -0,0 +1,31 @@
+{# Script info component #}
+<div class="collapse" id="info">
+    <table class="table script-table">
+        <tbody>
+            <tr><th scope="row">Deck Name</th><td>{{script.deck}}</td></tr>
+            <tr><th scope="row">Script Name</th><td>{{ script.name }}</td></tr>
+            <tr>
+                <th scope="row">Editing status <a role="button" data-bs-toggle="popover" data-bs-title="How to use:" data-bs-content="You can choose to disable editing, so the script is finalized and cannot be edited. Use save as to rename the script"><i class="bi bi-info-circle"></i></a></th>
+                <td>{{script.status}}</td>
+            </tr>
+            <tr>
+                <th scope="row">Output Values <a role="button" data-bs-toggle="popover" data-bs-title="How to use:" data-bs-content="This will be your output data. If the return data is not a value, it will save as None is the result file"><i class="bi bi-info-circle"></i></a></th>
+                <td>
+                    {% for i in script.config_return()[1] %}
+                        <input type="checkbox">{{i}}
+                    {% endfor %}
+                </td>
+            </tr>
+            <tr>
+                <th scope="row">Config Variables <a role="button" data-bs-toggle="popover" data-bs-title="How to use:" data-bs-content="This shows variables you want to configure later using .csv file"><i class="bi bi-info-circle"></i></a></th>
+                <td>
+                    <ul>
+                        {% for i in script.config("script")[0] %}
+                            <li>{{i}}</li>
+                        {% endfor %}
+                    </ul>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div> 

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

@@ -0,0 +1,50 @@
+{# Scripts component for experiment builder #}
+{% if instrument and use_llm %}
+    <script>
+        const buttonIds = {{ ['generate'] | tojson }};
+    </script>
+    <script src="{{ url_for('static', filename='js/overlay.js') }}"></script>
+{% endif %}
+
+<script>
+    const updateListUrl = "{{ url_for('design.update_list') }}";
+
+    // Toggle visibility of line numbers
+    function toggleLineNumbers(save = true) {
+        const show = document.getElementById('toggleLineNumbers').checked;
+        document.querySelectorAll('.line-number').forEach(el => {
+            el.classList.toggle('d-none', !show);
+        });
+
+        if (save) {
+            localStorage.setItem('showLineNumbers', show ? 'true' : 'false');
+        }
+    }
+
+    function toggleCodeOverlay() {
+        const overlay = document.getElementById("pythonCodeOverlay");
+        const toggleBtn = document.getElementById("codeToggleBtn");
+        overlay.classList.toggle("show");
+
+        // Change arrow icon
+        const icon = toggleBtn.querySelector("i");
+        icon.classList.toggle("bi-chevron-left");
+        icon.classList.toggle("bi-chevron-right");
+    }
+
+    // Restore state on page load
+    document.addEventListener('DOMContentLoaded', () => {
+        const savedState = localStorage.getItem('showLineNumbers');
+        const checkbox = document.getElementById('toggleLineNumbers');
+
+        if (savedState === 'true') {
+            checkbox.checked = true;
+        }
+
+        toggleLineNumbers(false);  // don't overwrite localStorage on load
+
+        checkbox.addEventListener('change', () => toggleLineNumbers());
+    });
+</script>
+
+<script src="{{ url_for('static', filename='js/sortable_design.js') }}"></script> 

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

@@ -0,0 +1,16 @@
+{# Sidebar component for experiment builder #}
+<div class="col-md-3 scroll-column">
+    {# select deck if this is online#}
+    {% if off_line %}
+        {% include 'components/deck_selector.html' %}
+    {% endif %}
+
+    {# edit action #}
+    {% if session["edit_action"] %}
+        {% include 'components/edit_action_form.html' %}
+    {% elif instrument %}
+        {% include 'components/instrument_panel.html' %}
+    {% else %}
+        {% include 'components/operations_panel.html' %}
+    {% endif %}
+</div>