search

codeout / inet-henge

Generate d3.js based Network Diagram from JSON data.
MIT License
257 stars 38 forks source link

Tooltips are not being displayed (loopbacks are missing too) #35

Closed sngx13 closed 1 year ago

sngx13 commented 1 year ago

Hi, I'm having an issue where description and type are not displayed as per your documentation. I have the following:

<script>
    const data = {{ data.network_topology | safe }};
    const distance = function (force) {
        force.jaccardLinkLengths(70, 1.0);
    };
    const diagram = new Diagram(
        "#diagram",
        data,
        {
            nodeWidth: 120,
            nodeHeight: 30,
            positionCache: false,
            initialTicks: 10,
            ticks: 1500,
            tooltip: "click",
            width: 1200,
            height: 600,
            distance: distance
        }
    );
    diagram.linkWidth(function (link) {
        if (!link)
            return 1;
        else if (link.bandwidth === "100G")
            return 10;
        else if (link.bandwidth === "10G")
            return 3;
        else if (link.bandwidth === "1G")
            return 2;
    });
    diagram.init(
        "description",
        "type",
        "loopback",
        "bandwidth",
        "interface",
        "intf-name"
    );
    // diagram.svg.attr("transform", "translate(100, 100) scale(1.5)");
</script>

Nodes are setup identically with an exception of naming convention:

{
        'name': 'brlb-t4core-1a',
        'group': 'CORE',
        'meta': {
            'loopback': '172.19.10.27',
            'type': 'Core',
            'description': 'Core - Aggregation Network'
        }
    }
codeout commented 1 year ago

Hi, could you make sure you're using the latest version of inet-henge? I got this when I tested your code in my environment, it looks like what you want.

image

If you can elaborate on how to reproduce the problem, I can help you debug.

sngx13 commented 1 year ago

Hi, yes I am using latest version. Is there an issue using your app with bootstrap5 styling maybe?

codeout commented 1 year ago

No, I haven't heard of such a problem. If you can send me your whole .html including .css and .js, I'll take a look and investigate your issue.

sngx13 commented 1 year ago

I've removed irelevant stuff, wonder if Bootstrap tooltip JS breaks it?

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="htmx-config" content='{"defaultSwapStyle":"innerHTML"}'>
    <!-- Page Injected Styles -->

<!-- Inet-Henge CSS -->
<link rel="stylesheet" type="text/css" href="/static/css/inet-style.css">
<!-- End of Inet-Henge  CSS -->

    <!-- End of Page Injected Styles -->
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <!-- End of Bootstrap CSS -->
    <!-- Tables-->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.bootstrap5.min.css">
    <!-- End of Tables-->
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    <!-- End of Google Fonts -->
    <!-- Custom CSS -->
    <link rel="stylesheet" type="text/css" href="/static/css/custom.css">
    <!-- End of Custom CSS -->
    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon/favicon-16x16.png">
    <!-- End of Favicon -->
    <!-- HTMX -->
    <script src="https://unpkg.com/htmx.org@1.8.2"></script>
    <script src="https://unpkg.com/htmx.org@1.8.2/dist/ext/debug.js"></script>
    <script src="https://unpkg.com/htmx.org@1.8.2/dist/ext/client-side-templates.js"></script>
    <script src="https://unpkg.com/nunjucks@3.2.3/browser/nunjucks.js"></script>
    <!-- End of HTMX -->

    <title>Dashboard</title>

</head>
<div class="row">
    <div class="col-sm-12">
        <div class="card">
            <div class="card-body">
                <div id="diagram"></div>
            </div>
        </div>
    </div>
</div>
<!-- Tooltip-->
<script>
    $(document).ready(function () {
        $('[data-bs-toggle="tooltip"]').tooltip({
            'placement': 'top'
        });
    });
</script>
<!-- End of Tooltip -->
<!-- Spinner -->
<script>
    function spinner_toggle_on() {
        document.getElementById("overlay").style.display = "flex";
    };
    function spinner_toggle_off() {
        document.getElementById("overlay").style.display = "none";
    };
