{% extends "support.html" %}

{% block head %}
<script>
    let run_data_cap = '';
    let legacy_pill_data = [];
    let ai_pill_data = {};

    let isPaused = false;
    let decrementFrame = false;
    let incrementFrame = false;
    let jumpNextImage = false;
    let jumpPrevImage = false;
    let jumpFrame = false;
    let reverse = false;
    let jumpFirst = false;
    let jumpLast = false;
    let jump1SecForward = false;
    let jump1SecBackward = false;
    let jumpFrameId = '';
    let timeoutId;
    let jumpNextDrop = false;
    let jumpPrevDrop = false;
    let perpendicularLine = true;
    let scoreShown = false;
    let graphPanel = false;
    let showImage = true;
    let reset = false;
    let datless = false;
    let aggressive_aoi = false;
    let allow_pick_guid = false;

    let user_is_scrolling = false;
    let scroll_timeout = null;

    let golden_run = false;

    let pillDrops = [];
    let vibAmplitude = Array(300).fill(0);
    let rampAngle = Array(300).fill(0);
    let vibRate = Array(300).fill(0);
    let aoi_col = [];

    let lineVisible = false;
    let imageVisible = false;
    let scoreVisible = false;

    let rampPoints = [];
    let door_moving = [];
    let ramp_point_averages = {};
    let back_bottom_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
    let back_top_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
    let bump_1_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
    let bump_2_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
    let bump_3_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
    let lip_bottom_left_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
    let lip_top_left_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};

    let startX = 0;
    let startY = 0;
    let mouseX = 0;
    let mouseY = 0;
    let drawLine = false;
    let clearLine = false;
    let drawing = false;
    let lines = [];

    let GUID_data = {};
    let selected_guid = '';

    let images = {};
    let downloaded_images = 0;
    let filler_ramp_points = {};
    let meta_data = {};
    let animation_speed = 1000 / 30;

    function reset_run_defaults(){
        // clear global variables
        pillDrops = [];
        rampAngle = Array(300).fill(0);
        vibRate = Array(300).fill(0);
        aoi_col = [];
        rampPoints = [];
        door_moving = [];
        ramp_point_averages = {};
        back_bottom_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
        back_top_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
        bump_1_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
        bump_2_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
        bump_3_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
        lip_bottom_left_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
        lip_top_left_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
        images = {};
        run_data_cap = '';
        GUID_data = {};
        ai_pill_data = {};
        selected_guid = '';

        $('#aggressive_ramp').parent().hide();
    }

    function makeTar(files) {
        function pad(n, width) {
            let s = n.toString(8);
            return Array(width - s.length - 1).join("0") + s + " ";
        }

        function encodeHeader(name, size) {
            let header = new Uint8Array(512);
            let view = new DataView(header.buffer);

            function putStr(str, offset, length) {
                for (let i = 0; i < length; i++) {
                    header[offset + i] = i < str.length ? str.charCodeAt(i) : 0;
                }
            }

            putStr(name, 0, 100);
            putStr(pad(0o644, 8), 100, 8);   // mode
            putStr(pad(0, 8), 108, 8);       // uid
            putStr(pad(0, 8), 116, 8);       // gid
            putStr(pad(size, 12), 124, 12);  // size
            putStr(pad(Math.floor(Date.now() / 1000), 12), 136, 12); // mtime
            putStr("        ", 148, 8);      // checksum placeholder
            putStr("0", 156, 1);             // typeflag
            putStr("ustar", 257, 6);         // magic

            let sum = 0;
            for (let i = 0; i < 512; i++) sum += header[i];
            putStr(pad(sum, 6) + "\0 ", 148, 8);

            return header;
        }

        let parts = [];
        for (let f of files) {
            let {name, data} = f;
            let header = encodeHeader(name, data.length);
            parts.push(header);

            // file data + padding
            let fileBlock = new Uint8Array(Math.ceil(data.length / 512) * 512);
            fileBlock.set(data);
            parts.push(fileBlock);
        }

        // 2 empty blocks at end
        parts.push(new Uint8Array(1024));

        // concatenate
        let totalSize = parts.reduce((a, b) => a + b.length, 0);
        let tar = new Uint8Array(totalSize);
        let offset = 0;
        for (let p of parts) {
            tar.set(p, offset);
            offset += p.length;
        }
        return tar;
    }


    function tar_run() {
        let pageTitle = document.title.split('--')[0].trim();
        let workorder = $("#workorder_task").val();
        let filename = pageTitle + "_" + workorder + "_archive.tar";

        if (run_data_cap.length > 0) {
            let files = [
                {name: "run_data_cap.txt", data: new TextEncoder().encode(run_data_cap),},
                {name: "ramp_points.csv", data: new TextEncoder().encode(generate_csv()),},
                {name: 'meta_data.json', data: new TextEncoder().encode(JSON.stringify(meta_data))},
                {name: 'meta_data.json', data: new TextEncoder().encode(JSON.stringify(meta_data))},
            ];

            for (let k in images) {
                if (images.hasOwnProperty(k) && images[k] && images[k].length > 0) {
                    files.push({name: `${k}.png`, data: images[k]});
                }
            }

            let tarball = makeTar(files);
            let blob = new Blob([tarball], {type: "application/x-tar"});
            let url = URL.createObjectURL(blob);

            let a = document.createElement("a");
            a.href = url;
            a.download = filename
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);

            URL.revokeObjectURL(url);
        }
    }

    function reset_run(){
        reset = true;
        isPaused = false;
        datless = false;
        aggressive_aoi = false;
        $("#get_images").show();
        $("#reset_run").hide();
        $("#workorder_task").prop("disabled", false);
        $("#workorder_task").val('');
        $('#ai_pill_length').parent().show();
        $('#ai_pill_width').parent().show();
        $('#ai_pill_area').parent().show();
    }

    // convert array to csv row
    function generate_csv() {
        let csv_data = [['Frame Number'].concat(Array.from({ length: back_bottom_time_series['x'].slice(300).length }, (_, index) => index + 1)),
               ['Back Left'].concat(back_bottom_time_series['x'].slice(300)),
               ['Back Right'].concat(back_top_time_series['x'].slice(300)),
               ['Back Right Bump'].concat(bump_1_time_series['x'].slice(300)),
               ['Front Right Bump'].concat(bump_2_time_series['x'].slice(300)),
               ['Left Bump'].concat(bump_3_time_series['x'].slice(300)),
               ['Bottom Left'].concat(lip_bottom_left_time_series['x'].slice(300)),
               ['Bottom Right'].concat(lip_top_left_time_series['x'].slice(300)),
               ['Ramp Angle'].concat(rampAngle.slice(300)),
               ['Vib Rate'].concat(vibRate.slice(300))]

        // Transpose rows -> columns
        let transposed_csv = csv_data[0].map((_, colIndex) =>
            csv_data.map(row => (row[colIndex] !== undefined ? row[colIndex] : ''))
        );

        return transposed_csv.map(row => row.join(',')).join('\n');
    }

    function downloadCSV(csvData){
        if (Math.max.apply(null, lip_bottom_left_time_series['x']) > 0){
            const blob = new Blob([csvData], { type: 'text/csv' });
            const url = URL.createObjectURL(blob);
            const file_name = $("#workorder_task").val() + '_ramp_point_data.csv';
            const a = $('<a>', {
                style: 'display: none',
                href: url,
                download: file_name
            }).appendTo('body');
            a[0].click();
            a.remove();
            URL.revokeObjectURL(url);
        } else {
            alert('No Ramp Points available for this run')
        }
    }

    function downloadRampPoints(){
        downloadCSV(generate_csv());
    }

    function downloadRunDataCap() {
        let pageTitle = document.title.split('--')[0].trim();
        let workorder = $("#workorder_task").val();
        let filename = pageTitle + "_" + workorder + "_run_data_cap.txt";

        let blob = new Blob([run_data_cap], { type: "text/plain" });
        let url = URL.createObjectURL(blob);
        let a = document.createElement("a");
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    }

    function handleKeyDown(event) {
        // console.log(event.code)
        // console.log(event.key)
        if (($('#login-modal').css('display') === 'none' || $('#login-modal').length === 0) && !($('#workorder_task').is(':focus'))) {
            switch (event.code) {
                case 'Backspace':
                    drawLine = false;
                    clearLine = true;
                    $('#horizontal_px').text(0);
                    $('#vertical_px').text(0);
                    $('#diagonal_px').text(0);
                    lines = [];
                    break;
                case 'KeyP':
                    perpendicularLine = !perpendicularLine;
                    break;
                case 'KeyR':
                    if (event.ctrlKey){
                        location.reload()
                    } else {
                        isPaused = false;
                        reverse = !reverse;
                        if (reverse){
                            $('#in_reverse').show();
                        } else {
                            $('#in_reverse').hide();
                        }
                    }
                    break;
                case 'ArrowUp':
                case 'KeyW':
                    decrementFrame = true;
                    break;
                case 'ArrowDown':
                case 'KeyS':
                    incrementFrame = true;
                    break;
                case 'Home':
                    jumpFirst = true;
                    break;
                case 'End':
                    jumpLast = true;
                    break;
                case 'Space':
                    isPaused = !isPaused;
                    break;
                case 'ArrowLeft':
                case 'KeyA':
                    jumpPrevDrop = true;
                    break;
                case 'ArrowRight':
                case 'KeyD':
                case 'KeyN':
                    jumpNextDrop = true;
                    break;
                case 'NumpadEnter':
                    if (!$('#goto_input').is(':focus') && parseInt(jumpFrameId) > 0) {
                        jumpFrame = true;
                    }
                    break;
                case 'PageUp':
                    isPaused = false;
                    jump1SecForward = true;
                    break;
                case 'PageDown':
                    isPaused = false;
                    jump1SecBackward = true;
                    break;
                case 'Comma':
                    jumpPrevImage = true;
                    break
                case 'Period':
                    jumpNextImage = true;
                    break;
                case 'KeyO':
                    scoreShown = !scoreShown;
                    break;
                case 'KeyI':
                    showImage = !showImage;
                    if (showImage) {
                        $('#images_hidden').hide();
                        $('#run_data_cap_column').hide();
                        $('#images_visible').show();
                    } else {
                        $('#images_visible').hide();
                        $('#images_hidden').show();
                    }
                    break;
                case 'KeyT':
                    if (allow_pick_guid) {
                        selected_guid = '';
                        if (isPaused) {
                            jumpFrameId = parseInt($('#frame_counter').text(), 10);
                            jumpFrame = true;
                        }
                    }
                    allow_pick_guid = !allow_pick_guid;
                    if (allow_pick_guid){
                        $('#tracking_mode').show();
                    } else {
                        $('#tracking_mode').hide();
                    }
                    break
                case 'Backquote':  // function as home button
                    $('#run_data_cap_column').hide();
                    $('#ramp_point_averages_column').hide();
                    $('#ramp_point_column').hide();
                    $('#pill_info_column').show();
                    break;
                case 'Digit1':  // Shift + 1 = !
                    if (event.shiftKey) {
                        graphPanel = true;
                        if ($('#ramp_point_column').css('display') === 'none'){
                            if (isPaused) {
                                jumpFrameId = parseInt($('#frame_counter').text(), 10);
                                jumpFrame = true;
                            }
                            $('#pill_info_column').hide();
                            $('#run_data_cap_column').hide();
                            $('#ramp_point_averages_column').hide();
                            $('#guid_pill_selection').hide();
                            $('#ramp_point_column').show();
                        } else {
                            $('#ramp_point_column').hide();
                            $('#pill_info_column').show();
                        }
                    }
                    break;
                case 'Digit2': // Shift + 2 = @
                    if (event.shiftKey) {
                        if ($('#run_data_cap_column').css('display') === 'none'){
                            if (isPaused) {
                                jumpFrameId = parseInt($('#frame_counter').text(), 10);
                                jumpFrame = true;
                            }
                            $('#pill_info_column').hide();
                            $('#ramp_point_column').hide();
                            $('#ramp_point_averages_column').hide();
                            $('#guid_pill_selection').hide();
                            $('#run_data_cap_column').css('display', 'flex');
                        } else {
                            $('#run_data_cap_column').hide();
                            $('#pill_info_column').show();
                        }
                    }
                    break;
                case 'Digit3':  // Shift + 3 = #
                    if (event.shiftKey) {
                        if ($('#ramp_point_averages_column').css('display') === 'none'){
                            $('#pill_info_column').hide();
                            $('#ramp_point_column').hide();
                            $('#run_data_cap_column').hide();
                            $('#guid_pill_selection').hide();
                            $('#ramp_point_averages_column').css('display', 'flex');

                            let canvas = document.getElementById('ramp_point_averages_chart');
                            let chart_instance = canvas.getContext('2d')._chart_instance;
                            if (!chart_instance) {
                                render_ramp_point_averages();
                            }
                        } else {
                            $('#ramp_point_averages_column').hide();
                            $('#pill_info_column').show();
                        }
                    }
                    break;
                case 'Digit4': // Shift + 4 = $
                    if (event.shiftKey) {
                        if ($('#guid_pill_selection').css('display') === 'none'){
                            $('#pill_info_column').hide();
                            $('#ramp_point_column').hide();
                            $('#run_data_cap_column').hide();
                            $('#ramp_point_averages_column').hide();
                            $('#guid_pill_selection').css('display', 'flex');
                        } else {
                            $('#guid_pill_selection').hide();
                            $('#pill_info_column').show();
                        }
                    }
            }

            if (['Numpad0', 'Numpad1', 'Numpad2', 'Numpad3', 'Numpad4', 'Numpad5', 'Numpad6', 'Numpad7', 'Numpad8', 'Numpad9'].includes(event.code)) {
                jumpFrameId += event.key;
                clearTimeout(timeoutId);
                timeoutId = setTimeout(function () {
                    jumpFrameId = '';
                }, 3000);
            }

            // Suppresses most normal action, but can't suppress all or else developer console is unavailable with F12...
            if (['PageDown', 'PageUp', 'KeyD', 'ArrowRight', 'KeyA', 'ArrowLeft', 'Space', 'End', 'Home', 'KeyR', 'KeyW',
                'KeyS', 'ArrowUp', 'ArrowDown'].includes(event.code)) {
                event.preventDefault();
            }
        }
    }

    function adjustPlaybackSpeed(speed) {
        let percent_val = parseFloat(speed);
        if (!isNaN(percent_val) && percent_val > 0) {
            let base_speed = 1000 / 30;
            // 20% speed calculated as 100 / 20 since it takes 5x as many MS before next frame at 20% speed
            animation_speed = base_speed * (100 / percent_val);
        }
    }

    document.addEventListener("keydown", handleKeyDown);

    // allow for using scroll wheel to adjust frame forwards or backwards
    window.addEventListener("wheel", function(event) {
        if (document.body.scrollHeight < window.innerHeight) {
            if (event.deltaY < 0) {
                decrementFrame = true;
            } else {
                incrementFrame = true;
            }
        }
    });

    $(document).ready(function() {
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "Black";
        ctx.beginPath();
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.closePath();
        ctx.fill();

        const shown_rows = parseInt(($(window).height() * 0.7) / (parseFloat($("body").css("font-size"))*2));
        for (let j = 0; j < shown_rows; j++) {
            $('#drop_table_frames').append($('<tr>'));
        }


        document.getElementById('canvas').addEventListener("mousedown", function(event) {
            const rect = document.getElementById('canvas').getBoundingClientRect();
            startX = event.clientX - rect.left;
            startY = event.clientY - rect.top;
            mouseX = startX;
            mouseY = startY;

            lines.push({ x1: startX, y1: startY, x2: startX, y2: startY });
            drawing = true;
            drawLine = true;

            if (lines.length > 10) {
                lines.shift();
            }
        });

        document.getElementById('canvas').addEventListener("mouseup", function(event) {
            const rect = document.getElementById('canvas').getBoundingClientRect();
            mouseX = event.clientX - rect.left;
            mouseY = event.clientY - rect.top;

            if (lines.length) {
                let last = lines[lines.length - 1];
                last.x2 = mouseX;
                last.y2 = mouseY;
            }

            drawing = false;
            drawLine = lines.length > 0;
            // check if mouseclick was near where mousedown occurred and if legacy run, show pill info
            if (Math.abs(startX-mouseX) < 5 && Math.abs(startY-mouseY) < 5){
                // remove the short/invalid line
                lines.pop();
                if (legacy_pill_data.length > 0) {
                    $.each(legacy_pill_data, function(index, pill_data) {
                        // probably a cleaner way to get this data, but don't want to rewrite 270(?) degree rotation of object again.
                        let minX = canvas.width - pill_data['min'][1] - (pill_data['max'][1] - pill_data['min'][1]);
                        let minY = parseInt(pill_data['min'][0]);
                        let maxX = canvas.width - pill_data['min'][1] - (pill_data['max'][1] - pill_data['min'][1]) + (pill_data['max'][1] - pill_data['min'][1]);
                        let maxY = parseInt(pill_data['min'][0]) + (pill_data['max'][0] - pill_data['min'][0]);
                        if (minX < mouseX && mouseX < maxX && minY < mouseY && mouseY < maxY){
                            //TODO: determine if putting pause here can cause a frame slip as one frame resolves, next begin render, while box is being generated due to being tied to a mouse event
                            isPaused = true;
                            const popupBox = $('#popupBox');
                            const states = ["TooSmall", "Single", "Double", "Triple", "Quadruple", "Quintuple", "Sextuple", "Blob", "Protrusion", "Unknown", "Invalid"]
                            popupBox.css('left', rect.left - 330 + 'px');
                            popupBox.css('top', rect.top/2 + ((minY+maxY)/2) + 'px');
                            popupBox.css('display', 'block');

                            const sig_length = $('#pill_length').text();
                            const sig_width = $('#pill_width').text();
                            const sig_area = $('#pill_area').text();

                            const legacy_length = maxY - minY
                            const legacy_width = maxX - minX
                            const legacy_area = legacy_length * legacy_width

                            $('#legacy_object_id').text(pill_data['state'][0]);
                            $('#legacy_pill_length').html(legacy_length + '&nbsp;&nbsp;&nbsp;' + Math.round(legacy_length/sig_length*10000)/100 + '% of sig');
                            $('#legacy_pill_width').html(legacy_width + '&nbsp;&nbsp;&nbsp;' + Math.round(legacy_width/sig_width*10000)/100 + '% of sig');
                            $('#legacy_pill_area').html(legacy_area + '&nbsp;&nbsp;&nbsp;' + Math.round(legacy_area/sig_area*10000)/100 + '% of sig');
                            $('#legacy_pixel_count').text(pill_data['pill_data'][1]);
                            $('#legacy_white_cover').text(Math.round((parseInt(pill_data['pill_data'][1]) / ((maxY - minY) * (maxX - minX)))*10000) / 100 + '%');
                            $('#legacy_pill_state').text(states[pill_data['state'][2]] + '(' + pill_data['state'][3] + ')');
                            $('#legacy_cg_delta').text('<' + pill_data['cg']['0'] + ',' + pill_data['cg'][1] + '>');
                        }
                    })
                } else if (allow_pick_guid) {
                    let frame_id = parseInt($('#frame_counter').text(), 10);
                    let ai_data = ai_pill_data[frame_id];

                    if (!ai_data || ai_data.length === 0) {
                        return;
                    }

                    // convert canvas coords back to data coords
                    let data_x = mouseY;
                    let data_y = canvas.width - mouseX;

                    for (let i = ai_data.length - 1; i >= 0; i -= 1) {
                        let box = ai_data[i];

                        if (
                            data_x >= box.min_x &&
                            data_x <= box.max_x &&
                            data_y >= box.min_y &&
                            data_y <= box.max_y
                        ) {
                            selected_guid = box.guid;
                            break;
                        }
                    }
                }
            }
        });

        document.addEventListener("mousemove", function(event) {
            if (drawing && lines.length) {
                const rect = document.getElementById('canvas').getBoundingClientRect();
                mouseX = event.clientX - rect.left;
                mouseY = event.clientY - rect.top;

                let last = lines[lines.length - 1];
                last.x2 = mouseX;
                last.y2 = mouseY;
            }
        });

        let wo_task_id = window.location.href.match(/wo_task_id=(\d+)/);
        if (wo_task_id) {
            $('#workorder_task').val(wo_task_id[1]);
            $('#get_images').click();
        }

        $('#upload_file').on('change', function(e) {
            reset = true;
            let file = e.target.files[0];
            let file_name = file.name.toLowerCase();
            let reader = new FileReader();
            reader.onload = ev => {
                let has_run_data_cap;

                // allow for direct upload of any .cap file to this
                if (file_name.endsWith('.cap') || file_name.endsWith('.txt')) {
                    has_run_data_cap = true;
                    run_data_cap = new TextDecoder().decode(ev.target.result);
                } else {
                    let tarball = new Uint8Array(ev.target.result);
                    let files = extractTar(tarball);

                    has_run_data_cap = false;
                    for (let f of files) {
                        let fname = f.fileName.replace(/\u0000/g, '');
                        if (fname === "run_data_cap.txt") {
                            has_run_data_cap = true;
                            run_data_cap = new TextDecoder().decode(f.fileData);
                        } else if (fname.endsWith(".jpg")) {
                            let key = fname.replace(/\.jpg$/, "");
                            images[key] = f.fileData;
                        } else if (fname.endsWith(".png")) {
                            let key = fname.replace(/\.png$/, "");
                            images[key] = f.fileData;
                        } else if (fname === 'meta_data.json') {
                            let json_text = new TextDecoder().decode(f.fileData).trim();
                            json_text = json_text.replace(/\u0000/g, ''); // remove nulls
                            meta_data = JSON.parse(json_text);
                        }
                    }
                }

                if (has_run_data_cap) {
                    reset = false;
                    g_run_data = run_data_cap.split('+Frame: ');
                    $("#get_images").hide();
                    $("#reset_run").show();
                    $("#workorder_task").prop("disabled", true);
                    let run_data = run_data_cap.split('+Frame: ');
                    pre_process_data(run_data);
                    generate_guid_page();
                    load_meta_data(false)
                    generateDropTable();
                    get_ramp_points(run_data);
                    calculate_vib_amplitude();
                    generate_average_chart();
                    generate_annotations(run_data);
                }
            };
            reader.readAsArrayBuffer(file);
        })

        $('#drop_table_frames').on('click', '.jump_to_frame', function () {
            jumpFrameId = parseInt($(this).text());
            jumpFrame = true;
            isPaused = true;
        });

        $('#goto_input').on('keypress', function (e) {
            if (e.which === 13) {
                $('#goto_button').click();
            }
        });

        $('.speed_btn').on('click', function() {
            let speed_value = $(this).data('speed');
            $('.speed_btn').removeClass('selected');
            $(this).addClass('selected');
            adjustPlaybackSpeed(speed_value)
        })

        $('#goto_button').on('click', function() {
            let raw_val = $('#goto_input').val();
            let has_percent = raw_val.indexOf('%') !== -1;

            if (has_percent) {
                let percent_str = raw_val.replace('%', '');
                adjustPlaybackSpeed(percent_str)
                $('#goto_input').val('');
            } else {
                let input_val = parseInt($('#goto_input').val(), 10);
                if (!isNaN(input_val) && input_val >= 0) {
                    jumpFrameId = input_val;
                    jumpFrame = true;
                    isPaused = true;
                    user_is_scrolling = false;
                    $('#goto_input').val('');
                }
            }
        })

        $('#pill_drop_scroll').on('scroll', function() {
            user_is_scrolling = true;
            clearTimeout(scroll_timeout);
            scroll_timeout = setTimeout(function () {
                user_is_scrolling = false;
            }, 5000);
        });

        function toggle_shortcuts() {
            let $popup = $('#shortcuts_popup');
            let is_open = $popup.hasClass('is-visible');
            if (is_open) {
                $popup.removeClass('is-visible').attr('aria-hidden', 'true');
            } else {
                $popup.addClass('is-visible').attr('aria-hidden', 'false');
            }
        }
        function close_shortcuts() {
            $('#shortcuts_popup').removeClass('is-visible').attr('aria-hidden', 'true');
        }

        $('#shortcuts_btn').on('click', toggle_shortcuts);
        $('#shortcuts_close').on('click', close_shortcuts);
        // no overlay click close — page remains usable under popup
        $(document).on('keydown', function (e) {
            if (e.key === 'Escape') { close_shortcuts(); }
        });

        init_global_scrubber();

        setTimeout(function() {
            if (document.activeElement && document.activeElement !== document.body) {
                document.activeElement.blur();
            }
        }, 100);

        $('#btn_show_graphs').on('click', function() {
            $('#btn_show_graphs').hide();
            $('#btn_show_downloads').show();
            $('#btn_home').show();

            // mimic Shift + 1 behavior
            if ($('#ramp_point_column').css('display') === 'none') {
                if (isPaused) {
                    jumpFrameId = parseInt($('#frame_counter').text(), 10);
                    jumpFrame = true;
                }
                $('#pill_info_column').hide();
                $('#run_data_cap_column').hide();
                $('#ramp_point_averages_column').hide();
                $('#ramp_point_column').show();
            } else {
                $('#ramp_point_column').hide();
                $('#pill_info_column').show();
            }
        });

        $('#btn_show_downloads').on('click', function() {
            $('#btn_show_graphs').show();
            $('#btn_show_downloads').hide();
            $('#btn_home').show();

            // mimic Shift + 2 behavior
            if ($('#run_data_cap_column').css('display') === 'none') {
                if (isPaused) {
                    jumpFrameId = parseInt($('#frame_counter').text(), 10);
                    jumpFrame = true;
                }
                $('#pill_info_column').hide();
                $('#ramp_point_column').hide();
                $('#ramp_point_averages_column').hide();
                $('#run_data_cap_column').css('display', 'flex');
            } else {
                $('#run_data_cap_column').hide();
                $('#pill_info_column').show();
            }
        });

        $('#btn_home').on('click', function() {
            $('#btn_home').hide();
            $('#btn_show_graphs').show();
            $('#btn_show_downloads').show();

            $('#pill_info_column').show();
            $('#ramp_point_column').hide();
            $('#run_data_cap_column').hide();
            $('#ramp_point_averages_column').hide();
        });

        $(document).on('change', 'input.guid-checkbox', function() {
            let guid = $(this).data('guid');

            if (isPaused) {
                jumpFrameId = parseInt($('#frame_counter').text(), 10);
                jumpFrame = true;
            }

            // only allow one guid to be checked at a time, uncheck all others, then set to guid
            if (this.checked) {
                /* uncheck all others */
                $('input.guid-checkbox').not(this).prop('checked', false);

                selected_guid = guid;
            } else {
                selected_guid = '';
            }
        });
    });


    function normalize_ramp_points(time_series){
        // min is used since the y origin has been made bottom left rather than top left
        const resting_value = Math.min.apply(null, time_series['x']);
        for (let i = 0; i < time_series['x'].length; i++) {
            if (time_series['x'][i] === 1024 && time_series['y'][i] === 288){
                time_series['x'][i] = 0;
            }
            const normalized_point_value = time_series['x'][i] - resting_value;
            time_series['x'][i] = Math.max(normalized_point_value, 0);
        }
        return time_series;
    }


    function get_ramp_points(run_data){
        const target = 'Not Counting... Either Open/Close Door or Gathering Threshold Info...';
        // loop through run data and extract ramp points from
        for (let i = 1; i < run_data.length - 1; i++) {
            let lines = run_data[i].split('\n');
            door_moving[i] = lines.some(line => line.includes(target));

            let ramp_points = $(lines).filter(function(index, line) {
                return line.startsWith("ramp points:");
            }).get()[0];

            if (ramp_points){
                const regex = /<(\d+,\d+)>/g;
                let points = [];
                let match;
                while ((match = regex.exec(ramp_points)) !== null) {
                    const coordinates = match[1].split(",");
                    const x = parseInt(coordinates[0], 10);
                    const y = parseInt(coordinates[1], 10);
                    // rotate 90 degrees such that x and y are swapped
                    points.push({'x': y, 'y': x});
                }

                // bump indices
                let bump1 = points[2];
                let bump2 = points[3];
                let bump3 = points[4];

                // exclusion rules
                let keep_bump1 = !(bump1.y > bump3.y);
                let keep_bump2 = !(bump2.y < bump3.y);

                function push_point(series, pt) {
                    if (!pt) {
                        return;
                    }
                    series['x'].push(1024 - pt.y);
                    series['y'].push(288 - pt.x);
                }

                // create time series of ramp points, but with 0 at the bottom of the canvas
                push_point(back_bottom_time_series, points[0]);
                push_point(back_top_time_series, points[1]);
                push_point(bump_1_time_series, keep_bump1 ? points[2] : null);
                push_point(bump_2_time_series, keep_bump2 ? points[3] : null);
                push_point(bump_3_time_series, points[4]);
                push_point(lip_bottom_left_time_series, points[5]);
                push_point(lip_top_left_time_series, points[6]);

                rampPoints.push(points);
            }
        }
        back_bottom_time_series = normalize_ramp_points(back_bottom_time_series);
        back_top_time_series = normalize_ramp_points(back_top_time_series);
        bump_1_time_series = normalize_ramp_points(bump_1_time_series);
        bump_2_time_series = normalize_ramp_points(bump_2_time_series);
        bump_3_time_series = normalize_ramp_points(bump_3_time_series);
        lip_bottom_left_time_series = normalize_ramp_points(lip_bottom_left_time_series);
        lip_top_left_time_series = normalize_ramp_points(lip_top_left_time_series);
    }


    function calculate_vib_amplitude() {
        for (let i = 299; i < lip_bottom_left_time_series['x'].length; i++) {
            let subarray = lip_bottom_left_time_series['x'].slice(i-50, i);
            let max = 0;
            let min = 1280;

            $.each(subarray, function(index, value) {
                if (value > max) {
                    max = value;
                }
                if (value < min) {
                    min = value;
                }
            })

            vibAmplitude.push(max-min);
        }
    }


    // gets various time series and specific frame data to assist with other functions
    function pre_process_data(run_data){
        let pills_dropped = 0;
        for (let i = 1; i < run_data.length - 1; i++) {
            // get a list of pill drops that occur during the run
            const frameId = run_data[i].split('\n')[0].match('(\\d+)')[0]
            let lines = run_data[i].split('\n');
            let ai_data = [];

            let filteredLines = $(lines).filter(function(index, line) {
                return line.startsWith("+Pill Object");
            }).get();
            filteredLines.forEach(function(line) {
                let extractedData = {};
                $(line.match(/\b\w+=-?\d+(\.\d+)?/g)).each(function () {
                    let match = this.split('=');
                    let key = match[0];
                    extractedData[key] = parseFloat(match[1]);
                });

                let guid_match = line.match(/GUID:\s*([A-Fa-f0-9-]+)/i);
                let box_match = line.match(/min<(\d+),(\d+)>,\s*max<(\d+),(\d+)>/);

                if (!guid_match || !box_match) {
                    return;
                }

                let guid = guid_match[1];

                let x1 = parseInt(box_match[1], 10);
                let y1 = parseInt(box_match[2], 10);
                let x2 = parseInt(box_match[3], 10);
                let y2 = parseInt(box_match[4], 10);

                ai_data.push({
                    guid: guid_match[1],
                    min_x: x1,
                    min_y: y1,
                    max_x: x2,
                    max_y: y2
                });

                let midpoint = {
                    x: Math.floor((x1 + x2) / 2),
                    y: Math.floor((y1 + y2) / 2)
                };

                if (!(guid in GUID_data)) {
                    GUID_data[guid] = {
                        midpoints_array: [],
                        first_frame_seen: parseInt(frameId, 10),
                        last_frame_seen: parseInt(frameId, 10),
                        total_frames_seen: 1
                    };
                }

                GUID_data[guid].midpoints_array.push(midpoint);
                GUID_data[guid].last_frame_seen = parseInt(frameId, 10);
                // add one frame value here so seen and disappeared same frame isn't 0
                GUID_data[guid].total_frames_seen = GUID_data[guid].last_frame_seen - GUID_data[guid].first_frame_seen + 1;
            });

            ai_pill_data[frameId] = ai_data;

            let frame_i_pills_dropped = parseInt(lines[1].match(/Pills Dropped:\s*(\d+)/)[1])
            if (frame_i_pills_dropped > pills_dropped) {
                pills_dropped = frame_i_pills_dropped;
                pillDrops.push(parseInt(frameId) - 4)
            }

            let line_2_data = Array.from(run_data[i].split('\n')[1].matchAll('(\\d+)'));
            // document.getElementById("pill_counter").innerHTML = line_2_data[0][0];
            document.getElementById("drop_counter").innerHTML = line_2_data[1][0];

            // get ramp angle over time and put it into list
            rampAngle.push(parseInt(run_data[i].split('\n')[2].match(/R(\d+)/)[1]))

            // get vib rate over time and put it into list
            vibRate.push(parseInt(run_data[i].split('\n')[2].match(/V(\d+)/)[1]))

            // get vib rate over time and put it into list
            let match = run_data[i].match(/aoi_min_col is:\s*(\d+)/);
            if (match) {
                aoi_col.push(parseInt(match[1]))
                aggressive_aoi = true;
            } else {
                aoi_col.push(0)
            }

            // see if no_flow_state_count exists in run, if so aggressive ramp is turned on

            if (run_data[i].match(/no_flow_state_count/)){
                $('#aggressive_ramp').parent().show();
            }
        }
    }


    const CANISTER_URL_ZERO = "{% url 'site:canister-detail-info' id='0' %}";
    const WO_URL_ZERO       = "{% url 'site:search-workorder-detail' wo_id='0' %}";
    const PILLSIG_BASE      = "{% url 'support:support-pillsig-report' %}";


    function canister_url(id) {
        return CANISTER_URL_ZERO.replace(/\/0\//, '/' + encodeURIComponent(id) + '/');
    }

    function workorder_url(id) {
        return WO_URL_ZERO.replace(/\/0\//, '/' + encodeURIComponent(id) + '/');
    }


    function load_meta_data(active_links) {
        let missing = '—';

        // Serial (canister link)
        if (meta_data.serial_number) {
            $('#meta_serial').text(meta_data.serial_number);
        } else {
            $('#meta_serial').text(missing);
        }
        if (meta_data.canister != null && active_links) {
            $('#meta_serial_link')
                .attr('href', canister_url(meta_data.canister))
                .attr('target', '_blank');
        } else {
            $('#meta_serial_link').attr('href', '#').removeAttr('target');
        }

        if (meta_data.serial_number && active_links) {
            let href = PILLSIG_BASE + '?canister_serial=' + encodeURIComponent(meta_data.serial_number);
            $('#meta_pillsig_link').attr('href', href).attr('target', '_blank').show();
        } else {
            $('#meta_pillsig_link').attr('href', '#').removeAttr('target').hide();
        }

        // DAFE (Pos)
        $('#meta_dafe_pos').text(
            (meta_data.dafe || missing) + (meta_data.position ? ' (' + meta_data.position + ')' : '')
        );

        // Drug fields
        $('#meta_drug_name').text(meta_data.drug_name || missing);
        $('#meta_drug_number').text(meta_data.drug_number || missing);

        // WO ID (workorder link)
        if (meta_data.wo_id != null) {
            $('#meta_wo_id').text(meta_data.wo_id);
            if (active_links) {
                $('#meta_wo_link')
                    .attr('href', workorder_url(meta_data.wo_id))
                    .attr('target', '_blank');
            } else {
                $('#meta_wo_link').attr('href', '#').removeAttr('target');
            }
        } else {
            $('#meta_wo_id').text(missing);
            $('#meta_wo_link').attr('href', '#').removeAttr('target');
        }

        // Other fields
        $('#meta_order_state').text(meta_data.order_state || missing);
        $('#meta_qty_line').text(
            (meta_data.disp_quantity != null ? meta_data.disp_quantity : missing) +
            ' of ' +
            (meta_data.req_quantity != null ? meta_data.req_quantity : missing) +
            ' pills'
        );

        // if we cannot find frames in metadata, just use rampAngle, that has an implied number of frames in it
        $('#meta_frame_count').text(meta_data.frame_count != null ? meta_data.frame_count : rampAngle.length - 302);
        $('#meta_fill_status').text(meta_data.fill_status || missing);
    }


    function get_meta_data(wo_task_id) {
        $.ajax({
            url: "{% url 'support:get-run-meta-data' %}",
            type: 'GET',
            data: { wo_task_id: wo_task_id },
            success: function(response) {
                meta_data = response;
                load_meta_data(true);
            },
            error: function(xhr, status, error) {
                console.error('Error fetching meta data:', error);
            }
        });
    }


    function generate_chart(canvas_id, label){
        const ctx = document.getElementById(canvas_id).getContext('2d');
        if (canvas_id.toLowerCase().includes('back')) {
            max = 125;
        } else if (canvas_id.toLowerCase().includes('bump')){
            max = 75;
        } else if (canvas_id.toLowerCase().includes('lip')){
            max = 50;
        } else if (canvas_id === 'vibRate' || canvas_id === 'vibRate2'){
            max = 7;
        } else {
            max = 16;
        }

        let devicePixelRatio = 1;
        let tension = 0.1;
        let fill = false;
        if (canvas_id === 'vibRate' || canvas_id === 'rampAngle') {
            devicePixelRatio = 3;
            fill = 'origin';
        }
        return new Chart(ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: label,
                    data: Array(300).fill(0),
                    borderColor: 'rgba(135, 206, 250, 1)',
                    backgroundColor: 'rgba(135, 206, 250, 0.5)',
                    fill: fill
                }]
            },
            options: {
                responsive: false,
                maintainAspectRatio: true,
                devicePixelRatio: devicePixelRatio,
                plugins: {
                    legend: {
                        display: false
                    },
                    title: {
                        display: true,
                        text: label
                    }
                },
                scales: {
                    x: {
                        max: 300,
                        grid: {
                            display: false
                        }
                    },
                    y: {
                        min: 0,
                        max: max
                    }
                },
                elements: {
                    point: {
                        radius: 0
                    },
                    line: {
                        tension: tension
                    }
                }
            }
        });
    }


    function generate_guid_page() {
        let canvas_width = document.getElementById('canvas').width;
        let tbody = $('#guid_objects');
        tbody.empty();

        if (Object.keys(GUID_data).length === 0) {
            return;
        }

        Object.keys(GUID_data).forEach(function(guid) {
            let data = GUID_data[guid];

            let points = data.midpoints_array;
            let path = new Path2D();

            path.moveTo(
                canvas_width - points[0].y,
                points[0].x
            );

            for (let i = 1; i < points.length; i += 1) {
                path.lineTo(
                    canvas_width - points[i].y,
                    points[i].x
                );
            }

            GUID_data[guid].path = path;

            let row = $('<tr>')
                .append(
                    $('<td>').append(
                        $('<input>')
                            .attr('type', 'checkbox')
                            .addClass('guid-checkbox')
                            .attr('data-guid', guid)
                    )
                )
                .append($('<td>').text(guid))
                .append($('<td>').text(data.first_frame_seen))
                .append($('<td>').text(data.last_frame_seen))
                .append($('<td>').text(data.total_frames_seen));

            tbody.append(row);
        });
    }



    function render_ramp_point_averages() {
        let $table = $('#ramp_point_averages_table');
        let ctx = document.getElementById('ramp_point_averages_chart').getContext('2d');

        let nice_name = function (key) {
            let name = key.replace(/_/g, ' ');
            name = name.charAt(0).toUpperCase() + name.slice(1);
            return name;
        };

        let get_angles_sorted = function (data) {
            if (!data || typeof data !== 'object') return [];
            let angles_set = {};
            let keys = Object.keys(data);
            for (let i = 0; i < keys.length; i += 1) {
                let series = data[keys[i]];
                if (!series || typeof series !== 'object') continue;
                let ak = Object.keys(series);
                for (let j = 0; j < ak.length; j += 1) {
                    let a = ak[j];
                    if (a === undefined || a === null) continue;
                    angles_set[String(parseInt(a, 10))] = true;
                }
            }
            let angles = Object.keys(angles_set).map(function (x) { return parseInt(x, 10); });
            angles.sort(function (a, b) { return a - b; });
            return angles;
        };

        let palette = [
            'rgba(33, 150, 243, 0.8)', 'rgba(255, 152, 0, 0.8)', 'rgba(76, 175, 80, 0.8)',
            'rgba(156, 39, 176, 0.8)', 'rgba(244, 67, 54, 0.8)', 'rgba(0, 188, 212, 0.8)',
            'rgba(121, 85, 72, 0.8)', 'rgba(205, 220, 57, 0.8)', 'rgba(158, 158, 158, 0.8)',
            'rgba(63, 81, 181, 0.8)', 'rgba(233, 30, 99, 0.8)', 'rgba(0, 150, 136, 0.8)'
        ];

        // regression helpers
        let linear_fit = function (xs, ys) {
            let n = xs.length;
            if (n === 0) return { a: 0, b: 0, ok: false };
            let sx = 0, sy = 0, sxx = 0, sxy = 0;
            for (let i = 0; i < n; i += 1) {
                sx += xs[i];
                sy += ys[i];
                sxx += xs[i] * xs[i];
                sxy += xs[i] * ys[i];
            }
            let denom = n * sxx - sx * sx;
            if (denom === 0) return { a: 0, b: 0, ok: false };
            let a = (n * sxy - sx * sy) / denom;
            let b = (sy - a * sx) / n;
            return { a: a, b: b, ok: true };
        };

        // y = a x^2 + b x + c
        let quadratic_fit = function (xs, ys) {
            let n = xs.length;
            if (n < 3) return { a: 0, b: 0, c: 0, ok: false };

            let s0 = n, s1 = 0, s2 = 0, s3 = 0, s4 = 0;
            let t0 = 0, t1 = 0, t2 = 0;

            for (let i = 0; i < n; i += 1) {
                let x = xs[i], y = ys[i], x2 = x * x;
                s1 += x; s2 += x2; s3 += x2 * x; s4 += x2 * x2;
                t0 += y; t1 += x * y; t2 += x2 * y;
            }

            let A = [[s4, s3, s2], [s3, s2, s1], [s2, s1, s0]];
            let B = [t2, t1, t0];

            for (let k = 0; k < 3; k += 1) {
                let piv = k;
                for (let i = k + 1; i < 3; i += 1) {
                    if (Math.abs(A[i][k]) > Math.abs(A[piv][k])) piv = i;
                }
                if (A[piv][k] === 0) return { a: 0, b: 0, c: 0, ok: false };
                if (piv !== k) {
                    let r = A[k]; A[k] = A[piv]; A[piv] = r;
                    let t = B[k]; B[k] = B[piv]; B[piv] = t;
                }
                for (let i = k + 1; i < 3; i += 1) {
                    let f = A[i][k] / A[k][k];
                    for (let j = k; j < 3; j += 1) A[i][j] -= f * A[k][j];
                    B[i] -= f * B[k];
                }
            }
            let cfs = [0, 0, 0];
            for (let i = 2; i >= 0; i -= 1) {
                let s = B[i];
                for (let j = i + 1; j < 3; j += 1) s -= A[i][j] * cfs[j];
                cfs[i] = s / A[i][i];
            }
            return { a: cfs[0], b: cfs[1], c: cfs[2], ok: true };
        };

        let build_trend = function (mode, xs_all, xs_exist, ys_exist) {
            if (mode === 'linear') {
                let fit = linear_fit(xs_exist, ys_exist);
                if (!fit.ok) return null;
                return xs_all.map(function (x) { return fit.a * x + fit.b; });
            } else {
                let fit = quadratic_fit(xs_exist, ys_exist);
                if (!fit.ok) return null;
                return xs_all.map(function (x) { return fit.a * x * x + fit.b * x + fit.c; });
            }
        };

        // data prep
        let angles = get_angles_sorted(ramp_point_averages);
        let series_keys = Object.keys(ramp_point_averages);

        let datasets = [];
        for (let i = 0; i < series_keys.length; i += 1) {
            let key = series_keys[i];
            let series = ramp_point_averages[key] || {};
            let data = [];
            for (let j = 0; j < angles.length; j += 1) {
                let akey = String(angles[j]);
                let v = null;
                if (series[akey]) v = series[akey].average;
                if (v === null || typeof v === 'undefined' || isNaN(v)) data.push(null);
                else data.push(Number(v));
            }
            datasets.push({
                label: nice_name(key),
                data: data,
                backgroundColor: palette[i % palette.length],
                borderWidth: 1,
                _seriesKey: key,
                _baseColor: palette[i % palette.length]
            });
        }

        if (ctx._chart_instance) ctx._chart_instance.destroy();

        let chart = new Chart(ctx, {
            type: 'bar',
            data: { labels: angles.map(function (x) { return String(x); }), datasets: datasets },
            options: {
                responsive: false,
                maintainAspectRatio: false,
                animation: { duration: 0 },
                interaction: { mode: 'nearest', intersect: true }, // no hover tooltips anyway
                scales: {
                    x: { title: { display: true, text: 'Angle' } },
                    y: { beginAtZero: true, min: 0, title: { display: true, text: 'Average' } }
                },
                plugins: {
                    legend: {
                        position: 'bottom',
                        onClick: function (e, legendItem, legend) {
                            let idx = legendItem.datasetIndex;
                            let ci = legend.chart;
                            let meta = ci.getDatasetMeta(idx);
                            if (meta.hidden === null) meta.hidden = true;
                            else meta.hidden = !meta.hidden;
                            ci.update('none'); // immediate toggle
                        }
                    },
                    tooltip: { enabled: false } // remove hover entirely
                }
            }
        });
        ctx._chart_instance = chart;

        // trendline toggle controls
        let trend_mode = function () {
            let v = $('#trend_mode_select').val();
            if (v === 'linear') return 'linear';
            return 'polynomial';
        };

        let trend_state = {};

        let add_or_update_trendline = function (series_key) {
            let base_ds = chart.data.datasets.find(function (d) { return d._seriesKey === series_key; });
            if (!base_ds) return;

            let xs_exist = [];
            let ys_exist = [];
            for (let i = 0; i < angles.length; i += 1) {
                let y = base_ds.data[i];
                if (!(y === null || typeof y === 'undefined' || isNaN(y))) {
                    xs_exist.push(angles[i]);
                    ys_exist.push(Number(y));
                }
            }
            if (trend_mode() === 'linear' && xs_exist.length < 2) return;
            if (trend_mode() === 'polynomial' && xs_exist.length < 3) return;

            let y_hat = build_trend(trend_mode(), angles, xs_exist, ys_exist);
            if (!y_hat) return;

            if (trend_state[series_key]) {
                let idx = trend_state[series_key].dsIndex;
                chart.data.datasets[idx].data = y_hat;
                chart.data.datasets[idx].label = 'Best fit (' + nice_name(series_key) + ', ' + trend_mode() + ')';
            } else {
                let ds = {
                    type: 'line',
                    label: 'Best fit (' + nice_name(series_key) + ', ' + trend_mode() + ')',
                    data: y_hat,
                    borderColor: base_ds._baseColor.replace(/0\.8\)/, '1)'),
                    backgroundColor: 'rgba(0,0,0,0)',
                    pointRadius: 0,
                    borderWidth: 2,
                    borderDash: [6, 4],
                    spanGaps: true,
                    _trendFor: series_key
                };
                chart.data.datasets.push(ds);
                trend_state[series_key] = { dsIndex: chart.data.datasets.length - 1 };
            }
            chart.update('none');
        };

        let remove_trendline = function (series_key) {
            if (!trend_state[series_key]) return;
            let idx = trend_state[series_key].dsIndex;
            chart.data.datasets.splice(idx, 1);
            let keys = Object.keys(trend_state);
            for (let i = 0; i < keys.length; i += 1) {
                let k = keys[i];
                if (trend_state[k].dsIndex > idx) trend_state[k].dsIndex -= 1;
            }
            delete trend_state[series_key];
            chart.update('none');
        };

        $('#trend_mode_select').off('change.rpa').on('change.rpa', function () {
            let keys = Object.keys(trend_state);
            for (let i = 0; i < keys.length; i += 1) add_or_update_trendline(keys[i]);
        });

        // table
        let thead = '<thead><tr><th>Series</th>';
        for (let c = 0; c < angles.length; c += 1) thead += '<th>' + angles[c] + '</th>';
        thead += '</tr></thead>';

        let tbody = '<tbody>';
        for (let r = 0; r < series_keys.length; r += 1) {
            let key = series_keys[r];
            tbody += '<tr>';
            tbody += '<td class="series-toggle" data-series="' + key + '" style="cursor:pointer;text-decoration:underline;">' +  nice_name(key) + '</td>';
            for (let c = 0; c < angles.length; c += 1) {
                let a = String(angles[c]);
                let v = '';
                let series = ramp_point_averages[key] || {};
                if (series[a] && !(series[a].average === null || typeof series[a].average === 'undefined' || isNaN(series[a].average))) {
                    v = Number(series[a].average).toFixed(2);
                }
                tbody += '<td>' + v + '</td>';
            }
            tbody += '</tr>';
        }
        tbody += '</tbody>';

        $table.empty().append(thead + tbody);

        $table.off('click.rpa').on('click.rpa', 'td.series-toggle', function () {
            let key = $(this).data('series');
            if (trend_state[key]) {
                remove_trendline(key);
                $(this).css('font-weight', 'normal');
            } else {
                add_or_update_trendline(key);
                $(this).css('font-weight', 'bold');
            }
        });
    }

    function generate_average_chart(){
        const names = ['back_bottom', 'back_top', 'bump_1', 'bump_2', 'bump_3', 'lip_bottom_left', 'lip_top_left'];

        const time_series_map = {
            back_bottom: back_bottom_time_series,
            back_top: back_top_time_series,
            bump_1: bump_1_time_series,
            bump_2: bump_2_time_series,
            bump_3: bump_3_time_series,
            lip_bottom_left: lip_bottom_left_time_series,
            lip_top_left: lip_top_left_time_series
        };

        names.forEach(name => {
            let average_data = {}
            for (let i = 0; i <= 15; i++) {
                average_data[i] = { frames: 0, sum: 0 };
            }

            ramp_point_averages[name] = average_data;
        })

        // Array offset of 300 to ignore initial filler data
        for (let i = 300; i < rampAngle.length; i++) {
            let angle = rampAngle[i];

            if (!door_moving[i-300]) {
                names.forEach(name => {
                    if (time_series_map[name]['x'][i] > 0){
                        ramp_point_averages[name][angle]['frames'] += 1;
                        ramp_point_averages[name][angle]['sum'] += time_series_map[name]['x'][i];
                    }
                })
            }
        }

        names.forEach(name => {
            for (let i = 0; i <= 15; i++) {
                let sum = ramp_point_averages[name][i]['sum'];
                let frames = ramp_point_averages[name][i]['frames'];

                ramp_point_averages[name][i]['average'] = Math.ceil(sum/frames);
            }
        })
    }


    function generateDropTable() {
        $('#drop_table_frames').empty();

        for (let j = 0; j < Math.min(pillDrops.length); j++) {
            let newRow = $('<tr>');
            let filler = $('<td>');
            let dropFrame = $('<td>').text(pillDrops[j]).addClass('jump_to_frame');
            let elapsedFrame = $('<td>');
            if (!isNaN(pillDrops[j + 1] - pillDrops[j])) {
                elapsedFrame = $('<td>').text(pillDrops[j + 1] - pillDrops[j]);
            }
            newRow.append(filler, dropFrame, elapsedFrame);
            $('#drop_table_frames').append(newRow);
        }
    }


    function updateDropTable(frame_number) {
        $('#drop_table_frames tr').each(function () {
            let drop_val = parseInt($(this).find('td').eq(1).text());
            if (drop_val <= frame_number) {
                $(this).addClass('past_drop').removeClass('current_drop');
            } else {
                $(this).removeClass('past_drop');
            }
        });

        let next_row = $('#drop_table_frames tr').filter(function () {
            return parseInt($(this).find('td').eq(1).text()) >= frame_number;
        }).first();

        $('#drop_table_frames .current_drop').removeClass('current_drop');

        let current_row;
        if (next_row.length) {
            current_row = next_row;
            next_row.find('td').eq(0).addClass('current_drop');
        } else {
            // frame_number is after the last drop
            let last_row = $('#drop_table_frames tr').last();
            current_row = $('#drop_table_frames tr').last();
            last_row.find('td').eq(0).addClass('current_drop');
        }

        if (!user_is_scrolling  && current_row.length) {
            // find scrollable container (the div wrapping the table)
            let container = $('#pill_drop_scroll');
            let container_height = container.outerHeight();
            let container_top = container.offset().top;
            let row_top = current_row.offset()?.top;

            if (row_top !== undefined) {
                let scroll_top = container.scrollTop();
                // compute new scroll position so current_drop is centered
                let new_scroll = scroll_top + (row_top - container_top) - (container_height / 2) + (current_row.outerHeight() / 2);
                container.scrollTop(new_scroll);
            }
        }
    }


    function displayPillData(pill_data, frame_number){
        $('#pill_objects').empty();

        $.each(pill_data, function(index, item) {
            let newRow = $('<tr>');

            let ID = $('<td>').text(item['pill_id']);
            let CG = $('<td>').text(item['CG']);
            let CGD = $('<td>').text(item['Delta']);
            let Velocity = $('<td>').text(item['velocity']);
            let Acceleration = $('<td>').text(item['accel']);
            let ETA = $('<td>').text(item['eta']);

            let A = $('<td>').text();
            // TODO: check if the +/- 5 needs to be changed since pillDrops now uses armed data
            for (let j = 0; j < pillDrops.length; j++) {
                if (pillDrops[j] > frame_number - 5){
                    if (!isNaN(pillDrops[j + parseInt(item['pill_id'])] + 5 - frame_number)){
                        A = $('<td>').text(pillDrops[j + parseInt(item['pill_id'])] + 5 - frame_number);
                    }
                    break;
                }
            }
            let D = $('<td>').text();
            if ($(A).is('*')){
                if (!isNaN(parseInt(ETA.text()) - parseInt(A.text()))) {
                    D = $('<td>').text(parseInt(ETA.text()) - parseInt(A.text()));
                }
            }
            newRow.append(ID, CG, CGD, Velocity, Acceleration, ETA, A, D);
            $('#pill_objects').append(newRow);
        });
    }


    //TODO put boxes, annotations, lines etc here in a displayOverlay function to cut down on how much is in displayImage


    function displayImage(frame_number, filteredLines, reg_mark, zone_data, angle, vib, legacy_data) {
        return new Promise((resolve, reject) => {
            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');


            const desiredFile = frame_number.toString() in images && images[frame_number.toString()] !== '';

            //only display frames for which there exists an image
            if (desiredFile && showImage) {
                // if ctx isn't cleared then it generates a heat map
                const blob = new Blob([images[frame_number.toString()]], {'type': 'image/png'});
                const url = URL.createObjectURL(blob)
                const img = new Image();
                let pill_data = [];
                let pill_id = 0;
                // I don't think that the duplicate code can be removed here due to needing to be within the onload function
                img.onload = function () {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    let ramp_points = rampPoints[frame_number-1]
                    ctx.drawImage(img, 0, 0)

                    // Draw Ramp Points
                    if (Math.max.apply(null, lip_bottom_left_time_series['x']) > 0){
                        ctx.save()
                        // draw a line between ramp points to simulate a ramp
                        let order = [0, 1, 2, 3, 6, 5, 4, 0]
                        ctx.beginPath();
                        ctx.strokeStyle = 'grey';
                        ctx.lineWidth = 2;
                        // back left ramp point missing
                        if (ramp_points[order[0]]['x'] > 0 && ramp_points[order[0]]['y'] > 0){
                            ctx.moveTo(canvas.width - ramp_points[order[0]]['x'], ramp_points[order[0]]['y']);
                        } else {
                            ctx.moveTo(canvas.width - filler_ramp_points[angle][order[0]]['x'], filler_ramp_points[angle][order[0]]['y']);
                        }
                        for (let i = 1; i < order.length; i++) {
                            if (ramp_points[order[i]]['x'] > 0 && ramp_points[order[i]]['y'] > 0){
                                ctx.lineTo(canvas.width - ramp_points[order[i]]['x'], ramp_points[order[i]]['y']);
                            } else {
                                ctx.lineTo(canvas.width - filler_ramp_points[angle][order[i]]['x'], filler_ramp_points[angle][order[i]]['y']);
                            }
                        }
                        ctx.closePath();
                        ctx.stroke();
                        ctx.clip()

                        // draw curve to simulate bumps on ramp
                        // bumps on right side
                        if (ramp_points[2]['x'] > 0 && ramp_points[2]['y'] > 0) {
                            ctx.beginPath();
                            ctx.moveTo(canvas.width - ramp_points[2]['x'], ramp_points[2]['y']);
                            ctx.quadraticCurveTo(canvas.width - ramp_points[2]['x'] - 150, ramp_points[2]['y'] + 50, canvas.width - ramp_points[2]['x'], ramp_points[2]['y'] - 20);
                            ctx.strokeStyle = 'grey';
                            ctx.lineWidth = 2;
                            ctx.stroke();
                            ctx.closePath();
                        }
                        if (ramp_points[3]['x'] > 0 && ramp_points[3]['y'] > 0) {
                            ctx.beginPath();
                            ctx.moveTo(canvas.width - ramp_points[3]['x'], ramp_points[3]['y']);
                            ctx.quadraticCurveTo(canvas.width - ramp_points[3]['x'] - 150, ramp_points[3]['y'] + 50, canvas.width - ramp_points[3]['x'], ramp_points[3]['y'] - 20);
                            ctx.strokeStyle = 'grey';
                            ctx.lineWidth = 2;
                            ctx.stroke();
                            ctx.closePath();
                        }
                        // bump on left side
                        if (ramp_points[4]['x'] > 0 && ramp_points[4]['y'] > 0) {
                            ctx.beginPath();
                            ctx.moveTo(canvas.width - ramp_points[4]['x'], ramp_points[4]['y']);
                            ctx.quadraticCurveTo(canvas.width - ramp_points[4]['x'] + 150, ramp_points[4]['y'] + 50, canvas.width - ramp_points[4]['x'], ramp_points[4]['y'] - 20);
                            ctx.strokeStyle = 'grey';
                            ctx.lineWidth = 2;
                            ctx.stroke();
                            ctx.closePath();
                        }

                        // draw lines on canvas for zones C & D
                        zone_data[angle.toString()].slice(2).forEach(function(line_coords, index) {
                            ctx.beginPath();
                            ctx.moveTo(0, line_coords);
                            ctx.lineTo(288, line_coords);
                            ctx.strokeStyle = "white";
                            ctx.lineWidth = 2;
                            ctx.stroke();

                            ctx.fillStyle = 'white';
                            ctx.font = '10px Arial';
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';
                            ctx.fillText('Zone ' + String.fromCharCode(67 + index), canvas.width - ramp_points[4]['x'] + 25, line_coords - 8);
                        });

                        ctx.restore()
                        // TODO: include ramp drop off and other ramp boxes but cut these zone lines to only exist inside those boxes
                        // draw zone lines
                        zone_data[angle.toString()].slice(0,2).forEach(function(line_coords, index) {
                            // Draw Zone D and C line differently so that they only extend across the wireframe
                            ctx.beginPath();
                            ctx.moveTo(canvas.width - ramp_points[5]['x'], line_coords);
                            ctx.lineTo(canvas.width - ramp_points[6]['x'], line_coords);
                            ctx.strokeStyle = "white";
                            ctx.lineWidth = 2;
                            ctx.stroke();

                            ctx.fillStyle = 'white';
                            ctx.font = '10px Arial';
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';
                            // Ascii code 65 is 'A', which corresponds to index 0
                            if (index === 1){
                                ctx.fillText('EOC', 272, line_coords - 8);
                            }
                            ctx.fillText('Zone ' + String.fromCharCode(65 + index), 20, line_coords - 8);
                        })
                    } else {
                        // draw zone lines
                        zone_data[angle.toString()].forEach(function(line_coords, index) {
                            ctx.beginPath();
                            ctx.moveTo(0, line_coords);
                            ctx.lineTo(288, line_coords);
                            ctx.strokeStyle = "white";
                            ctx.lineWidth = 2;
                            ctx.stroke();

                            ctx.fillStyle = 'white';
                            ctx.font = '10px Arial';
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';
                            // Ascii code 65 is 'A', which corresponds to index 0
                            if (index === 1){
                                ctx.fillText('EOC', 272, line_coords - 8);
                            }
                            ctx.fillText('Zone ' + String.fromCharCode(65 + index), 20, line_coords - 8);
                        });
                    }

                    if (datless) {
                        ctx.fillStyle = '#66FF00';
                        ctx.font = '14px Arial';
                        ctx.textAlign = 'left';
                        ctx.textBaseline = 'middle';
                        ctx.fillText('Datless', 5, 10);
                    }

                    if (aggressive_aoi) {
                        ctx.beginPath();
                        ctx.moveTo(0, aoi_col[frame_number]);
                        ctx.lineTo(288, aoi_col[frame_number]);
                        ctx.strokeStyle = "red";
                        ctx.lineWidth = 2;
                        ctx.stroke();

                        ctx.fillStyle = 'red';
                        ctx.font = '10px Arial';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        ctx.fillText('AOI', 275, aoi_col[frame_number] + 10);
                    }

                    // draw regmark
                    ctx.beginPath();
                    ctx.moveTo(reg_mark[2], reg_mark[1]);
                    ctx.lineTo(reg_mark[0], reg_mark[3]);
                    ctx.strokeStyle = "grey";
                    ctx.lineWidth = 2;
                    ctx.stroke();

                    ctx.fillStyle = 'white';
                    ctx.font = '10px Arial';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText('REG', 12, reg_mark[1] - 8);

                    // put ramp angle and vib directly on the canvas above and below the regmark
                    ctx.fillStyle = 'white';
                    ctx.font = '10px Arial';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText('R' + angle.toString(), 278, reg_mark[3] - 8);

                    ctx.fillStyle = 'white';
                    ctx.font = '10px Arial';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText('V' + vib.toString(), 278, reg_mark[3] + 8);

                    // draw legacy data, it is pre-thresholded, just need to draw lines across screen
                    if (legacy_data.length > 0){
                        $.each(legacy_data, function (index, pill){
                            $.each(pill['whiteLines'], function(index, line){
                                // draw white lines across screen
                                let matches = line.match(/<(\d+),(\d+)>-<(\d+),(\d+)>/);
                                if (matches){
                                    let numbers = matches.slice(1).map(Number);
                                    ctx.beginPath();
                                    ctx.moveTo(canvas.width - numbers[1], numbers[0]);
                                    ctx.lineTo(canvas.width - numbers[3], numbers[2]);
                                    ctx.strokeStyle = "white";
                                    ctx.lineWidth = 1;
                                    ctx.stroke();
                                }
                            })

                            // draw box on screen
                            // if (extractedData['armed'] === 0){
                            //     ctx.strokeStyle = '#66FF00';
                            // } else {
                            //     ctx.strokeStyle = '#E10600';
                            // }
                            ctx.strokeStyle = '#66FF00';
                            ctx.lineWidth = 4;
                            ctx.beginPath();
                            ctx.rect(canvas.width - pill['min'][1] - (pill['max'][1] - pill['min'][1]), pill['min'][0], pill['max'][1] - pill['min'][1], pill['max'][0] - pill['min'][0]);
                            ctx.stroke();

                            // draw center of gravity
                            ctx.fillStyle = '#EE4B2B';
                            ctx.font = 'lighter 30px Arial';
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';
                            ctx.fillText('X', canvas.width - pill['cg'][1], pill['cg'][0]);

                            // draw pill id
                            ctx.fillStyle = 'blue';
                            ctx.font = 'bold 14px Arial';
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';

                            ctx.fillText(pill['id'], canvas.width - pill['cg'][1], pill['max'][0] - 14);
                        })
                    }

                    if (perpendicularLine){
                        // Calculate the middle point of the original line
                        const midX = (reg_mark[0] + reg_mark[2]) / 2;
                        const midY = (reg_mark[1] + reg_mark[3]) / 2;
                        const dx = (reg_mark[0] - reg_mark[2]);
                        const dy = (reg_mark[3] - reg_mark[1]);

                        const x_offset = 144 - midX;

                        ctx.beginPath();
                        ctx.moveTo(parseInt(midX + x_offset), parseInt(midY));
                        ctx.lineTo(parseInt(midX + dy + x_offset), parseInt(midY - dx));
                        ctx.strokeStyle = 'pink';
                        ctx.lineWidth = 2;
                        ctx.stroke();
                        ctx.closePath();

                        ctx.beginPath();
                        ctx.moveTo(parseInt(midX + x_offset), parseInt(midY));
                        ctx.lineTo(parseInt(midX + dy*-4 + x_offset), parseInt(midY - dx*-4));
                        ctx.strokeStyle = 'pink';
                        ctx.lineWidth = 2;
                        ctx.stroke();
                        ctx.closePath();

                        lineVisible = true;
                    } else {
                        lineVisible = false;
                    }

                    if (ramp_points){
                        ramp_points.forEach(function(point) {
                            if (point['x'] > 0 && point['y'] > 0){
                                // draw X at each point
                                ctx.fillStyle = '#EE4B2B';
                                ctx.font = 'bold 14px Arial';
                                ctx.textAlign = 'center';
                                ctx.textBaseline = 'middle';
                                ctx.fillText('X', canvas.width - point['x'], point['y']);
                            }
                        });
                    }

                    // Loop through every pill object in filtered lines
                    filteredLines.forEach(function(line, index) {
                        // Get the X and Y values for the top left and bottom right points of the drawn boxes
                        const matches = line.match(/min<(\d+),(\d+)>, max<(\d+),(\d+)>/);

                        // Get other pill data from pill object
                        let extractedData = {};
                        $(line.match(/\b\w+=-?\d+(\.\d+)?/g)).each(function() {
                            let match = this.split('=');
                            let key = match[0];
                            extractedData[key] = parseFloat(match[1]);
                        });
                        extractedData['pill_id'] = pill_id

                        let score_match = line.match(/score=(-?\d+(\.\d+)?)/);
                        let parsed_score = '';
                        if (score_match) {
                            let raw_score = parseFloat(score_match[1]);
                            parsed_score = Math.round(raw_score * 1000) / 10;
                            extractedData['score'] = parsed_score;
                        }

                        let guid_match = line.match(/GUID:\s*([A-Fa-f0-9-]+)/i);
                        if (guid_match) {
                            extractedData['guid'] = guid_match[1];
                        }

                        // Draw bounding boxes around item
                        if (matches && matches.length > 0) {
                            const minX = parseInt(matches[1]);
                            const minY = parseInt(matches[2]);
                            const maxX = parseInt(matches[3]);
                            const maxY = parseInt(matches[4]);

                            if (legacy_data.length === 0){
                                if (extractedData['armed'] === 0){
                                    ctx.strokeStyle = '#66FF00';
                                } else {
                                    ctx.strokeStyle = '#E10600';
                                }
                                if (extractedData['guid'] === selected_guid) {
                                    ctx.strokeStyle = '#00E5FF';
                                }
                                ctx.lineWidth = 4;
                                ctx.beginPath();
                                ctx.rect(canvas.width - minY - (maxY - minY), minX, maxY - minY, maxX - minX);
                                ctx.stroke();

                                if (index === 0) {
                                    let ai_length = maxX - minX;
                                    let ai_width = maxY - minY;
                                    let ai_area = ai_length * ai_width;
                                    $('#ai_pill_length').text(ai_length);
                                    $('#ai_pill_width').text(ai_width);
                                    $('#ai_pill_area').text(ai_area);
                                }
                            }

                            const centerX = (canvas.width - minY - (maxY - minY)) + (maxY - minY) / 2;
                            const centerY = minX + (maxX - minX) / 2;

                            extractedData['CG'] = maxX - (maxX-minX)/2;
                            pill_data.push(extractedData);

                            if (legacy_data.length === 0){
                                // draw pill id into the middle of the box
                                if (extractedData['armed'] === 0){
                                    ctx.fillStyle = '#66FF00';
                                } else {
                                    ctx.fillStyle = '#E10600';
                                }
                                if (extractedData['guid'] === selected_guid) {
                                    ctx.fillStyle = '#00E5FF';
                                }

                                ctx.font = '24px Arial';
                                ctx.textAlign = 'center';
                                ctx.textBaseline = 'middle';
                                ctx.fillText(pill_id.toString(), centerX, centerY)

                                if (parsed_score !== '' && scoreShown) {
                                    scoreVisible = true;
                                    ctx.font = '16px Arial';
                                    ctx.textAlign = 'center';
                                    ctx.textBaseline = 'top';
                                    let score_y = centerY + 10;
                                    ctx.fillText(parsed_score + '%', centerX, score_y);
                                } else {
                                    scoreVisible = false;
                                }
                            }
                        }
                        pill_id++
                    })
                    if (filteredLines.length === 0) {
                        $('#ai_pill_length').text('0');
                        $('#ai_pill_width').text('0');
                        $('#ai_pill_area').text('0');
                    }

                    // handles ruler drawing
                    if (drawLine && lines.length) {
                        ctx.lineWidth = 3;
                        ctx.strokeStyle = '#9F90CB';
                        ctx.fillStyle = '#FF5F15';
                        ctx.font = 'bold 1.5vh Arial';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';

                        for (let i = 0; i < lines.length; i++) {
                            let ln = lines[i];

                            // draw the line
                            ctx.beginPath();
                            ctx.moveTo(ln.x1, ln.y1);
                            ctx.lineTo(ln.x2, ln.y2);
                            ctx.stroke();
                            ctx.closePath();

                            // label the length near the midpoint
                            let dx = ln.x2 - ln.x1;
                            let dy = ln.y2 - ln.y1;
                            let dist = Math.hypot(dx, dy);
                            if (dist > 25) {
                                let mx = (ln.x1 + ln.x2) / 2;
                                let my = (ln.y1 + ln.y2) / 2;

                                // offset label perpendicular to the line
                                let angle = Math.atan2(dy, dx);
                                let offset = 16;
                                let tx = mx + Math.cos(angle + Math.PI / 2) * offset;
                                let ty = my + Math.sin(angle + Math.PI / 2) * offset;

                                ctx.fillText(parseInt(dist).toString(), tx, ty);
                            }
                        }

                        // update metrics using the most recent line
                        let cur = lines[lines.length - 1];
                        let dx = Math.abs(cur.x2 - cur.x1);
                        let dy = Math.abs(cur.y2 - cur.y1);
                        $('#horizontal_px').text(parseInt(dx));
                        $('#vertical_px').text(parseInt(dy));
                        $('#diagonal_px').text(parseInt(Math.hypot(dx, dy)));
                    }

                    // handle guid path drawing
                    if (selected_guid !== '') {
                        ctx.strokeStyle = '#00E5FF';
                        ctx.lineWidth = 2;
                        ctx.stroke(GUID_data[selected_guid].path);
                    }

                    imageVisible = true;
                    displayPillData(pill_data, frame_number);
                    updateDropTable(frame_number);
                    resolve();
                }
                img.src = url;
            } else {
                // if ctx isn't cleared then it generates a heat map
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                let ramp_points = rampPoints[frame_number-1];

                ctx.fillStyle = "Black";
                ctx.beginPath();
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.closePath();
                ctx.fill();

                // draw gradient for ramp
                if (Math.max.apply(null, lip_bottom_left_time_series['x']) > 0){
                    ctx.save()
                    const midY = (ramp_points[0]['y'] + ramp_points[1]['y']) / 2;
                    const midY2 = (ramp_points[5]['y'] + ramp_points[6]['y']) / 2;
                    const grd = ctx.createLinearGradient(144, midY, 144, midY2);
                    grd.addColorStop(0, "#0F0C18");
                    grd.addColorStop(1, "#101015");

                    // draw a line between ramp points to simulate a ramp
                    let order = [0, 1, 2, 3, 6, 5, 4, 0]
                    ctx.beginPath();
                    ctx.strokeStyle = 'grey';
                    ctx.lineWidth = 2;
                    // back left ramp point missing
                    if (ramp_points[order[0]]['x'] > 0 && ramp_points[order[0]]['y'] > 0){
                        ctx.moveTo(canvas.width - ramp_points[order[0]]['x'], ramp_points[order[0]]['y']);
                    } else {
                        ctx.moveTo(canvas.width - filler_ramp_points[angle][order[0]]['x'], filler_ramp_points[angle][order[0]]['y']);
                    }
                    for (let i = 1; i < order.length; i++) {
                        if (ramp_points[order[i]]['x'] > 0 && ramp_points[order[i]]['y'] > 0){
                            ctx.lineTo(canvas.width - ramp_points[order[i]]['x'], ramp_points[order[i]]['y']);
                        } else {
                            ctx.lineTo(canvas.width - filler_ramp_points[angle][order[i]]['x'], filler_ramp_points[angle][order[i]]['y']);
                        }
                    }
                    ctx.closePath();
                    ctx.stroke();
                    ctx.fillStyle = grd;
                    ctx.fill();

                    // only draw the following items within the polygon defined above
                    ctx.clip()

                    // draw curve to simulate bumps on ramp
                    // bumps on right side
                    if (ramp_points[2]['x'] > 0 && ramp_points[2]['y'] > 0) {
                        ctx.beginPath();
                        ctx.moveTo(canvas.width - ramp_points[2]['x'], ramp_points[2]['y']);
                        ctx.quadraticCurveTo(canvas.width - ramp_points[2]['x'] - 150, ramp_points[2]['y'] + 50, canvas.width - ramp_points[2]['x'], ramp_points[2]['y'] - 20);
                        ctx.lineTo(canvas.width - ramp_points[2]['x'], ramp_points[2]['y'])
                        ctx.strokeStyle = 'grey';
                        ctx.lineWidth = 2;
                        ctx.stroke();
                        ctx.fillStyle = '#383838';
                        ctx.fill();
                        ctx.closePath();
                    }
                    if (ramp_points[3]['x'] > 0 && ramp_points[3]['y'] > 0) {
                        ctx.beginPath();
                        ctx.moveTo(canvas.width - ramp_points[3]['x'], ramp_points[3]['y']);
                        ctx.quadraticCurveTo(canvas.width - ramp_points[3]['x'] - 150, ramp_points[3]['y'] + 50, canvas.width - ramp_points[3]['x'], ramp_points[3]['y'] - 20);
                        ctx.lineTo(canvas.width - ramp_points[3]['x'], ramp_points[3]['y'])
                        ctx.strokeStyle = 'grey';
                        ctx.lineWidth = 2;
                        ctx.stroke();
                        ctx.fillStyle = '#383838';
                        ctx.fill();
                        ctx.closePath();
                    }
                    // bump on left side
                    if (ramp_points[4]['x'] > 0 && ramp_points[4]['y'] > 0) {
                        ctx.beginPath();
                        ctx.moveTo(canvas.width - ramp_points[4]['x'], ramp_points[4]['y']);
                        ctx.quadraticCurveTo(canvas.width - ramp_points[4]['x'] + 150, ramp_points[4]['y'] + 50, canvas.width - ramp_points[4]['x'], ramp_points[4]['y'] - 20);
                        ctx.lineTo(canvas.width - ramp_points[4]['x'], ramp_points[4]['y'])
                        ctx.strokeStyle = 'grey';
                        ctx.lineWidth = 2;
                        ctx.stroke();
                        ctx.fillStyle = '#383838';
                        ctx.fill();
                        ctx.closePath();
                    }

                    // draw lines on canvas for zones C & D
                    zone_data[angle.toString()].slice(2).forEach(function(line_coords, index) {
                        ctx.beginPath();
                        ctx.moveTo(0, line_coords);
                        ctx.lineTo(288, line_coords);
                        ctx.strokeStyle = "white";
                        ctx.lineWidth = 2;
                        ctx.stroke();

                        ctx.fillStyle = 'white';
                        ctx.font = '10px Arial';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        ctx.fillText('Zone ' + String.fromCharCode(67 + index), canvas.width - ramp_points[4]['x'] + 25, line_coords - 8);
                    });

                    ctx.restore();

                    // draw lower parts of ramp between ramp points and hoop
                    ctx.beginPath();
                    ctx.moveTo(canvas.width - ramp_points[5]['x'], ramp_points[5]['y']);
                    ctx.lineTo(canvas.width - ramp_points[6]['x'], ramp_points[6]['y']);
                    ctx.lineTo(canvas.width - ramp_points[6]['x'], zone_data[angle.toString()][0]);
                    ctx.lineTo(canvas.width - ramp_points[5]['x'], zone_data[angle.toString()][0]);
                    ctx.fillStyle = '#101015';
                    ctx.fill();

                    // draw lip of ramp that vibrates, but below ramp point location
                    ctx.beginPath();
                    ctx.moveTo(canvas.width - ramp_points[5]['x'], ramp_points[5]['y']);
                    ctx.lineTo(canvas.width - ramp_points[6]['x'], ramp_points[6]['y']);
                    ctx.lineTo(canvas.width - ramp_points[6]['x'], ramp_points[6]['y'] + 35);
                    ctx.lineTo((canvas.width - ramp_points[5]['x'] + canvas.width - ramp_points[6]['x']) / 2, ((ramp_points[5]['y'] + ramp_points[6]['y']) / 2) + 40);
                    // insert slight chevron shape
                    ctx.lineTo(canvas.width - ramp_points[5]['x'], ramp_points[5]['y'] + 35);
                    ctx.fillStyle = '#383838';
                    ctx.fill();

                    // draw zone lines
                    zone_data[angle.toString()].slice(0,2).forEach(function(line_coords, index) {
                        // Draw Zone D and C line differently so that they only extend across the wireframe
                        ctx.beginPath();
                        ctx.moveTo(canvas.width - ramp_points[5]['x'], line_coords);
                        ctx.lineTo(canvas.width - ramp_points[6]['x'], line_coords);
                        ctx.strokeStyle = "white";
                        ctx.lineWidth = 2;
                        ctx.stroke();

                        ctx.fillStyle = 'white';
                        ctx.font = '10px Arial';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        // Ascii code 65 is 'A', which corresponds to index 0
                        if (index === 1){
                            ctx.fillText('EOC', 272, line_coords - 8);
                        }
                        ctx.fillText('Zone ' + String.fromCharCode(65 + index), 20, line_coords - 8);
                    })
                } else {
                    // draw zone lines
                    zone_data[angle.toString()].forEach(function(line_coords, index) {
                        ctx.beginPath();
                        ctx.moveTo(0, line_coords);
                        ctx.lineTo(288, line_coords);
                        ctx.strokeStyle = "white";
                        ctx.lineWidth = 2;
                        ctx.stroke();

                        ctx.fillStyle = 'white';
                        ctx.font = '10px Arial';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        // Ascii code 65 is 'A', which corresponds to index 0
                        if (index === 1){
                            ctx.fillText('EOC', 272, line_coords - 8);
                        }
                        ctx.fillText('Zone ' + String.fromCharCode(65 + index), 20, line_coords - 8);
                    });
                }

                if (datless) {
                    ctx.fillStyle = '#66FF00';
                    ctx.font = '14px Arial';
                    ctx.textAlign = 'left';
                    ctx.textBaseline = 'middle';
                    ctx.fillText('Datless', 5, 10);
                }

                if (aggressive_aoi) {
                    ctx.beginPath();
                    ctx.moveTo(0, aoi_col[frame_number]);
                    ctx.lineTo(288, aoi_col[frame_number]);
                    ctx.strokeStyle = "red";
                    ctx.lineWidth = 2;
                    ctx.stroke();

                    ctx.fillStyle = 'red';
                    ctx.font = '10px Arial';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText('AOI', 275, aoi_col[frame_number] + 10);
                }

                // draw regmark
                ctx.beginPath();
                ctx.moveTo(reg_mark[2], reg_mark[1]);
                ctx.lineTo(reg_mark[0], reg_mark[3]);
                ctx.strokeStyle = "grey";
                ctx.lineWidth = 2;
                ctx.stroke();
                ctx.closePath();

                // denotes which line is the regmark
                ctx.fillStyle = 'white';
                ctx.font = '10px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText('REG', 14, reg_mark[1] - 8);

                // put ramp angle and vib directly on the canvas above and below the regmark
                ctx.fillStyle = 'white';
                ctx.font = '10px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText('R' + angle.toString(), 278, reg_mark[3] - 8);

                ctx.fillStyle = 'white';
                ctx.font = '10px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText('V' + vib.toString(), 278, reg_mark[3] + 8);

                // draw legacy data, it is pre-thresholded, just need to draw lines across screen
                if (legacy_data.length > 0){
                    $.each(legacy_data, function (index, pill){
                        $.each(pill['whiteLines'], function(index, line){
                            // draw white lines across screen
                            let matches = line.match(/<(\d+),(\d+)>-<(\d+),(\d+)>/);
                            if (matches){
                                let numbers = matches.slice(1).map(Number);
                                ctx.beginPath();
                                ctx.moveTo(canvas.width - numbers[1], numbers[0]);
                                ctx.lineTo(canvas.width - numbers[3], numbers[2]);
                                ctx.strokeStyle = "white";
                                ctx.lineWidth = 1;
                                ctx.stroke();
                            }
                        })

                        // draw box on screen
                        // if (extractedData['armed'] === 0){
                        //     ctx.strokeStyle = '#66FF00';
                        // } else {
                        //     ctx.strokeStyle = '#E10600';
                        // }
                        ctx.strokeStyle = '#66FF00';
                        ctx.lineWidth = 4;
                        ctx.beginPath();
                        ctx.rect(canvas.width - pill['min'][1] - (pill['max'][1] - pill['min'][1]), pill['min'][0], pill['max'][1] - pill['min'][1], pill['max'][0] - pill['min'][0]);
                        ctx.stroke();

                        // draw center of gravity
                        ctx.fillStyle = '#EE4B2B';
                        ctx.font = 'lighter 30px Arial';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        ctx.fillText('X', canvas.width - pill['cg'][1], pill['cg'][0]);

                        // draw pill id
                        ctx.fillStyle = 'blue';
                        ctx.font = 'bold 14px Arial';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';

                        ctx.fillText(pill['id'], canvas.width - pill['cg'][1], pill['max'][0] - 14);
                    })
                }

                if (perpendicularLine){
                    // Calculate the middle point of the original line
                    const midX = (reg_mark[0] + reg_mark[2]) / 2;
                    const midY = (reg_mark[1] + reg_mark[3]) / 2;
                    const dx = (reg_mark[0] - reg_mark[2]);
                    const dy = (reg_mark[3] - reg_mark[1]);

                    const x_offset = 144 - midX

                    ctx.beginPath();
                    ctx.moveTo(parseInt(midX + x_offset), parseInt(midY));
                    ctx.lineTo(parseInt(midX + dy + x_offset), parseInt(midY - dx));
                    ctx.strokeStyle = 'pink';
                    ctx.lineWidth = 2;
                    ctx.stroke();
                    ctx.closePath();

                    ctx.beginPath();
                    ctx.moveTo(parseInt(midX + x_offset), parseInt(midY));
                    ctx.lineTo(parseInt(midX + dy*-4 + x_offset), parseInt(midY - dx*-4));
                    ctx.strokeStyle = 'pink';
                    ctx.lineWidth = 2;
                    ctx.stroke();
                    ctx.closePath();

                    lineVisible = true;
                } else {
                    lineVisible = false;
                }

                // Draw Ramp Points
                if (ramp_points){
                    // The X should be layered on top of any wireframe drawings
                    ramp_points.forEach(function(point) {
                        if (point['x'] > 0 && point['y'] > 0){
                            // draw X at each point
                            ctx.fillStyle = '#EE4B2B';
                            ctx.font = 'bold 14px Arial';
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';
                            ctx.fillText('X', canvas.width - point['x'], point['y']);
                        }
                    });
                }

                let pill_data = []
                let pill_id = 0
                // Loop through every pill object in filtered lines
                filteredLines.forEach(function(line, index) {
                    // Get the X and Y values for the top left and bottom right points of the drawn boxes
                    const matches = line.match(/min<(\d+),(\d+)>, max<(\d+),(\d+)>/);

                    // Get other pill data from pill object
                    let extractedData = {};
                    $(line.match(/\b\w+=-?\d+(\.\d+)?/g)).each(function() {
                        let match = this.split('=');
                        let key = match[0];
                        extractedData[key] = parseFloat(match[1]);
                    });
                    extractedData['pill_id'] = pill_id;

                    let score_match = line.match(/score=(-?\d+(\.\d+)?)/);
                    let parsed_score = '';
                    if (score_match) {
                        let raw_score = parseFloat(score_match[1]);
                        parsed_score = Math.round(raw_score * 1000) / 10;
                        extractedData['score'] = parsed_score;
                    }

                    let guid_match = line.match(/GUID:\s*([A-Fa-f0-9-]+)/i);
                    if (guid_match) {
                        extractedData['guid'] = guid_match[1];
                    }

                    if (matches && matches.length > 0) {
                        const minX = parseInt(matches[1]);
                        const minY = parseInt(matches[2]);
                        const maxX = parseInt(matches[3]);
                        const maxY = parseInt(matches[4]);

                        if (legacy_data.length === 0){
                            if (extractedData['armed'] === 0){
                                ctx.strokeStyle = '#66FF00';
                            } else {
                                ctx.strokeStyle = '#E10600';
                            }
                            if (extractedData['guid'] === selected_guid) {
                                ctx.strokeStyle = '#00E5FF';
                            }
                            ctx.lineWidth = 4;
                            ctx.beginPath();
                            ctx.rect(canvas.width - minY - (maxY - minY), minX, maxY - minY, maxX - minX);
                            ctx.stroke();

                            if (index === 0) {
                                let ai_length = maxX - minX;
                                let ai_width = maxY - minY;
                                let ai_area = ai_length * ai_width;
                                $('#ai_pill_length').text(ai_length);
                                $('#ai_pill_width').text(ai_width);
                                $('#ai_pill_area').text(ai_area);
                            }
                        }

                        const centerX = (canvas.width - minY - (maxY - minY)) + (maxY - minY) / 2;
                        const centerY = minX + (maxX - minX) / 2;

                        extractedData['CG'] = maxX - (maxX-minX)/2;
                        pill_data.push(extractedData);

                        if (legacy_data.length === 0){
                            // draw pill id into the middle of the box
                            if (extractedData['armed'] === 0){
                                ctx.fillStyle = '#66FF00';
                            } else {
                                ctx.fillStyle = '#E10600';
                            }
                            if (extractedData['guid'] === selected_guid) {
                                ctx.fillStyle = '#00E5FF';
                            }

                            ctx.font = '24px Arial';
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';
                            ctx.fillText(pill_id.toString(), centerX, centerY);


                            if (parsed_score !== '' && scoreShown) {
                                scoreVisible = true;
                                ctx.font = '16px Arial';
                                ctx.textAlign = 'center';
                                ctx.textBaseline = 'top';
                                let score_y = centerY + 10;
                                ctx.fillText(parsed_score + '%', centerX, score_y);
                            } else {
                                scoreVisible = false;
                            }
                        }
                    }
                    pill_id++
                })
                if (filteredLines.length === 0) {
                    $('#ai_pill_length').text('0');
                    $('#ai_pill_width').text('0');
                    $('#ai_pill_area').text('0');
                }

                // handles ruler drawing
                if (drawLine && lines.length) {
                    ctx.lineWidth = 3;
                    ctx.strokeStyle = '#9F90CB';
                    ctx.fillStyle = '#FF5F15';
                    ctx.font = 'bold 1.5vh Arial';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';

                    for (let i = 0; i < lines.length; i++) {
                        let ln = lines[i];

                        // draw the line
                        ctx.beginPath();
                        ctx.moveTo(ln.x1, ln.y1);
                        ctx.lineTo(ln.x2, ln.y2);
                        ctx.stroke();
                        ctx.closePath();

                        // label the length near the midpoint
                        let dx = ln.x2 - ln.x1;
                        let dy = ln.y2 - ln.y1;
                        let dist = Math.hypot(dx, dy);
                        if (dist > 25) {
                            let mx = (ln.x1 + ln.x2) / 2;
                            let my = (ln.y1 + ln.y2) / 2;

                            // offset label perpendicular to the line
                            let angle = Math.atan2(dy, dx);
                            let offset = 16;
                            let tx = mx + Math.cos(angle + Math.PI / 2) * offset;
                            let ty = my + Math.sin(angle + Math.PI / 2) * offset;

                            ctx.fillText(parseInt(dist).toString(), tx, ty);
                        }
                    }

                    // update metrics using the most recent line
                    let cur = lines[lines.length - 1];
                    let dx = Math.abs(cur.x2 - cur.x1);
                    let dy = Math.abs(cur.y2 - cur.y1);
                    $('#horizontal_px').text(parseInt(dx));
                    $('#vertical_px').text(parseInt(dy));
                    $('#diagonal_px').text(parseInt(Math.hypot(dx, dy)));
                }

                // handle guid path drawing
                if (selected_guid !== '') {
                    ctx.strokeStyle = '#00E5FF';
                    ctx.lineWidth = 2;
                    ctx.stroke(GUID_data[selected_guid].path);
                }

                imageVisible = false;
                displayPillData(pill_data, frame_number)
                updateDropTable(frame_number)
                resolve()
            }
        });
    }


    function init_global_scrubber() {
        if (window.__global_scrubber_inited) {
            return;
        }
        window.__global_scrubber_inited = true;

        let meta_el = document.getElementById('meta_frame_count');
        let frame_el = document.getElementById('frame_counter');
        let shortcuts_btn = document.getElementById('shortcuts_btn');

        let bar = document.getElementById('global_scrubber_bar');
        let spacer_left = document.getElementById('global_scrubber_spacer_left');
        let spacer_right = document.getElementById('global_scrubber_spacer_right');
        let current_span = document.getElementById('scrubber_current');
        let max_span = document.getElementById('scrubber_max');
        let range = document.getElementById('scrubber_range');

        if (!bar || !current_span || !max_span || !range) {
            window.__global_scrubber_inited = false;
            return;
        }

        let max_frames = 0;
        if (meta_el && meta_el.textContent) {
            let parsed = parseInt(meta_el.textContent, 10);
            if (!Number.isNaN(parsed) && parsed > 0) {
                max_frames = parsed - 2;
            }
        }

        let current_frame = 0;
        if (frame_el && frame_el.textContent) {
            let parsed_current = parseInt(frame_el.textContent, 10);
            if (!Number.isNaN(parsed_current) && parsed_current >= 0) {
                current_frame = parsed_current;
            }
        }
        if (current_frame > max_frames) {
            current_frame = max_frames;
        }

        range.min = '1';
        range.max = String(max_frames);
        range.step = '1';
        range.value = String(current_frame);
        current_span.textContent = String(current_frame);
        max_span.textContent = String(max_frames);

        function size_spacers() {
            let btn_width = 0;
            if (shortcuts_btn) {
                let rect = shortcuts_btn.getBoundingClientRect();
                btn_width = Math.ceil(rect.width);
            }
            if (spacer_left) {
                spacer_left.style.width = btn_width + 'px';
            }
            if (spacer_right) {
                spacer_right.style.width = btn_width + 'px';
            }
        }
        size_spacers();

        let ro = null;
        if (window.ResizeObserver && shortcuts_btn) {
            ro = new ResizeObserver(function () {
                size_spacers();
            });
            ro.observe(shortcuts_btn);
        }
        window.addEventListener('resize', size_spacers);

        function seek_to(val) {
            let n = parseInt(val, 10);
            if (Number.isNaN(n)) {
                return;
            }
            if (n < 1) {
                n = 1;
            }
            if (n > max_frames) {
                n = max_frames;
            }
            jumpFrameId = n;
            jumpFrame = true;
            isPaused = true;

            range.value = String(n);
            current_span.textContent = String(n);
        }

        let is_user_scrubbing = false;
        function start_scrub(e) {
            is_user_scrubbing = true;
            seek_to(range.value);
        }

        function move_scrub() {
            if (is_user_scrubbing) {
                seek_to(range.value);
            }
        }

        function end_scrub(e) {
            is_user_scrubbing = false;
            seek_to(range.value);
        }

        range.addEventListener('pointerdown', start_scrub, { passive: true });
        range.addEventListener('pointermove', move_scrub, { passive: true });
        range.addEventListener('pointerup', end_scrub, { passive: true });
        range.addEventListener('lostpointercapture', end_scrub, { passive: true });
        window.addEventListener('pointercancel', end_scrub, { passive: true });

        range.addEventListener('change', function () {
            seek_to(range.value);
        });

        // These two observers update the overall counter next to the scrubber
        let observer_meta = null;
        if (meta_el) {
            observer_meta = new MutationObserver(function () {
                let parsed = parseInt(meta_el.textContent, 10);
                if (!Number.isNaN(parsed) && parsed > 0) {
                    max_frames = parsed - 2;
                    range.max = String(max_frames);
                    max_span.textContent = String(max_frames);
                    if (parseInt(range.value, 10) > max_frames) {
                        seek_to(max_frames);
                    }
                    fix_counter_width();
                }
            });
            observer_meta.observe(meta_el, { childList: true, characterData: true, subtree: true });
        }

        let observer_frame = null;
        if (frame_el) {
            observer_frame = new MutationObserver(function () {
                let parsed_curr = parseInt(frame_el.textContent, 10);
                if (Number.isNaN(parsed_curr)) {
                    return;
                }
                if (parsed_curr < 0) {
                    parsed_curr = 0;
                }
                if (parsed_curr > max_frames) {
                    parsed_curr = max_frames;
                }
                if (!is_user_scrubbing) {
                    range.value = String(parsed_curr);
                    current_span.textContent = String(parsed_curr);
                }
            });
            observer_frame.observe(frame_el, { childList: true, characterData: true, subtree: true });
        }

        function fix_counter_width() {
            let digits = String(max_frames).length;

            let probe = document.createElement('span');
            probe.textContent = '8'.repeat(digits);
            probe.style.visibility = 'hidden';
            probe.style.position = 'absolute';
            probe.style.whiteSpace = 'nowrap';
            probe.className = 'scrubber-num';
            bar.appendChild(probe);

            let w = Math.ceil(probe.getBoundingClientRect().width);
            probe.remove();

            current_span.style.display = 'inline-block';
            max_span.style.display = 'inline-block';
            current_span.style.minWidth = w + 'px';
            max_span.style.minWidth = w + 'px';
            current_span.style.textAlign = 'right';
            max_span.style.textAlign = 'right';
        }
        fix_counter_width();

        window.__cleanup_global_scrubber = function () {
            range.removeEventListener('pointerdown', start_scrub);
            range.removeEventListener('pointermove', move_scrub);
            range.removeEventListener('pointerup', end_scrub);
            range.removeEventListener('lostpointercapture', end_scrub);
            window.removeEventListener('pointercancel', end_scrub);
            window.removeEventListener('resize', size_spacers);
            if (observer_meta) {
                observer_meta.disconnect();
            }
            if (observer_frame) {
                observer_frame.disconnect();
            }
            if (ro && shortcuts_btn) {
                ro.disconnect();
            }
            if (bar && bar.parentNode) {
                // keep element in DOM; just disable behavior
            }
            window.__global_scrubber_inited = false;
        };
    }


    function init_chart_popouts() {
        let canvases = document.querySelectorAll('#ramp_point_column canvas');
        canvases.forEach((cv) => {
            cv.style.cursor = 'zoom-in';
            cv.addEventListener('click', function () {
                open_chart_modal(cv.id);
            });
        });
    }

    function open_chart_modal(source_canvas_id) {
        let src_chart = Chart.getChart(source_canvas_id);
        if (!src_chart) {
            return;
        }

        let tpl = document.getElementById('chart-modal-template');
        if (!tpl) {
            return;
        }

        let overlay = tpl.content.firstElementChild.cloneNode(true);
        let modal_canvas = overlay.querySelector('.chart-modal-canvas');

        document.body.appendChild(overlay);

        let shared_data = {
            labels: src_chart.data.labels,
            datasets: src_chart.data.datasets.map((ds) => {
                return {
                    ...ds,
                    data: ds.data
                };
            })
        };

        let modal_options = {
            ...src_chart.options,
            responsive: true,
            maintainAspectRatio: false,
            animation: false,
            plugins: {
                ...(src_chart.options?.plugins || {}),
                title: {
                    ...(src_chart.options?.plugins?.title || {}),
                    display: true,
                    font: { size: 22, weight: '700' },
                    color: '#111',
                    padding: { bottom: 8 }
                },
                legend: {
                    ...(src_chart.options?.plugins?.legend || {}),
                    display: false
                }
            }
        };

        let modal_chart = new Chart(modal_canvas.getContext('2d'), {
            type: src_chart.config.type,
            data: shared_data,
            options: modal_options
        });

        if (!src_chart.$modal_charts) {
            src_chart.$modal_charts = new Set();
        }
        src_chart.$modal_charts.add(modal_chart);

        function cleanup_modal() {
            if (src_chart.$modal_charts) {
                src_chart.$modal_charts.delete(modal_chart);
            }
            modal_chart.destroy();
            overlay.remove();
            document.removeEventListener('keydown', esc_listener);
        }

        function esc_listener(e) {
            if (e.key === 'Escape') {
                cleanup_modal();
            }
        }

        overlay.addEventListener('click', function (e) {
            if (e.target === overlay) {
                cleanup_modal();
            }
        });

        document.addEventListener('keydown', esc_listener);
    }


    // reset global variables to a known state after jumping to frame/location
    function reset_seek(seek_frame) {
        if (seek_frame) {
            seek_frame = false;
            decrementFrame = false;
            incrementFrame = false;
            if (jumpFrame) {
                jumpFrame = false;
                jumpFrameId = '';
            }
            isPaused = true;
            jumpFirst = false;
            jumpLast = false;
            jump1SecForward = false;
            jump1SecBackward = false;
            jumpNextDrop = false;
            jumpPrevDrop = false;
            jumpNextImage = false;
            jumpPrevImage = false;
            clearLine = false;
            graphPanel = false;
        }
        return seek_frame;
    }


    function update_chart(chart, time_series, frame_number) {
        // IMPORTANT: keep array references stable so linked modals see changes
        let target = chart.data.datasets[0].data;

        if (!Array.isArray(target) || target.length !== 300) {
            chart.data.datasets[0].data = new Array(300);
            target = chart.data.datasets[0].data;
        }

        // mutate in-place (no ternary used)
        for (let k = 0; k < 300; k += 1) {
            target[k] = time_series[frame_number - 1 + k];
        }

        // keep labels reference stable too
        if (!Array.isArray(chart.data.labels) || chart.data.labels.length !== 300) {
            chart.data.labels = new Array(300).fill('');
        } else {
            for (let j = 0; j < 300; j += 1) {
                chart.data.labels[j] = '';
            }
        }

        chart.update('none');

        // nudge any open modals to render the shared arrays
        if (chart.$modal_charts) {
            for (let m of chart.$modal_charts) {
                m.update('none');
            }
        }
    }

    async function generate_annotations(run_data) {
        let seekFrame = false;
        let reg_mark = [];
        let zone_data = {};
        const header = run_data[0];
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // when a chart is on the screen when creating its aspect could sometimes get messed up
        // hide them momentary while they are being created
        $('#ramp_point_column').hide();
        $('#run_data_cap_column').hide();
        $('#pill_info_column').hide();

        let vibChart = generate_chart('vibRate', 'Vib Rate');
        let angleChart = generate_chart('rampAngle', 'Ramp Angle');

        let back_bottom = generate_chart('back_bottom', 'Back Left');
        let back_top = generate_chart('back_top', 'Back Right');
        let ramp_chart_2 = generate_chart('rampAngle2', 'Ramp Angle');

        let bump_1 = generate_chart('bump_1', 'Back Right Bump');
        let bump_2 = generate_chart('bump_2', 'Front Right Bump');
        let bump_3 = generate_chart('bump_3', 'Left Bump');

        let lip_bottom_left = generate_chart('lip_bottom_left', 'Bottom Left');
        let lip_top_left = generate_chart('lip_top_left', 'Bottom Right');
        let vib_chart_2 = generate_chart('vibRate2', 'Vib Rate');

        init_chart_popouts();

        $('#pill_info_column').show();

        // parse information from the header to be rendered on every frame
        let regex = /\+RegMarks: R1: (\d+), C1: (\d+), R2: (\d+), C2: (\d+)/;
        let matches = header.match(regex);
        // it is possible for R1 and R2 to be swapped, if X coord is not left point, right point then swap them
        if (matches[1] > matches[3]){
            const place_holder = matches[1];
            const place_holder2 = matches[2];
            matches[1] = matches[3];
            matches[2] = matches[4];
            matches[3] = place_holder;
            matches[4] = place_holder2;
        }
        if (matches) {
            // 240 is the pixel offset on each side of the 768 pixel image,
            reg_mark = [-240+parseInt(matches[1]), parseInt(matches[2]), parseInt(matches[3])+(-240+parseInt(matches[1])), parseInt(matches[4])]
        }

        if (header.indexOf('run_datless = true') !== -1 && header.indexOf('Pill Detection Protocol: OBJECT_DETECT') !== -1){
            datless = true;
        }

        if (!datless){
            // parse information from the header to be rendered on every frame
            regex = /Angle: (\d+), Zone: (\d+), backCol: (\d+), frontCol: (\d+), length: (\d+)/gm;
            matches = header.match(regex);

            if (matches) {
                for (let match of matches){
                    let angle = match.match(/Angle:\s*(\d+)/)[1];
                    let zone = match.match(/Zone:\s*(\d+)/)[1];
                    let frontCol = match.match(/frontCol:\s*(\d+)/)[1];
                    if (angle.toString() in zone_data){
                        zone_data[angle.toString()][zone] = frontCol;
                    } else {
                        zone_data[angle.toString()] = Array(4);
                        zone_data[angle.toString()][zone] = frontCol;
                    }
                }
            }
        } else {
            regex = /Changing EdgeToRegMark for zone\[(\d)] to (\d+)/gm;
            for (let i = 1; i < run_data.length - 1; i++) {
                let zone_data_subcomponent = {}
                matches = run_data[i].match(regex);
                for (let j = 0; j < 16; j++){
                    zone_data_subcomponent[j.toString()] = Array(4);
                    $.each(matches, function(index, match) {
                        let zone = match.match(/\[(\d)]/)[1];
                        let frontCol = match.match(/] to (\d+)/)[1];
                        zone_data_subcomponent[j.toString()][zone] = frontCol;
                    });
                }
                zone_data[i] = zone_data_subcomponent
            }
            zone_data[0] = zone_data[1];
        }

        // check if ramp points exist, and if so create filler points for if they are missing for frame(s)
        for (let i = 0; i < 16; i++) {
            filler_ramp_points[i] = {0: [], 1: [], 2: [], 3: [], 4: [], 5: [], 6: []};
        }
        for (let i = 0; i < rampPoints.length; i++) {
            const angle = rampAngle.slice(300)[i];
            for (let j = 0; j < 7; j++){
                if (rampPoints[i][j]['x'] > 0 && rampPoints[i][j]['y'] > 0){
                    filler_ramp_points[angle][j].push(rampPoints[i][j]);
                }
            }
        }
        for (let i = 0; i < 16; i++) {
            for (let j = 0; j < 7; j++){
                let sumX = 0;
                let sumY = 0;
                $.each(filler_ramp_points[i][j], function(index, point) {
                    sumX += point['x'];
                    sumY += point['y'];
                });
                filler_ramp_points[i][j] = {'x': Math.round(sumX/filler_ramp_points[i][j].length), 'y': Math.round(sumY/filler_ramp_points[i][j].length)};
            }
        }

        // handle info about dispense
        document.getElementById("fill_time").innerHTML = header.split('\n')[0].match(/Time:\s+'([^']+)'/)[1];

        if (!golden_run) {
            // gets pill sig info
            let pill_sig = header.split('\n').filter(function(line) {
                return line.trim().startsWith('+Pill Signature:');
            })[0];

            document.getElementById("pill_width").innerHTML = pill_sig.match(/Width = (\d+)/)[1];
            document.getElementById("pill_length").innerHTML = pill_sig.match(/Length = (\d+)/)[1];
            document.getElementById("pill_area").innerHTML = pill_sig.match(/Area = (\d+)/)[1];

            let pill_sig2 = header.split('\n').filter(function(line) {
                return line.trim().startsWith('minBulk: ');
            })[0];

            if (pill_sig2.match(/bVibBlister: (\d+)/)[1] === '1'){
                document.getElementById("vib_blist").innerHTML = 'True';
            } else {
                document.getElementById("vib_blist").innerHTML = 'False';
            }

            let pill_sig3 = header.split('\n').filter(function(line) {
                return line.trim().startsWith('EOC Offset: ');
            })[0];

            if (pill_sig3.match(/EOC Offset: (\d+)/)[1] !== '0'){
                document.getElementById("eoc_offset").innerHTML = pill_sig3.match(/EOC Offset: (\d+)/)[1];
                $('#eoc_offset').parent().show();
            } else {
                document.getElementById("eoc_offset").innerHTML = 'False';
                $('#eoc_offset').parent().hide();
            }
        }


        // go through every frame and generate blank frames for it.
        for (let i = 1; i < run_data.length - 1; i++) {
            if (reset) {
                break;
            }
            //pause is halted to render a new frame, then re-enabled down below
            //seekframe denotes that once a new frame is rendered, it is to pause execution
            //the flag is needed due to the asynchronous nature of event handling occurring during the middle of frame execution
            //seekFrame ensures that no disruption will occur until the next frame occurs
            if (((!lineVisible && perpendicularLine) || (lineVisible && !perpendicularLine)) && isPaused) {
                seekFrame = true;
                isPaused = false;
                i -= 1;
            }

            if (((!scoreVisible && scoreShown) || (scoreVisible && !scoreShown)) && isPaused) {
                seekFrame = true;
                isPaused = false;
                i -= 1;
            }

            if (graphPanel && isPaused) {
                seekFrame = true;
                isPaused = false;
                i -= 1;
            }

            // TODO replace with larger images global variable logic
            // if (((!imageVisible && showImage) || (imageVisible && !showImage)) && isPaused){
            //     const has_image = files.find(image => {
            //         const fileNameParts = image.fileName.split("_");
            //         const number = parseInt(fileNameParts[1].split(".")[0]);
            //         return number === i-1;
            //     });
            //     if (has_image || (imageVisible && !showImage)){
            //         seekFrame = true;
            //         isPaused = false;
            //         i -= 1;
            //     }
            // }

            if (drawing && isPaused) {
                seekFrame = true;
                isPaused = false;
                i -= 1;
            }
            if (clearLine && isPaused) {
                seekFrame = true;
                isPaused = false;
                i -= 1;
            }
            if (decrementFrame) {
                seekFrame = true;
                isPaused = false;
                i -= 2
            }
            if (incrementFrame) {
                seekFrame = true;
                isPaused = false;
            }
            if (jumpFrame) {
                seekFrame = true;
                isPaused = false;
                if (parseInt(jumpFrameId) > run_data.length) {
                    i = run_data.length - 3;
                } else {
                    i = parseInt(jumpFrameId);
                }
            }
            if (jumpFirst) {
                i = 1;
                isPaused = false;
                seekFrame = true;
            }
            if (jumpLast) {
                i = run_data.length - 3;
                isPaused = false;
                seekFrame = true;
            }
            if (reverse) {
                if (i > 1) {
                    i -= 2;
                }
            }
            if (jump1SecForward) {
                i += 29;
                seekFrame = true;
            }
            if (jump1SecBackward) {
                i -= 31;
                seekFrame = true;
            }

            if (jumpNextDrop) {
                let found_flag = false;
                // since pillDrops is implicitly ordered from smallest to largest, we can just iterate over list
                for (let j = 0; j < pillDrops.length; j++) {
                    if (pillDrops[j] > i) {
                        i = pillDrops[j]
                        found_flag = true;
                        break;
                    }
                }
                if (!found_flag) {
                    i--
                }
                isPaused = false;
                seekFrame = true;
            }
            if (jumpPrevDrop) {
                let found_flag = false;
                // since pillDrops is implicitly ordered from smallest to largest, we can just iterate over list in reverse
                for (let j = pillDrops.length; j >= 0; j--) {
                    if (pillDrops[j] < i - 1) {
                        i = pillDrops[j];
                        found_flag = true;
                        break;
                    }
                }
                if (!found_flag) {
                    i--
                }
                isPaused = false;
                seekFrame = true;
            }

            if (jumpNextImage) {
                let found_flag = false;

                let image_frames = Object.keys(images).map(key => parseInt(key, 10));
                // since image_frames is implicitly ordered from smallest to largest, we can just iterate over list in reverse
                for (let j = 0; j < image_frames.length - 1; j++) {
                    if (image_frames[j] > i) {
                        i = image_frames[j];
                        found_flag = true;
                        break;
                    }
                }

                if (!found_flag) {
                    i--
                }
                isPaused = false;
                seekFrame = true;
            }
            if (jumpPrevImage) {
                let found_flag = false;

                let image_frames = Object.keys(images).map(key => parseInt(key, 10));
                // since image_frames is implicitly ordered from smallest to largest, we can just iterate over list in reverse
                for (let j = image_frames.length; j >= 0; j--) {
                    if (image_frames[j] < i - 1) {
                        i = image_frames[j];
                        found_flag = true;
                        break;
                    }
                }

                if (!found_flag) {
                    i--
                }
                isPaused = false;
                seekFrame = true;
            }

            // check for end of run is done next to last since other options above could put i in a state to end the for loop
            if (i > run_data.length - 3) {
                i = run_data.length - 2
                isPaused = true;
            }
            // if for whatever reason i gets below 1, set it to one, seekframe of 1, seekframe will also pause
            if (i < 1) {
                i = 1
                seekFrame = true;
            }
            if (isPaused) {
                i--
            } else {
                $('#popupBox').css('display', 'none');
            }

            await new Promise(resolve => {
                if (!isPaused) {
                    setTimeout(() => {
                        if ($('#run_data_cap_column').css('display') !== 'none') {
                            $('#run_data_cap_pre').text(run_data[i]);
                        }
                        document.getElementById("frame_counter").innerHTML = run_data[i].split('\n')[0].match('(\\d+)')[0]

                        let line_2_data = Array.from(run_data[i].split('\n')[1].matchAll('(\\d+)'));
                        // document.getElementById("pill_counter").innerHTML = line_2_data[0][0];
                        document.getElementById("drop_counter").innerHTML = line_2_data[1][0];

                        let angle = run_data[i].split('\n')[2].match(/R(\d+)/)[1];
                        let vib = run_data[i].split('\n')[2].match(/V(\d+)/)[1];
                        document.getElementById("ramp_angle").innerHTML = run_data[i].split('\n')[2].match('(R\\d+)')[0];
                        document.getElementById("vib_rate").innerHTML = run_data[i].split('\n')[2].match('(V\\d+)')[0];

                        let line_3_data = Array.from(run_data[i].split('\n')[3].matchAll('(\\d+)'));
                        document.getElementById("blister_eta").innerHTML = line_3_data[8][0];
                        document.getElementById("pill_drop").innerHTML = line_3_data[2][0];
                        document.getElementById("fill_error").innerHTML = line_3_data[3][0];
                        switch (parseInt(line_3_data[4][0])) {
                            case 0:
                                document.getElementById("drop_from_bulk").innerHTML = 'Unknown';
                                break;
                            case 1:
                                document.getElementById("drop_from_bulk").innerHTML = 'Pause Bulk';
                                break;
                            case 2:
                                document.getElementById("drop_from_bulk").innerHTML = 'Need Bulk';
                                break;
                            case 3:
                                document.getElementById("drop_from_bulk").innerHTML = 'See Bulk';
                                break;
                            case 4:
                                document.getElementById("drop_from_bulk").innerHTML = 'Close Bulk';
                                break;
                        }
                        document.getElementById("next_ramp_angle").innerHTML = 'R' + line_3_data[6][0];
                        document.getElementById("next_ramp_vib").innerHTML = 'V' + line_3_data[7][0];

                        document.getElementById("amplitude").innerHTML = vibAmplitude[i+299];

                        // see if it is in aggressive mode each frame
                        if (/no_flow_aggressive_state/.test(run_data[i])){
                            document.getElementById("aggressive_ramp").innerHTML = 'True';
                        } else {
                            document.getElementById("aggressive_ramp").innerHTML = 'False';
                        }

                        let lines = run_data[i].split('\n');
                        let filteredLines = $(lines).filter(function (index, line) {
                            return line.startsWith("+Pill Object");
                        }).get();

                        // legacy only data

                        let legacy_data = [];
                        let legacy_pill_objects = run_data[i].split(/(?=\+Object:\s+\d+(?!\s*,))/);
                        if (legacy_pill_objects.length > 1) {
                            $.each(legacy_pill_objects.slice(1), function(index, pill){
                                let regex = /\+LineCount: (\d+), PixelCount: (\d+)/;
                                let matches = pill.match(regex);
                                let pill_data = [];
                                if (matches){
                                    pill_data = [matches[1], matches[2]];
                                }

                                regex = /\+Max:  col = (\d+), row = (\d+)/;
                                matches = pill.match(regex);
                                let max = [];
                                if (matches){
                                    max = [matches[1], matches[2]];
                                }

                                regex = /\+Min:  col = (\d+), row = (\d+)/;
                                matches = pill.match(regex);
                                let min = [];
                                if (matches){
                                    min = [matches[1], matches[2]];
                                }

                                regex = /\+MinMaxCoG:  col = (\d+), row = (\d+)/;
                                matches = pill.match(regex);
                                let cg = [];
                                if (matches){
                                    cg = [matches[1], matches[2]];
                                }
                                let whiteLines = $(pill.split('\n')).filter(function (index, line){
                                    return /^\+\d+\./.test(line);
                                }).get();

                                regex = /\+Object: (\d+), Zone: (\d+), State: (\d+), NumPills: (\d+)/;
                                matches = pill.match(regex);
                                let id = '';
                                let state = [];
                                if (matches){
                                    id = 'i' + matches[1] + '-z' + matches[2]
                                    state = [matches[1], matches[2], matches[3], matches[4]]
                                }
                                legacy_data.push({'whiteLines': whiteLines, 'pill_data': pill_data, 'max': max, 'min': min, 'cg': cg, 'id': id, 'state': state})
                            })
                        }
                        legacy_pill_data = legacy_data;

                        if (legacy_data.length > 0) {
                            $('#ai_pill_length').parent().hide();
                            $('#ai_pill_width').parent().hide();
                            $('#ai_pill_area').parent().hide();
                        }

                        if (datless) {
                            displayImage(i, filteredLines, reg_mark, zone_data[i-1], angle, vib, legacy_data)
                        } else {
                            displayImage(i, filteredLines, reg_mark, zone_data, angle, vib, legacy_data)
                        }
                        // reset seek state
                        seekFrame = reset_seek(seekFrame);
                        if ($('#ramp_point_column').css('display') === 'none') {
                            update_chart(vibChart, vibRate, i);
                            update_chart(angleChart, rampAngle, i);
                        } else {
                            update_chart(vib_chart_2, vibRate, i);
                            update_chart(ramp_chart_2, rampAngle, i);
                            update_chart(back_bottom, back_bottom_time_series['x'], i);
                            update_chart(back_top, back_top_time_series['x'], i);
                            update_chart(bump_1, bump_1_time_series['x'], i);
                            update_chart(bump_2, bump_2_time_series['x'], i);
                            update_chart(bump_3, bump_3_time_series['x'], i);
                            update_chart(lip_bottom_left, lip_bottom_left_time_series['x'], i);
                            update_chart(lip_top_left, lip_top_left_time_series['x'], i);
                        }
                        resolve();
                    }, animation_speed);
                } else {
                    const pausePromise = new Promise(resolve => {
                        if (!isPaused) {
                            resolve()
                        }
                    })
                    Promise.race([pausePromise, new Promise(resolve => setTimeout(resolve, Infinity))]).then(resolve);
                }
            })
        }
        // ctx.remove()
        vibChart.destroy();
        angleChart.destroy();
        back_bottom.destroy();
        back_top.destroy();
        ramp_chart_2.destroy();
        bump_1.destroy();
        bump_2.destroy();
        bump_3.destroy();
        lip_bottom_left.destroy();
        lip_top_left.destroy();
        vib_chart_2.destroy();
        reset_run_defaults();
    }

    function extractTar(tarData) {
        // Loop through the tar data until we've reached the end
        let currentPosition = 0;
        const files = [];
        const decoder = new TextDecoder()
        while (currentPosition < tarData.length) {
            // Get the header for the current file
            const header = tarData.slice(currentPosition, currentPosition + 512);

            // Get the file name from the header
            const fileName = decoder.decode(header.slice(0, 100)).trim()

            // If the file name is empty, we've reached the end of the tar file
            if (!fileName) {
                break;
            }

            // Get the file size from the header
            const fileSize = parseInt(decoder.decode(header.slice(124, 136)).trim(), 8);

            // Get the file data from the tar data
            const fileData = tarData.slice(
                currentPosition + 512,
                currentPosition + 512 + Math.ceil(fileSize / 512) * 512
            );


            // Add the file data to the files array
            files.push({ fileName, fileData });

            // Move the current position to the next file
            currentPosition += 512 + Math.ceil(fileSize / 512) * 512;
        }

        // for some reason extra item gets added to files?
        files.pop()
        // Return the extracted files
        return files;
    }

    //jquery ajax CANNOT be used here with our current version.  Jquery ajax return of binary data messes the data up
    function get_workorder_task_images(wo_task_id, image_list){
        return new Promise((resolve, reject) => {
            let files = ''
            const url = '/support/animator/tar_images?wo_task_id=' + wo_task_id
            const xhr = new XMLHttpRequest();
            xhr.open('POST', url, true);
            xhr.responseType = 'blob';
            xhr.onload = function () {
                if (xhr.status === 200) {
                    const blob = this.response;
                    const reader = new FileReader();
                    reader.onload = function () {
                        const arrayBuffer = new Uint8Array(reader.result);
                        files = extractTar(arrayBuffer);
                        downloaded_images += files.length
                        $('#images_downloaded').text(downloaded_images)
                        for (const key in files) {
                            let image = files[key];
                            // prevent images from different run being loaded in the event of reset occurring
                            if (wo_task_id === $("#workorder_task").val()) {
                                images[image.fileName.match(/\d+/).toString()] = image.fileData;
                            }
                        }
                        resolve();
                    };
                    reader.readAsArrayBuffer(blob);
                }
            };
            xhr.setRequestHeader('Content-type', 'application/json');
            xhr.setRequestHeader('X-CSRFToken', '{{csrf_token}}');
            // prevent images from different run being loaded in the event of reset occurring
            if (wo_task_id === $("#workorder_task").val()) {
                xhr.send(JSON.stringify({'image_list': image_list}));
            } else {
                resolve();
            }
        })
    }

    // Async shenanigans to limit the number of connections to 4 at a time
    // first call will retrieve 5 images, every subsequent call 15 images.
    function download_images(wo_task_id){
        // splits the list of images into a list of sequences of 15 items
        const entries = Object.keys(images);
        const splitDictionaries = [entries.slice(0, 5)];
        const threads = 4;

        for (let i = 5; i < entries.length; i += 15) {
            const splitArray = entries.slice(i, i + 15);
            splitDictionaries.push(splitArray);
        }

        function processRequests() {
            let currentIndex = 0;

            // TODO determine if I can stop this process upon reset?
            function sendNextRequest(){
                if (currentIndex >= splitDictionaries.length) {
                    return Promise.resolve();
                }

                const currentData = splitDictionaries[currentIndex];
                currentIndex++;
                if (wo_task_id !== $("#workorder_task").val()) {
                    return;
                }

                return get_workorder_task_images(wo_task_id, currentData).then(sendNextRequest)
            }

            const promises = [];
            for (let i = 0; i < threads; i++){
                promises.push(sendNextRequest())
            }

            return Promise.all(promises);
        }
        processRequests();
    }

    // generate list of expected images into global variable
    function generate_image_list(image_list) {
        $.each(image_list.split('\n'), function(index, image) {
            image.split(".raw")[0].match(/\d+$/);
            let key = image.split(".raw")[0].match(/\d+$/).toString();
            images[key] = '';
        });
        $('#images_total').text(Object.keys(images).length);
    }

    function get_image_list(wo_task_id) {
        return new Promise((resolve, reject) => {
            const url = '/support/animator/image_list?wo_task_id=' + wo_task_id
            const xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType = 'text';
            xhr.onload = function () {
                if (xhr.status === 200) {
                    generate_image_list(xhr.response)


                    download_images(wo_task_id)
                }
            };
            xhr.setRequestHeader('Content-type', 'text/plain');
            xhr.send();
        });
    }

    //TODO: loading spinny disc when waiting?
    function get_run_data() {
        const wo_task_id = $("#workorder_task").val();
        let obj;
        if (/^[A-E](?:1[0-2]|[1-9])(?:-\d+)?$/.test(wo_task_id)){
            golden_run = true;
            obj = [wo_task_id];
        } else {
            golden_run = false
            obj = $("#fill_list").find("option[value='" + wo_task_id + "']");
        }
        if(obj != null && obj.length > 0) {
            $('#wo_task_id_alert').hide()
            $("#get_images").hide();
            const url = '/support/animator/run_data_cap?wo_task_id=' + wo_task_id
            const xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType = 'text';
            xhr.onload = function() {
                if (xhr.status === 200) {
                    // these cannot be reset normally due to promises potentially executing after reset
                    $('#images_downloaded').text('0');
                    downloaded_images = 0;

                    reset = false;
                    run_data_cap = xhr.response;
                    g_run_data = xhr.response.split('+Frame: ');
                    $("#get_images").hide();
                    $("#reset_run").show();
                    $("#workorder_task").prop("disabled", true);
                    let run_data = xhr.response.split('+Frame: ');
                    pre_process_data(run_data);
                    generate_guid_page();
                    get_meta_data(wo_task_id);
                    generateDropTable();
                    get_ramp_points(run_data);
                    calculate_vib_amplitude();
                    generate_average_chart();
                    generate_annotations(run_data);
                }
            };
            xhr.setRequestHeader('Content-type', 'text/plain');
            xhr.send();
            get_image_list(wo_task_id);
        } else {
            $("#get_images").show();
            $('#wo_task_id_alert').show()
            if (wo_task_id.length > 0){
                $('#wo_task_id_missing').text(wo_task_id + ' is not a valid workorder to be viewed')
            } else {
                $('#wo_task_id_missing').text('A workorder must be selected to view')
            }
        }
    }
