ivoryos 0.1.21__py3-none-any.whl → 0.1.23__py3-none-any.whl

ivoryos/__init__.py

@@ -2,7 +2,7 @@ import os
 import sys
 from typing import Union
 
-from flask import Flask, redirect, url_for, g
+from flask import Flask, redirect, url_for, g, Blueprint
 
 from ivoryos.config import Config, get_config
 from ivoryos.routes.auth.auth import auth, login_manager
@@ -18,6 +18,16 @@ from ivoryos.utils.script_runner import ScriptRunner
 from ivoryos.version import __version__ as ivoryos_version
 from importlib.metadata import entry_points
 global_config = GlobalConfig()
+from sqlalchemy import event
+from sqlalchemy.engine import Engine
+import sqlite3
+
+@event.listens_for(Engine, "connect")
+def enforce_sqlite_foreign_keys(dbapi_connection, connection_record):
+    if isinstance(dbapi_connection, sqlite3.Connection):
+        cursor = dbapi_connection.cursor()
+        cursor.execute("PRAGMA foreign_keys=ON")
+        cursor.close()
 
 url_prefix = os.getenv('URL_PREFIX', "/ivoryos")
 app = Flask(__name__, static_url_path=f'{url_prefix}/static', static_folder='static')
@@ -29,8 +39,9 @@ app.register_blueprint(database, url_prefix=url_prefix)
 
 
 def create_app(config_class=None):
-    # url_prefix = os.getenv('URL_PREFIX', "/ivoryos")
-    # app = Flask(__name__, static_url_path=f'{url_prefix}/static', static_folder='static')
+    """
+    create app, init database
+    """
     app.config.from_object(config_class or 'config.get_config()')
 
     # Initialize extensions
@@ -70,7 +81,8 @@ def run(module=None, host="0.0.0.0", port=None, debug=None, llm_server=None, mod
         config: Config = None,
         logger: Union[str, list] = None,
         logger_output_name: str = None,
-        enable_design=True
+        enable_design=True,
+        blueprint_plugins=None,
         ):
     """
     Start ivoryOS app server.
@@ -85,11 +97,14 @@ def run(module=None, host="0.0.0.0", port=None, debug=None, llm_server=None, mod
     :param logger: logger name of list of logger names, defaults to None
     :param logger_output_name: log file save name of logger, defaults to None, and will use "default.log"
     :param enable_design: enable design canvas, database and workflow execution
-    :param stream_address:
     """
     app = create_app(config_class=config or get_config())  # Create app instance using factory function
 
-    plugins = load_plugins(app, socketio)
+    plugins = load_installed_plugins(app, socketio)
+
+    if blueprint_plugins:
+        config_plugins = load_plugins(blueprint_plugins, app, socketio)
+        plugins.extend(config_plugins)
 
     def inject_nav_config():
         """Make NAV_CONFIG available globally to all templates."""
