ivoryos 1.1.0__py3-none-any.whl → 1.2.0b1__py3-none-any.whl

ivoryos/routes/design/design_file.py

@@ -1,7 +1,7 @@
-import csv
+
 import json
 import os
-from flask import Blueprint, send_file, request, flash, redirect, url_for, session, current_app
+from flask import Blueprint, send_file, request, flash, redirect, url_for, current_app
 from werkzeug.utils import secure_filename
 from ivoryos.utils import utils
 
@@ -9,15 +9,17 @@ 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'])
+@files.route('/files/script-json', methods=['POST'])
 def load_json():
-    """Upload a workflow design file (.JSON)"""
+    """
+    .. :quickref: Workflow Design Ext; upload a workflow design file (.JSON)
+
+    .. http:post:: /files/script-json
+
+    :form file: workflow design JSON file
+    :status 302: load script json and then redirects to :http:get:`/ivoryos/design/draft`
+    """
+
     if request.method == "POST":
         f = request.files['file']
         if 'file' not in request.files:
@@ -29,29 +31,38 @@ def load_json():
             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"""
+@files.route('/files/script-python')
+def download_python():
+    """
+    .. :quickref: Workflow Design Ext; export a workflow design file (.py)
+
+    .. http:post:: /files/script-python
+
+    :status 302: redirects to :http:get:`/ivoryos/design/script/`
+    """
     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
+    filepath = os.path.join(current_app.config["SCRIPT_FOLDER"], f"{run_name}.py")
+    return send_file(os.path.abspath(filepath), as_attachment=True)
+
+
+@files.route('/files/script-json')
+def download_json():
+    """
+    .. :quickref: Workflow Design Ext; export a workflow design file (.JSON)
+
+    .. http:post:: /files/script-json
+
+    :status 302: redirects to :http:get:`/ivoryos/design/script/`
+    """
+    script = utils.get_script_file()
+    run_name = script.name if script.name else "untitled"
+
+    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)
     return send_file(os.path.abspath(filepath), as_attachment=True)
 
 

ivoryos/routes/design/design_step.py

@@ -1,43 +1,145 @@
-from flask import Blueprint, request, session, flash, redirect, url_for
+from flask import Blueprint, request, session, flash, redirect, url_for, jsonify, render_template, current_app
+from flask_login import login_required
+
 from ivoryos.utils import utils
-from ivoryos.utils.form import create_form_from_action
+from ivoryos.utils.form import create_form_from_action, create_action_button
 
 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"""
+
+@steps.get("/draft/steps/<int:uuid>")
+def get_step(uuid: int):
+    """
+    .. :quickref: Workflow Design Steps; get an action step editing form
+
+    .. http:get:: /steps/<int:uuid>
+
+    get the editing form for an action step
+
+    :param uuid: The step number id
+    :type uuid: int
+
+    :status 200: render template with action step form
+    """
     script = utils.get_script_file()
     action = script.find_by_uuid(uuid)
-    session['edit_action'] = action
+    if request.method == 'GET':
+        # forms = create_form_from_action(action, script=script)
+        # session['edit_action'] = action
+        return render_template("components/edit_action_form.html",
+                               action=action,
+                               forms=create_form_from_action(action, script=script))
+
+
+@steps.post("/draft/steps/<int:uuid>")
+def save_step(uuid: int):
+    """
+    .. :quickref: Workflow Design Steps; save an action step on canvas
+
+    .. http:post:: /steps/<int:uuid>
 
-    if request.method == "POST" and action is not None:
+        save the changes of an action step
+
+        :param uuid: The step number id
+        :type uuid: int
+
+    :status 200: render template with action step form
+    """
+    script = utils.get_script_file()
+    action = script.find_by_uuid(uuid)
+    if 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
+        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)
+    utils.post_script_file(script)
+    exec_string = script.compile(current_app.config['SCRIPT_FOLDER'])
+    session['python_code'] = exec_string
+    design_buttons = {stype: create_action_button(script, stype) for stype in script.stypes}
+    return render_template("components/canvas_main.html",
+                               script=script,
+                               buttons_dict=design_buttons)
+
+@steps.delete("/draft/steps/<int:uuid>")
+def delete_step(uuid: int):
+    """
+    .. :quickref: Workflow Design Steps; delete an action step on canvas
+
+    .. http:delete:: /steps/<int:uuid>
+
+        delete an action step
+
+        :param uuid: The step number id
+        :type uuid: int
+
+    :status 200: render template with action step form
+    """
     script = utils.get_script_file()