</script>

<style>
    /* =========================
       Base / Generic
       ========================= */
    body > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
    .current_drop {
        text-align: center;
        vertical-align: middle;
        position: relative;
        width: 2rem;
        height: 2rem;
    }
    .current_drop:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 0;
        border-top: 1rem solid transparent;
        border-left: 2rem solid orange;
        border-bottom: 1rem solid transparent;
    }
    .jump_to_frame {
        cursor: pointer;
        color: #007bff;
        text-decoration: underline;
    }
    .jump_to_frame:hover {
        color: #0056b3;
    }
    .past_drop {
        background-color: darkgrey;
    }
    .frame_info {
        display: flex;
        font-size: 4vh;
        margin: 2vh 0;
    }
    .frame_info_small {
        display: flex;
        font-size: 2vh;
        margin: .5vh 0;
    }
    .popup-box {
        display: none;
        position: absolute;
        width: 12.5vw;
        height: 24vh;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        padding: 10px;
        text-align: center;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }

    /* =========================
       Flex helpers
       ========================= */
    .row {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .cell {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px 8px;
        text-align: center;
    }

    /* =========================
       Page layout (columns)
       ========================= */
    .page-layout {
        display: flex;
        width: 100%;
        height: 100%;
        gap: 0;
    }
    .page-layout > * {
        min-width: 0;
    }
    #left_column {
        width: 20%;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 0 0 20%;
        min-width: 20%;
    }
    #canvas_column {
        width: 15%;
        height: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex: 0 0 15%;
        min-width: 15%;
    }
    #pill_info_column {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        flex: 1 1 auto;
        min-width: 0;
    }
    #pill_drop_column {
        width: 10%;
        display: flex;
        flex-direction: column;
        height: 100%;
        flex: 0 0 10%;
        min-width: 10%;
    }
    #ramp_point_column {
        height: 100%;
        display: none;
        flex-direction: column;
        gap: 8px;
    }
    #run_data_cap_column {
        height: 100%;
        display: none;
        flex-direction: column;
        gap: 8px;
        align-items: flex-end;
    }

    /* =========================
       Workorder bar (top left)
       ========================= */
    #workorder_task_container {
        box-sizing: border-box;
        height: 40px;
        max-height: 40px;
        padding: 4px 8px;
        background-color: #0096c3;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
        overflow: hidden;
    }
    #workorder_task {
        flex: 1;
        width: 80px;
        margin-top: 0;
        line-height: 24px;
    }
    #workorder_task_container .btn {
        height: 32px;
        padding: 4px 10px;
        line-height: 24px;
        white-space: nowrap;
        margin-top: 0;
    }
    #workorder_btn_slot {
        position: relative;
        flex: 0 0 auto;
        width: 96px;
        height: 32px;
    }
    #workorder_btn_slot .btn {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    /* =========================
       Go-to frame (right column)
       ========================= */
    #goto_frame_container {
        padding: 2px;
        background-color: #0096c3;
        display: flex;
        align-items: center;
        gap: 6px;
        min-height: 40px;
    }
    #goto_frame_container button {
        margin-top: -8px;
    }
    #goto_input {
        flex: 1;
        width: 80px;
        margin-top: 2px;
    }

    /* =========================
       Pill info table (top center)
       ========================= */
    #pill_info {
        flex: 0 0 auto;
        height: 40vh;
        min-height: 40vh;
        max-height: 40vh;
        overflow: auto;
    }
    #pill_info thead.dosis-report-header {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #fff;
    }
    #pill_info table {
        width: 100%;
        font-size: 1.8vh;
        border-collapse: collapse;
    }
    #pill_info_header th {
        background-color: #0096c3;
        border: none;
        height: 40px;
        padding: 0 8px;
        line-height: 40px;
        white-space: nowrap;
    }
    #pill_info_header tr {
        border: none;
        height: 40px;
    }
    #pill_objects {
        text-align: center;
    }

    /* =========================
       Drop list table (right)
       ========================= */
    #pill_drop_scroll {
        max-height: 945px;
        overflow-y: auto;
        background-color: Gainsboro;
        scrollbar-width: none;
        height: 945px;
    }
    #pill_drop_scroll thead {
        position: sticky;
        top: 0;
        z-index: 2;
        background: white;
    }
    #pill_drop_scroll table {
        width: 100%;
        border-collapse: collapse;
    }
    #drop_table_frames tr {
        height: 2rem;
    }
    #drop_table_frames td {
        text-align: center;
        font-size: 1.5rem;
    }

    /* =========================
       Area / Misc metrics (middle)
       ========================= */
    #area_info,
    #misc_info {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        padding-left: 12px;
        padding-right: 10px;
    }
    #area_info {
        margin-top: auto;
        margin-bottom: 8px;
    }
    #misc_info {
        margin-top: 8px;
        margin-bottom: auto;
    }
    #area_info .cell,
    #misc_info .cell {
        display: grid;
        grid-auto-rows: minmax(22px, auto);
        gap: 6px;
        align-content: center;
        background: #fbfbfc;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 10px 12px;
    }
    .metrics .metric {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 12px;
        border-bottom: 1px dashed #eceff3;
        padding-bottom: 4px;
    }
    .metrics .metric:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }
    .metrics .label {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 6px;
        background: #fbfbfc;
        color: #374151;
        font-weight: 600;
        font-size: 1.8vh;
    }
    .metrics .value {
        font-size: 1.9vh;
        font-weight: 600;
        color: #111827;
        white-space: nowrap;
        text-align: right;
        min-width: 6ch;
        font-variant-numeric: tabular-nums;
    }

    /* =========================
       Graphs (bottom center)
       ========================= */
    #graph_info {
        margin-top: auto;
        display: flex;
        gap: 8px;
        height: 30%;
    }
    #graph_info .cell {
        flex: 1;
        height: 100%;
    }

    /* =========================
       Ramp grid
       ========================= */
    .ramp-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        width: 100%;
    }

    /* =========================
       Measurements overlay
       ========================= */
    .measurements {
        position: absolute;
        top: 10%;
        right: 10%;
    }
    .measurements .row {
        justify-content: space-between;
        min-width: 260px;
    }

    /* =========================
       Shortcuts button + modal
       ========================= */
    #shortcuts_btn {
        position: fixed;
        left: 12px;
        bottom: 12px;
        z-index: 1004;
        background: #0096c3;
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 12px;
        font-size: 14px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    }
    #shortcuts_btn:hover {
        filter: brightness(0.95);
    }
    #shortcuts_popup {
        position: fixed;
        inset: 0;
        display: none;
        z-index: 1100;
        pointer-events: none;
    }
    #shortcuts_popup.is-visible {
        display: block;
    }
    #shortcuts_close {
        position: absolute;
        right: 8px;
        top: 8px;
        border: none;
        background: transparent;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
    }
    #shortcuts_overlay {
        position: absolute;
        inset: 0;
        background: transparent;
        pointer-events: none;
    }
    #shortcuts_modal {
        position: absolute;
        left: 12px;
        bottom: 56px;
        max-width: 420px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        padding: 14px 16px;
        pointer-events: auto;
    }
    #shortcuts_modal h4 {
        margin: 0 0 8px 0;
        font-weight: 600;
    }
    #shortcuts_list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 16px;
        row-gap: 6px;
        font-size: 13px;
        line-height: 1.4;
    }
    #shortcuts_list li {
        display: contents;
    }
    #shortcuts_list .act {
        opacity: .95;
    }
    #shortcuts_list .key {
        justify-self: end;
        white-space: nowrap;
    }
    #shortcuts_list kbd {
        display: inline-block;
        padding: 2px 6px;
        border: 1px solid #cbd5e1;
        border-bottom-width: 2px;
        border-radius: 6px;
        background: #f6f8fa;
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06);
        font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
    }

    /* =========================
       Alerts
       ========================= */
    .alert {
        margin-bottom: 0;
        padding: 8px;
    }
    #wo_task_id_missing {
        margin-bottom: 0;
        font-weight: bold;
    }

    /* =========================
       Meta panel (left column)
       ========================= */
    .meta-panel {
        padding: 6px 8px;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        background: transparent;
    }
    .meta-row {
        display: grid;
        grid-template-columns: 132px 1fr;
        align-items: center;
        column-gap: 10px;
        padding: 4px 0;
        border-bottom: 1px solid #f1f5f9;
    }
    .meta-row:last-of-type {
        border-bottom: 0;
    }
    .meta-row.wide {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .meta-row.wide .meta-label {
        margin-bottom: 2px;
    }
    .meta-divider {
        border: 0;
        border-top: 1px solid #e5e7eb;
        margin: 6px 0;
    }
    .meta-label {
        color: #6b7280;
        font-weight: 500;
        font-size: 13px;
        white-space: nowrap;
    }
    .meta-value {
        color: #111827;
        font-weight: 500;
        font-size: 14px;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .mono {
        font-variant-numeric: tabular-nums;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
    }
    #frame_counter,
    #images_downloaded,
    #images_total,
    #meta_serial,
    #meta_drug_number,
    #meta_wo_id,
    #meta_frame_count {
        min-width: 8ch;
        display: inline-block;
        text-align: right;
    }
    #images_total {
        min-width: 0;
    }
    .meta-panel .meta-row .meta-value {
        justify-self: end;
        text-align: right;
    }
    .meta-panel .meta-row.wide .meta-value {
        justify-self: start;
        text-align: left;
    }
    .meta-panel .meta-row .meta-value > span {
        display: inline-block;
        min-width: 4ch;
        text-align: right;
    }
    #images_hidden,
    #images_visible,
    #in_reverse,
    #tracking_mode {
        padding-left: 24px;
    }
    .meta-panel .meta-row.live:first-of-type .meta-label {
        font-size: 16px;
        font-weight: 700;
        color: #111827;
    }
    .meta-panel .meta-row.live:first-of-type .meta-value {
        font-size: 20px;
        font-weight: 800;
        min-width: 10ch;
        font-variant-numeric: tabular-nums;
    }
    .meta-panel .meta-row.live:first-of-type {
        padding-top: 6px;
        padding-bottom: 6px;
        border-bottom-color: #e5e7eb;
    }
    .meta-inline-btn {
        padding: 0 4px;
        vertical-align: middle;
    }

    /* =========================
       Canvas header fill (behind)
       ========================= */
    #canvas_column {
        position: relative;
    }
    #canvas_column::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 40px;
        background: #0096c3;
        z-index: 1;
    }
    #canvas {
        position: relative;
        z-index: 3;
    }

    /* 40px blue header bar for the ramp point column */
    #ramp_point_column {
        position: relative;
        width: 100%;
        padding-top: 40px;        /* push grid below the bar */
    }

    #ramp_point_column::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 40px;
        background: #0096c3;      /* same blue as other headers */
    }

    /* Run Data (full width + 40px blue control bar) */
    #run_data_cap_column {
        width: 100%;
        display: none;
        flex-direction: column;
    }

    #run_data_cap_column .row {
        height: 40px;
        min-height: 40px;
        background-color: #0096c3;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin-left: auto;
    }

    /* match sizing of other buttons/inputs in header bars */
    #run_data_cap_column .row .btn {
        height: 32px;
        padding: 4px 10px;
        line-height: 24px;
        white-space: nowrap;
    }

    #upload_file {
        height: 32px;
        line-height: 24px;
    }

    #run_data_cap_pre {
        width: 97%;
        margin-left: 6px;
        margin-right: auto;
    }

    .global-scrubber {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1003;
        padding: 8px 12px;
        background: rgba(15, 18, 21, 0.92);
        backdrop-filter: saturate(120%) blur(6px);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        gap: 12px;
        font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    }

    .scrubber-center {
        display: flex;
        align-items: center;
        gap: 4px;
        flex: 1;
        min-width: 0;
    }

    .scrubber-label {
        color: #ccc;
        font-weight: 500;
        font-size: 12px;
    }

    .scrubber-num {
        color: #eee;
        font-weight: 600;
        font-size: 12px;
    }

    .scrubber-slash,
    .scrubber-max {
        color: #888;
        font-weight: 500;
        font-size: 12px;
    }

    .scrubber-range {
        flex: 1;
        min-width: 120px;
    }

    .scrubber-spacer {
        flex: 0 0 auto;
        width: 0;
    }

    .scrubber-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #eee;
        font-weight: 600;
        font-size: 12px;
        margin-right: 12px;
    }

    #global_scrubber_spacer_left {
        margin-left: 12px;
    }

    /* Modal overlay */
    .chart-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1001;
        padding: 24px;
    }

    /* Panel */
    .chart-modal-panel {
        position: relative;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 10px 50px rgba(0,0,0,0.25);
        max-width: 95vw;
        max-height: 90vh;
        width: 1200px;
        height: 650px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        border: 1px solid rgba(0,0,0,0.06);
    }

    /* Canvas area */
    .chart-modal-canvas-wrap {
        position: relative;
        flex: 1;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
        border: 1px solid rgba(0,0,0,0.05);
    }

    .chart-modal-canvas {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Run Data (full width + 40px blue control bar) */
    #ramp_point_averages_column {
        width: 100%;
        display: none;
        flex-direction: column;
    }

    #ramp_point_averages_column .row {
        display: flex;
        align-items: center;
        min-height: 40px;
        height: 40px;
        padding: 6px 12px;
        box-sizing: border-box;
        background-color: #0096c3;
    }

    /* LAYOUT FOR THE CONTROLS INSIDE THE ROW */
    #ramp_point_averages_column .rpa-controls {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        width: 100%;
    }

    /* LABEL + HELP TEXT */
    #ramp_point_averages_column .rpa-label {
        color: #ffffff;
        font-weight: 600;
        font-size: 14px;
        margin-left: 16px;
    }

    #ramp_point_averages_column .rpa-help {
        color: #e8f6fb;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;  /* truncate if the row is tight */
    }

    /* SELECT */
    #ramp_point_averages_column .rpa-select {
        border: 1px solid rgba(255,255,255,0.35);
        border-radius: 6px;
        height: 32px;
        line-height: 20px;
        padding: 6px 28px 6px 10px;
        font-size: 14px;
        margin-top: auto;
        margin-bottom: auto;
    }

    #ramp_point_averages_column .rpa-select:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
    }

    #ramp_point_averages_table {
        margin-right: 8px;
        margin-left: 8px;
    }

    /* OPTIONAL: clickable series cells in the table */
    #ramp_point_averages_table td.series-toggle {
        cursor: pointer;
        text-decoration: underline;
    }
    #ramp_point_averages_table td.series-toggle[aria-pressed="true"] {
        font-weight: 700;
    }

    #button_container, #speed_container {
        margin-top: 10px;
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    #button_container button, #speed_container button {
        font-weight: bold;
        font-size: 1.8vh;
        padding: 8px 16px;
        border-radius: 6px;
        border: 1px solid #333;
        background-color: #f0f0f0;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    #button_container button:hover, #speed_container button:hover {
        background-color: #dcdcdc;
    }

    #speed_container button.selected {
        background-color: #3aa63f;
        color: #fff;
        border-color: #2e7e31;
    }

    #speed_container {
        margin-top: 0;
    }

    #speed_header {
        text-align: center;
        margin-bottom: 0;
    }

    /* Run Data (full width + 40px blue control bar) */
    #guid_pill_selection {
        width: 100%;
        display: none;
        flex-direction: column;
    }

    #guid_pill_selection .row {
        display: flex;
        align-items: center;
        min-height: 40px;
        height: 40px;
        padding: 6px 12px;
        box-sizing: border-box;
        background-color: #0096c3;
    }
