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

ivoryos/routes/design/design_file.py

@@ -0,0 +1,68 @@
+
+import json
+import os
+from flask import Blueprint, send_file, request, flash, redirect, url_for, current_app
+from werkzeug.utils import secure_filename
+from ivoryos.utils import utils
+
+files = Blueprint('design_files', __name__)
+
+
+
+@files.route('/files/script-json', methods=['POST'])
+def load_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:
+            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('/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"
+    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

@@ -0,0 +1,145 @@
+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, create_action_button
+
+steps = Blueprint('design_steps', __name__)
+
+
+@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)
+    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>
+
+        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)
+        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()
+    if request.method == 'DELETE':
+        script.delete_action(uuid)
+    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.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
+
+    :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(uuid)
+    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.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

@@ -0,0 +1,53 @@
+{# 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 }}">
+            {{ 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' 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 | format_name }}</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/actions_panel.html

@@ -0,0 +1,25 @@
+{# 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>#}
+        <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" %}
+        {# Auto Fill Toggle #}
+        {% include 'components/autofill_toggle.html' %}
+    {% endif %}
+
+    {# accordion for instrument #}
+    <div class="accordion accordion-flush" id="accordionActions" >
+
+        {% for name, form in forms.items() %}
+            {% include 'components/action_form.html' %}
+        {% endfor %}
+    </div>
+</div> 

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

@@ -0,0 +1,10 @@
+{# Autofill toggle component #}
+<div class="d-flex justify-content-between align-items-center " style="margin-bottom: 1vh;margin-top: 1vh;">
+    <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

@@ -0,0 +1,5 @@
+ {% 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

@@ -0,0 +1,9 @@
+{# Canvas footer component #}
+<div>
+    <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

@@ -0,0 +1,75 @@
+{# 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_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>
+            <ul class="dropdown-menu">
+                <li>
+                    <button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#renameModal">Rename</button>
+                </li>
+                {% if script.name %}
+                <li>
+                    <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" onclick="lockScriptEditing()">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 '' }}"
+               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">
+        <div class="form-check form-switch">
+        <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

@@ -0,0 +1,10 @@
+{# Deck selector component #}
+<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

@@ -0,0 +1,38 @@
+{# Edit action form component #}
+    <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">
+                </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 type="submit" class="btn btn-primary">Save</button>
+        <button type="button" class="btn btn-primary" id="back">Back</button>
+    </form>

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> 

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

@@ -0,0 +1,17 @@
+<div class="modal fade" id="dropModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <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>
+                <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,17 @@
+{# 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>
+                <button class="btn btn-danger" onclick="clearDraft()">Already saved, clear all</button>            </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 name="run_name" onsubmit="editScriptName(event)">
+            <div class="modal-body">
+                    <div class="input-group mb-3">
+                        <label class="input-group-text" for="new-name">Run Name</label>
+                        <input class="form-control" type="text" name="new-name" id="new-name" value="{{ 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>