import { tabulate } from './d3table.js';
import { drawGraph } from './d3graph.js';
import { drawTree } from './d3tree.js';
import { treeTable } from './d3treetable.js';
import { data } from './results.js';
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

const div = d3.selectAll("div");
tabulate(data, "#figure1");
drawGraph(data, "#figure2", 1280, 650);
drawTree(data, "#figure3", "root", false, 1280, 650, 150);
// treeTable(data, "#figure4");


Yasqe.defaults.value = ""
const queries_obj = ""

const url = window.location.href.endsWith('/') ? window.location.href.slice(0, -1) : window.location.href;
const endpointsList = [...new Set([url, ...Object.keys(queries_obj).map((label) => {
    if (queries_obj[label]["endpoint"]) return queries_obj[label]["endpoint"]
})])]
const yasguiEndpoints = endpointsList.map((endpoint) => {
    return {endpoint: endpoint}
})

const yasgui = new Yasgui(document.getElementById("yasgui"), {
    requestConfig: {endpoint: url, copyEndpointOnNewTab: true,},
    endpointCatalogueOptions: {
        getData: function () {
            return yasguiEndpoints
        },
        keys: [],
    },
});

Object.keys(queries_obj).map((label) => {
    const tabsLabel = Object.keys(yasgui._tabs).map(tab => yasgui._tabs[tab].persistentJson.name)
    if (!tabsLabel.includes(label)) {
        yasgui.addTab(
            false,
            {
                ...Yasgui.Tab.getDefaults(),
                name: label,
                requestConfig: {endpoint: queries_obj[label]['endpoint']},
                yasqe: {value: queries_obj[label]['query']}
            }
        );
    }
})