</style>
{% endblock %}

{% block content %}
<div class="alert alert-error" id="wo_task_id_alert" style="display: none;">
    <p id="wo_task_id_missing"></p>
</div>

<div class="page-layout">
    <div id="left_column">
        <div id="workorder_task_container">
            <input list="fill_list" name="workorder_task" id="workorder_task" autocomplete="off" placeholder="Workorder task id"/>
            <div id="workorder_btn_slot">
                <button class="btn" type="button" id="get_images" name="get_images" onclick="get_run_data()">Submit</button>
                <button class="btn" type="button" id="reset_run" name="reset_run" onclick="reset_run()" style="display: none;">Reset</button>
            </div>
        </div>

        <div id="meta_info" class="meta-panel">
            <!-- live rows -->
            <div class="meta-row live">
                <span class="meta-label">Frame</span>
                <span class="meta-value mono" id="frame_counter">0</span>
            </div>
            <div class="meta-row live">
                <span class="meta-label">Images</span>
                <span class="meta-value mono"><span id="images_downloaded">0</span>/<span id="images_total">0</span></span>
            </div>
            <div class="meta-row live">
                <span class="meta-label">Time of Fill</span>
                <span class="meta-value" id="fill_time"></span>
            </div>

            <hr class="meta-divider">

            <!-- mostly static rows -->
            <div class="meta-row">
                <span class="meta-label">Serial</span>
                <span class="meta-value mono">
                    <a id="meta_serial_link" href="#" target="_blank"><span id="meta_serial"></span></a>
                    <a id="meta_pillsig_link" class="btn btn-small btn-link meta-inline-btn" href="#" title="Edit PillSig" style="display:none;"><i class="icon-wrench"></i></a>
                </span>
            </div>
            <div class="meta-row">
                <span class="meta-label">DAFE (Pos)</span>
                <span class="meta-value mono" id="meta_dafe_pos"></span>
            </div>
            <div class="meta-row wide">
                <span class="meta-label">Drug Name</span>
                <span class="meta-value mono" id="meta_drug_name"></span>
            </div>
            <div class="meta-row">
                <span class="meta-label">Drug Number</span>
                <span class="meta-value mono" id="meta_drug_number"></span>
            </div>
            <div class="meta-row">
                <span class="meta-label">Workorder</span>
                <span class="meta-value mono">
                    <a id="meta_wo_link" href="#" target="_blank"><span id="meta_wo_id"></span></a>
                </span>
            </div>
            <div class="meta-row">
                <span class="meta-label">Order State</span>
                <span class="meta-value mono" id="meta_order_state"></span>
            </div>
            <div class="meta-row">
                <span class="meta-label">Dispensed</span>
                <span class="meta-value mono" id="meta_qty_line"></span>
            </div>
            <div class="meta-row">
                <span class="meta-label">Frames</span>
                <span class="meta-value mono" id="meta_frame_count"></span>
            </div>
            <div class="meta-row">
                <span class="meta-label">Fill Status</span>
                <span class="meta-value mono" id="meta_fill_status"></span>
            </div>
        </div>

        <p id="images_hidden" style="display: none; font-weight: bold; font-size: 2vh;">Images not shown</p>
        <p id="images_visible" style="font-weight: bold; font-size: 2vh;">Images shown</p>
        <p id="in_reverse" style="display: none; font-weight: bold; font-size: 2vh;">Playback Reversed</p>
        <p id="tracking_mode" style="display: none; font-weight: bold; font-size: 2vh;">Click a pill to view its path</p>

        <div id="button_container">
            <button id="btn_home" style="display:none;">Home</button>
            <button id="btn_show_graphs">Show Graphs</button>
            <button id="btn_show_downloads">Show Downloads</button>
        </div>

        <h4 id="speed_header">Playback Speed</h4>
        <div id="speed_container" style="margin-bottom: 0;">
            <button class='speed_btn' data-speed='25'>.25x</button>
            <button class='speed_btn' data-speed='50'>.5x</button>
            <button class='speed_btn selected' data-speed='100'>1x</button>
            <button class='speed_btn' data-speed='200'>2x</button>
            <button class='speed_btn' data-speed='300'>3x</button>
        </div>
    </div>

    <div id="canvas_column">
        <canvas id="canvas" width="288" height="1024"></canvas>
    </div>

    <div id="pill_info_column">
        <!-- Pill Info -->
        <div id="pill_info" style="height: 40%; width: 100%; display: flex; flex-direction: column;">
            <table>
                <thead id="pill_info_header" class="dosis-report-header">
                    <tr>
                        <th>ID</th>
                        <th>Center of Gravity (CG)</th>
                        <th>CG Delta</th>
                        <th>Velocity</th>
                        <th>Acceleration</th>
                        <th>ETA</th>
                        <th>Frames until Drop</th>
                        <th>Actual vs Estimated</th>
                    </tr>
                </thead>
                <tbody id="pill_objects" style="text-align: center;"></tbody>
            </table>
        </div>

        <!-- Area Info -->
        <div id="area_info">
            <div class="cell metrics">
                <div class="metric"><span class="label">Length</span><span class="value" id="pill_length"></span></div>
                <div class="metric"><span class="label">AI Length</span><span class="value" id="ai_pill_length"></span></div>
            </div>
            <div class="cell metrics">
                <div class="metric"><span class="label">Width</span><span class="value" id="pill_width"></span></div>
                <div class="metric"><span class="label">AI Width</span><span class="value" id="ai_pill_width"></span></div>
            </div>
            <div class="cell metrics">
                <div class="metric"><span class="label">Area</span><span class="value" id="pill_area"></span></div>
                <div class="metric"><span class="label">AI Area</span><span class="value" id="ai_pill_area"></span></div>
            </div>
        </div>

        <!-- Misc Info -->
        <div id="misc_info">
            <div class="cell metrics">
                <div class="metric"><span class="label">Ramp Angle</span><span class="value" id="ramp_angle">0</span></div>
                <div class="metric"><span class="label">Vib Rate</span><span class="value" id="vib_rate">0</span></div>
                <div class="metric"><span class="label">Next Ramp Angle</span><span class="value" id="next_ramp_angle">0</span></div>
                <div class="metric"><span class="label">Next Ramp Vib</span><span class="value" id="next_ramp_vib">0</span></div>
            </div>
            <div class="cell metrics">
                <div class="metric"><span class="label">Pill Drop</span><span class="value" id="pill_drop">0</span></div>
                <div class="metric"><span class="label">Blister ETA</span><span class="value" id="blister_eta">0</span></div>
                <div class="metric" style="display:none;"><span class="label">EOC Offset</span><span class="value" id="eoc_offset">0</span></div>
                <div class="metric"><span class="label">Vib Blist</span><span class="value" id="vib_blist">0</span></div>
                <div class="metric" style="display:none;"><span class="label">Aggressive Ramp</span><span class="value" id="aggressive_ramp">0</span></div>
            </div>
            <div class="cell metrics">
                <div class="metric"><span class="label">Pills Dropped</span><span class="value" id="drop_counter">0</span></div>
                <div class="metric"><span class="label">Fill Error</span><span class="value" id="fill_error">0</span></div>
                <div class="metric"><span class="label">Bulk Req</span><span class="value" id="drop_from_bulk">0</span></div>
                <div class="metric"><span class="label">Amplitude</span><span class="value" id="amplitude">0</span></div>
            </div>
        </div>

        <!-- Graphs -->
        <div id="graph_info">
            <div class="cell">
                <canvas id="rampAngle" style="height: 100%; width: 100%; border: 3px solid green;"></canvas>
            </div>
            <div class="cell">
                <canvas id="vibRate" style="height: 100%; width: 100%; border: 3px solid red;"></canvas>
            </div>
        </div>
    </div>

    <div id="ramp_point_column">
        <div class="ramp-grid">
            <canvas id="back_bottom" style="height: 100%; width: 100%; border: 3px solid yellow;"></canvas>
            <canvas id="back_top" style="height: 100%; width: 100%; border: 3px solid yellow;"></canvas>
            <canvas id="rampAngle2" style="height: 100%; width: 100%; border: 3px solid green;"></canvas>

            <canvas id="bump_1" style="height: 100%; width: 100%; border: 3px solid yellow;"></canvas>
            <canvas id="bump_3" style="height: 100%; width: 100%; border: 3px solid yellow;"></canvas>
            <canvas id="bump_2" style="height: 100%; width: 100%; border: 3px solid yellow;"></canvas>

            <canvas id="lip_bottom_left" style="height: 100%; width: 100%; border: 3px solid yellow;"></canvas>
            <canvas id="lip_top_left" style="height: 100%; width: 100%; border: 3px solid yellow;"></canvas>
            <canvas id="vibRate2" style="height: 100%; width: 100%; border: 3px solid red;"></canvas>
        </div>
    </div>

    <div id="run_data_cap_column">
        <div class="row">
            <button class="btn" type="button" onclick="downloadRunDataCap()">Download run_data.cap</button>
            <button class="btn" type="button" onclick="tar_run()">Download tarred run</button>
            <button class="btn" type="button" onclick="downloadRampPoints()">Download Ramp Points</button>
            <input id="upload_file" type="file" accept=".tar,.cap,.txt"/>
        </div>
        <pre id="run_data_cap_pre"></pre>
    </div>

    <div id="ramp_point_averages_column">
        <div class="row">
            <div class="rpa-controls">
                <label class="rpa-label" for="trend_mode_select">Best-fit:</label>
                <select class="rpa-select" id="trend_mode_select">
                    <option value="linear">Linear</option>
                    <option value="polynomial">Polynomial (quadratic)</option>
                </select>
                <span class="rpa-help">Click a series name in the table to toggle its trendline.</span>
            </div>
        </div>

        <canvas id="ramp_point_averages_chart" style="height: 100%; width: 100%;"></canvas>
        <table id="ramp_point_averages_table" style="margin-bottom: 40px;"></table>
    </div>

    <div id="guid_pill_selection">
        <div id="guid_info" style="height: 40%; width: 100%; display: flex; flex-direction: column;">
            <table>
                <thead id="guid_info_header" class="dosis-report-header">
                    <tr>
                        <th></th>
                        <th>GUID</th>
                        <th>First Frame Seen</th>
                        <th>Last Frame Seen</th>
                        <th>Total Frames Seen</th>
                    </tr>
                </thead>
                <tbody id="guid_objects" style="text-align: center;"></tbody>
            </table>
        </div>
    </div>

    <div id="pill_drop_column">
        <div id="goto_frame_container">
            <input type="text" id="goto_input" min="0" placeholder="Enter frame#"/>
            <button id="goto_button">Go To</button>
        </div>

        <div id="pill_drop_scroll">
            <table>
                <thead>
                    <tr class="dosis-report-header">
                        <th colspan="2">Frame of Drop</th>
                        <th>Frames between drops</th>
                    </tr>
                </thead>
                <tbody id="drop_table_frames"></tbody>
            </table>
        </div>
    </div>
