async function viewEdge()

in web/js/edge-view.js [43:107]


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

    if (!edge) {
        return
    }

    if (!edge.properties) edge.properties = {}

    // Get the template
    if (!edgeViewTemplate) {
        edgeViewTemplate = await (await fetch("/tmpl/edge-view.html?r=" + Math.random())).text()
    }

    const view = Object.assign({}, edge)

    // Put the properties into an array of key value pairs for the template
    if (view.properties && !view.kv) {
        view.kv = []
        for (const p in edge.properties) {
            view.kv.push({
                key: p,
                value: edge.properties[p],
            })
        }
    } 

    const rendered = Mustache.render(edgeViewTemplate, view)

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

    const labelEl = document.getElementById("edge-label")
    labelEl.innerHTML = edge.label
    labelEl.style.backgroundColor = hashColor(edge.label)

    // 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 edge.properties[k]
                const edgeResult = await post("edge-post", edge, graph.partition)
                console.log(edgeResult)
                viewEdge(graph, edge)
            })
        }(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")
        edge.properties[txtKey.value] = txtVal.value
        const edgeResult = await post("edge-post", edge, graph.partition)
        console.log(edgeResult)
        viewEdge(graph, edge)
    })

    // Set up an event handler to delete an edge
    const deleteButton = document.getElementById("btn-delete-edge")
    deleteButton.onclick = async () => { deleteEdge(graph, edge) }
}