function initEvents()

in web/js/main.js [21:175]
72 lines of code
2 McCabe index (conditional complexity)

function initEvents(graph) {

    console.log("initEvents")

    const canvas = document.getElementById("canvas")

    window.addEventListener("resize", () => {
        render(graph, true)
    }, false)

    // Listen to mouse moves
    canvas.addEventListener("mousemove", (e) => {
        e.stopPropagation()
        e.preventDefault()
        move(graph, getMousePos(e))
    })

    // Listen to mouse ups
    canvas.addEventListener("mouseup", (e) => {
        e.stopPropagation()
        e.preventDefault()
        up(graph, getMousePos(e))
    })

    // Listen to mouse downs
    canvas.addEventListener("mousedown", (e) => {
        e.stopPropagation()
        e.preventDefault()
        down(graph, getMousePos(e))
    })

    // Listen to double clicks
    canvas.ondblclick = (e) => {
        e.stopPropagation()
        e.preventDefault()
        dblclick(graph, getMousePos(e))
    }

    // Create a new node
    document.getElementById("btn-new-node").onclick = async function () {
        const label = document.getElementById("txt-new-node-label")
        if (!label) return // TODO warning
        const name = document.getElementById("txt-new-node-name")
        const errorDiv = document.getElementById("new-node-error")
        errorDiv.innerHTML = ""

        const newNode = {
            id: uuid.v4(),
            properties: {
                name: name.value,
            },
            labels: [label.value],
        }

        try {
            await post("node-post", newNode, graph.partition)
            errorDiv.innerHTML = "Saved node"
        } catch (ex) {
            console.error(ex)
            errorDiv.innerHTML = "Failed to save node"
        }
        graph.data.nodes.unshift(newNode)
        label.value = ""
        name.value = ""
        viewNode(graph, newNode)
        render(graph, true)
    }

    // Find nodes by name when typing into the Find text box
    const txtFind = document.getElementById("txt-find")
    txtFind.onkeyup = async ({ key }) => {
        const t = txtFind.value
        await find(graph, key, t)
    }

    // Export and download the data
    document.getElementById("btn-export").onclick = async function () {
        const url = await restApi.get("export-url-get", null, graph.partition, true)
        document.getElementById("export-url").innerHTML = `<a href="${url}">Download</a>`
    }

    // Import data
    const btnImport = document.getElementById("btn-import")
    const importFile = document.getElementById("import-file")
    importFile.onchange = async function() {
        try {
            const file = this.files[0]
            const key = "import-" + file.name
            const partition = getCookie("partition")
            const encodedKey = encodeURIComponent(key)

            // Get a signed URL to allow us to put directly to the bucket
            const signedUrl = await restApi.get("import-url-get", encodedKey, null, true)

            // PUT the file to the bucket
            await fetch(signedUrl, {
                method: "PUT", 
                body: file,
                mode: "cors",
                cache: "no-cache",
                headers: {
                    "Content-Type": "application/json",
                },
            })

            // Import the data into Neptune
            await restApi.post("import-post", {key}, partition)

            // Refresh the graph
            await search(partition)

        } catch (ex) {
            console.error(ex)
        }
    }

    btnImport.onclick = () => {
        importFile.click()
    }



    // // Import from Neo4j
    // document.getElementById("btn-import").onclick = async function() {
    //     const data = JSON.parse(document.getElementById("txt-import").value)
    //     for (const item of data) {
    //         if (item.type === "node") {
    //             const node = {}
    //             node.id = item.id
    //             node.labels = [item.labels[0]]
    //             node.properties = item.properties || {}
    //             await restApi.post("node-post", node)
    //         }
    //         if (item.type === "relationship") {
    //             const edge = {}
    //             edge.id = item.id
    //             edge.label = item.label
    //             edge.from = item.start.id
    //             edge.to = item.end.id
    //             edge.properties = item.properties || {}
    //             await restApi.post("edge-post", edge)
    //         }
    //     }
    //     render(graph, true)
    // }

    document.getElementById("btn-grid").onclick = function () {
        viewGrid(graph)
    }
    document.getElementById("btn-canvas").onclick = function () {
        document.getElementById("grid-container").style.display = "none"
        document.getElementById("canvas-container").style.display = "block"
        render(graph, true)
    }
}