plco.js

/** 
 * @file JS SDK for NCI DCEG's PLCO API. 〜(￣▽￣〜)
 * 
 * @version 1.0
 * @author Eric Ruan, Erika Nemeth, Lorena Sandoval, Jonas Almeida
 * @copyright 2021
 */
console.log('plco.js loaded')

/* plco = {
    date: new Date()
}
*/

/**
 * Main global portable module.
 * @namespace plco
 * @property {Function} defineProperties - {@link plco.defineProperties}
 * @property {Function} explorePhenotypes - {@link plco.explorePhenotypes}
 * @property {Function} loadScript - {@link plco.loadScript}
 * @property {Function} saveFile - {@link plco.saveFile}
 */
plco = async () => {
    // plco.loadScript("https://cdn.plot.ly/plotly-latest.min.js")
    // console.log("plotly.js loaded")
    plco.loadScript("https://episphere.github.io/plotly/epiPlotly.js")
    plco.addStyle()
}

/**
 * TEMP work-around for the CORS issue, do NOT use in the final SDK. 
 * 
 * Instead, fetch the blob from the API and use a blob link just like in jmat.
 * 
 * Modified from https://github.com/jonasalmeida/jmat.
 * @param {string} url The download link.
 * @returns {HTMLAnchorElement} HTMLAnchorElement.
 */
plco.saveFile = (url) => {
    // TODO downloadgwas is not up yet, so i will make change later once its fixed
    url = url || 'https://downloadgwas.cancer.gov/j_breast_cancer.tsv.gz'
    let a = document.createElement('a')
    a.href = url
    a.target = '_blank'
    a.click()
    return a
}

/**
 * Saves a JSON as a .json file.
 * @param {object} contents A JS object.
 * @param {string} fileName The name of the file without extensions.
 * @returns {HTMLAnchorElement} HTMLAnchorElement.
 */
plco.downloadJSON = (contents, fileName = 'plot') => {
    const a = document.createElement('a')
    //a.href = URL.createObjectURL(new Blob([JSON.stringify(JSON.parse(contents))], {
    a.href = URL.createObjectURL(new Blob([JSON.stringify(contents)], {
        type: 'text/plain'
    }))
    a.setAttribute('download', fileName + '.json')
    a.click()
    return a
}

/**
 * Adds a style tag containing css for some plot elements.
 */
plco.addStyle = () => {
    const style = document.createElement('style')
    style.innerHTML = `
        .loader {
            border: 16px solid #f3f3f3; /* Light grey */
            border-top: 16px solid #3498db; /* Blue */
            border-radius: 50%;
            width: 120px;
            height: 120px;
            animation: spin 2s linear infinite;
            position: absolute;
            z-index: 10;
            top: 50%;
            left: 40%;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    `
    window.onload = (_) => {
        document.head.appendChild(style)
    }
}

plco.addDownloadLink = (id, f) => {
    if (document.getElementById(id + 'download-json')) {
        document.getElementById(id + 'download-json').remove()
    }
    const div = document.createElement('div')
    div.id = id + 'download-json'
    const button = document.createElement('button')
    button.innerHTML = 'download json'
    button.onclick = (async (_) => {
        let data = await (f())
        plco.downloadJSON(data)
    })
    const supElement = document.createElement('sup')
    supElement.innerHTML = `<a target='_blank' href='https://episphere.github.io/plot/'>plot</a>`
    div.appendChild(button)
    div.appendChild(supElement)
    document.getElementById(id).appendChild(div)
}

/**
 * Adds a key-value pair as specified in `m_fields` and `o_fields` to `obj` if the key does not already exist.
 * @param {object} obj An object.
 * @param {object} m_fields Mandatory fields.
 * @param {object} [o_fields={}] Optional fields. Same as `m_fields`, but will not add in the key-value pair if value is undefined.
 */
plco.defineProperties = (obj, m_fields, o_fields = {}) => {
    Object.keys(m_fields).forEach((key) => {
        if (typeof obj[key] === 'undefined') {
            obj[key] = m_fields[key]
        }
    })
    Object.keys(o_fields).forEach((key) => {
        if (
            typeof obj[key] === 'undefined' &&
            typeof o_fields[key] !== 'undefined'
        ) {
            obj[key] = o_fields[key]
        }
    })
}

/**
 * Creates and attaches a new script tag to head with script src pointing at `url`.
 * @param {string} url 
 * @param {string} host 
 * @returns {HTMLScriptElement} HTMLScriptElement
 */
plco.loadScript = async (url, host) => {
    let s = document.createElement('script')
    s.src = url
    return document.head.appendChild(s)
}

// plco.plotTest = async (
//     chr = 1,
//     div,
//     url = 'https://exploregwas-dev.cancer.gov/plco-atlas/api/\
//         summary?phenotype_id=3080&sex=female&ancestry=east_asian&p_value_nlog_min=2&raw=true'
// ) => {
//     let xx = await (await fetch(url)).json()
//     div = div || document.createElement('div')
//     let dt = xx.data.filter(x => x[4] == chr)
//     trace = {
//         x: dt.map(d => d[5]),
//         y: dt.map(d => d[6]),
//         mode: 'markers',
//         type: 'scatter'
//     }
//     let layout = {
//         title: `Chromosoome ${chr}`,
//         xaxis: {
//             title: 'position'
//         },
//         yaxis: {
//             title: '-log(p)'
//         }
//     }
//     plco.Plotly.newPlot(div, [trace], layout)
//     return div
// }

// plco.typeCheckAttributes = (obj = {}) => {
//     const typeKey = {
//         phenotype_id: 'integer',
//         raw: 'string'
//     }
//     Object.keys(obj).forEach((key) => {
//         if (typeKey[key] === 'string' && typeof obj[key] !== 'string') {
//             throw new TypeError(`${key} is not of type ${typeKey[key]}`)
//         } else if (typeKey[key] === 'integer' && !Number.isInteger(obj[key])) {
//             throw new TypeError(`${key} is not of type ${typeKey[key]}`)
//         }
//     })

// }

/**
 * Provides a way to explore all the available phenotypes.
 * @param {boolean} [flatten=false] If 'true', returns an array of objects instead of a tree.
 * @param {boolean} [mini=false] If 'true', removes keys from the objects to provide a condensed view.
 * @param {boolean} [graph=false] If 'true', returns a Plotly chart instead of an array of objects.
 * @param {string} div_id Used when graph is 'true', plots a Plotly chart at that container.
 * @param {object} [customLayout={}] _Optional_. Contains Plotly supported layout key-values pair that will overwrite the default layout. Commonly overwritten values may include height and width of the graph. See: https://plotly.com/javascript/reference/layout/ for more details. Also, set `to_json` to true to see what the default layout is.
 * @param {object} [customConfig={}] _Optional_. Contains Plotly supported config key-values pair that will overwrite the default config. See: https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js#L22-L86 for full details.
 * @returns An array of objects.
 */
plco.explorePhenotypes = async (
    flatten = false,
    mini = false,
    graph = false,
    div_id,
    customLayout = {},
    customConfig = {},
) => {
    let phenotypes_json = await plco.api.phenotypes()

    if (flatten) {
        let queue = []
        let r = []
        for (let i = 0; i < phenotypes_json.length; i++) {
            let root = phenotypes_json[i]
            queue.push(root)

            while (true) {
                let removed = queue.splice(0, 1)[0]

                if (removed === undefined) break
                r.push(removed)

                if (removed.children === undefined) continue
                else {
                    if (Array.isArray(removed.children)) {
                        for (let j = 0; j < removed.children.length; j++) {
                            queue.push(removed.children[j])
                        }
                    } else {
                        queue.push(removed.children)
                    }
                }
            }

        }
        phenotypes_json = r

        for (let i = 0; i < phenotypes_json.length; i++) {
            let obj = phenotypes_json[i]
            delete obj.children
        }
    }

    if (mini) {
        let queue = []
        for (let i = 0; i < phenotypes_json.length; i++) {
            let root = phenotypes_json[i]
            queue.push(root)

            while (true) {
                let removed = queue.splice(0, 1)[0]

                if (removed === undefined) break
                delete removed.color
                delete removed.import_date
                delete removed.type
                delete removed.age_name
                delete removed.import_count
                delete removed.parent_id
                if (removed.children === undefined) continue
                else {
                    if (Array.isArray(removed.children)) {
                        for (let j = 0; j < removed.children.length; j++) {
                            queue.push(removed.children[j])
                        }
                    } else {
                        queue.push(removed.children)
                    }
                }
            }

        }
    }

    if (graph) {
        // https://plotly.com/javascript/sunburst-charts/
        let div = document.getElementById(div_id)
        if (!div) {
            div = document.createElement('div')
            div.id = div_id
            document.body.appendChild(div)
        }

        phenotypes_json = await plco.explorePhenotypes(true, false, false)

        const data = [{
            type: "sunburst",
            ids: phenotypes_json.map(phenotype => phenotype.id),
            labels: phenotypes_json.map(phenotype => phenotype.display_name),
            parents: phenotypes_json.map(phenotype => phenotype.parent_id ? phenotype.parent_id : ''),
            values: phenotypes_json.map(phenotype => phenotype.participant_count ? phenotype.participant_count : 0),
            outsidetextfont: { size: 20, color: "#377eb8" },
            leaf: { opacity: 0.6 },
            marker: { line: { width: 2 } },
            hovertext: phenotypes_json.map(phenotype => 'phenotype_id: ' + phenotype.id),
            hoverinfo: 'label+text+value',
            textposition: 'inside',
            insidetextorientation: 'radial',
        }]

        const layout = {
            margin: { l: 0, r: 0, b: 0, t: 0 },
            width: 800,
            height: 800,
            sunburstcolorway: phenotypes_json.map(phenotype => phenotype.color).filter(Boolean),
            ...customLayout,
        }

        plco.Plotly.newPlot(div, data, layout, customConfig)
        div.on('plotly_click', async ({ event, points }) => {
            if (event.altKey) {
                const part = await plco.api.participants({}, points[0].id, 'value,ancestry,sex', 0)

                function helper(totalObject, cur, property) {
                    if (!totalObject['count_' + cur[property]] && cur[property] != null) {
                        const num = Number.parseInt(cur.counts)
                        if (isNaN(num))
                            totalObject['count_' + cur[property]] = 4
                        else
                            totalObject['count_' + cur[property]] = num
                    } else if (cur[property] != null) {
                        const num = Number.parseInt(cur.counts)
                        if (isNaN(num))
                            totalObject['count_' + cur[property]] = totalObject['count_' + cur[property]] + 4
                        else
                            totalObject['count_' + cur[property]] = totalObject['count_' + cur[property]] + num
                    }
                }

                function convertRowMajortoColMajor(numOfRows, numOfCols, arrays) {
                    let matrix = []
                    for (let i = 0; i < numOfCols; i++) {
                        matrix.push([])
                        for (let j = 0; j < numOfRows; j++) {
                            matrix[i].push(arrays[j][i])
                        }
                    }
                    return matrix
                }

                const data =
                    part.data.reduce((prev, cur) => {
                        const found = prev.find(obj => obj.value === cur.value)
                        if (!found) {
                            let addToArray = {
                                value: cur.value,
                                count: isNaN(Number.parseInt(cur.counts)) ? 4 : Number.parseInt(cur.counts),
                            }
                            helper(addToArray, cur, 'sex')
                            helper(addToArray, cur, 'ancestry')
                            prev.push(addToArray)
                        } else {
                            found.count = found.count +
                                (isNaN(Number.parseInt(cur.counts)) ? 4 : Number.parseInt(cur.counts))
                            helper(found, cur, 'sex')
                            helper(found, cur, 'ancestry')
                        }
                        return prev
                    }, [])

                console.table(data)

                const cellsVal = data.map(obj => Object.values(obj))
                const cellsValPercent = data.map(obj => {
                    const newObj = {}
                    const keys = Object.keys(obj)
                    for (let i = 0; i < keys.length; i++) {
                        let k = keys[i]
                        if (k === 'count') {
                            const totalCount = data.reduce((total, cur) => total + cur.count, 0)
                            newObj[k] = Math.round(Number.parseInt(obj[k]) / Number.parseInt(totalCount) * 100) + '%'
                        } else if (k === 'value')
                            newObj[k] = obj[k]
                        else
                            newObj[k] = Math.round(Number.parseInt(obj[k]) / Number.parseInt(obj.count) * 100) + '%'
                    }
                    return Object.values(newObj)
                })
                const headerVal = Object.keys(data[0])
                const trace = [{
                    type: 'table',
                    columnwidth: headerVal.map((_) => 150),
                    header: {
                        values: headerVal,
                        fill: { color: "#d3d3d3" },
                    }, cells: {
                        values: convertRowMajortoColMajor(
                            cellsVal.length, cellsVal[0].length || 0, cellsVal)
                    }
                }]
                const layout = {
                    updatemenus: [{
                        y: 1.0,
                        yanchor: 'top',
                        buttons: [{
                            method: 'restyle',
                            args: [{
                                cells: {
                                    values: convertRowMajortoColMajor(
                                        cellsVal.length, cellsVal[0].length || 0, cellsVal)
                                }
                            }],
                            label: 'Normal',
                        }, {
                            method: 'restyle',
                            args: [{
                                cells: {
                                    values: convertRowMajortoColMajor(
                                        cellsVal.length, cellsVal[0].length || 0, cellsValPercent)
                                }
                            }],
                            label: 'Percentage',
                        }],
                    }]
                }

                let div2 = document.getElementById(div_id + 'table')
                if (!div2) {
                    div2 = document.createElement('div')
                    div2.id = div_id + 'table'
                    document.body.appendChild(div2)
                }
                div2.innerHTML = ''
                plco.Plotly.newPlot(div2, trace, layout)
            }
        })
        return phenotypes_json
    }
    return phenotypes_json
}

