{{ define "topology-map" }}

<!-- Load d3.js -->
<script src="/static/js/d3.min.js"></script>

<!-- Create a div where the graph will take place -->
<div id="dataVisualization" style="width:100%; height:calc(100% - 36px); clip-path: view-box; cursor: pointer;">
    <div id="topology-tooltip">
        Tool Tip Text
    </div>
    <svg style="width: 100%; height: 100%;" id="dataVisualizationSVG">
    </svg>
</div>

<script>
    // This constant matches the ElementType in tlx.proto file
    const TopologyElementTypes = {
        SOURCE: 0,
        DESTINATION: 1,
        TIELINE: 2,
        CHANNEL: 3,
        PORT: 4,
        DEVICE: 5,
        LINE: 6
    };

    const classNames = {
        BASIC_NODE: "node",
        BASIC_LINK: "link",
        LINE: "line",
        LINK_TIELINE: "link-tieline",
        LINK_TIELINE_HITAREA: "link-tieline-hitarea",
        LINK_LINE: "link-normal",
        LINK_TEXT: "link-text",
        SELECTED: "node-selected",
        UNSELECTED: "node-unselected",
        TOOLTIP: "topology-tooltip" // This is actually an id
    }

    const simulationData = {
        urls:{
            devices:"/topology/groupsview",
            tracePath: "/topology/tracePaths?id="
        },
        currentURL: "",
        data: getEmptyData()
    };

    function getEmptyData() {
        return {
            devices: [],
            sources: [],
            destinations: [],
            tielines: []
        };
    }

    let simulation = null;

    document.addEventListener('DOMContentLoaded', function () {
        window.addEventListener('resize', restartSimulation, false);
        window.addEventListener('orientationchange', restartSimulation, false);

        addWSDBMapListener();
        selectTielineOverviewButton(tielineDataModes.OVERVIEW);
    });

    function setSimulation (newNodes, newLinks) {
	    simulationData.data = {
		    sources: newNodes.filter(n => { return n.type == TopologyElementTypes.SOURCE; }),
		    destinations: newNodes.filter(n => { return n.type == TopologyElementTypes.DESTINATION; }),
		    devices: newNodes.filter(n => { return n.type == TopologyElementTypes.DEVICE; }),
		    tielines: newLinks.filter(n => { return n.type == TopologyElementTypes.TIELINE; }),
	    };

        function getNodeSelected (data) {
            const selectedLevel = sessionStorage.getItem(sessionKeys.SELECTED_LEVEL);
            if ((selectedLevel) && (data.details.levelUiIdActive)) {
                if (!data.details.levelUiIdActive[selectedLevel]) {
                    return false;
                }
            }
            return true;
        }

        const links = newLinks.map(d => ({...d}));
        const nodes = newNodes.map(d => {
            let newNodeData = Object.assign({}, d);
            newNodeData.selected = getNodeSelected(d);
            return newNodeData;
        });

        const SVGParentDivId= "dataVisualization";
        const SVGDivId = "dataVisualizationSVG";
        const width = $("#" + SVGParentDivId).width();
        const height = $("#" + SVGParentDivId).height();

        // Node Attributes
        const nodeSymbolSize = 1.1; // This multiplier just felt/looked right
        const nodeRadius = 20;
        const deviceRatioSize = 2.1;
        const nodeDistance = nodeRadius * 10;

        // Text Attributes
        const fontSize = 14;
        const arrowSize = nodeRadius / 2;

        const tooltipOffset = 20;

        d3.selectAll("#" + SVGDivId + " > *").remove();

        let svg = d3.select("#" + SVGDivId)
            .attr("viewBox", [-width / 2, -height / 2, width, height])
            .attr("style", "width: 100%; height: 100%;");

        const zoomGroup = svg.append("g")
            .attr("transform", "translate(0,0) scale(1)") // Important to have the transform defined on declaration else zooming will not work as intended
            .attr("preserveAspectRatio", "xMidYMid");

        zoomGroup
            .append('defs')
            .append('marker')
            .attr('id', 'arrow')
            .attr('viewBox', [0, 0, arrowSize, arrowSize])
            .attr('refX', arrowSize / 2)
            .attr('refY', arrowSize / 2)
            .attr('markerWidth', arrowSize)
            .attr('markerHeight', arrowSize)
            .attr('orient', 'auto-start-reverse')
            .attr('markerUnits', 'userSpaceOnUse')
            .append('path')
            .attr('d', d3.line()([ [0, 0], [0, arrowSize], [arrowSize, arrowSize/2] ]))
            .attr("class", "arrowheadMarker")
            .exit();

        let zoom = d3.zoom()
            .scaleExtent([0.02, 5])
            .on("zoom", handleZoom);

        resetZoom();
        centerDiagram();

        simulation = d3.forceSimulation(nodes)
            .force("link", d3.forceLink(links).distance(nodeDistance).id(d => d.id))
            .force("charge", d3.forceManyBody().strength(nodeDistance * -7))
            .force("x", d3.forceX(function (d) {
                if (nodes.length > 1) {
                    const percentage = 0.7;
                    switch (d.type) {
                        case TopologyElementTypes.SOURCE:
                            return -width * percentage;
                        case TopologyElementTypes.DESTINATION:
                            return width * percentage;
                    }
                }
                return 0;
            }))
            .force("y", d3.forceY());

        d3.select("#" + SVGParentDivId).call(zoom);

        // update links
        var link = zoomGroup.selectAll("." + classNames.BASIC_LINK).data(links);
        var linkGroup = link.enter()
            .append('g');

        // Adding the straight lines between logical ends and devices
        linkGroup.filter(function(d) {
                return d.type != TopologyElementTypes.TIELINE;
            })
            .append('line')
            .attr("class", function (d) {
                return getObjectClass(d);
            });

        // Adding the curved line and marker ends for Tielines
        linkGroup.filter(function(d) {
                return d.type == TopologyElementTypes.TIELINE;
            })
            .append('path')
            .attr("d", function(d) {
                const target = getTargetPosition(d.source.x, d.source.y, d.target.x, d.target.y, nodeRadius);
                return getArcPath(d.source.x, d.source.y, target.x, target.y);
            })
            .attr("class", function (d) {
                return getObjectClass(d);
            })
            .attr('id', function (d) { return tielineGroupName(d); })
            .on("mouseover", tielineMouseOver)
            .on("mouseout", tielineMouseOut)
            .on("mousemove", moveTooltip);


        // Adding the text and text background for Tielines
        linkGroup.filter(function(d) {
                return d.type == TopologyElementTypes.TIELINE;
            })
            .append('text')
            .attr("class", classNames.LINK_TEXT)
            .text(function (d) {
                return getTielineText(d);
            })
            .attr("text-anchor", "middle")
            .attr("y", (fontSize * 0.5) + "px");

        // Adding a wider arc path for tielines to get the hit area for the tooltip to show up easier for the user
        linkGroup.filter(function(d) {
                return d.type == TopologyElementTypes.TIELINE && d.name;
            })
            .append('path')
            .attr("d", function(d) {
                const target = getTargetPosition(d.source.x, d.source.y, d.target.x, d.target.y, nodeRadius);
                return getArcPath(d.source.x, d.source.y, target.x, target.y);
            })
            .attr("class", function (d) {
                return getObjectClass(d) + " " + classNames.LINK_TIELINE_HITAREA;
            })
            .on("mouseover", tielineMouseOver)
            .on("mouseout", tielineMouseOut)
            .on("mousemove", moveTooltip);

        link.exit().remove();

        var node = zoomGroup.selectAll("." + classNames.BASIC_NODE).data(nodes);
        var nodeGroup = node.enter()
            .append('g')
            .attr('class', function (d) {
                return 'node ' + ((d.selected) ? classNames.SELECTED : classNames.UNSELECTED);
            })
            .on("click", nodeClick)
            .on("mouseover", nodeMouseOver)
            .on("mouseout", nodeMouseOut)
            .on("mousemove", moveTooltip)
            .join("g");

        // Adding the background rounded rectangle and behaviour for devices
        nodeGroup.filter(function(d) {
                return d.type == TopologyElementTypes.DEVICE;
            })
            .append("rect")
            .attr("width", nodeRadius * deviceRatioSize)
            .attr("height", nodeRadius * deviceRatioSize)
            .attr("x", nodeRadius * (-deviceRatioSize / 2))
            .attr("y", nodeRadius * (-deviceRatioSize / 2))
            .attr("rx", 5)
            .attr("ry", 5)
            .attr("class", function (d) {
                return getObjectClass(d);
            });

        // Adding the background circle and behaviour for non-devices
        nodeGroup.filter(function(d) {
                return d.type != TopologyElementTypes.DEVICE;
            })
            .append('circle')
            .attr("r", nodeRadius)
            .attr("class", function (d) {
                return getObjectClass(d);
            });

        // Adding the text below the node's shape
        nodeGroup.append('text')
            .attr("class", "node-text")
            .text(function (d) {
                return d.name;
            })
            .attr("text-anchor", "middle")
            .attr("y", "2.5em")
            //.on("click", nodeClick);

        //Adding the symbol in the center of the node
        nodeGroup.append('image')
            .attr("width", nodeRadius * nodeSymbolSize)
            .attr("height", nodeRadius * nodeSymbolSize)
            .attr("x", (nodeRadius / -2) * nodeSymbolSize)
            .attr("y", (nodeRadius / -2) * nodeSymbolSize)
            .attr("preserveAspectRatio", "xMidYMid meet")
            .attr("href", function(d) {
                return getNodeSymbol(d);
            });

        // Adding the alarm symbol
        const alarmSize = nodeRadius * 0.9;
        const alarmX = nodeRadius - (alarmSize / 1.7);
        const alarmY = -(nodeRadius + (alarmSize / 3));
        nodeGroup.filter(function(d) { return hasAlarm(d); })
            .append('image')
            .attr("width", alarmSize)
            .attr("height", alarmSize)
            .attr("x", alarmX)
            .attr("y", alarmY)
            .attr("preserveAspectRatio", "xMidYMid meet")
            .attr("href", function(d) {
                return getAlarmSymbol(d);
            });

        // Add a drag behavior.
        nodeGroup.call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended));

        // Set the position attributes of links and nodes each time the simulation ticks.
        simulation.on("tick", function() {
            zoomGroup.selectAll("." + classNames.BASIC_LINK)
                .filter(function(d) {
                    return d.type != TopologyElementTypes.TIELINE;
                })
                .attr("x1", function (d) { return d.source.x; })
                .attr("y1", function (d) { return d.source.y; })
                .attr("x2", function (d) {
                    const target = getTargetPosition(d.source.x, d.source.y, d.target.x, d.target.y, nodeRadius);
                    return target.x;
                })
                .attr("y2", function (d) {
                    const target = getTargetPosition(d.source.x, d.source.y, d.target.x, d.target.y, nodeRadius);
                    return target.y;
                })

            zoomGroup.selectAll("." + classNames.BASIC_LINK)
                .filter(function(d) {
                    return ((d.type == TopologyElementTypes.TIELINE) && (d.source != d.target));
                })
                .attr("d", function(d) {
                    const target = getTargetPosition(d.source.x, d.source.y, d.target.x, d.target.y, nodeRadius);
                    return getArcPath(d.source.x, d.source.y, target.x, target.y);
                });

            zoomGroup.selectAll('.link')
                .filter(function(d) {
                    return ((isLineObject(d.type)) && (d.source == d.target));
                })
                .attr("d", function(d) {
                    return getSelfArcPath(d.source.x, d.source.y, nodeRadius);
                });

            zoomGroup.selectAll("." + classNames.LINK_TEXT)
                .attr("transform", function (d) {
                    return linkTransform(d, nodeDistance * 0.50); // 50% along the path looked appropriate
                })

            zoomGroup.selectAll("." + classNames.BASIC_NODE)
                .attr("cx", function (d) { return d.x; })
                .attr("cy", function (d) { return d.y; })
                .attr("transform", function (d) {
                    return "translate(" + d.x + "," + d.y + ")";
                })

            const layoutDragging = nodes.some(function (d) {
                return d.fx != null || d.fy != null;
            });
            if (!layoutDragging && simulation.alpha() > simulation.alphaMin()) {
                fitGraphToView();
            }
        });

        simulation.on("end", function () {
            const layoutDragging = nodes.some(function (d) {
                return d.fx != null || d.fy != null;
            });
            if (!layoutDragging) {
                fitGraphToView();
            }
        });

        function tielineGroupName (data) {
            return data.name || data.source.id + "<-->" + data.target.id;
        }

        function getSelfArcPath (sourceX, sourceY, objectRadius) {
            const objectRadiusMultiplier = 2.1;
            let path = ["M", sourceX, sourceY, "A"]; // Adding move-to command, startPointX, startPointY, Arc command
            path.push(objectRadius * objectRadiusMultiplier, objectRadius * objectRadiusMultiplier, 0); // Adding radiusX, radiusY, rotation (in degrees)
            path.push(1); //adding large-arc-flag (either 1 or 0)
            path.push(0); //adding sweep-flag (either 1 or 0)
            path.push(sourceX - (objectRadius * 1.7), sourceY - (objectRadius * 0.75)); // Adding endPointX, endPointY
            return path.join(" ");
        }

        function getArcPath(sourceX, sourceY, targetX, targetY) {
            const xLength = targetX - sourceX;
            const yLength = targetY - sourceY;
            const length = Math.sqrt(Math.pow(xLength, 2) + Math.pow(yLength, 2));
            let path = ["M", sourceX, sourceY, "A"]; // Adding move-to command, startPointX, startPointY, Arc command
            path.push(length, length, 0); // Adding radiusX, radiusY, rotation (in degrees)
            path.push(0); //adding large-arc-flag (either 1 or 0)
            path.push(1); //adding sweep-flag (either 1 or 0)
            path.push(targetX, targetY); // Adding endPointX, endPointY
            return path.join(" ");
        }

        function getTargetPosition(sourceX, sourceY, targetX, targetY, distance) {
            let finalPosition = {x: sourceX, y: sourceY};
            const xLength = targetX - sourceX;
            const yLength = targetY - sourceY;
            const length = Math.sqrt(Math.pow(xLength, 2) + Math.pow(yLength, 2));
            if (length != 0) {
                const percentage = 1 - ((distance * 1.8) / length);
                finalPosition.x += (xLength * percentage);
                finalPosition.y += (yLength * percentage);
            }
            return finalPosition;
        }

        function linkTransform(d, pixels) {
            const id = tielineGroupName (d);
            const path = document.getElementById(id);
            if (path) {
                const midPoint = path.getPointAtLength(pixels);
                return "translate(" + midPoint.x + "," + midPoint.y + ")";
            }
        }

        // Reheat the simulation when drag starts, and fix the subject position.
        function dragstarted(event) {
            if (!event.active) {
                simulation.alphaTarget(0.3).restart();
            }
            event.subject.fx = event.subject.x;
            event.subject.fy = event.subject.y;
        }

        // Update the subject (dragged node) position during drag.
        function dragged(event) {
            event.subject.fx = event.x;
            event.subject.fy = event.y;
        }

        // Restore the target alpha so the simulation cools after dragging ends.
        // Unfix the subject position now that it’s no longer being dragged.
        function dragended(event) {
            if (!event.active) {
                simulation.alphaTarget(0);
            }
            event.subject.fx = null;
            event.subject.fy = null;
        }

        function nodeClick (event, data) {
            const buttonSelector = "button[dsid=\"" + data.type + "-" + data.dsid + "\"]";
            switch (data.type) {
                case TopologyElementTypes.SOURCE:
                    $("#sources-tab").click();
                    $(buttonSelector).click();
                    break;
                case TopologyElementTypes.DESTINATION:
                    $("#destinations-tab").click();
                    $(buttonSelector).click();
                    break;
                default:
                    return;
            }
        }

        function handleZoom(e) {
            // Programmatic zoom (e.g. fit-to-view during simulation) has no sourceEvent; apply as-is.
            if (e.sourceEvent == null) {
                zoomGroup.attr("transform", e.transform);
                return;
            }

            const currentTransform = parseComplexStyleProperty(zoomGroup.attr("transform"));
            const currentScaleX = Number(currentTransform.scale.split(",")[0]);  // There can potentially be an X and a Y scale value, so we just use the first one that is available
            let newTransform = e.transform;

            if (currentScaleX.toFixed(3) != e.transform.k.toFixed(3)) { // There can be rounding errors so just compare to the thousandths
                let position = currentTransform.translate;
                if (position) {
                    position = position.split(",");
                    newTransform.x = position[0];
                    newTransform.y = position[1];
                }
                // Makes for a smooth zooming animation
                zoomGroup.transition()
                    .attr("transform", newTransform)
                    .duration(500);
            } else {
                // Diagram just follows the mouse directly
                zoomGroup.attr("transform", newTransform);

            }
        }

        /** Zoom/pan so all nodes stay inside the view while the layout is settling. */
        function fitGraphToView() {
            if (!nodes.length) {
                return;
            }
            const labelBelow = fontSize * 2.6;
            let minX = Infinity;
            let maxX = -Infinity;
            let minY = Infinity;
            let maxY = -Infinity;
            nodes.forEach(function (d) {
                const half = (d.type == TopologyElementTypes.DEVICE) ? (nodeRadius * deviceRatioSize / 2) : nodeRadius;
                const alarmPad = hasAlarm(d) ? nodeRadius * 0.55 : 0;
                minX = Math.min(minX, d.x - half - alarmPad);
                maxX = Math.max(maxX, d.x + half + alarmPad);
                minY = Math.min(minY, d.y - half - alarmPad);
                maxY = Math.max(maxY, d.y + half + labelBelow + alarmPad);
            });
            const dx = Math.max(maxX - minX, 1);
            const dy = Math.max(maxY - minY, 1);
            const cx = (minX + maxX) / 2;
            const cy = (minY + maxY) / 2;
            const margin = nodeDistance * 0.05;
            const maxK = zoom.scaleExtent()[1];
            const minK = zoom.scaleExtent()[0];
            let k = Math.min((width - 2 * margin) / dx, (height - 2 * margin) / dy);
            k = Math.max(minK, Math.min(maxK, k));
            if (k >= 1) {
                k = 1;
            }
            const next = d3.zoomIdentity.scale(k).translate(-cx, -cy);
            d3.select("#" + SVGParentDivId).call(zoom.transform, next);
        }

        function getNodeSymbol (data) {
            const directory = "/static/images/";
            let symbol = "question-solid.svg";
            switch (data.type) {
                case TopologyElementTypes.SOURCE:
                    symbol = "video.svg";
                    break;
                case TopologyElementTypes.DESTINATION:
                    symbol = "desktop-solid.svg";
                    break;
                case TopologyElementTypes.TIELINE:
                    break;
                case TopologyElementTypes.PORT:
                    symbol = "Ultrix.svg";
                    break;
                case TopologyElementTypes.CHANNEL:
                    break;
                case TopologyElementTypes.DEVICE:
                    let protocol = "";
                    if (data.details.protocolName) {
                        protocol = data.details.protocolName;
                    } else {
                        console.warn(arguments.callee.name + " - Unable to determine device protocol");
                        break;
                    }
                    switch (protocol) {
                        case "Ultrix":
                            symbol = "Ultrix.svg";
                            break;
                        case "Ross NK":
                            symbol = "nk.svg";
                            break;
                        case "IPMatrix":
                            symbol = "ip.svg";
                            break;
                        case "NDIMatrix":
                            symbol = "NDI-Logo-White.svg";
                            break;
                        case "Dante":
                            symbol = "dante-d.svg";
                            break;
                        case "Emulator":
                            symbol = "emulator.svg";
                            break;
                        default:
                            console.warn(arguments.callee.name + " - unsupported protocol: " + protocol);
                            break;
                    }
                    break;
                default:
                    console.warn(arguments.callee.name + " - Unsupported Node type: " + data.type);
                    break;
            }
            return directory + symbol;
        }

        function getObjectClass(data) {
            function getLinkOpacity (linkData) {
                const selectedLevel = sessionStorage.getItem(sessionKeys.SELECTED_LEVEL);
                if (selectedLevel) {
                    if (!linkData.source.selected || !linkData.target.selected) {
                        return classNames.UNSELECTED;
                    }
                }
                return classNames.SELECTED;
            }

            function getDeviceProtocolClass (deviceData) {
                if ((deviceData.type == TopologyElementTypes.DEVICE) && (deviceData.details.protocolName)) {
                    switch (data.details.protocolName) {
                        case "Ultrix":
                            return "protocol-ultrix";
                        case "Ross NK":
                            return "protocol-nk";
                        case "IPMatrix":
                            return "protocol-ipmatrix";
                        case "NDIMatrix":
                            return "protocol-ndimatrix";
                        case "Dante":
                            return "protocol-dante";
                        case "Emulator":
                            return "protocol-emulator";
                        default:
                            console.warn(arguments.callee.name + " - unsupported protocol: " + data.details.protocolName);
                            return "protocol-unknown";
                    }
                }
            }

            let classes = [];
            switch (data.type) {
                case TopologyElementTypes.DEVICE:
                    classes.push("node-device", getDeviceProtocolClass(data));
                    break;
                case TopologyElementTypes.SOURCE:
                    classes.push("node-source");
                    break;
                case TopologyElementTypes.DESTINATION:
                    classes.push("node-destination");
                    break;
                case TopologyElementTypes.TIELINE:
                    classes.push(classNames.BASIC_LINK, classNames.LINK_TIELINE, getLinkOpacity(data));
                    break;
                case TopologyElementTypes.LINE:
                    classes.push(classNames.BASIC_LINK, classNames.LINK_LINE, getLinkOpacity(data));
                    break;
            }
            return classes.join(" ");
        }

        function getTielineText (d) {
            if (d.total > 0) {
                const tielineDataMode = sessionStorage.getItem(sessionKeys.TIELINE_MODE) || tielineDataModes.OVERVIEW;
                return (tielineDataMode == tielineDataModes.USAGE) ? d.used + "/" + d.free : d.total.toString();
            } else {
                return "";
            }
        }

        function isLineObject(element) {
            switch (element) {
                case TopologyElementTypes.TIELINE:
                case TopologyElementTypes.LINE:
                case TopologyElementTypes.CHANNEL:
                    return true;
                case TopologyElementTypes.SOURCE:
                case TopologyElementTypes.DESTINATION:
                case TopologyElementTypes.PORT:
                    return false;
                default:
                    console.warn(arguments.callee.name + " - Unsupported Topology element type: " + element);
                    return false;
            }
        }

        function hasAlarm(data) {
            return data.details && data.details.alarm;
        }

        function getAlarmSymbol(data) {
            // This map matches SeverityValue in usm.pb.go
            const warningMap = {
                0: "status-normal.svg",
                1: "status-warning.svg", // Specifically missing the '2' index
                3: "status-error.svg",
                4: "status-info.svg",
                5: "status-unknown.svg",
                6: "status-unavailable.svg"
            };

            let symbol = warningMap[0];
            if (hasAlarm(data) && data.details.alarm.Severity && warningMap[data.details.alarm.Severity]) {
                symbol= warningMap[data.details.alarm.Severity];
            }
            return "/static/images/" + symbol;
        }

        function resetZoom() {
            zoomGroup.transition()
                .duration(750)
                .call(zoom.transform, d3.zoomIdentity);
        }

        function centerDiagram() {
            zoomGroup.transition()
                .duration(750)
                .call(zoom.transform, d3.zoomIdentity.translate(0, 0));
        }

        function nodeMouseOver(event, nodeData) {
            if (nodeData.details.ports.length > 0) {
                displayTooltip(nodeData.details.ports.join("<br/>"), event.pageX + tooltipOffset, event.pageY + tooltipOffset);
            } else {
                hideTooltip();
            }
        }

        function nodeMouseOut(event, data) {
            hideTooltip();
        }

        function tielineMouseOver(event, tielineData) {
            displayTooltip(tielineData.name, event.pageX + tooltipOffset, event.pageY + tooltipOffset);
        }

        function tielineMouseOut(event, data) {
            hideTooltip();
        }

        let tooltipTimeout = null;
        function displayTooltip (data, x, y) {
            if (!data) {
                hideTooltip();
                return;
            }
            clearTimeout(tooltipTimeout); // Remove the timeout if there is one so that the tooltip remains on screen
            let tooltip = d3.select("#" + classNames.TOOLTIP);
            tooltip
                .style("top", y + "px")
                .style("left", x + "px")
                .html(data);
            tooltip.transition("0.2s")
                .style("opacity", "1.0");
        }

        function hideTooltip () {
            clearTimeout(tooltipTimeout);  // Reset the timeout if this is already in progress
            tooltipTimeout = setTimeout(function () {
                let tooltip = d3.select("#" + classNames.TOOLTIP);
                tooltip.transition("0.2s")
                    .style("opacity", "0.0");
            }, 2000);
        }

        function moveTooltip (event, data) {
            let tooltip = d3.select("#" + classNames.TOOLTIP);
            tooltip
                .style("opacity", "0.0")
                .style("top", event.pageY + tooltipOffset + "px")
                .style("left", event.pageX + tooltipOffset + "px")
        }
    }

    function restartSimulation() {
        simulation.alpha(1).restart();
    }

    let updateGraphTimer = null;
    function updateGraph (url, userTriggered = true) {
        function requestTielineData() {
            $.get(url).done((data) => {
                if (data.nodes) {
                    simulationData.currentURL = url;
                    setSimulation(data.nodes, data.links);
                    if (data.nodes.length < 1) {
                        console.info("No traced data returned for URL: " + url);
                    }
                } else {
                    console.warn(arguments.callee.name + " - No 'nodes' provided in response from URL: " + url);
                    setSimulation([], []);
                }
                updateGraphTimer = null;
            }).fail(function(data) {
                displayWarningDialog(JSON.stringify(data));
                setSimulation([], []);
                updateGraphTimer = null;
            });
        }

        if (userTriggered === true) {
            requestTielineData();
        } else if (!updateGraphTimer) {
            updateGraphTimer = setTimeout(requestTielineData, 1000);
        }
    }

    function addWSDBMapListener() {
        var socket = new WebSocket("ws://" + window.location.hostname + ":8080/dsws");
        socket.onopen = function () {
            console.log("Status: Connected");
        };

        socket.onmessage = function (event) {
            const msg = JSON.parse(event.data);
            switch (msg.table) {
                case TIELINE_TABLE:
                case TOPOLOGY_TIELINE:
                    updateGraph(simulationData.currentURL, false);
                    return;
            }
        };

        socket.onerror = function(event) {
            console.log("Connection Error: " + JSON.stringify(event));
        };

        socket.onclose = function (event) {
            console.log("Socket is closed. Reconnect will be attempted in 1 second. Error Code: " +  event.code + ", Reason: " + event.reason);
            setTimeout(function() {
                addWSDBMapListener();
            }, 1000);
        };
    }
</script>

{{ end }}