</script>
<!-- End of Spinner -->
<!-- Page Loaded JS -->

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="/static/js/dashboard.js"></script>
<script src="/static/js/cola.min.js"></script>
<script src="/static/js/inet-henge.js"></script>
<script>
    google.charts.load('current', { 'packages': ['corechart'] });
    //
    var deviceModelsChartData = {'cols': [{'label': 'HW Model', 'type': 'string'}, {'label': 'Count', 'type': 'number'}], 'rows': [{'c': [{'v': 'Cisco ISR4331-K9'}, {'v': 1}]}, {'c': [{'v': 'Cisco C1117-4PM'}, {'v': 1}]}]};
    //
    google.charts.setOnLoadCallback(function () { drawDeviceModelsChart(deviceModelsChartData) });
</script>
<script>
    const data = {'nodes': [{'name': 'brlb-t4core-1a', 'group': 'CORE', 'meta': {'loopback': '172.19.10.27', 'type': 'Core', 'description': 'Core - Aggregation Network'}}, {'name': 'brlb-t4core-1b', 'group': 'CORE', 'meta': {'loopback': '172.19.10.28', 'type': 'Access', 'description': 'Metnet - Metro Access Network'}}, {'name': 'brlb-metnet-1', 'group': 'METRO', 'meta': {'loopback': '10.65.0.11', 'type': 'Access', 'description': 'Metnet - Metro Access Network'}}, {'name': 'brlb-metnet-2', 'group': 'METRO', 'meta': {'loopback': '10.65.0.12', 'type': 'Access', 'description': 'Metnet - Metro Access Network'}}, {'name': 'brlb-metnet-3', 'group': 'METRO', 'meta': {'loopback': '10.65.0.13', 'type': 'Access', 'description': 'Metnet - Metro Access Network'}}, {'name': 'brlb-metnet-4', 'group': 'METRO', 'meta': {'loopback': '10.65.0.14', 'type': 'Access', 'description': 'Metnet - Metro Access Network'}}, {'name': 'brlb-metnet-5', 'group': 'METRO', 'meta': {'loopback': '10.65.0.15', 'type': 'Access', 'description': 'Metnet - Metro Access Network'}}, {'name': 'brlb-metnet-6', 'group': 'METRO', 'meta': {'loopback': '10.65.0.16', 'type': 'Access', 'description': 'Metnet - Metro Access Network'}}, {'name': 'brlb-metnet-7', 'group': 'EDGE', 'meta': {'loopback': '10.65.0.17', 'type': 'Edge', 'description': 'Metnet - Provider Edge'}}, {'name': 'brlb-metnet-8', 'group': 'EDGE', 'meta': {'loopback': '10.65.0.18', 'type': 'Edge', 'description': 'Metnet - Provider Edge'}}, {'name': 'DUT-C1117-4PM', 'group': 'DUT', 'meta': {'type': 'CPE', 'description': 'Device Under Test'}}], 'links': [{'source': 'brlb-t4core-1a', 'target': 'brlb-t4core-1b', 'meta': {'bandwidth': '100G', 'interface': {'source': 'ae0', 'target': 'ae0'}}}, {'source': 'brlb-t4core-1a', 'target': 'brlb-metnet-7', 'meta': {'bandwidth': '100G', 'interface': {'source': 'et-6/1/0', 'target': '5/1/1'}}}, {'source': 'brlb-t4core-1b', 'target': 'brlb-metnet-8', 'meta': {'bandwidth': '100G', 'interface': {'source': 'et-6/1/0', 'target': '5/1/1'}}}, {'source': 'brlb-metnet-1', 'target': 'brlb-metnet-5', 'meta': {'bandwidth': '2G', 'interface': {'source': 'lag-11', 'target': 'lag-10'}}}, {'source': 'brlb-metnet-2', 'target': 'brlb-metnet-5', 'meta': {'bandwidth': '2G', 'interface': {'source': 'lag-11', 'target': 'lag-11'}}}, {'source': 'brlb-metnet-3', 'target': 'brlb-metnet-6', 'meta': {'bandwidth': '2G', 'interface': {'source': 'lag-10', 'target': 'lag-10'}}}, {'source': 'brlb-metnet-4', 'target': 'brlb-metnet-6', 'meta': {'bandwidth': '2G', 'interface': {'source': 'lag-11', 'target': 'lag-11'}}}, {'source': 'brlb-metnet-5', 'target': 'brlb-metnet-7', 'meta': {'bandwidth': '20G', 'interface': {'source': 'lag-12', 'target': 'lag-12'}}}, {'source': 'brlb-metnet-6', 'target': 'brlb-metnet-8', 'meta': {'bandwidth': '20G', 'interface': {'source': 'lag-13', 'target': 'lag-12'}}}, {'source': 'DUT-C1117-4PM', 'target': 'brlb-metnet-8', 'meta': {'bandwidth': '1G', 'interface': {'source': 'GigabitEthernet0/0/0.400', 'target': 'lag-20:3011'}}}]};
    const distance = function (force) {
        force.jaccardLinkLengths(70, 1.0);
    };
    const diagram = new Diagram(
        "#diagram",
        data,
        {
            nodeWidth: 120,
            nodeHeight: 30,
            positionCache: false,
            initialTicks: 10,
            ticks: 1500,
            tooltip: "click",
            width: 1200,
            height: 600,
            distance: distance
        }
    );
    diagram.linkWidth(function (link) {
        if (!link)
            return 1;
        else if (link.bandwidth === "100G")
            return 10;
        else if (link.bandwidth === "10G")
            return 3;
        else if (link.bandwidth === "1G")
            return 2;
    });
    diagram.init(
        "description",
        "type",
        "loopback",
        "bandwidth",
        "interface",
        "intf-name"
    );
    // diagram.svg.attr("transform", "translate(100, 100) scale(1.5)");