/**
 * Fetches the result of the `url` from localForage if it exists else calls a HTTP request to the `url` and stores it into
 * localForage. 
 * @param {string} url The url will be used as the key when storing its response into IndexedDB.
 * @returns Url HTTP response.
 */
plco.fetch = async (url) => {
    try {
        const value = await plco.localForage.getItem(url)
        if (!value || (value && !value.data)) {
            const apiResult = await (await fetch(url)).json()
            await plco.localForage.setItem(url, { data: apiResult, date: Math.floor(new Date().getTime() / 1000.0) })
            return apiResult
        } else if (value && value.date) {
            if (Math.floor(new Date().getTime() / 1000.0) - value.date > 604800) {
                const apiResult = await (await fetch(url)).json()
                await plco.localForage.setItem(url, { data: apiResult, date: Math.floor(new Date().getTime() / 1000.0) })
                return apiResult
            } else {
                return value.data
            }
        }
        return value.data
    } catch (error) {
        console.error(error)
    }
}

/**
 * Sub-module grouping API methods.
 * @memberof plco
 * @namespace plco.api
 * @property {Function} download - {@link plco.api.download}
 * @property {Function} metadata - {@link plco.api.metadata}
 * @property {Function} participants - {@link plco.api.participants}
 * @property {Function} pca - {@link plco.api.pca}
 * @property {Function} phenotypes - {@link plco.api.phenotypes}
 * @property {Function} points - {@link plco.api.points}
 * @property {Function} summary - {@link plco.api.summary}
 * @property {Function} variants - {@link plco.api.variants}
 * @property {Function} ping - {@link plco.api.ping}
 */
plco.api = {}

plco.api.url = 'https://exploregwas.cancer.gov/plco-atlas/api/'

/**
 * Returns the status of the PLCO API.
 */
plco.api.ping = async () => {
    return (await fetch(plco.api.url + 'ping')).text()
}

plco.api.get = async (cmd = "ping", parms = {}) => {
    // res = await fetch(...)
    // content-type = await res.blob().type
    if (cmd === "ping") {
        return await (await fetch(plco.api.url + 'ping')).text() === "true"
    } else if (cmd === 'download') {
        if (parms['get_link_only'] === 'true') {
            return (
                await fetch(
                    plco.api.url + cmd + '?' + plco.api.parms2string(parms)
                )
            ).text()
        } else {
            plco.saveFile(
                plco.api.url + cmd + '?' + plco.api.parms2string(parms)
            )
            return await new Promise((resolve) => resolve({}))
        }
    } else {
        return await plco.fetch(plco.api.url + cmd + '?' + plco.api.parms2string(parms))
    }
}

plco.api.string2parms = (
    str = "phenotype_id=3080&sex=all&ancestry=east_asian&p_value_nlog_min=4"
) => {
    let prm = {}
    str.split('&').forEach(s => {
        s = s.split('=')
        prm[s[0]] = s[1]
    })
    return prm
}

plco.api.parms2string = (
    prm = { phenotype_id: 3080, sex: "all", ancestry: "east_asian", p_value_nlog_min: 4 }
) => {
    return Object.keys(prm).map(p => `${p}=${prm[p]}`).join('&')
}

/**
 * Downloads the original association results in tsv.gz format.
 * @param {object | string | Array<Array>} parms A JSON object, query string, or 2-d array containing the query parameters.
 * @param {integer} [phenotype_id=3080] A numeric phenotype id.
 * @param {string} [get_link_only] _Optional_. If set to 'true', returns the download link instead of redirecting automatically to the file.
 * @returns Results of the API call.
 */
plco.api.download = async (
    parms,
    phenotype_id = 3080,
    get_link_only = undefined
) => {
    parms =
        typeof parms === 'string'
            ? plco.api.string2parms(parms)
            : Array.isArray(parms)
                ? Object.fromEntries(parms)
                : parms
    parms = parms || {
        phenotype_id,
    }
    plco.defineProperties(parms, { phenotype_id }, { get_link_only })
    return await plco.api.get((cmd = 'download'), parms)
}

/**
 * Retrieves metadata for phenotypes specified
 * @param {object | string | Array<Array>} parms A JSON object, query string, or 2-d array containing the query parameters.
 * @param {number} [phenotype_id=3080] A phenotype id.
 * @param {string} [sex=female] A sex, which may be "all", "female", or "male".
 * @param {string} [ancestry=european] A character vector specifying ancestries to retrieve data for.
 * @param {string} [raw] _Optional_. If true, returns data in an array of arrays instead of an array of objects.
 * @return A dataframe containing phenotype metadata
 * @example
 * plco.api.metadata()
 * plco.api.metadata({ phenotype_id: 3080, sex: "female", ancestry: "european" })
 * plco.api.metadata("phenotype_id=3080&sex=female&ancestry=european")
 * plco.api.metadata([["phenotype_id",3080], ["sex","female"], ["ancestry","european"]])
 * plco.api.metadata({}, 3080, "female", "european")
 */
plco.api.metadata = async (
    parms,
    phenotype_id = 3080,
    sex = "female",
    ancestry = "european",
    raw = undefined
) => {
    parms =
        typeof parms === 'string'
            ? plco.api.string2parms(parms)
            : Array.isArray(parms)
                ? Object.fromEntries(parms)
                : parms
    parms = parms || {
        phenotype_id,
        sex,
        ancestry
    }
    plco.defineProperties(parms, { phenotype_id, sex, ancestry }, { raw })
    return await plco.api.get((cmd = 'metadata'), parms)
}

/**
 * Retrieves aggregate counts for participants. Aggregate counts under 10 are returned as "< 10".
 * @param {object | string | Array<Array>} parms A JSON object, query string, or 2-d array containing the query parameters.
 * @param {integer} [phenotype_id=2250] A numeric phenotype id.
 * @param {string} [columns] _Optional_. A character vector specifying properties for which to retrieve counts for. 
 * Valid properties are: value, ancestry, genetic_ancestry, sex, and age.
 * @param {integer} [precision] _Optional_. For continuous phenotypes, a numeric value specifying the -log10(precision) 
 * to which values should be rounded to.
 * @param {string} [raw] _Optional_. If true, returns data in an array of arrays instead of an array of objects.
 * @returns Results of the API call.
 */
plco.api.participants = async (
    parms,
    phenotype_id = 2250,
    columns = undefined,
    precision = undefined,
    raw = undefined
) => {
    parms =
        typeof parms === 'string'
            ? plco.api.string2parms(parms)
            : Array.isArray(parms)
                ? Object.fromEntries(parms)
                : parms
    parms = parms || {
        phenotype_id,
        columns: 'value',
        precision: 0,
    }
    plco.defineProperties(parms, { phenotype_id }, { columns, precision, raw })
    return await plco.api.get((cmd = 'participants'), parms)
}


/**
 * Retrieve PCA coordinates for the specified phenotype and platform.
 * @param {object | string | Array<Array>} parms A JSON object, query string, or 2-d array containing the query parameters.
 * @param {integer} [phenotype_id=3080] A numeric phenotype id.
 * @param {string} [platform=PLCO_GSA] A character vector specifying the platform to retrieve data for.
 * @param {integer} [pc_x=1] A numeric value (1-20) specifying the x axis's principal component.
 * @param {integer} [pc_y=2] A numeric value (1-20) specifying the y axis's principal component.
 * @param {integer} [limit] _Optional_. A numeric value to limit the number of variants returned (used for pagination). 
 * Capped at 1 million.
 * @param {string} [raw] _Optional_. If true, returns data in an array of arrays instead of an array of objects.
 * @returns A dataframe containing pca coordinates.
 * @example
 * plco.api.pca()
 * plco.api.pca({}, 3080, 'PLCO_GSA', 1, 1, 1000)
 * plco.api.pca({phenotype_id: 3080, platform: 'PLCO_GSA', pc_x: 1, pc_y: 1, limit: 1000 })
 * plco.api.pca("phenotype_id=3080&platform=PLCO_GSA&pc_x=1&pc_y=1&limit=1000")
 * plco.api.pca([["phenotype_id",3080], ["platform","PLCO_GSA"], ["pc_x",1], ["pc_y",1], ["limit",1000]])
 */