-    script.delete_action(id)
+    if request.method == 'DELETE':
+        script.delete_action(uuid)
     utils.post_script_file(script)
-    return redirect(back)
+    exec_string = script.compile(current_app.config['SCRIPT_FOLDER'])
+    session['python_code'] = exec_string
+    design_buttons = {stype: create_action_button(script, stype) for stype in script.stypes}
+    return render_template("components/canvas_main.html",
+                               script=script,
+                               buttons_dict=design_buttons)
+
+
+@steps.route("/draft/steps/<int:uuid>/duplicate", methods=["POST"], strict_slashes=False,)
+def duplicate_action(uuid: int):
+    """
+    .. :quickref: Workflow Design Steps; duplicate an action step on canvas
+
+    .. http:post:: /draft/steps/<int:uuid>/duplicate
 
-@steps.route("/step/duplicate/<id>")
-def duplicate_action(id: int):
-    """Duplicate an action step on canvas"""
-    back = request.referrer
+    :param uuid: The step number uuid
+    :type uuid: int
+
+    :status 200: render new design script template
+    """
+
+    # back = request.referrer
     script = utils.get_script_file()
-    script.duplicate_action(id)
+    script.duplicate_action(uuid)
     utils.post_script_file(script)
-    return redirect(back) 
+    exec_string = script.compile(current_app.config['SCRIPT_FOLDER'])
+    session['python_code'] = exec_string
+    design_buttons = {stype: create_action_button(script, stype) for stype in script.stypes}
+
+    return render_template("components/canvas_main.html",
+                         script=script,
+                         buttons_dict=design_buttons)
+
+
+@steps.route("/draft/steps/order", methods=['POST'])
+@login_required
+def update_list():
+    """
+    .. :quickref: Workflow Design Steps; update the order of steps in the design canvas when reordering steps.
+
+    .. http:post:: /draft/steps/order
+
+    Update the order of steps in the design canvas when reordering steps.
+
+    :form order: A comma-separated string representing the new order of steps.
+    :status 200: Successfully updated the order of steps.
+    """
+    order = request.form['order']
+    script = utils.get_script_file()
+    script.currently_editing_order = order.split(",", len(script.currently_editing_script))
+    script.sort_actions()
+
+    utils.post_script_file(script)
+    exec_string = script.compile(current_app.config['SCRIPT_FOLDER'])
+    session['python_code'] = exec_string
+
+    # Return the updated canvas HTML instead of JSON
+    design_buttons = {stype: create_action_button(script, stype) for stype in script.stypes}
+    return render_template("components/canvas_main.html",
+                           script=script,
+                           buttons_dict=design_buttons)

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

@@ -6,18 +6,19 @@
                 data-bs-target="#{{name}}" aria-expanded="false"
                 aria-controls="collapseExample"
                  data-action="{{ name }}">
-            {{ format_name(name) }}
+            {{ name | format_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}}">
+            <form role="form" method='POST' action="{{ url_for('design.methods_handler', instrument=instrument) }}"
+                  name="add" id="add-{{name}}" onsubmit="addMethodToDesign(event, this); return false;">
                 <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>
+                                <label class="input-group-text">{{ field.label.text | format_name }}</label>
                                 {% if field.type == "SubmitField" %}
                                     {{ field(class="btn btn-dark") }}
                                 {% elif field.type == "BooleanField" %}

ivoryos/routes/design/templates/components/{instrument_panel.html → actions_panel.html}

