const ARROW = "https://unpkg.com/@jpmorganchase/perspective-examples/build/superstore.arrow";

window.addEventListener('WebComponentsReady', function() {

    // Fetch and load arrow data.
    var xhr = new XMLHttpRequest();
    xhr.open('GET', ARROW, true);
    xhr.responseType = "arraybuffer"
    xhr.onload = function() {

        // Get `<perspective-viewer>`s from the DOM.
        var el1 = document.getElementsByTagName('perspective-viewer')[0];
        var el2 = document.getElementsByTagName('perspective-viewer')[1];

        // Create a `table()` using the arrow response.
        var table = perspective.shared_worker().table(xhr.response);

        // Load the table in each of the `<perspective-viewer>`s DOM reference.
        el1.load(table);
        el2.load(table);

        // Add an event listener to the first `<perspective-viewer>`.
        el1.addEventListener("perspective-click", e => {

            // Update the second `<perspective-viewer>`, filtering to the row 
            // clicked on in the first `<perspective-viewer>`.
            el2.restore(e.detail.config)
        });
    }
    xhr.send(null);
});