plco.api.pca = async (
    parms,
    phenotype_id = 3080,
    platform = 'PLCO_GSA',
    pc_x = 1,
    pc_y = 2,
    limit = undefined,
    raw = undefined
) => {
    parms =
        typeof parms === 'string'
            ? plco.api.string2parms(parms)
            : Array.isArray(parms)
                ? Object.fromEntries(parms)
                : parms
    parms = parms || {
        phenotype_id,
        platform,
        pc_x,
        pc_y,
        limit: 10,
    }
    plco.defineProperties(parms, { phenotype_id, platform, pc_x, pc_y }, { limit, raw })

    if (!Number.isInteger(parms['pc_x']) || parms['pc_x'] < 1 || parms['pc_x'] > 20) {
        throw new RangeError('pc_x must be an integer between 1 and 20 inclusive.')
    }
    if (!Number.isInteger(parms['pc_y']) || parms['pc_y'] < 1 || parms['pc_y'] > 20) {
        throw new RangeError('pc_y must be an integer between 1 and 20 inclusive.')
    }
    return await plco.api.get((cmd = 'pca'), parms)
}

/**
 * Retrieves phenotypes
 * @param {object | string | Array<Array>} parms A JSON object, query string, or 2-d array containing the query parameters.
 * @param {string} [q] _Optional_. A query term
 * @param {string} [raw] _Optional_. If true, returns data in an array of arrays instead of an array of objects.
 * @return If query is specified, a list of phenotypes that contain the query term is returned. Otherwise, a tree of all phenotypes is returned.
 * @example
 * plco.api.phenotypes()
 * plco.api.phenotypes({ q: "first_ca125_level" })
 * plco.api.phenotypes("q=first_ca125_level")
 * plco.api.phenotypes([["q","first_ca125_level"]])
 * plco.api.phenotypes({}, "first_ca125_level")
 */
plco.api.phenotypes = async (
    parms,
    q = undefined,
    raw = undefined
) => {
    parms =
        typeof parms === 'string'
            ? plco.api.string2parms(parms)
            : Array.isArray(parms)
                ? Object.fromEntries(parms)
                : parms
    parms = parms || {
    }
    plco.defineProperties(parms, {}, { q, raw })
    return await plco.api.get(cmd = "phenotypes", parms)
}

/**
 * Retrieves sampled variants suitable for visualizing a QQ plot for the specified phenotype, sex, and ancestry.
 * @param {object | string | Array<Array>} parms A JSON object, query string, or 2-d array containing the query parameters.
 * @param {integer} [phenotype_id=3080] A numeric phenotype id.
 * @param {string} [sex=female] A character vector specifying a sex to retrieve data for.
 * @param {string} [ancestry=european] A character vector specifying ancestries to retrieve data for.
 * @param {string} [raw] _Optional_. If true, returns data in an array of arrays instead of an array of objects.
 * @returns A dataframe containing variants.
 */
plco.api.points = async (
    parms,
    phenotype_id = 3080,
    sex = 'female',
    ancestry = 'european',
    raw = undefined
) => {
    parms =
        typeof parms === 'string'
            ? plco.api.string2parms(parms)
            : Array.isArray(parms)
                ? Object.fromEntries(parms)
                : parms
    parms = parms || {
        phenotype_id,
        sex,
        ancestry,
    }
    plco.defineProperties(parms, { phenotype_id, sex, ancestry }, { raw })

    return await plco.api.get((cmd = 'points'), parms)
}

/**
 * Retrieve variants for all chromosomes at a resolution of 400x800 bins across the whole genome and specified -log10(p) range
 * @param {object | string | Array<Array>} parms A JSON object, query string, or 2-d array containing the query parameters.
 * @param {number} [phenotype_id=3080] A phenotype id.
 * @param {string} [sex=female] A sex, which may be "all", "female", or "male".
 * @param {string} [ancestry=european] A character vector specifying ancestries to retrieve data for.
 * @param {number} [p_value_nlog_min=4] A numeric value >= 0 specifying the minimum -log10(p) for variants.
 * @param {string} [raw] _Optional_. If true, returns data in an array of arrays instead of an array of objects.
 * @return A dataframe with aggregated variants.
 * @example
 * plco.api.summary()
 * plco.api.summary({ phenotype_id: 3080, sex: "female", ancestry: "european", p_value_nlog_min: 4 })
 * plco.api.summary("phenotype_id=3080&sex=female&ancestry=european&p_value_nlog_min=4")
 * plco.api.summary([["phenotype_id",3080], ["sex","female"], ["ancestry","european"], ["p_value_nlog_min",4]])
 * plco.api.summary({}, 3080, "female", "european", 4)
 */
plco.api.summary = async (
    parms,
    phenotype_id = 3080,
    sex = "female",
    ancestry = "european",
    p_value_nlog_min = 4,
    raw = undefined
) => {
    parms =
        typeof parms === 'string'
            ? plco.api.string2parms(parms)
            : Array.isArray(parms)
                ? Object.fromEntries(parms)
                : parms
    parms = parms || {
        phenotype_id,
        sex,
        ancestry,
        p_value_nlog_min
    }
    plco.defineProperties(parms, { phenotype_id, sex, ancestry, p_value_nlog_min }, { raw })
    return await plco.api.get(cmd = "summary", parms)
}

/**
 * Retrieve variants for specified phenotype, sex, ancestry, chromosome, and other optional fields.
 * @param {object | string | Array<Array>} parms A JSON object, query string, or 2-d array containing the query parameters.
 * @param {number} [phenotype_id=3080] Phenotype id(s)
 * @param {string} [sex=female] A sex, which may be "all", "female", or "male".
 * @param {string} [ancestry=european] An ancestry, which may be "african_american", "east_asian", or "european".
 * @param {number} [chromosome=8] A chromosome number.
 * @param {string} [columns] _Optional_ Properties for each variant. Default: all properties.
 * @param {string} [snp] _Optional_ Snps.
 * @param {number} [position] _Optional_ The exact position of the variant within a chromosome.
 * @param {number} [position_min] _Optional_ The minimum chromosome position for variants.
 * @param {number} [position_max] _Optional_ The maximum chromosome position for variants.
 * @param {number} [p_value_nlog_min] _Optional_ The minimum -log10(p) of variants in the chromosome.
 * @param {number} [p_value_nlog_max] _Optional_ The maximum -log10(p) of variants in the chromosome.
 * @param {number} [p_value_min] _Optional_ The minimum p-value of variants in the chromosome.
 * @param {number} [p_value_max] _Optional_ The maximum p-value of variants in the chromosome.
 * @param {string} [orderBy] _Optional_ A property to order variants by. May be "id", "snp", "chromosome", "position", "p_value", or "p_value_nlog".
 * @param {string} [order] _Optional_ An order in which to sort variants. May be "asc" or "desc".
 * @param {number} [offset] _Optional_ The number of records by which to offset the variants (for pagination)
 * @param {number} [limit] _Optional_ The maximum number of variants to return (for pagination). Highest allowed value is 1 million.
 * @param {string} [raw] _Optional_. If true, returns data in an array of arrays instead of an array of objects.
 * @return A dataframe with variants.
 * @example
 * plco.api.variants()
 * plco.api.variants({ phenotype_id: 3080, sex: "female", ancestry: "european", chromosome: 8, limit: 10 })
 * plco.api.variants("phenotype_id=3080&sex=female&ancestry=european&chromosome=8&limit=10")
 * plco.api.variants([["phenotype_id",3080], ["sex","female"], ["ancestry","european"], ["chromosome",8], ["limit",10]])
 * plco.api.variants({}, 3080, "female", "european", 8)
 */
plco.api.variants = async (
    parms,
    phenotype_id = 3080,
    sex = "female",
    ancestry = "european",
    chromosome = 8,
    columns = undefined,
    snp = undefined,
    position = undefined,
    position_min = undefined,
    position_max = undefined,
    p_value_nlog_min = undefined,
    p_value_nlog_max = undefined,
    p_value_min = undefined,
    p_value_max = undefined,
    orderBy = undefined,
    order = undefined,
    offset = undefined,
    limit = undefined,
    raw = undefined
) => {
    parms =
        typeof parms === 'string'
            ? plco.api.string2parms(parms)
            : Array.isArray(parms)
                ? Object.fromEntries(parms)
                : parms
    parms = parms || {
        phenotype_id,
        sex,
        ancestry,
        chromosome,
        limit: 10
    }
    plco.defineProperties(
        parms,
        { phenotype_id, sex, ancestry, chromosome },
        { columns, snp, position, position_min, position_max, p_value_nlog_min, p_value_nlog_max, p_value_min, p_value_max, orderBy, order, offset, limit, raw }
    )
    return await plco.api.get(cmd = "variants", parms)
}

/*
if(location.href.match('localhost')||location.href.match('127.0.0.1')){
    let scriptHost=location.href.replace(/\/[^\/]*$/,'/')
    plco.loadScript(`${scriptHost}plcoJonas.js`)
    plco.loadScript(`${scriptHost}plcoLorena.js`)
}else{
    plco.loadScript('https://episphere.github.io/plco/plcoJonas.js')
    plco.loadScript('https://episphere.github.io/plco/plcoLorena.js')
}
*/

/*
if(typeof(define)!='undefined'){

    define([
    'https://cdn.plot.ly/plotly-latest.min.js',
    //'https://episphere.github.io/plco/plco',
    //'https://episphere.github.io/plco/plcoJonas.js',
    //'https://episphere.github.io/plco/plcoLorena.js',
    'https://cdnjs.cloudflare.com/ajax/libs/localforage/1.9.0/localforage.min.js'
    ],function(Plotly,localforage){
        plco.localforage=localforage
        plco.Plotly=Plotly
        return plco
    })
}
*/

/**
 * Sub-module grouping plotting methods.
 * @memberof plco
 * @namespace plco.plot
 * @prop {Function} manhattan - {@link plco.plot.manhattan}  
 * @prop {Function} manhattan2 - {@link plco.plot.manhattan2}  
 * @prop {Function} qq - {@link plco.plot.qq}
 * @prop {Function} qq2 - {@link plco.plot.qq2}
 * @prop {Function} pca - {@link plco.plot.pca}
 * @prop {Function} pca2 - {@link plco.plot.pca2}
 * @prop {Function} barchart - {@link plco.plot.barchart}
 */
plco.plot = async () => {

}

