function executeScriptFormatter(cell, formatterParams, onRendered) {
    onRendered(function(){
        const shadowRoot = cell.getElement().getRootNode();
        if (shadowRoot instanceof ShadowRoot) {
            const script = cell.getElement().querySelector('script');
            if (script) {
                // Replace "document." with "shadowRoot." in the script code
                const scriptCode = script.innerText.replace(/document\./g, 'shadowRoot.');
                // Execute the modified script code
                const func = new Function('shadowRoot', scriptCode);
                func(shadowRoot);
            }
        }
    });
    return cell.getValue();
};

const molDisplayButtonFormatter = function (cell, formatterParams, onRendered) {
    // Get the cell content (mol_file) which is expected to be an object with properties like orig_name and url
    const molFile = cell.getValue();

    // Create a button element
    const button = document.createElement("button");
    button.textContent = formatterParams.label || "View";

    // Add a click event listener to the button
    button.addEventListener("click", () => {
        try {
            let viewer;
            const elementId = 'result_protein_view'; // Ensure this element exists in your HTML
            const element = window.parent.document.getElementById(elementId);

            // Check if the element exists and contains a canvas
            if (element && element.querySelector('canvas')) {
                viewer = element.querySelector('canvas')._3dmol_viewer;
            } else {
                console.error("Invalid element_id: No canvas found.");
                return;
            }

            // Get the file format from the cell content (assumed to be a property of molFile)
            const fmt = molFile.split('.').pop();
            molUrl = 'gradio_api/file=' + molFile;

            // Fetch the molecule content using the URL
            window.parent.$.get(molUrl, function(molContent) {
                // Add the model to the viewer and set the style
                for (let i = viewer.models.length - 1; i > 0; i--) {
                    viewer.removeModel(i); // Or viewer.models.splice(i, 1);
                }
                const model = viewer.addModel(molContent, fmt);
                model.setStyle({}, { stick: {colorscheme: 'magentaCarbon' } }); // Change style as needed

                console.log("Rendering protein view.");
                viewer.zoomTo({model: model});
                viewer.render();
            });
        } catch (error) {
            console.error("An error occurred:", error);
        }
    });

    // Return the button element to be displayed in the cell
    return button;
};

Tabulator.extendModule("format", "formatters", {
    executeScriptFormatter: executeScriptFormatter,
    molDisplayButtonFormatter: molDisplayButtonFormatter
});