topic NeXtUI Path tooltip in Tools

NeXtUI Path tooltip

tjnielsetj — Wed, 07 Apr 2021 12:18:49 GMT

I have created paths showing bandwidth utilization based on color, but I would like to add a tooltip showing values and a link to Grafana to show timebased graphing. I have not been able to find tooltip options for paths, only links. Is this possible? Would it be better to draw new links to represent bandwidth and if so, can I use the same properties for links as I did for Path? Being:

pathPadding: [20, '50%'],

"arrow": "end",
"pathStyle": {'fill': bw2color(bw_value), 'stroke-width': '0px'},
"reverse": reverse

Re: NeXtUI Path tooltip

Yury.Nazarov — Wed, 07 Apr 2021 18:24:47 GMT

Hi, I solved similar problem as follows, may be it will be useful.

1. You can extend nx.graphic.Topology.Link class via inheritance and add some custom properties.

For example bw and grafana with default value None

let ExtendedLinkConfig = {
    "properties": {
        "bw": "None",
        "grafana": "None",
    }
}
nx.define('ExtendedLink', nx.graphic.Topology.Link, ExtendedLinkConfig);

2. register them into topologyConfig

var topologyConfig = {
  linkConfig: {
      // ...        
      bw:   'model.bw',
      grafana: 'model.grafana',
  },
  // New class for draw link layer
  linkInstanceClass: 'ExtendedLink',
}

3. Don't forget add new properties and your value (current bw, link to grafana graph, etc...) for them in array links=[] for rendering topology links

"links": [
      {
          "id": 1,
          "source": 1,
          "target": 2, 
          "bw": "....",               // Your data
          "grafana": "url_to_graph",  // Your data
      },
     // ...
]

4. Then, you can get this properties for draw path layer

// Get link obj with id 1. 
link = topology.getLink(1)

pathStyle: {
    // Set link properties for path properties
    "bw": link._bw,
    "grafana": link._grafana,
},

After that you can get this properties via mouse events on path layer and show data like it was in php weathermap.

Re: NeXtUI Path tooltip

tjnielsetj — Mon, 12 Apr 2021 03:04:51 GMT

Thank you, this gets me close, I think the problem I have now is figuring out how to trigger a mouse event over a path and pass which path the mouse went over so I know which links info to display. The API ref for path doesn't show an event like that, only dragged and moved.

Re: NeXtUI Path tooltip

Yury.Nazarov — Fri, 16 Apr 2021 20:49:24 GMT

Unfortunately I also didn't found this API docs.
But I catch this with jquery/js

For example

$(document).ready(function(){
    // Display div
    $('path').mouseover(function(event) {
        // If you put bw and grafana attribute to path level as i wrote above
        // You can catch  them from path
        url = $(this).attr('grafana');
        // Display div below mouse cursor
        $("#display_div").show().css('left',(event.pageX+10)+'px').css('top',(event.pageY+10)+'px').html("<img src="+url+">" );
    });
    // Hide div
    $('path').mouseout(function (event) {
        $("#display_div").hide()
    });
});

#display_div {
        position: absolute;
        border: 1px solid #d3d3d3;
        z-index: 999999;
        display: none;
    }

<div id="display_div"></div>