/**
 * Generates a Plotly manhattan plot at the given div element with support for a single input.
 * @param {string} div_id The id of the div element. If it does not exist, a new div will be created.
 * @param {number} [phenotype_id=3080] A phenotype id.
 * @param {string} [sex=female] A sex, which may be "all, "female", or "male".
 * @param {string} [ancestry=european] An ancestry, which may be  "african_american", "east_asian" or "european".
 * @param {number} [p_value_nlog_min=2] A numeric value >= 0 specifying the minimum -log10(p) for variants.
 * @param {integer} [chromosome] _Optional_ A single chromosome. If no chromosome argument is passed, then assume all chromosomes.
 * @param {boolean} [to_json=false] _Optional_ If true, returns a stringified JSON object containing traces and layout.
 * If false, returns a div element containing the Plotly graph.
 * @param {object} [customLayout={}] _Optional_. Contains Plotly supported layout key-values pair that will overwrite the default layout. Commonly overwritten values may include height and width of the graph. See: https://plotly.com/javascript/reference/layout/ for more details. Also, set `to_json` to true to see what the default layout is.
 * @param {object} [customConfig={}] _Optional_. Contains Plotly supported config key-values pair that will overwrite the default config. See: https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js#L22-L86 for full details.
 * @returns A div element or a string if 'to_json' is true.
 * @example 
 * plco.plot.manhattan()
 * plco.plot.manhattan('plot', 3080, "female", "european", 2, 18)
*/
plco.plot.manhattan = async (
    div_id,
    phenotype_id = 3080,
    sex = 'female',
    ancestry = 'european',
    p_value_nlog_min = 2,
    chromosome,
    to_json = false,
    customLayout = {},
    customConfig = {},
) => {
    const isValid = await plco.plot.helpers.validateInputs([{ phenotype_id, sex, ancestry }])

    if (isValid.length <= 0) throw new Error('Invalid inputs, check the phenotype_id/sex/ancestry provided.')

    // Set up div, in which Plotly graph may be inserted.
    let div = document.getElementById(div_id)
    if (div === null && !to_json) {
        div = document.createElement('div')
        div.id = div_id
        document.body.appendChild(div)
    }

    // Retrieve all summary data.
    let inputData = await plco.api.summary({ phenotype_id, sex, ancestry, p_value_nlog_min })

    // Filter summary data if chromosome number was specified, and set associated variables for later.
    let chromosomeName
    let numberOfChromosomes
    if (chromosome) {
        inputData = inputData.data.filter(x => x.chromosome == "" + chromosome)
        chromosomeName = 'Chromosome ' + chromosome
        numberOfChromosomes = 1
    } else {
        inputData = inputData.data
        chromosomeName = 'All Chromosomes'
        numberOfChromosomes = 22
    }

    // Retrieve rs number for all SNPs if a chromosome number was passed as an argument.
    let rsNumbers = []
    if (numberOfChromosomes == 1) {
        let rsNumbers_allData = await plco.api.variants(
            { p_value_nlog_min, orderBy: 'id', order: 'asc' }, phenotype_id, sex, ancestry, chromosome)
        rsNumbers_allData.data.map(x => rsNumbers.push({
            snp: x.snp, position_abs: x.position, p_value_nlog: x.p_value_nlog
        }))
    }

    // Set up traces
    let traces = []
    let chromosomeTraces = []
    let currentChromosome
    let largestY = p_value_nlog_min

    for (i = 1; i <= numberOfChromosomes; i++) {
        if (numberOfChromosomes == 1) {
            currentChromosome = chromosome
        } else {
            currentChromosome = i
        }
        if (numberOfChromosomes == 1) {
            currentChromosomeData = rsNumbers
        } else {
            currentChromosomeData = inputData.filter(x => x.chromosome == "" + currentChromosome)
        }
        const traceInfo = {
            x: currentChromosomeData.map(x => parseInt(x.position_abs)),
            y: currentChromosomeData.map(x => parseFloat(x.p_value_nlog)),
            mode: 'markers',
            type: 'scattergl',
            marker: {
                opacity: 0.65,
                size: 5
            },
            name: 'Chromosome ' + currentChromosome, // appears as legend item
            hovertemplate: currentChromosomeData.map(x =>
                'absolute position: ' + parseInt(x.position_abs) +
                '<br>p-value: ' + Math.pow(10, -x.p_value_nlog)
            )
        }
        traces.push(traceInfo)

        largestY = traceInfo.y.reduce((largest, cur) => largest > cur ? largest : cur, largestY)

        chromosomeTraces.push({
            x: [traceInfo.x.reduce((smallest, cur) => cur > smallest ? smallest : cur, Number.MAX_SAFE_INTEGER)],
            y: [p_value_nlog_min],
            mode: 'markers',
            type: 'scattergl',
            marker: {
                size: 0,
                opacity: 0,
                color: '#FFFFFF',
            },
            hoverinfo: 'none',
            xaxis: 'x2',
            showlegend: false,
            name: 'C. ' + currentChromosome,
        })
    }

    if (numberOfChromosomes == 1) {
        for (i = 0; i < traces[0].hovertemplate.length; i++) {
            traces[0].hovertemplate[i] += '<br>snp: ' + rsNumbers[i].snp
        }
    }

    traces = traces.concat(chromosomeTraces)

    let layout = {
        title: 'SNPs in ' + chromosomeName,
        xaxis: {
            title: 'absolute position',
            position: '0.0',
            showgrid: false,
            tickfont: {
                color: 'black',
                size: 15
            },
        },
        xaxis2: {
            title: '',
            overlaying: 'x',
            anchor: 'free',
            position: '1.0',
            tickmode: 'array',
            tickvals: chromosomeTraces.map(trace => trace.x[0]),
            ticktext: chromosomeTraces.map(trace => trace.name),
        },
        yaxis: {
            title: '-log<sub>10</sub>(p)',
            fixedrange: numberOfChromosomes !== 1,
        },
        hovermode: 'closest',
        height: 700,
        width: 1200,
        updatemenus: [{
            y: 1.2,
            yanchor: 'top',
            buttons: [
                {
                    method: 'relayout',
                    args: ['yaxis.range', [2, largestY]],
                    label: '2 (default)'
                },
                {
                    method: 'relayout',
                    args: ['yaxis.range', [4, largestY]],
                    label: '4'
                },
                {
                    method: 'relayout',
                    args: ['yaxis.range', [6, largestY]],
                    label: '6'
                },
                {
                    method: 'relayout',
                    args: ['yaxis.range', (largestY > 8 ? [8, largestY] : [largestY, 8])],
                    label: '8+'
                }
            ]
        }],
        colorway: ['#FF0000', '#800000'],
        ...customLayout,
    }

    let config = {
        scrollZoom: true,
        ...customConfig
    }

    // experimental
    const chromosomeAbsPos =
        chromosomeTraces.map(trace => ({
            val: trace.x[0],
            chromosomeNum: Number.parseInt(trace.name.split(' ')[1])
        }))


    if (!to_json) {
        plco.Plotly.newPlot(div, traces, layout, config)

        const man2Selector = document.getElementById(div_id + 'selector')
        if (man2Selector) man2Selector.remove()

        const oldCheckbox = document.getElementById(div_id + 'checkbox')
        if (oldCheckbox) oldCheckbox.remove()

        const oldLabel = document.getElementById(div_id + 'label')
        if (oldLabel) oldLabel.remove()

        const checkbox = document.createElement('input')
        checkbox.type = 'checkbox'
        checkbox.id = div_id + 'checkbox'
        const label = document.createElement('label')
        label.id = div_id + 'label'
        label.for = div_id + 'checkbox'
        label.innerHTML = 'Allow graph to fetch additional information on zoom'
        div.appendChild(checkbox)
        div.appendChild(label)

        div.on('plotly_relayout', async (eventdata) => {
            if (checkbox.checked && eventdata['xaxis2.range[0]'] && eventdata['xaxis2.range[1]']) {
                const findStart = chromosomeAbsPos.find(({ val }) => val >= eventdata['xaxis2.range[0]'])
                plco.plot.helpers.addLoaderDiv(div, async () => await plco.plot.manhattan(div_id, phenotype_id, sex, ancestry, p_value_nlog_min, findStart.chromosomeNum))
            }
            else if (checkbox.checked) {
                plco.plot.helpers.addLoaderDiv(div, async () => await plco.plot.manhattan(div_id, phenotype_id, sex, ancestry, p_value_nlog_min, undefined))
            } else { return }
        })

        if (numberOfChromosomes === 1) {
            div.on('plotly_click', eventdata => {
                let resSnp = eventdata.points[0].hovertemplate.split(' ')[4]
                plco.plot.helpers.qqplotHoverTooltip(
                    div,
                    div_id,
                    eventdata.points[0].hovertemplate + '<br>Info:<br><a href="https://www.ncbi.nlm.nih.gov/snp/' +
                    resSnp + '">' + resSnp + '</a>',
                    ['#9BC4DE']
                )
            })
        }
        plco.addDownloadLink(div_id,
            () => plco.plot.manhattan(div_id, phenotype_id, sex, ancestry, p_value_nlog_min,
                chromosome, true, customLayout, customConfig))
        return div
    } else {
        //let tracesString = '{"traces":' + JSON.stringify(traces) + ','
        //let layoutString = '"layout":' + JSON.stringify(layout) + ','
        //let configString = '"config":' + JSON.stringify(config) + '}'
        //return tracesString + layoutString + configString
        return {
            traces:traces,
            layout:layout,
            config:config
        }
    }
}

/**
 * Generates a Plotly manhattan plot at the given div element with support for multiple inputs.
 * @param {string} div_id The id of the div element. If it does not exist, a new div will be created.
 * @param {Array} arrayOfObjects Accepts an array of objects containing the following keys: phenotype_id, sex, ancestry.
 * @param {number}  [p_value_nlog_min=2] A numeric value >= 0 specifying the minimum -log10(p) for variants.
 * @param {number} [chromosome=undefined] _Optional_. Leave it undefined to plot all chromosomes. Else use an integer [1-22].
 * @param {boolean} [to_json=false] _Optional_ If true, returns a stringified JSON object containing traces and layout.
 * If false, returns a div element containing the Plotly graph.
 * @param {object} [customLayout={}] _Optional_. Contains Plotly supported layout key-values pair that will overwrite the default layout. Commonly overwritten values may include height and width of the graph. See: https://plotly.com/javascript/reference/layout/ for more details. Also, set `to_json` to true to see what the default layout is.
 * @param {object} [customConfig={}] _Optional_. Contains Plotly supported config key-values pair that will overwrite the default config. See: https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js#L22-L86 for full details.
 * @returns A div element or a string if 'to_json' is true.
 * @example
 * await plco.plot.manhattan2('plot', [{phenotype_id: 3080, ancestry: 'european', sex: 'female'},{phenotype_id: 3080, ancestry: 'east_asian', sex: 'female'}])
 */