</script>

<!-- End of Page Loaded JS -->
codeout commented 1 year ago

Thanks.

loopback - It looks like an inet-henge's bug. tooltip - I reproduced the problem with your html.

Investigating both problems.

codeout commented 1 year ago

Hi, I've figured out how to get along with Bootstrap tooltip. Could you try the latest version that I just published?

image

loopback - It looks like an inet-henge's bug.

I'm sorry but this is not a bug. inet-henge intentionally hides all metadata on nodes when you configure the tooltip: option. If you want to show something in the tooltip, it probably means that there is a lot of metadata, so inet-henge hides them to simplify your topology graph. If you want to show all metadata on nodes, on the other hand, you don't need tooltips.

NOTE: node metadata and tooltip content are exactly the same because the arguments of .init() control both of them.

This is an example with visible node metadata, it looks a bit messy to me.

image
sngx13 commented 1 year ago

Hi! Working like magic 👍 Thank you so much :-) Btw, how do I increase the box size of the group rectangle? Also, one thing that would be nice is to pass size and color inside of meta to have custom looking nodes ;-)

codeout commented 1 year ago

how do I increase the box size of the group rectangle?

You cannot today, but I think your enhancement request can be implemented. A question here to clarify, what do you think about introducing an option to specify group rect padding?

image

Also, one thing that would be nice is to pass size and color inside of meta to have custom looking nodes ;-)

As you may know, you can change node size globally like this. Per-node size customization is more complicated in code complexity and data definition point of view. I need more time to consider that.

Also, you can customize node color by .css:

.node.brlb-metnet-1 rect {
    stroke: #ff35c8;
    fill: #ffe8fb !important;
}
image
sngx13 commented 1 year ago

You cannot today, but I think your enhancement request can be implemented. A question here to clarify, what do you think about introducing an option to specify group rect padding?

Yes, that's exactly what I meant :-)

codeout commented 1 year ago

@sngx13 Hi, I've just published another version of inet-henge with "groupPadding" option. Here is the document. Please try it and let me know if you have any further issues.

sngx13 commented 1 year ago

@sngx13 Hi, I've just published another version of inet-henge with "groupPadding" option. Here is the document. Please try it and let me know if you have any further issues.

Love it :-) Thank you!!!