app/panel.js

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 = document.getElementById(elementId);

            // Check if the element exists and contains a canvas
            if (element && element.querySelector('canvas')) {
                viewer = element.querySelector('canvas')._3dmol_viewer;

                // Remove all models except the first one
                for (let i = 1; i < viewer.models.length; i++) {
                    viewer.removeModel(i);
                }
            } 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.orig_name.split('.').pop();
            const filename = molFile.orig_name;
            console.log("File:", filename, "Format:", fmt); // Log file name and format

            // Fetch the molecule content using the URL
            $.get(molFile.url, function(molContent) {
                // Add the model to the viewer and set the style
                const model = viewer.addModel(molContent, fmt);
                model.setStyle({}, { color: 'lightblue', opacity: 0.5 }); // Change style as needed

                console.log("Rendering protein view.");
                viewer.zoomTo();
                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,
    buttonFormatter: buttonFormatter
});