plco.plot.manhattan2 = async (
    div_id,
    arrayOfObjects,
    p_value_nlog_min = 2,
    chromosome,
    to_json = false,
    customLayout = {},
    customConfig = {},
) => {
    const validObjects = await plco.plot.helpers.validateInputs(arrayOfObjects)

    if (validObjects.length < 2) throw new Error('Incorrect number of arguments.')

    let div = document.getElementById(div_id)
    if (div === null && !to_json) {
        div = document.createElement('div')
        div.id = div_id
        document.body.appendChild(div)
    }

    let [inputData1, inputData2] = await Promise.all([
        plco.api.summary(Object.assign(validObjects[0], { p_value_nlog_min })),
        plco.api.summary(Object.assign(validObjects[1], { p_value_nlog_min }))
    ])

    let chromosomeName
    let numberOfChromosomes
    if (chromosome) {
        inputData1 = inputData1.data.filter(x => x.chromosome == "" + chromosome)
        inputData2 = inputData2.data.filter(x => x.chromosome == "" + chromosome)
        chromosomeName = 'Chromosome ' + chromosome
        numberOfChromosomes = 1
    } else {
        inputData1 = inputData1.data
        inputData2 = inputData2.data
        chromosomeName = 'All Chromosomes'
        numberOfChromosomes = 22
    }

    let rsNumbers1 = []
    let rsNumbers2 = []
    if (numberOfChromosomes === 1) {
        const promises = []
        validObjects.forEach((metadataObj) => {
            const { phenotype_id, sex, ancestry } = metadataObj
            promises.push(plco.api.variants(
                { p_value_nlog_min, orderBy: 'id', order: 'asc' }, phenotype_id, sex, ancestry, chromosome))
        })
        const resultsOfPromises = await Promise.all(promises) // huge bottleneck
        resultsOfPromises.forEach((arr, index) => {
            if (index === 0)
                arr.data.forEach(x => rsNumbers1.push({
                    snp: x.snp, position_abs: x.position, p_value_nlog: x.p_value_nlog, chromosome: x.chromosome
                }))
            else
                arr.data.forEach(x => rsNumbers2.push({
                    snp: x.snp, position_abs: x.position, p_value_nlog: x.p_value_nlog, chromosome: x.chromosome
                }))
        })
    }

    // Set up traces
    let traces = []
    let traces2nd = []
    let currentChromosome
    let maxYInTraces = p_value_nlog_min
    let largestYOne = p_value_nlog_min
    let largestYTwo = p_value_nlog_min

    const createTrace = (inputData, isFirst, currentChromosome) => {
        let index = isFirst ? 0 : 1
        currentChromosomeData = inputData.filter(x => x.chromosome == "" + currentChromosome)
        const traceInfo = {
            x: currentChromosomeData.map(x => parseInt(x.position_abs)),
            y: currentChromosomeData.map(x => parseFloat(x.p_value_nlog)),
            mode: 'markers',
            type: 'scattergl',
            marker: {
                opacity: 0.65,
                size: 5,
            },
            name: 'Chromosome ' + currentChromosome +
                ('<br>' + validObjects[index].phenotype_id + '<br>' + validObjects[index].ancestry),
            // appears as legend item
            hovertemplate: currentChromosomeData.map(x =>
                'absolute position: ' + parseInt(x.position_abs) +
                '<br>p-value: ' + Math.pow(10, -x.p_value_nlog)
            )
        }

        if (!isFirst) {
            traceInfo.xaxis = 'x'
            traceInfo.yaxis = 'y2'
        }

        if (isFirst) {
            largestYOne = traceInfo.y.reduce((max, cur) => cur > max ? cur : max, largestYOne)
        } else {
            largestYTwo = traceInfo.y.reduce((max, cur) => cur > max ? cur : max, largestYTwo)
        }
        return traceInfo
    }

    for (i = 1; i <= numberOfChromosomes; i++) {
        if (numberOfChromosomes == 1)
            currentChromosome = chromosome
        else
            currentChromosome = i

        traces.push({
            ...createTrace(numberOfChromosomes == 1 ? rsNumbers1 : inputData1, true, currentChromosome),
            marker: {
                opacity: 0.65,
                size: 5,
                color: i % 2 === 1 ? '#FF0000' : '#800000',
            },
        })
        traces2nd.push({
            ...createTrace(numberOfChromosomes == 1 ? rsNumbers2 : inputData2, false, currentChromosome),
            marker: {
                opacity: 0.65,
                size: 5,
                color: i % 2 === 1 ? '#5A26FF' : '#1B0071',
            },
        })
    }

    traces = traces.concat(traces2nd)

    if (numberOfChromosomes == 1) {
        for (let tracesNum = 0; tracesNum <= 1; tracesNum++) {
            for (i = 0; i < traces[tracesNum].hovertemplate.length; i++) {
                if (tracesNum === 0)
                    traces[tracesNum].hovertemplate[i] += '<br>snp: ' + rsNumbers1[i].snp
                else
                    traces[tracesNum].hovertemplate[i] += '<br>snp: ' + rsNumbers2[i].snp
            }
        }
    }

    maxYInTraces = largestYOne > largestYTwo ? largestYOne : largestYTwo

    let layout = {
        title: 'SNPs in ' + chromosomeName,
        xaxis: {
            title: 'absolute position',
            showgrid: false,
            tickfont: {
                color: 'black',
                size: 15
            },
        },
        yaxis: {
            title: '-log<sub>10</sub>(p)',
        },
        yaxis2: {
            range: [maxYInTraces, p_value_nlog_min],
        },
        hovermode: 'closest',
        height: 700,
        width: 1200,
        grid: {
            rows: 2,
            columns: 1,
            subplots: [['xy2'], ['xy']],
            roworder: 'bottom to top',
            ygap: 0.05,
        },
        plot_bgcolor: '#fff',
        colorway: ['#f3cec9', '#e7a4b6', '#cd7eaf', '#a262a9', '#6f4d96', '#3d3b72', '#182844'],
        updatemenus: [{
            y: 1.0,
            yanchor: 'top',
            buttons: [
                {
                    method: 'relayout',
                    args: ['yaxis.range', [2, largestYOne]],
                    label: '2 (default)'
                },
                {
                    method: 'relayout',
                    args: ['yaxis.range', [4, largestYOne]],
                    label: '4'
                },
                {
                    method: 'relayout',
                    args: ['yaxis.range', [6, largestYOne]],
                    label: '6'
                },
                {
                    method: 'relayout',
                    args: ['yaxis.range', (largestYOne > 8 ? [8, largestYOne] : [largestYOne, 8])],
                    label: '8+'
                }
            ]
        }, {
            y: 0.6,
            yanchor: 'top',
            buttons: [
                {
                    method: 'relayout',
                    args: ['yaxis2.range', [largestYTwo, 2]],
                    label: '2 (default)'
                },
                {
                    method: 'relayout',
                    args: ['yaxis2.range', [largestYTwo, 4]],
                    label: '4'
                },
                {
                    method: 'relayout',
                    args: ['yaxis2.range', [largestYTwo, 6]],
                    label: '6'
                },
                {
                    method: 'relayout',
                    args: ['yaxis2.range', (largestYTwo > 8 ? [largestYTwo, 8] : [8, largestYTwo])],
                    label: '8+'
                }
            ]
        }],
        ...customLayout,
    }

    let config = {
        scrollZoom: true,
        responsive: true,
        ...customConfig,
    }

    if (!to_json) {
        const oldCheckbox = document.getElementById(div_id + 'checkbox')
        if (oldCheckbox) oldCheckbox.remove()

        const oldLabel = document.getElementById(div_id + 'label')
        if (oldLabel) oldLabel.remove()

        plco.Plotly.newPlot(div, traces, layout, config)

        let selector = document.getElementById(div_id + 'selector')
        if (selector) selector.remove()
        selector = document.createElement('select')
        selector.id = div_id + 'selector'


        let label = document.getElementById(div_id + 'label')
        if (label) label.remove()
        label = document.createElement('label')
        label.for = div_id + 'selector'
        label.id = div_id + 'label'
        label.innerHTML = 'View a single chromosome'

        selector.onchange = async (event) => {
            label.remove()
            selector.remove()
            plco.plot.helpers.addLoaderDiv(div, async () =>
                await plco.plot.manhattan2(div_id, arrayOfObjects, p_value_nlog_min, event.target.value,
                    to_json, customLayout, customConfig))
        }
        for (let i = 0; i <= 22; i++) {
            if (i === 0) {
                const optblank = document.createElement('option')
                optblank.value = ''
                optblank.innerHTML = ' '
                selector.appendChild(optblank)

                const opt = document.createElement('option')
                opt.value = ''
                opt.innerHTML = 'All'
                selector.appendChild(opt)
            } else {
                const opt = document.createElement('option')
                opt.value = i
                opt.innerHTML = i
                selector.appendChild(opt)
            }
        }
        div.appendChild(selector)
        div.appendChild(label)

        if (numberOfChromosomes === 1) {
            div.on('plotly_click', eventdata => {
                let resSnp = eventdata.points[0].hovertemplate.split(' ')[4]
                plco.plot.helpers.qqplotHoverTooltip(
                    div,
                    div_id,
                    eventdata.points[0].hovertemplate +
                    '<br>Info:<br><a href="https://www.ncbi.nlm.nih.gov/snp/' + resSnp + '">' + resSnp + '</a>',
                    [eventdata.points[0].data.marker.color]
                )
            })
        }
        plco.addDownloadLink(div_id,
            () => plco.plot.manhattan2(div_id, arrayOfObjects, p_value_nlog_min,
                chromosome, true, customLayout, customConfig))
        return div
    } else {
        //let tracesString = '{"traces":' + JSON.stringify(traces) + ','
        //let layoutString = '"layout":' + JSON.stringify(layout) + ','
        //let configString = '"config":' + JSON.stringify(config) + '}'
        //return tracesString + layoutString + configString
        return {
            traces:traces,
            layout:layout,
            config:config
        }
    }
}


/**
 * Generates a Plotly quartile-quartile plot at the given div element with support for a single input.
 * @param {string} div_id The id of the div element, if it does not exist, a new div will be created.
 * @param {number} [phenotype_id=3080] A phenotype id.
 * @param {string} [sex=female] A sex, which may be "all", "female", or "male".
 * @param {string} [ancestry=east_asian] A character vector specifying ancestries to retrieve data for.
 * @param {boolean} [to_json=false] _Optional_. If true, returns a stringified JSON object containing traces and layout.
 * Else, returns a div element containing the Plotly graph.
 * @param {object} [customLayout={}] _Optional_. Contains Plotly supported layout key-values pair that will overwrite the default layout. Commonly overwritten values may include height and width of the graph. See: https://plotly.com/javascript/reference/layout/ for more details. Also, set `to_json` to true to see what the default layout is.
 * @param {object} [customConfig={}] _Optional_. Contains Plotly supported config key-values pair that will overwrite the default config. See: https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js#L22-L86 for full details.
 * @returns A div element or a string if `to_json` is true.
 * @example
 * await plco.plot.qq('plot', 3080, 'female', 'east_asian')
 */