@@ -110,10 +125,8 @@ def run(module=None, host="0.0.0.0", port=None, debug=None, llm_server=None, mod
         app.config["MODULE"] = module
         app.config["OFF_LINE"] = False
         global_config.deck = sys.modules[module]
-        # global_config.heinsight = HeinsightAPI("http://127.0.0.1:8080")
         global_config.deck_snapshot = utils.create_deck_snapshot(global_config.deck,
                                                                  output_path=app.config["DUMMY_DECK"], save=True)
-        # global_config.runner = ScriptRunner(globals())
     else:
         app.config["OFF_LINE"] = True
     if model:
@@ -135,7 +148,7 @@ def run(module=None, host="0.0.0.0", port=None, debug=None, llm_server=None, mod
     # return app
 
 
-def load_plugins(app, socketio):
+def load_installed_plugins(app, socketio):
     """
     Dynamically load installed plugins and attach Flask-SocketIO.
     """
@@ -152,4 +165,17 @@ def load_plugins(app, socketio):
 
     return plugin_names
 
-
+def load_plugins(blueprints:list[Blueprint], app, socketio):
+    """
+    Dynamically load installed plugins and attach Flask-SocketIO.
+    """
+    plugin_names = []
+    if not isinstance(blueprints, list):
+        blueprints = [blueprints]
+    for blueprint in blueprints:
+        # If the plugin has an `init_socketio()` function, pass socketio
+        if hasattr(blueprint, 'init_socketio'):
+            blueprint.init_socketio(socketio)
+        plugin_names.append(blueprint.name)
+        app.register_blueprint(blueprint, url_prefix=f"{url_prefix}/{blueprint.name}")
+    return plugin_names

ivoryos/routes/control/control.py

@@ -151,7 +151,7 @@ def controllers(instrument: str):
     return render_template('controllers.html', instrument=instrument, forms=forms, format_name=format_name)
 
 
-@control.route("/backend_control/<instrument>", methods=['GET', 'POST'])
+@control.route("/backend_control/<instrument>", methods=['POST'])
 def backend_control(instrument: str=None):
     """
     .. :quickref: Backend Control; backend control
@@ -187,7 +187,7 @@ def backend_control(instrument: str=None):
                 return json_output, 400
         else:
             return "instrument not exist", 400
-    return json_output, 200
+        return json_output, 200
 
 
 @control.route("/backend_control", methods=['GET'])

ivoryos/routes/control/templates/control/controllers_home.html

@@ -9,7 +9,7 @@
 {#                    {% if not deck %}#}
 {#                        <a href="{{ url_for('control.disconnect', instrument=instrument) }}" class="stretched-link controller-card" style="float: right;color: red; position: relative;">Disconnect <i class="bi bi-x-square"></i></a>#}
                         <div class="p-4 controller-card">
-                            <h5 class=""><a href="{{ url_for('control.controllers', instrument=instrument) }}" class="text-dark stretched-link">{{instrument}}</a></h5>
+                            <h5 class=""><a href="{{ url_for('control.controllers', instrument=instrument) }}" class="text-dark stretched-link">{{instrument.split(".")[1]}}</a></h5>
                         </div>
 {#                    {% else %}#}
 {#                        <div class="p-4 controller-card">#}
@@ -19,6 +19,11 @@
                 </div>
             </div>
         {% endfor %}
+        <div class="d-flex mb-3">
+            <a href="{{ url_for('design.download', filetype='proxy') }}" class="btn btn-outline-primary">
+                <i class="bi bi-download"></i> Download remote control script
+            </a>
+        </div>
         {% if not deck %}
             <div class="col-xl-3 col-lg-4 col-md-6 mb-4 ">
                 <div class="bg-white rounded shadow-sm position-relative">

ivoryos/routes/database/database.py

@@ -1,7 +1,7 @@
-from flask import Blueprint, redirect, url_for, flash, request, render_template, session, current_app
+from flask import Blueprint, redirect, url_for, flash, request, render_template, session, current_app, jsonify
 from flask_login import login_required
 
-from ivoryos.utils.db_models import Script, db
+from ivoryos.utils.db_models import Script, db, WorkflowRun, WorkflowStep
 from ivoryos.utils.utils import get_script_file, post_script_file
 
 database = Blueprint('database', __name__, template_folder='templates/database')
@@ -188,3 +188,60 @@ def save_as():
         else:
             flash("Script name is already exist in database")
         return redirect(url_for("design.experiment_builder"))
+
+
+@database.route('/workflow_runs')
+def list_workflows():
+    query = WorkflowRun.query
+    search_term = request.args.get("keyword", None)
+    if search_term:
+        query = query.filter(WorkflowRun.name.like(f'%{search_term}%'))
+    page = request.args.get('page', default=1, type=int)
+    per_page = 10
+
+    workflows = query.paginate(page=page, per_page=per_page, error_out=False)
+    return render_template('workflow_run_database.html', workflows=workflows)
+
+
+@database.route("/workflow_steps/<int:workflow_id>")
+def get_workflow_steps(workflow_id):
+    workflow = WorkflowRun.query.get_or_404(workflow_id)
+    steps = WorkflowStep.query.filter_by(workflow_id=workflow_id).order_by(WorkflowStep.start_time).all()
+
+    # Organize steps by phase + repeat_index
+    grouped = {
+        "prep": [],
+        "script": {},
+        "cleanup": [],
+    }
+
+    for step in steps:
+        if step.phase == "prep":
+            grouped["prep"].append(step)
+        elif step.phase == "script":
+            grouped["script"].setdefault(step.repeat_index, []).append(step)
+        elif step.phase == "cleanup" or step.method_name == "stop":
+            grouped["cleanup"].append(step)
+
+    return render_template("experiment_step_view.html", workflow=workflow, grouped=grouped)
+
+
+@database.route("/delete_workflow_data/<workflow_id>")
+@login_required
+def delete_workflow_data(workflow_id: str):
+    """
+    .. :quickref: Database; delete experiment data from database
+
+    delete workflow data from database
+
+    .. http:get:: /delete_workflow_data/<workflow_id>
+
+    :param workflow_id: workflow id
+    :type workflow_id: str
+    :status 302: redirect to :http:get:`/ivoryos/workflow_runs/`
+
+    """
+    run = WorkflowRun.query.get(workflow_id)
+    db.session.delete(run)
+    db.session.commit()
+    return redirect(url_for('database.list_workflows'))

ivoryos/routes/database/templates/database/experiment_database.html

@@ -30,7 +30,7 @@
                 <th scope="col">Time created</th>
                 <th scope="col">Last modified</th>
                 <th scope="col">Author</th>
-                <th scope="col">Registered</th>
+{#                <th scope="col">Registered</th>#}
                 <th scope="col"></th>
             </tr>
         </thead>
@@ -43,13 +43,13 @@
                     <td>{{ workflow.time_created }}</td>
                     <td>{{ workflow.last_modified }}</td>
                     <td>{{ workflow.author }}</td>
-                    <td>{{ workflow.registered }}</td>
+{#                    <td>{{ workflow.registered }}</td>#}
                     <td>
                         {#not workflow.status == "finalized" or#}
                         {% if session['user'] == 'admin' or session['user'] == workflow.author %}
                             <a href="{{ url_for('database.delete_workflow', workflow_name=workflow.name) }}">delete</a>
                         {% else %}
-                            <a class="disabled-link" href="{{ url_for('database.delete_workflow', workflow_name=workflow.name) }}">delete</a>
+                            <a class="disabled-link">delete</a>
                         {% endif %}
                     <td>
                 </tr>

ivoryos/routes/database/templates/database/experiment_step_view.html

@@ -0,0 +1,130 @@
+{% extends 'base.html' %}
+
+{% block title %}IvoryOS | Experiment Results{% endblock %}
+
+{% block body %}
+<style>
+  .vis-time-axis .vis-text.vis-minor,
+  .vis-time-axis .vis-text.vis-major {
+    color: #666;
+  }
+  .vis-item.stop {
+    background-color: red;
+    color: white;
+    border: none;
+    font-weight: bold;
+  }
+</style>
+
+<div id="timeline"></div>
+
+<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"/>
+
+<h1>Experiment Step View</h1>
+
+<div id="visualization"></div>
+
+<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' });
+      }
+    }
+  });
+</script>
+
+<h2>Workflow: {{ workflow.name }}</h2>
+
+{% if grouped.prep %}
+  <h4 class="mt-4">Prep Phase</h4>
+  {% for step in grouped.prep %}
+    {% include "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 "step_card.html" %}
+  {% endfor %}
+{% endfor %}
+
+{% if grouped.cleanup %}
+  <h4 class="mt-4">Cleanup Phase</h4>
+  {% for step in grouped.cleanup %}
+    {% include "step_card.html" %}
+  {% endfor %}
+{% endif %}
+{% endblock %}

ivoryos/routes/database/templates/database/step_card.html

@@ -0,0 +1,7 @@
+<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 }}</strong>
+    <small>Start: {{ step.start_time }}</small>
+    <small>End: {{ step.end_time }}</small>
+  </div>
+</div>

ivoryos/routes/database/templates/database/workflow_run_database.html

@@ -0,0 +1,81 @@
+{% extends 'base.html' %}
+
+{% block title %}IvoryOS | Design Database{% endblock %}
+{% block body %}
+
+        <table class="table table-hover" id="workflowResultLibrary">
+        <thead>
+            <tr>
+                <th scope="col">Workflow name</th>
+                <th scope="col">Start time</th>
+                <th scope="col">End time</th>
+                <th scope="col">Data</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for workflow in workflows %}
+                <tr>
+                    <td><a href="{{ url_for('database.get_workflow_steps', workflow_id=workflow.id) }}">{{ workflow.name }}</a></td>
+                    <td>{{ workflow.start_time.strftime("%Y-%m-%d %H:%M:%S") if workflow.start_time else '' }}</td>
+                    <td>{{ workflow.end_time.strftime("%Y-%m-%d %H:%M:%S") if workflow.end_time else '' }}</td>
+
+                    <td>
+                        {% if workflow.data_path %}
+                          <a href="{{ url_for('design.download_results', filename=workflow.data_path) }}">{{ workflow.data_path }}</a>
+                        {% endif %}
+                    </td>
+                    <td>
+                        {% if session['user'] == 'admin' or session['user'] == workflow.author %}
+                            <a href="{{ url_for('database.delete_workflow_data', workflow_id=workflow.id) }}">delete</a>
+                        {% else %}
+                            <a class="disabled-link">delete</a>
+                        {% endif %}
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+
+{#    paging#}
+    <div class="pagination justify-content-center">
+        <div class="page-item {{ 'disabled' if not workflows.has_prev else '' }}">
+            <a class="page-link" href="{{ url_for('database.list_workflows', page=workflows.prev_num) }}">Previous</a>
+        </div>
+        {% for num in workflows.iter_pages() %}
+            <div class="page-item">
+                <a class="page-link {{ 'active' if num == workflows.page else '' }}" href="{{ url_for('database.list_workflows', page=num) }}">{{ num }}</a>
+            </div>
+        {% endfor %}
+        <div class="page-item {{ 'disabled' if not workflows.has_next else '' }}">
+            <a class="page-link" href="{{ url_for('database.list_workflows', page=workflows.next_num) }}">Next</a>
+        </div>
+    </div>
+
+    <div id="steps-container"></div>
+
+    <script>
+        function showSteps(workflowId) {
+            fetch(`/workflow_steps/${workflowId}`)
+                .then(response => response.json())
+                .then(data => {
+                    const container = document.getElementById('steps-container');
+                    container.innerHTML = '';  // Clear previous content
+                    const stepsList = document.createElement('ul');
+
+                    data.steps.forEach(step => {
+                        const li = document.createElement('li');
+                        li.innerHTML = `
+                            <strong>Step: </strong> ${step.method_name} <br>
+                            <strong>Start Time:</strong> ${step.start_time} <br>
+                            <strong>End Time:</strong> ${step.end_time} <br>
+                            <strong>Human Intervention:</strong> ${step.run_error ? 'Yes' : 'No'}
+                        `;
+                        stepsList.appendChild(li);
+                    });
+
+                    container.appendChild(stepsList);
+                });
+        }
+    </script>
+
+{% endblock %}

ivoryos/routes/design/design.py

@@ -11,6 +11,7 @@ from flask_socketio import SocketIO
 from werkzeug.utils import secure_filename
 
 from ivoryos.utils import utils
+from ivoryos.utils.client_proxy import create_function, export_to_python
 from ivoryos.utils.global_config import GlobalConfig
 from ivoryos.utils.form import create_builtin_form, create_action_button, format_name, create_form_from_pseudo, \
     create_form_from_action, create_all_builtin_forms
@@ -39,6 +40,13 @@ def handle_abort_current():
 
 @socketio.on('pause')
 def handle_pause():
+    runner.retry = False
+    msg = runner.toggle_pause()
+    socketio.emit('log', {'message': msg})
+
+@socketio.on('retry')
+def handle_pause():
+    runner.retry = True
     msg = runner.toggle_pause()
     socketio.emit('log', {'message': msg})
 
@@ -360,7 +368,7 @@ def experiment_run():
             run_name = script.validate_function_name(run_name)
             runner.run_script(script=script, run_name=run_name, config=config, bo_args=bo_args,
                               logger=g.logger, socketio=g.socketio, repeat_count=repeat,
-                              output_path=datapath
+                              output_path=datapath, current_app=current_app._get_current_object()
                               )
             if utils.check_config_duplicate(config):
                 flash(f"WARNING: Duplicate in config entries.")
@@ -525,7 +533,20 @@ def download(filetype):
             outfile.write(json_object)
     elif filetype == "python":
         filepath = os.path.join(current_app.config["SCRIPT_FOLDER"], f"{run_name}.py")
-
+    elif filetype == "proxy":
+        snapshot = global_config.deck_snapshot.copy()
+        class_definitions = {}
+        # Iterate through each instrument in the snapshot
+        for instrument_key, instrument_data in snapshot.items():
+            # Iterate through each function associated with the current instrument
+            for function_key, function_data in instrument_data.items():
+                # Convert the function signature to a string representation
+                function_data['signature'] = str(function_data['signature'])
+            class_name = instrument_key.split('.')[-1]  # Extracting the class name from the path
+            class_definitions[class_name.capitalize()] = create_function(request.url_root, class_name, instrument_data)
+        # Export the generated class definitions to a .py script
+        export_to_python(class_definitions, current_app.config["OUTPUT_FOLDER"])
+        filepath = os.path.join(current_app.config["OUTPUT_FOLDER"], "generated_proxy.py")
     return send_file(os.path.abspath(filepath), as_attachment=True)
 
 

ivoryos/routes/design/templates/design/experiment_builder.html

@@ -144,6 +144,16 @@
                                                                     {{ 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 %}
@@ -219,7 +229,7 @@
 
         {# canvas #}
         <div class="col-md-9 scroll-column">
-            <div>
+            <div class="d-flex align-items-center ">
 {#                file dropdown menu    #}
                 <ul class="nav nav-tabs">
                     <li class="nav-item dropdown">
@@ -242,6 +252,12 @@
                     <li class="nav-item"><a class="{{'nav-link active' if script.editing_type=='script' else 'nav-link'}}" aria-current="page" 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'}}" aria-current="page" href="{{url_for('design.toggle_script_type', stype='cleanup') }}">Clean up</a></li>
                 </ul>
+
+                <div class="form-check form-switch ms-auto">
+                    <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 class="canvas" droppable="true">
@@ -279,6 +295,7 @@
                     <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.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.duplicate_action', id=button['id']) }}" type="button" class="btn btn-light"><span class="bi bi-copy"></span></a>
@@ -406,14 +423,44 @@
 </div>
 
 
-    {% 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') }}";
+{% if instrument and use_llm %}
+    <script>
+        const buttonIds = {{ ['generate'] | tojson }};
     </script>
-    <script src="{{ url_for('static', filename='js/sortable_design.js') }}"></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');
+        }
+    }
+
+    // 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>
+
 {% endblock %}