async function viewNode()

in web/js/node-view.js [66:207]
90 lines of code
17 McCabe index (conditional complexity)

async function viewNode(graph, node) {
    
    // Clear the current info
    document.getElementById("props").innerHTML = ""

    if (!node) {
        return
    }

    // Get the template
    if (!nodeViewTemplate) {
        nodeViewTemplate = await (await fetch("/tmpl/node-view.html?r=" + Math.random())).text()
    }
    
    const view = Object.assign({}, node)

    // Put the properties into an array of key value pairs for the template
    if (view.properties && !view.kv) {
        view.kv = []
        for (const p in node.properties) {
            if (p === "_partition") continue // Don't display partition strategy property
            view.kv.push({
                key: p,
                value: node.properties[p],
            })
            if (p === "name") {
                view.header = node.properties[p]
                // console.log("view.header is ", view.header)
            }
        }
    }
    view.labels = []
    let nodeLabels = node.labels
    if (!Array.isArray(nodeLabels)) {
        nodeLabels = [node.labels]
    }
    for (const ll of nodeLabels) {
        view.labels.push({
            label: ll, color: function color() {
                return getFillStyle(graph, {node: {labels:[ll]}})
            },
        })
    }
    view.nodestr = JSON.stringify(node, null, 4)

    const rendered = Mustache.render(nodeViewTemplate, view)

    document.getElementById("props").innerHTML = rendered

    for (const ll of nodeLabels) {
        const el = document.getElementById(`node-label-${ll}`)
        el.style.backgroundColor = getFillStyle(graph, {node: {labels:[ll]}})
    }

    // Set up an event handler for deleting properties
    for (const keyval of view.kv) {
        (function (k) {
            const el = document.getElementById(`prop-x-${keyval.key}`)
            el.addEventListener("click", async function () {
                console.log(`About to delete ${k}`)
                delete node.properties[k]
                const nodeResult = await post("node-post", node, graph.partition)
                console.log(nodeResult)
                viewNode(graph, node)
            })
        }(keyval.key))
    }

    // Set up an event handler for adding properties
    const addButton = document.getElementById("btn-add-prop")
    addButton.addEventListener("click", async function () {
        const txtKey = document.getElementById("txt-prop-name")
        const txtVal = document.getElementById("txt-prop-value")
        node.properties[txtKey.value] = txtVal.value
        const nodeResult = await post("node-post", node, graph.partition)
        console.log(nodeResult)
        viewNode(graph, node)
    })

    // Set up an event handler to delete a node
    const deleteButton = document.getElementById("btn-delete-node")
    deleteButton.addEventListener("click", async () => { deleteNode(graph, node) })

    // Event handlers for the edge labels to populate the text field
    const allLabels = document.getElementById("all-labels")
    const edgeLabels = allLabels.querySelectorAll(".edge-label")
    for (const el of edgeLabels) {
        el.style.backgroundColor = hashColor(el.innerHTML)
        el.onclick = function () {
            document.getElementById("txt-edge-label").value = el.innerHTML
        }
    }

    // Remember the last selected node so we can add edges
    if (graph.lastSelectedNode && graph.lastSelectedNode !== node) {
        document.getElementById("add-edge").style.display = "block"
        document.getElementById("add-edge-hide").style.display = "none"
        const last = graph.lastSelectedNode
        document.getElementById("node-edge-from").innerHTML = last.properties.name
        document.getElementById("node-edge-to").innerHTML = node.properties.name
        const label = document.getElementById("txt-edge-label")

        // Show the label in the text over the button
        label.onkeyup = function() {
            document.getElementById("node-edge-label").innerHTML = label.value
        }

        const edgeBtn = document.getElementById("btn-node-edge-from")

        // Show the edge arrow as a preview on the canvas
        edgeBtn.onmouseover = async function () {
            console.log("Previewing edge arrow TODO")
        }

        // Add the edge
        edgeBtn.onclick = async function () {
            if (!label || !label.value) return // TODO warn
            // TODO make sure the edge doesn't already exist

            const newEdge = {
                id: uuid.v4(),
                label: label.value,
                from: last.id,
                to: node.id,
                properties: {},
            }

            try {
                await post("edge-post", newEdge, graph.partition)
                graph.data.edges.push(newEdge)
                render(graph)
            } catch (ex) {
                console.error(ex)
                alert("Failed to save edge: " + ex)
            }
        }
    } else {
        document.getElementById("add-edge-hide").style.display = "block"
        document.getElementById("add-edge").style.display = "none"
    }
    graph.lastSelectedNode = node
}