plco.plot.qq = async (
    div_id,
    phenotype_id = 3080,
    sex = 'female',
    ancestry = 'east_asian',
    to_json = false,
    customLayout = {},
    customConfig = {},
) => {
    /**
     * @type {Array<object>} Each object in the array has the properties defined below.
     * @prop {integer} id
     * @prop {integer} phenotype_id
     * @prop {string} phenotype_name
     * @prop {string} phenotype_display_name
     * @prop {string} sex
     * @prop {string} ancestry
     * @prop {string} chromosome
     * @prop {number} lambda_gc
     * @prop {number} lambda_gc_ld_score
     * @prop {integer} count
     */
    const metadata = (await plco.plot.helpers.validateInputs([{ phenotype_id, sex, ancestry }]))[0]

    if (metadata === undefined || metadata['count'] === null) {
        throw new Error('No data found for this combination of sex and/or ancestry.')
    }

    /**
     * @type {object} Object with the following props:
     * @prop {Array<object>} data
     * @prop {Array<string>} columns
     */
    const points = await plco.api.points({}, phenotype_id, sex, ancestry)

    let div = document.getElementById(div_id)

    if (div === null && !to_json) {
        div = document.createElement('div')
        div.id = div_id
        document.body.appendChild(div)
    }

    const trace = {
        x: points.data.map(p => p.p_value_nlog_expected),
        y: points.data.map(p => p.p_value_nlog),
        type: 'scattergl',
        mode: 'markers',
        marker: {
            color: '#A71515',
            size: 4,
            opacity: 0.75
        },
        // customdata is an array containing more data on each of the individual point corresponding to indices of x
        // this is useful later with the onClick event
        customdata: points.data.map((point) => ({
            phenotype_id,
            sex,
            ancestry,
            variantId: point['id'],
            p: Math.pow(10, -point['p_value_nlog']),
        })),
        text: points.data.map(point =>
            'Variant Id: ' + point['id'] +
            '<br>p-value: ' + Math.pow(10, -point['p_value_nlog']) +
            '<br>Click to learn more.'),
        hoverinfo: 'text+x+y+name',
        name: `${metadata.phenotype_display_name}, ${sex}, ${ancestry}`,
    }

    const max = points.data.reduce(
        (max, cur) => cur.p_value_nlog_expected > max ? cur.p_value_nlog_expected : max, 0)

    const traceLine = {
        x: [0, max],
        y: [0, max],
        type: 'scattergl', // scattergl seems to load faster than scatter, else no major diff
        mode: 'line',
        marker: {
            color: '#BBB',
            opacity: 0.4,
            size: 0.1,
        },
        hoverinfo: 'none',
        showlegend: false,
    }

    const layout = {
        hoverlabel: {
            bgcolor: '#FFF',
            bordercolor: '#BBB',
            font: {
                size: 14,
                color: '#212529',
            }
        },
        width: 750,
        height: 750,
        title: {
            text:
                `\u03BB (median) = ${metadata['lambda_gc']} <b>|</b>` +
                `\u03BB (LD score) = ${metadata['lambda_gc_ld_score']} <b>|</b> ` +
                `Number of variants = ${metadata['count']}`,
            font: {
                size: 14,
                color: 'black'
            }
        },
        xaxis: {
            automargin: true,
            rangemode: 'tozero',
            showgrid: false,
            fixedrange: false,
            title: {
                text: '<b>Expected -log<sub>10</sub>(p)</b>',
                font: {
                    size: 15,
                    color: 'black'
                }
            },
            ticklen: 10, // Length of the tick marks on the x-axis
            tickwidth: 1,
            dtick: 0.5,
            tickfont: {
                size: 12,
                color: 'black'
            }
        },
        yaxis: {
            automargin: true,
            rangemode: 'tozero',
            showgrid: true,
            fixedrange: false,
            title: {
                text: '<b>Observed -log<sub>10</sub>(p)</b>',
                font: {
                    size: 15,
                    color: 'black'
                }
            },
            ticklen: 10, // Length of the tick marks on the y-axis
            tickwidth: 1,
            dtick: 0.5,
            tickfont: {
                size: 12,
                color: 'black'
            }
        },
        clickmode: 'event',
        hovermode: 'closest', // When a point is hovered, it will display their (x, y) coordinate
        dragmode: 'pan',
        showlegend: false,
        ...customLayout
    }

    const config = {
        scrollZoom: true,
        displaylogo: false,
        modeBarButtonsToRemove: [
            'lasso2d',
            'select2d',
            'toggleSpikelines',
            'autoScale2d',
            'hoverCompareCartesian',
            'hoverClosestCartesian',
        ],
        ...customConfig
    }

    if (!to_json) {
        plco.Plotly.newPlot(div, [traceLine, trace], layout, config)

        div.on('plotly_click', async (data) => {
            console.log(data) // contains the custom data

            // An array
            const { points } = data

            for (let i = 0; i < points.length; i++) {
                try {
                    const res = await plco.api.get('variants', {
                        id: points[i].customdata.variantId,
                        phenotype_id,
                        sex,
                        ancestry,
                        columns: 'chromosome,position,snp',
                    })
                    const { chromosome: resChromosome, position: resPosition, snp: resSnp } = res.data[0]
                    let updatedText = points[i].data.text.slice()
                    let filteredText = updatedText[points[i].pointIndex].substring(0, updatedText[points[i].pointIndex].indexOf('Click'))
                    updatedText[points[i].pointIndex] = filteredText + `<br>Chromosome: ${resChromosome} <br>` +
                        `Position: ${resPosition} <br> SNP: ${resSnp}`

                    plco.plot.helpers.qqplotHoverTooltip(
                        div,
                        div_id,
                        filteredText + `Chromosome: ${resChromosome} <br>` +
                        `Position: ${resPosition} <br> SNP: ${resSnp}` +
                        '<br><a href="https://www.ncbi.nlm.nih.gov/snp/' + resSnp + '">' + 'Learn more at dbSNP: ' +
                        resSnp + '</a>',
                        ['#d3d3d3']
                    )
                    plco.Plotly.restyle(div, { text: [updatedText] }, [1])
                } catch (e) {
                    console.error(e)
                }
            }
        })
        plco.addDownloadLink(div_id,
            () => plco.plot.qq(div_id, phenotype_id, sex, ancestry, true, customLayout, customConfig))
        return div
    } else {
        const tracesString = '{"traces":' + JSON.stringify([traceLine, trace]) + ','
        const layoutString = '"layout":' + JSON.stringify(layout) + ','
        const configString = '"config":' + JSON.stringify(config) + '}'
        return tracesString + layoutString + configString
        /*
        return {
            traces:traces,
            layout:layout,
            config:config
        }
        */
    }
}

/**
 * Generates a Plotly quartile-quartile plot at the given div element with support for multiple inputs. 
 * @param {string} div_id The id of the div element, if it does not exist, a new div will be created.
 * @param {Array} arrayOfObjects Accepts an array of objects containing the following keys: phenotype_id, sex, ancestry.
 * @param {boolean} [to_json=false] _Optional_. If true, returns a stringified JSON object containing traces and layout.
 * Else, returns a div element containing the Plotly graph.
 * @param {object} [customLayout={}] _Optional_. Contains Plotly supported layout key-values pair that will overwrite the default layout. Commonly overwritten values may include height and width of the graph. See: https://plotly.com/javascript/reference/layout/ for more details. Also, set `to_json` to true to see what the default layout is.
 * @param {object} [customConfig={}] _Optional_. Contains Plotly supported config key-values pair that will overwrite the default config. See: https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js#L22-L86 for full details.
 * @returns A div element or a string if `to_json` is true.
 * @example
 * await plco.plot.qq2('plot', [{phenotype_id:3080, sex:'female', ancestry:'east_asian'}, {phenotype_id:3080, sex:'female', ancestry:'european'}, {phenotype_id: 3550, sex:'all', ancestry:'east_asian'}]) 
 */
plco.plot.qq2 = (
    div_id,
    arrayOfObjects = [],
    to_json = false,
    customLayout = {},
    customConfig = {},
) => {
    const promises = []
    arrayOfObjects.forEach((obj) => {
        const { phenotype_id, sex, ancestry } = obj
        if (!phenotype_id || !sex || !ancestry) {
            console.error('An object is missing mandatory fields, skipping ...')
            return
        } else {
            promises.push(
                plco.plot.qq('', phenotype_id, sex, ancestry, true)
                    .catch(() => {
                        console.error('Unable to fetch data, skipping...')
                        return undefined
                    })
            )
        }
    })

    /**
     * @type {Array<object>} Each object has the following props:
     * @prop {Array<object>} traces
     * @prop {object} layout
     */
    return Promise.all(promises)
        .then((_) => _.filter(Boolean)) // Filters out all undefined and null
        .then((arrayOfJsonStr) => arrayOfJsonStr.map((str) => JSON.parse(str)))
        .then((arrayOfJson) => {
            if (arrayOfJson.length === 0) return

            const colors = ['#01A5E4', '#FFBF65', '#FF5768', '#8DD7C0', '#FF96C6']

            let div = document.getElementById(div_id)
            if (div === null && !to_json) {
                div = document.createElement('div')
                div.id = div_id
                document.body.appendChild(div)
            }

            const traces = [arrayOfJson[0].traces[0]]

            arrayOfJson.forEach((obj, index) => {
                traces.push({
                    ...obj.traces[1],
                    marker: {
                        color: colors[index % colors.length],
                        size: 4,
                        opacity: 0.6
                    },
                })
            })

            const layout = {
                ...arrayOfJson[0].layout,
                showlegend: true,
                width: 900,
                height: 900,
                hoverlabel: {
                },
                title: {
                    text: arrayOfJson.reduce((word, cur, index) =>
                        word + traces[index + 1].name + ' ' + cur.layout.title.text + '<br>', ''),
                    font: {
                        size: 12,
                        color: 'black'
                    }
                },
                ...customLayout
            }

            const config = {
                scrollZoom: true,
                displaylogo: false,
                modeBarButtonsToRemove: [
                    'lasso2d',
                    'select2d',
                    'toggleSpikelines',
                    'autoScale2d',
                    'hoverCompareCartesian',
                    'hoverClosestCartesian',
                ],
                ...customConfig
            }

            if (!to_json) {
                plco.Plotly.newPlot(div, traces, layout, config)
                div.on('plotly_click', async (data) => {
                    console.log(data) // contains the custom data

                    // An array
                    const { points } = data

                    for (let i = 0; i < points.length; i++) {
                        try {
                            const { variantId: id, phenotype_id, sex, ancestry } = points[i].customdata
                            const res = await plco.api.get('variants', {
                                id,
                                phenotype_id,
                                sex,
                                ancestry,
                                columns: 'chromosome,position,snp',
                            })
                            const { chromosome: resChromosome, position: resPosition, snp: resSnp } = res.data[0]
                            let updatedText = points[i].data.text.slice()
                            let filteredText = updatedText[points[i].pointIndex].substring(0, updatedText[points[i].pointIndex].indexOf('Click'))
                            updatedText[points[i].pointIndex] = filteredText + `<br>Chromosome: ${resChromosome} <br>` +
                                `Position: ${resPosition} <br> SNP: ${resSnp}`

                            plco.plot.helpers.qqplotHoverTooltip(
                                div,
                                div_id,
                                filteredText + `Chromosome: ${resChromosome} <br>` +
                                `Position: ${resPosition} <br> SNP: ${resSnp}` +
                                '<br><a href="https://www.ncbi.nlm.nih.gov/snp/' + resSnp + '">' + resSnp + '</a>',
                                colors,
                                points[i].curveNumber
                            )
                            plco.Plotly.restyle(div, { text: [updatedText] }, [points[i].curveNumber])
                        } catch (e) {
                            console.error(e)
                        }
                    }
                })
                plco.addDownloadLink(div_id,
                    () => plco.plot.qq2(div_id, arrayOfObjects, true, customLayout, customConfig))
                return div
            } else {
                //const tracesString = '{"traces":' + JSON.stringify(traces) + ','
                //const layoutString = '"layout":' + JSON.stringify(layout) + ','
                //const configString = '"config":' + JSON.stringify(config) + '}'
                //return tracesString + layoutString + configString
                return {
                    traces:traces,
                    layout:layout,
                    config:config
                }
            }
        })
}