</div>

<datalist id="fill_list">
{% for fill in fill_list %}
    <option value="{{fill}}">
{% endfor %}
</datalist>

<!-- Measurements (was a hidden table) -->
<div class="measurements" hidden="true">
    <div class="row">
        <div class="cell" style="justify-content:flex-start;">Horizontal Distance pixels:</div>
        <div class="cell" id="horizontal_px" style="justify-content:flex-end;">0</div>
    </div>
    <div class="row">
        <div class="cell" style="justify-content:flex-start;">Vertical Distance pixels:</div>
        <div class="cell" id="vertical_px" style="justify-content:flex-end;">0</div>
    </div>
    <div class="row">
        <div class="cell" style="justify-content:flex-start;">Diagonal Distance pixels:</div>
        <div class="cell" id="diagonal_px" style="justify-content:flex-end;">0</div>
    </div>
</div>

<div class="popup-box" id="popupBox">
    <span class="frame_info_small"><p>Object ID:&nbsp;</p><p id="legacy_object_id">0</p></span>
    <span class="frame_info_small"><p>Length:&nbsp;</p><p id="legacy_pill_length">0</p></span>
    <span class="frame_info_small"><p>Width:&nbsp;</p><p id="legacy_pill_width">0</p></span>
    <span class="frame_info_small"><p>Area:&nbsp;</p><p id="legacy_pill_area">0</p></span>
    <span class="frame_info_small"><p>Pixel Count:&nbsp;</p><p id="legacy_pixel_count">0</p></span>
    <span class="frame_info_small"><p>White Coverage:&nbsp;</p><p id="legacy_white_cover">0</p></span>
    <span class="frame_info_small"><p>State:&nbsp;</p><p id="legacy_pill_state">0</p></span>
    <span class="frame_info_small"><p>CG-Delta:&nbsp;</p><p id="legacy_cg_delta">0</p></span>