@@ -1,8 +1,13 @@
 {# 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) }}
+{#        <a class="btn btn-primary" role="button" type="button" href="{{url_for('design.experiment_builder')}}"><i class="bi bi-arrow-return-left"></i></a>#}
+        <a type="button"
+                data-get-url="{{ url_for('design.get_operation_sidebar') }}"
+                onclick="updateInstrumentPanel(this)">
+            <i class="bi bi-arrow-return-left"></i>
+        </a>
+        {{ instrument | format_name }}
     </div>
 
     {% if script.editing_type == "script" %}
@@ -12,9 +17,6 @@
 
     {# 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' %}

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

@@ -1,14 +1,10 @@
 {# 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> 
+    <div class="form-check form-switch" data-instrument="{{ instrument }}">
+{#        <input type="hidden" id="autofill" name="autofill" value="temp_value">#}
+        <input class="form-check-input" type="checkbox" id="autoFillCheck" name="autoFillCheck" onchange="toggleAutoFill()"
+               value="temp_value"
+                {{ "checked" if session["autofill"] else "" }}>
+        <label class="form-check-label" for="autoFillCheck">Auto fill</label>
+    </div>
+</div>

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

@@ -1,14 +1,5 @@
-{# 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> 
+ {% include 'components/canvas_header.html' %}
+     <div class="canvas canvas-action-wrapper position-relative" id="canvas-action-wrapper" droppable="true">
+         {% include 'components/canvas_main.html' %}
+     </div>
+ {% include 'components/canvas_footer.html' %}

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

@@ -1,5 +1,9 @@
 {# 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 {{ 'disabled' if not script.name or script.status == "finalized" else '' }}"
+       href="#" data-post-url="{{ url_for('library.workflow_script', script_name=script.name or 'untitled') }}"
+       onclick="saveWorkflow(this); return false;">
+        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

@@ -10,7 +10,7 @@
     <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>
+        <a class="btn btn-secondary btn-sm me-1" href="{{url_for('design.design_files.download_json', 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>
@@ -18,12 +18,18 @@
                 <li>
                     <button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#renameModal">Rename</button>
                 </li>
+                {% if script.name %}
                 <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>
+                    <a class="dropdown-item {{ 'disabled' if not script.name or script.status == "finalized" else '' }}"
+                       href="#" data-post-url="{{ url_for('library.workflow_script', script_name=script.name) }}"
+                       onclick="saveWorkflow(this); return false;">
+                        Save
+                    </a>
                 </li>
+                {% endif %}
                 {% if not script.status == 'finalized' %}
                 <li>
-                    <a class="dropdown-item" href="{{url_for('library.finalize')}}">Disable editing</a>
+                    <a class="dropdown-item" onclick="lockScriptEditing()">Disable editing</a>
                 </li>
                 {% endif %}
             </ul>
@@ -34,21 +40,36 @@
 <!-- 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>
+        <li class="nav-item">
+            <a class="nav-link {{ 'active' if script.editing_type == 'prep' else '' }}"
+               href="#" onclick="setScriptPhase('prep')">
+                Prep
+            </a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link {{ 'active' if script.editing_type == 'script' else '' }}"
+               href="#" onclick="setScriptPhase('script')">
+                Experiment
+            </a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link {{ 'active' if script.editing_type == 'cleanup' else '' }}"
+               href="#" onclick="setScriptPhase('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>
+        <input class="form-check-input" type="checkbox" id="showPythonCodeSwitch" name="show_code"
+                       onchange="toggleCodeOverlay()" {% if session.get('show_code') %}checked{% endif %}>
+            <label class="form-check-label" for="showPythonCodeSwitch">Preview code</label>
         </div>
+{#        <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/canvas_main.html

@@ -0,0 +1,34 @@
+{# Action list component #}
+
+<!-- partials/canvas_content.html -->
+
+
+<div class="list-group" id="list" style="margin-top: 20px">
+    <ul class="reorder">
+
+    {% if script.editing_type == "prep" %}
+        {% set buttons = buttons_dict["prep"] or [] %}
+    {% elif script.editing_type == "script" %}
+        {% set buttons = buttons_dict["script"] or []  %}
+    {% elif script.editing_type == "cleanup" %}
+        {% set buttons = buttons_dict["cleanup"] or [] %}
+    {% endif %}
+
+    {% for button in buttons %}
+        <li id="{{ button['id'] }}" style="list-style-type: none;">
+            <span class="line-number d-none">{{ button['id'] }}.</span>
+            <a href="#" onclick="editAction('{{ button['uuid'] }}'); return false;" type="button" class="btn btn-light" style="{{ button['style'] }}">{{ button['label'] }}</a>
+            {% if not button["instrument"] in ["if","while","repeat"] %}
+                <button onclick="duplicateAction('{{ button['id'] }}')" type="button" class="btn btn-light"><span class="bi bi-copy"></span></button>
+
+            {% endif %}
+                <button onclick="deleteAction('{{ button['id'] }}')" type="button" class="btn btn-light">
+                    <span class="bi bi-trash"></span>
+                </button>
+        </li>
+    {% endfor %}
+    </ul>
+</div>
+<div class="python-code-wrapper" id="python-code-wrapper">
+    {% include 'components/python_code_overlay.html' %}
+</div>

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

@@ -1,12 +1,10 @@
 {# 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>
+<div class="input-group mb-3">
+    <select class="form-select" name="deck_name" id="deck_name" required onchange="changeDeck(this.value);">
+        <option {{ '' if 'pseudo_deck' in session else 'selected' }} disabled hidden style="overflow-wrap: break-word;" name="deck_name" id="deck_name" value=""> -- choose deck --</option>
+        {% for connection in history %}
+            <option {{ 'selected' if session['pseudo_deck']==connection else '' }} style="overflow-wrap: break-word;" name="deck_name" id="deck_name" value="{{connection}}">{{connection.split('.')[0]}}</option>
+        {% endfor %}
+    </select>
+</div>
 <hr> 

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

@@ -1,13 +1,23 @@
 {# 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']) }}">
+    <div style="margin-bottom: 1vh;margin-top: 1vh;">
+        <a type="button"
+           data-get-url="{{ url_for('design.get_operation_sidebar') }}"
+           onclick="updateInstrumentPanel(this)">
+            <i class="bi bi-arrow-return-left"></i>
+        </a>
+    </div>
+    <h5> {{ action['action'] | format_name }} </h5>
+    <form role="form" method='POST' name="{{instrument}}" 
+          action="{{ url_for('design.design_steps.get_step', uuid=action['uuid']) }}"
+          onsubmit="submitEditForm(event); return false;">
         {% 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">
+                    <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() }}
@@ -23,7 +33,6 @@
             {% 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>
+        <button type="submit" class="btn btn-primary">Save</button>
+        <button type="button" class="btn btn-primary" id="back">Back</button>
     </form>
-{% endwith %} 

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

@@ -0,0 +1,66 @@
+{# 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="#flow" role="button" aria-expanded="false" aria-controls="collapseExample">
+                Flow control
+            </button>
+        </h5>
+        <div class="accordion-collapse collapse show" id="flow">
+            <ul class="list-group">
+                <button class="list-group-item list-group-item-action"
+                        type="button"
+                        name="device"
+                        value="flow_control"
+                        data-get-url="{{ url_for('design.get_operation_sidebar', instrument='flow_control') }}"
+                        onclick="updateInstrumentPanel(this)">
+                    Flow control
+                </button>
+            </ul>
+        </div>
+        <h5 class="accordion-header">
+            <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#deck" role="button" aria-expanded="false" aria-controls="collapseExample">
+                Instruments
+            </button>
+        </h5>
+        <div class="accordion-collapse collapse show" id="deck">
+            <ul class="list-group">
+                {% for instrument in defined_variables %}
+                        <button class="list-group-item list-group-item-action"
+                                type="button"
+                                name="device"
+                                value="{{instrument}}"
+                                data-get-url="{{ url_for('design.get_operation_sidebar', instrument=instrument) }}"
+                                onclick="updateInstrumentPanel(this)">
+                            {{ instrument | format_name }}
+                        </button>
+                {% 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">
+                    Temp instruments
+                </button>
+            </h5>
+            <div class="accordion-collapse collapse show" id="local">
+                <ul class="list-group">
+                    {% for instrument in local_variables %}
+                        <button class="list-group-item list-group-item-action"
+                                type="button"
+                                name="device"
+                                value="{{instrument}}"
+                                data-get-url="{{ url_for('design.get_operation_sidebar', instrument=instrument) }}"
+                                onclick="updateInstrumentPanel(this)">
+                            {{instrument}}
+                        </button>
+                    {% endfor%}
+                </ul>
+            </div>
+        </div>
+    {% endif %}
+</div>