/**
 * Generates a Plotly PCA plot at the given div element with support for a single input.
 * @param {string} div_id The id of the div element, if it does not exist, a new div will be created.
 * @param {number} phenotype_id A phenotype id.
 * @param {string} sex A sex, which may be "all", "female", or "male".
 * @param {string} ancestry A character vector specifying ancestries to retrieve data for.
 * @param {boolean} [to_json=false] _Optional_. If true, returns a stringified JSON object containing traces and layout.
 * Else, returns a div element containing the Plotly graph.
 * @param {object} [customLayout={}] _Optional_. Contains Plotly supported layout key-values pair that will overwrite the default layout. Commonly overwritten values may include height and width of the graph. See: https://plotly.com/javascript/reference/layout/ for more details. Also, set `to_json` to true to see what the default layout is.
 * @param {object} [customConfig={}] _Optional_. Contains Plotly supported config key-values pair that will overwrite the default config. See: https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js#L22-L86 for full details.
 * @returns A div element or a string if `to_json` is true.
 * @example
 * await plco.plot.pca('plot', 3080, 'female', 'east_asian')
 */
plco.plot.pca = async (
    div_id,
    phenotype_id,
    sex,
    ancestry,
    to_json = false,
    customLayout = {},
    customConfig = {}
) => {
    return await plco.plot.pca2(div_id, [{ phenotype_id, sex, ancestry }], to_json, customLayout, customConfig)
}

/**
 * Generates a Plotly PCA plot at the given div element with support for multiple inputs.
 * @param {string} div_id The id of the div element, if it does not exist, a new div will be created.
 * @param {Array} arrayOfObjects Accepts an array of objects containing the following keys: phenotype_id, sex, ancestry.
 * @param {boolean} [to_json=false] _Optional_. If true, returns a stringified JSON object containing traces and layout.
 * Else, returns a div element containing the Plotly graph.
 * @param {object} [customLayout={}] _Optional_. Contains Plotly supported layout key-values pair that will overwrite the default layout. Commonly overwritten values may include height and width of the graph. See: https://plotly.com/javascript/reference/layout/ for more details. Also, set `to_json` to true to see what the default layout is.
 * @param {object} [customConfig={}] _Optional_. Contains Plotly supported config key-values pair that will overwrite the default config. See: https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js#L22-L86 for full details.
 * @returns A div element or a string if `to_json` is true.
 * @example
 * await plco.plot.pca2('plot', [{phenotype_id: 3080, sex: 'female', ancestry: 'east_asian'}, {phenotype_id: 3080, sex: 'female', ancestry: 'european'}])
 */
plco.plot.pca2 = async (
    div_id,
    arrayOfObjects,
    to_json = false,
    customLayout = {},
    customConfig = {}
) => {
    let pc_x = 1
    let pc_y = 2

    /**
     * Metadata
     * @type {Array<object>} Each object in the array has the properties defined below.
     * @prop {integer} id
     * @prop {integer} phenotype_id
     * @prop {string} phenotype_name
     * @prop {string} phenotype_display_name
     * @prop {string} sex
     * @prop {string} ancestry
     * @prop {string} chromosome
     * @prop {number} lambda_gc
     * @prop {number} lambda_gc_ld_score
     * @prop {integer} count
     */

    /**
     * PCA
     * @type {object}
     * @prop {Array} columns 
     * @prop {Array} data - `data` is an array of object that has the following props: 
     * pc_x, pc_y, ancestry, sex, value
     */

    let div = document.getElementById(div_id)

    if (div === null && !to_json) {
        div = document.createElement('div')
        div.id = div_id
        document.body.appendChild(div)
    }

    // Other are the points that do not share the inputted ancestry or sex or value == null
    // Control are the same ancestry and sex, but value == null or 0
    // Cases are the same ancestry and sex, but value != null and != 0

    const traces = await plco.plot.helpers.pcaHelper(arrayOfObjects, 'PLCO_GSA', 1, 2)

    const layout = {
        hovermode: 'closest',
        dragmode: 'pan',
        clickmode: 'event',
        width: 800,
        height: 800,
        autosize: true,
        xaxis: {
            automargin: true,
            showgrid: false,
            title: {
                text: `<b>PC-X ${(pc_x || '1')}</b>`,
                font: {
                    size: 14,
                    color: 'black'
                }
            },
            tick0: 0,
            ticklen: 10,
            tickfont: {
                size: 10,
                color: 'black'
            }
        },
        yaxis: {
            automargin: true,
            showgrid: false,
            title: {
                text: `<b>PC-Y ${(pc_y || '2')}</b>`,
                font: {
                    size: 14,
                    color: 'black'
                }
            },
            tick0: 0,
            ticklen: 10,
            tickfont: {
                size: 10,
                color: 'black'
            }
        },
        showlegend: true,
        legend: {
            title: {
                font: {
                    size: 12,
                    color: 'grey'
                }
            },
            itemdoubleclick: false,
            orientation: 'v',
            x: 0.0,
            y: 1.2
        },
        ...customLayout,
    }

    const config = {
        scrollZoom: true,
        responsive: true,
        toImageButtonOptions: {
            format: 'svg',
            filename: 'pca_plot',
            height: 1000,
            width: 1000,
            scale: 1
        },
        displaylogo: false,
        modeBarButtonsToRemove: [
            'select2d',
            'autoScale2d',
            'hoverClosestCartesian',
            'hoverCompareCartesian',
            'lasso2d',
            'toggleSpikelines',
        ],
        ...customConfig,
    }

    const dropdownLayout = await plco.plot.helpers.pcaCreateDropdownLayout(arrayOfObjects, 1, 2)

    if (!to_json) {
        plco.Plotly.newPlot(div, traces, Object.assign(layout, dropdownLayout), config)
        plco.plot.helpers.pcaGenerateXYInputs(div_id, arrayOfObjects, layout, config)
        plco.addDownloadLink(div_id,
            () => plco.plot.pca2(div_id, arrayOfObjects, true, customLayout, customConfig))
        return div
    } else {
        //const tracesString = '{"traces":' + JSON.stringify(traces) + ','
        //const layoutString = '"layout":' + JSON.stringify(Object.assign(layout, dropdownLayout)) + ','
        //const configString = '"config":' + JSON.stringify(config) + '}'
        //return tracesString + layoutString + configString
        return {
            traces:traces,
            layout:Object.assign(layout, dropdownLayout),
            config:config
        }
    }
}

/**
 * Generates a Plotly barchart showing the breakdown of participants by gender and ancestry for that phenotype.
 * @param {string} div_id The id of the div element, if it does not exist, a new div will be created. 
 * @param {number} phenotype_id A phenotype id.
 * @param {boolean} [to_json=false] _Optional_. If true, returns a stringified JSON object containing traces and layout.
 * Else, returns a div element containing the Plotly graph.
 * @param {object} [customLayout={}] _Optional_. Contains Plotly supported layout key-values pair that will overwrite the default layout. Commonly overwritten values may include height and width of the graph. See: https://plotly.com/javascript/reference/layout/ for more details. Also, set `to_json` to true to see what the default layout is.
 * @param {object} [customConfig={}] _Optional_. Contains Plotly supported config key-values pair that will overwrite the default config. See: https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js#L22-L86 for full details.
 * @returns A div element or a string if `to_json` is true.
 */
plco.plot.barchart = async (
    div_id,
    phenotype_id,
    to_json = false,
    customLayout = {},
    customConfig = {}
) => {
    const [uniqueValues, participantData] = await Promise.all([
        plco.api.participants({}, phenotype_id, 'value', 0).then(res => res.data),
        plco.api.participants({}, phenotype_id, 'value,ancestry,sex', 0).then(res => res.data)
    ])

    const traces = []
    uniqueValues.forEach(({ value }, index) => {
        for (let sex of ['male', 'female']) {
            const filteredArray = participantData.filter(partObj =>
                partObj.value === value && partObj.sex === sex && partObj.ancestry != null)

            if (filteredArray.length > 0) {
                if (index != 0)
                    traces.push({
                        x: filteredArray.map(partObj => partObj.ancestry),
                        y: filteredArray.map(partObj =>
                            isNaN(Number.parseInt(partObj.counts)) ? 10 : Number.parseInt(partObj.counts)),
                        xaxis: `x${index + 1}`,
                        yaxis: `y${index + 1}`,
                        type: 'bar',
                        name: value + ', ' + sex
                    })
                else
                    traces.push({
                        x: filteredArray.map(partObj => partObj.ancestry),
                        y: filteredArray.map(partObj =>
                            isNaN(Number.parseInt(partObj.counts)) ? 10 : Number.parseInt(partObj.counts)),
                        type: 'bar',
                        name: value + ', ' + sex
                    })
            }
        }
    })

    const layout = {
        grid: { rows: uniqueValues.length, columns: 1, pattern: 'independent' },
        height: 800,
        dragmode: 'pan',
        barmode: 'group',
        title: {
            text: 'Frequency of partipicants by ancestry and sex',
            font: {
                size: 21,
                color: 'black'
            },
        },
        xaxis: {
            showgrid: false,
            title: {
                text: 'Ancestry',
                font: {
                    size: 15,
                    color: 'black'
                },
            },
        },
        yaxis: {
            showgrid: true,
            title: {
                text: 'Number of participants',
                font: {
                    size: 15,
                    color: 'black'
                },
            },
        },
        showlegend: true,
        legend: {
            x: 1,
            xanchor: 'right',
            y: 1
        },
        ...customLayout,
    }

    for (let i = 1; i < uniqueValues.length; i++) {
        layout[`xaxis${i + 1}`] = {
            title: 'Ancestry',
            font: {
                size: 15,
                color: 'black'
            },
        }
        layout[`yaxis${i + 1}`] = {
            title: 'Number of participants',
            font: {
                size: 15,
                color: 'black'
            },
        }
    }

    const config = {
        scrollZoom: true,
        responsive: true,
        ...customConfig,
    }

    if (!to_json) {
        let div = document.getElementById(div_id)
        if (div === null && !to_json) {
            div = document.createElement('div')
            div.id = div_id
            document.body.appendChild(div)
        }

        plco.Plotly.newPlot(div, traces, layout, config)
        return div
    } else {
        //const tracesString = '{"traces":' + JSON.stringify(traces) + ','
        //const layoutString = '"layout":' + JSON.stringify(layout) + ','
        //const configString = '"config":' + JSON.stringify(config) + '}'
        //return tracesString + layoutString + configString
        return {
            traces:traces,
            layout:layout,
            config:config
        }
    }
}