</div>

<button id="shortcuts_btn" type="button">Keyboard Shortcuts</button>
<div id="shortcuts_popup" aria-hidden="true">
    <div id="shortcuts_overlay"></div>
    <div id="shortcuts_modal" role="dialog" aria-modal="true" aria-labelledby="shortcuts_title">
        <button id="shortcuts_close" aria-label="Close">&times;</button>
        <h4 id="shortcuts_title">Keyboard Shortcuts</h4>
        <ul id="shortcuts_list">
            <li><span class="act">Play/Pause</span><kbd class="key">Spacebar</kbd></li>
            <li><span class="act">Advance One Frame</span><span class="key"><kbd>S</kbd> or <kbd>↓</kbd></span></li>
            <li><span class="act">Rewind One Frame</span><span class="key"><kbd>W</kbd> or <kbd>↑</kbd></span></li>
            <li><span class="act">Next Pill Drop</span><span class="key"><kbd>D</kbd> or <kbd>→</kbd></span></li>
            <li><span class="act">Previous Pill Drop</span><span class="key"><kbd>A</kbd> or <kbd>←</kbd></span></li>
            <li><span class="act">Reverse</span><kbd class="key">R</kbd></li>
            <li><span class="act">Go to First Frame</span><kbd class="key">Home</kbd></li>
            <li><span class="act">Go to Last Frame</span><kbd class="key">End</kbd></li>
            <li><span class="act">Jump Forward 1s</span><kbd class="key">PageUp</kbd></li>
            <li><span class="act">Jump Back 1s</span><kbd class="key">PageDown</kbd></li>
            <li><span class="act">Jump Next Image</span><kbd class="key">&gt;</kbd></li>
            <li><span class="act">Jump Prev Image</span><kbd class="key">&lt;</kbd></li>
            <li><span class="act">Show Perpendicular Line</span><kbd class="key">P</kbd></li>
            <li><span class="act">Ruler</span><span class="key">Click &amp; drag on image</span></li>
            <li><span class="act">Clear Ruler</span><kbd class="key">Backspace</kbd></li>
            <li><span class="act">Toggle Images</span><kbd class="key">I</kbd></li>
            <li><span class="act">Toggle Pill Confidence</span><kbd class="key">O</kbd></li>
        </ul>
    </div>
</div>

<div id='global_scrubber_bar' class='global-scrubber' aria-label='Global frame scrubber' role='group'>
    <div id='global_scrubber_spacer_left' class='scrubber-spacer'></div>

    <div class='scrubber-center'>
        <span class='scrubber-label'>Frame</span>
        <span id='scrubber_current' class='scrubber-num'></span>
        <span class='scrubber-slash'> / </span>
        <span id='scrubber_max' class='scrubber-max'></span>
        <input id='scrubber_range' class='scrubber-range' type='range' min='0' step='1' value='0' />
    </div>

    <div id='global_scrubber_spacer_right' class='scrubber-spacer scrubber-right'></div>
</div>

<template id='chart-modal-template'>
    <div class='chart-modal-overlay' role='dialog' aria-modal='true'>
        <div class='chart-modal-panel'>

            <div class='chart-modal-canvas-wrap'>
                <canvas class='chart-modal-canvas'></canvas>
            </div>
        </div>
    </div>
</template>
{% endblock %}