/**
 * A collection of helper methods for plotting, not intended to be used on its own.
 * @memberof plco.plot
 */
plco.plot.helpers = {}

plco.plot.helpers.addLoaderDiv = async (div, f) => {
    const tempDiv = document.createElement('div')
    tempDiv.classList.add('loader')

    let top = div.getBoundingClientRect().top + window.pageYOffset - div.ownerDocument.documentElement.clientTop
    tempDiv.style.top = `${top}px`

    document.body.appendChild(tempDiv)
    div.style = 'display: none;'
    await (f())
    tempDiv.remove()
    div.style = ''
}

plco.plot.helpers.qqplotHoverTooltip = (div, div_id, text, colors, curveNumber = 1) => {
    let top = div.getBoundingClientRect().top + window.pageYOffset - div.ownerDocument.documentElement.clientTop

    let randint = Math.round(Math.random() * 1000)
    let hoverDiv = document.getElementById(div_id + 'hoverdiv' + randint)
    if (!hoverDiv) {
        hoverDiv = document.createElement('div')
        hoverDiv.id = div_id + 'hoverdiv' + randint
        div.appendChild(hoverDiv)
    }
    hoverDiv.innerHTML = text
    hoverDiv.style =
        `position:absolute;top:${top}px;left:40%;z-index:10;background-color:${colors[(curveNumber - 1) % colors.length]};` +
        `text-align:center; border: 1px solid #000; cursor:move; padding:10px; font-size: 0.7rem;`
    hoverDiv.className = 'plotHoverDivs'

    let closeButton = document.createElement('button')
    closeButton.addEventListener('click', function () { this.parentElement.remove() })
    closeButton.id = div_id + 'closeButton' + randint
    closeButton.innerHTML = 'Close'
    closeButton.style = 'display:block;'
    hoverDiv.appendChild(closeButton)

    hoverDiv.addEventListener('mousedown', e => {
        down = true
        startX = e.clientX // global vars
        startY = e.clientY // global vars
    })

    hoverDiv.addEventListener('mouseup', e => {
        down = false
    })

    hoverDiv.addEventListener('mousemove', e => {
        try {
            if (down) {
                hoverDiv.style.left = hoverDiv.offsetLeft - (startX - e.clientX) + 'px'
                hoverDiv.style.top = hoverDiv.offsetTop - (startY - e.clientY) + 'px'

                startX = e.clientX // global vars
                startY = e.clientY // global vars
            }
        } catch (e) {
            down = false
        }
    })
}

plco.plot.helpers.validateInputs = async (
    arrayOfObjects = []
) => {
    const promises = []
    arrayOfObjects.forEach(({ phenotype_id, sex, ancestry }) => {
        if (phenotype_id && sex && ancestry) {
            promises.push(
                plco.api.metadata({ chromosome: 'all' }, phenotype_id, sex, ancestry)
                    .then(array => array[0])
                    .then(metadata => {
                        if (metadata === undefined || metadata['count'] === null) {
                            throw new Error('No data found for this combination of sex and/or ancestry.')
                        } else
                            return metadata
                    })
                    .catch(() => {
                        console.error('Unable to fetch data, skipping...')
                        return undefined
                    })
            )
        }
    })

    return (await Promise.all(promises)).filter(Boolean)
}

plco.plot.helpers.pcaGenerateTraces = async (
    validArray,
    platform,
    pc_x,
    pc_y
) => {
    // [light, dark]
    const colors = [['#FF626F', '#B2444D'], ['#FFD5A6', '#CCAA84'],
    ['#8DD7C0', '#6BA392'], ['#01A7FF', '#0085CC']]

    const pcaPromises = []
    validArray.forEach((obj) =>
        pcaPromises.push(
            plco.api.pca({}, obj.phenotype_id, platform, pc_x, pc_y)
        )
    )
    // Pca [] should have a one-to-one correspondence with validArray []
    const pcadatas = await Promise.all(pcaPromises).catch(() => [])

    if (pcadatas.length === 0) return []

    const baseTrace = {
        type: 'scattergl',
        hoverinfo: 'x+y',
        showlegend: true,
        mode: 'markers',
    }
    const traces = []
    const otherTraces = []

    pcadatas.forEach((item, index) => {
        try {
            // Create the other traces first
            const others = item.data.filter(obj =>
                obj.ancestry !== validArray[index].ancestry ||
                obj.sex !== validArray[index].sex || obj.value === null
            )
            otherTraces.push({
                ...baseTrace,
                x: others.map(obj => obj.pc_x),
                y: others.map(obj => obj.pc_y),
                marker: {
                    color: '#A6A6A6',
                    size: 4,
                    opacity: 0.35
                },
                name: 'Other, Count: ' + others.length
            })

            const controls = item.data.filter(obj =>
                obj.ancestry === validArray[index].ancestry &&
                obj.sex === validArray[index].sex && (obj.value === null || obj.value === 0)
            )
            const cases = item.data.filter(obj =>
                obj.ancestry === validArray[index].ancestry &&
                obj.sex === validArray[index].sex && (obj.value !== null && obj.value !== 0)
            )
            const controlsTrace = {
                ...baseTrace,
                x: controls.map(obj => obj.pc_x),
                y: controls.map(obj => obj.pc_y),
                marker: {
                    color: colors[index % colors.length][1],
                    size: 5,
                    opacity: 0.65
                },
                name: `Controls ${validArray[index].phenotype_display_name}, ${validArray[index].ancestry}, ` +
                    `${validArray[index].sex[0]}, Count: ${controls.length}`
            }
            const casesTrace = {
                ...baseTrace,
                x: cases.map(obj => obj.pc_x),
                y: cases.map(obj => obj.pc_y),
                marker: {
                    color: colors[index % colors.length][0],
                    size: 5,
                    opacity: 0.65
                },
                name: `Cases ${validArray[index].phenotype_display_name}, ${validArray[index].ancestry}, ` +
                    `${validArray[index].sex[0]}, Count: ${cases.length}`
            }

            traces.push(controlsTrace, casesTrace)
        }
        catch (_) {
            console.error('PC_X and PC_Y cannot be equal.')
        }
    })

    return otherTraces.concat(traces)
}

plco.plot.helpers.pcaHelper = async (
    arrayOfObjects,
    platform,
    pc_x,
    pc_y
) => {
    const metadatas = await plco.plot.helpers.validateInputs(arrayOfObjects)
    const traces = await plco.plot.helpers.pcaGenerateTraces(metadatas, platform, pc_x, pc_y)
    return traces
}

plco.plot.helpers.pcaCreateDropdownLayout = async (validArray, pc_x, pc_y) => {
    // https://plotly.com/javascript/dropdowns/
    const layout = {
        updatemenus: [{
            y: 1.2,
            yanchor: 'top',
            buttons: [],
        }]
    }

    const platforms = ['PLCO_GSA', 'PLCO_Omni5', 'PLCO_Omni25', 'PLCO_Oncoarray', 'PLCO_OmniX']
    const promises = []
    const metadatas = await plco.plot.helpers.validateInputs(validArray)

    for (let i = 0; i < platforms.length; i++) {
        promises.push(
            plco.plot.helpers.pcaGenerateTraces(metadatas, platforms[i], pc_x, pc_y)
                .then((traces) => {
                    layout.updatemenus[0].buttons.push({
                        method: 'restyle',
                        args: [{ x: traces.map(t => t.x), y: traces.map(t => t.y) }],
                        label: platforms[i],
                    })
                })
        )
    }

    await Promise.all(promises)
    return layout
}

plco.plot.helpers.pcaGenerateXYInputs = (div_id, arrayOfObjects, layout, config) => {
    let xSelector = document.getElementById(div_id + 'xSelector')
    if (xSelector) {
        xSelector.remove()
    }
    xSelector = document.createElement('select')
    xSelector.id = div_id + 'xSelector'
    xSelector.title = 'pcaSelector'

    let ySelector = document.getElementById(div_id + 'ySelector')
    if (ySelector) {
        ySelector.remove()
    }
    ySelector = document.createElement('select')
    ySelector.id = div_id + 'ySelector'
    ySelector.title = 'pcaSelector'

    let xLabel = document.getElementById(div_id + 'xLabel')
    if (xLabel) {
        xLabel.remove()
    }
    xLabel = document.createElement('label')
    xLabel.for = div_id + 'xSelector'
    xLabel.innerHTML = 'PC_X: '
    xLabel.id = div_id + 'xLabel'

    let yLabel = document.getElementById(div_id + 'yLabel')
    if (yLabel) {
        yLabel.remove()
    }
    yLabel = document.createElement('label')
    yLabel.for = div_id + 'ySelector'
    yLabel.innerHTML = 'PC_Y: '
    yLabel.id = div_id + 'yLabel'

    for (let i = 1; i <= 20; i++) {
        const opt = document.createElement('option')
        opt.text = i
        xSelector.appendChild(opt)

        if (i === 1) continue
        const opt2 = document.createElement('option')
        opt2.text = i
        ySelector.appendChild(opt2)
    }

    const opt3 = document.createElement('option')
    opt3.text = 1
    ySelector.appendChild(opt3)

    async function eventListener() {
        const xVal = Number.parseFloat(xSelector.value)
        const yVal = Number.parseFloat(ySelector.value)

        const traces = await plco.plot.helpers.pcaHelper(arrayOfObjects, 'PLCO_GSA', xVal, yVal)
        const dropdownLayout = await plco.plot.helpers.pcaCreateDropdownLayout(arrayOfObjects, xVal, yVal)
        plco.Plotly.newPlot(div_id, traces, Object.assign({
            ...layout,
            xaxis: { ...layout.xaxis, title: { text: `<b>PC-X ${(xVal || '2')}</b>` } },
            yaxis: { ...layout.yaxis, title: { text: `<b>PC-Y ${(yVal || '2')}</b>` } },
        }, dropdownLayout), config)
    }

    xSelector.addEventListener('change', eventListener, false)
    ySelector.addEventListener('change', eventListener, false)

    const div = document.getElementById(div_id)
    div.appendChild(xLabel)
    div.appendChild(xSelector)
    div.appendChild(yLabel)
    div.appendChild(ySelector)
}

if (typeof (define) != 'undefined') {
    // define({ proto: plco })
    define(['https://cdn.plot.ly/plotly-latest.min.js', 'localforage'], (Plotly, localforage) => {
        plco.Plotly = Plotly
        plco.localForage = localforage
        return plco
    })
} else {
    // satisfy Plotly dependency already
    let s = plco.loadScript('https://cdn.plot.ly/plotly-latest.min.js')
    s.then(async s => {
        s.onload = () => {
            plco.Plotly = Plotly
        }
    })
    let script2 = plco.loadScript('https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js')
    script2.then(async s => {
        s.onload = () => {
            plco.localForage = localforage
        }
    })
}

plco()