kaluginserg / cytoscape-node-html-label Goto Github PK

This is 1/2 feature request and 1/2 curiosity as to how it would be done. Instead of a template, I'd like to pass in a react component, which essentially has the same (data) => DOM API as the template, but renders a node instead of a string.

I'm going to play with using React's render to string method, but I don't think that will work with event handlers.

I think it would be possible, but will have to dig into the code to figure it out. Any guidance or opinions would be helpful.

Hello,
I have noticed that the HTML label follows the node when the node is dragged, but it stays in place if the node's position() is changed directly via javascript. This happens because in the function cyNodeHtmlLabel() the handler is bound to the "drag" event instead of the "position" event (that apparently includes the "drag" event too). This change fixes the issue for me.

Cristian

Hi there!

First of all, thanks for the amazing work! It works extremely good for graphs with 1000+ nodes, so you saved us a lot of time :)

I'd like to request a feature which will allow to return HTMLElement from the tpl option. Something like this:

cy.nodeHtmlLabel([
    {
        query: 'node', 
        tpl(data) {
          const tpl = document.createElement('div');
          div.textContent = data.id;
          div.addEventListener('click', event => console.log('here'), false)
          return div
        }
    }
]);

The good thing about HTMLElement is that I can add event listener easily or use HTMLTemplate to create nodes (what should be faster than innerHTML) - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

As far as I see the only line which is affected is here. So, here we can add an if which checks if it's a string then use innerHTML otherwise use appendChild.

Let me know what you think about this!

P.S.: If you are OK, I or somebody from my team will send a PR to fix that.

The example you provide in the Readme shows serious performance issues (tested on Chrome 60 and Firefox 46).

The position/size of the labels changes with noticeable delay when moving/zooming the graph. The overall performance does not feel very smooth.

how to make the label clickable when it stacked on a node

enablePointerEvents: true

doesn't work

I'm trying to use this library with Svelte and Typescript, but can't seem to find any way to import this properly.

There are no TS definitions. There are some forks that add them, but they don't seem to export it as a module either.
The documentation says to use the "nodeHtmlLabel" function on the cy element, but how do I even import that if it doesn't exist in any definition?? Not even in the forks.
require is apparently also not available in browser-based apps.
And how do I register it to Cytoscape? So far I found a bunch of very different examples of how to register extensions, none of which work.

I've been trying to get this to work for a few hours now without any luck. I'm not very good at JS, so that's probably why. But the documentation is seriously lacking and does a very poor job at explaining how to use it. Could somebody be so kind and tell me how? Sorry if this sounds a bit like a rant, I've wasted a lot of time on just installing this, and can't even do that...

Is it possible to add list of links as node label
considering node is a rectangular shape , and text is inside it
which is clickable ?

 <ul>
  <li><a href="#1">Coffee</a></li>
  <li><a href="#1">Tea</a></li>
  <li><a href="#1">Milk</a></li>
</ul>

You removed the console.log mentioned in issue #23 from the source file.

Can you please rebuild the .min.js so the console.log would be removed from there as well?

Hello,
Please I need for the text in the label to be clickable, is there any way?
Thank you so much for helping.

The docs refer to the name of the extension as nodeHtmlLabel, but the actual name of the extension registered (using cytoscape's register) is nodeHtmlLabels.

how to make the label clickable when it stacked on a node

enablePointerEvents: true

doesn't work

Hi, would it be possible to also add support for html on edge labels?

I am going to export my network to image(jpeg).
How can I export cytoscape-node-html-label by cy.jpeg?
Thanks

I've noticed that the nodeDimensionsIncludeLabels option from various layouts doesn't seem to do anything when using this library. Specifically I'm noticing this with the dagre layout. Normal labels seem to work fine.

Can this be fixed?

I can provide a minimal example if that is helpful.

It should be able to run the linter, tests and build.

Currently label will only update when node data is changed as the updateDataCyHandler is attached to node's data event.

In my project I'm changing only classes of the nodes via node.classes('.foo') and wanted HTML label to change accordingly. I would assume attaching updateDataCyHandler to node's style event would be very reasonable.

Styling nodes (in core cytoscape) and your HTML labels are done in the same way, via .foo selector so it would make sense for label to update when classes change.

As a workaround I've added node.data('foo', 0); just under my node.classes('.foo') to fire updateDataCyHandler via data event and it's working fine.

The cssClass option that is supposed to add a class to each label div is not actually implemented. It is stored but not used (it never gets set on the DOM element), which means it does not work as described.

I'm not sure where you would want to put it, but in my project I added it to the initStyles method.

I added the tag Google to the render function but for even though it looks like it added a link, it is not clickable and will not take me to url

Cytoscape canvas is preventing Dom actions on html label elements

My Requirement is simple :

1. I need a html label support on a node - Done
2. I need to show a dropdown on hovering it - Done
3. I need to capture click event for each dropdown item - Challenging part
4. The event is actually captured by cytoscape canvas, I need to stop that too

Got the html label support by using this cytoscape node html label.
Unfortunately, DOM events are not listening on html label but, i had captured the hover functionality by mouseover event supported in cytoscape.
And here comes the thrill to capture the click event on dropdown item.

Kindly suggest me some good idea on how to capture the click event on hovered item

I use cytoscape and your extension for drawing a network map.
It's fantastic. :)

When I apply it to my page, it flicks once.
( My page load part of html source to div. )

I found that addCssToDocument function make this flicking.

I added 2classes ( .cy-node-html, .cy-node-html__e ), remove datetime from class name and blocked the function call, the flicking was stopped.

        this._cssWrap = "cy-node-html";
        //this._cssWrap = "cy-node-html-" + (+new Date());
        this._cssElem = this._cssWrap + "__e";
        //this.addCssToDocument();

Can you do some modification for this or make it as option?

Thanks.

Received an error on the d.ts file during a fresh npm install. This is not working on install. Angular 9.1

Native Cytoscape has the min-zoomed-font-size option that stops text from rendering when the scale is too small to read it. Since this plugin uses arbitrary HTML, a font size would probably not work, but perhaps an option to set a minimum scale, after which all labels would be hidden, would be useful.

In my project I threw some code in to updatePanZoom method to add "display: none" to the container when the scale goes below 0.3. A way to pass in a specific zoom level would of course be preferred.

Thanks! Love this plugin

I am adding a node to the cy graph. The node-html-label works greats when I render the entire graph, but if I add a single node to it using cy.add(element) it doesn't seem to recognize the label and only inserts the node with the css class. I am sure I am missing setting something. I don't want to re-render the graph for just adding nodes. I just want to add the node and have the label be visible when it is added with the information I specify. Can someone help me with what I might be missing?

Safari Version 11.0.3 (12604.5.6.1.1)
Mac Version 10.12.6 (16G1212)

It also affects the iPhone with Safari: iOS 11.2.5 (15D60)

When zoomed in, the text can become blurry in Safari. See this example:

When I export my graph which is using this plugin to display information inside the node, I loose all those information when exporting the graph to png.

Is there any option to get those information ?

Many thanks in advance.

David

It would be fantastic if I could use this plugin to add multiple "labels" per element. Since I can put any HTML I want in them, I could use it for glyphs or other iconography. Problem is right now the array of selectors overrides the previous.

Perhaps if they were keyed by ID and position. e.g. each element can have one center, one left, one right, etc., but not two on the exact same position (e.g. bottom center).

These options were never added to the function that gets registered to cy:

Hello,
first of all, thank you for this extension which I find extremely useful.

I am currently using the html label to display html content inside a node, by placing the label in the center of the node and resizing dynamically the node as a function of the size of the label (which may change over time during the lifetime of the node).

However I cannot do it in a clean way, because when the content of the label is changed, the addition of the html label to the DOM takes time and there is no triggered event that tells me when the document update is complete. Therefore I must use setTimeout() and wait for some milliseconds before calling the function that updates the sizes of the nodes. This is quite risky, because for some platforms the update time is long (mobile phones for example). On the other hand, having a too long timeout makes the UI quite impractical to use.
I also tried to add a script tag to the html label, to trigger a function as soon as the element is added to the DOM, but then the parsing of the label fails for some reason.

So here is my feature request: would it be possible to automatically update the size of the node as a function of the size of its html label?
Alternatively: would it be possible to specify a hook function in nodeHtmlLabel() parameters, that is triggered when the update of the DOM is complete?

Thank you

Cristian

Hi :)

A console error occurs when I change data in the Cytoscape instance:

For example, I set the data object "test" to the value "123" using cyInstance.data ("test", "123").

When I do this in a project in which I have installed the HTML node plugin, the following bug appears:

Here is an example:

      // create Cy instance
      var cyInstance = cytoscape({
        container: document.getElementById("cy"),
        layout: {
          name: "random",
        },
        elements: [
          // your cy elements
          { group: "nodes", data: { id: "a1", name: "a10" }, classes: "l2" },
        ],
      });

      // set nodeHtmlLabel for your Cy instance
      cyInstance.nodeHtmlLabel([
        {
          query: ".l2",
          tpl: function (data) {
            return '<p class="cy-title__p1">' + data.id + "</p>" + '<p  class="cy-title__p2">' + data.name + "</p>";
          },
        },
      ]);

      // update node data --> cytoscape-node-html-label.js:215 --> Uncaught TypeError: target.is is not a function
      cyInstance.data("test", "123");

The published NPM package is version 1.2.0, but as of 070da3a the latest tag is 1.1.5 and the package.json shows 1.1.5.

Was a newer version published as 1.2.0 but not here?

When importing cytoscape-html-label as a module, so import htmlLabel from cytoscape-html-label, there is an error in the angular saying that cytoscape-html-label.d.ts is not a module

Hey Kalugin, awesome project!

I was wondering if you have any intention of adding support for relationship labels as well, to replace the current "NAME_HERE" notation that's rather unattractive. If you currently have no plans, is that something you would be interested in having a PR made for?

I am having an issue with the extension because of a registration issue that recently came up and is preventing my cytoscape diagram from loading. Error is:

Can not register nodeHtmlLabel for core since nodeHtmlLabel already exists in the prototype and can not be overridden

I followed the instructions to register the extension on the ngInit() of my diagram as follows:

var nodeHtmlLabel = require('cytoscape-node-html-label');
nodeHtmlLabel(cytoscape);

I am not sure how to resolve. The extensions are registered when I load the component, but no matter what I try I am getting this error because it thinks it is already loaded. Is there a way to unregistered it so when it is registered again there will not be an issue? Can you offer a recommendation on how to resolve?

Thank you

Is it possible to set transparency of a HTML label so that edges are not visible through the label?

Would it be possible to have a callback/event when a label is updated?
Ideally I would like a ref to the htmlElement and the cytoscapeElement

Would it be accepted if I work on a PR?

It would be helpful if u provide or find any similar dependencies of same features or provide @types/cytoscape-node-html-label dependency so that it would be useful that i can use in my typescript project.

I'm using the extension cytoscape.js-edgehandles and there's a weird issue when hovering handles: it duplicates the HTML with "undefined" as texts.

When the node lost its focus then the duplicated text is removed.

Hello,
the HTML Label is visible independently of the style of the node. So if the node style is
{ display: 'none' } or { visibility: 'hidden' } the HTML label is still visible even if the corresponding node is not.

In practice this is not a problem, in fact it is very easy to hide the HTML label by checking the style of the node in the function assigned to the "tpl" attribute in the parameters passed to cy.nodeHtmlLabel().

However, I cannot figure out a case where the HTML should be visible when the node style is { display: 'none' } (while it may make sense to let the HTML label visible even if the style is { visibility: 'hidden' }).

So I am not sure whether this behavior is a bug, I am just reporting it in the case it is.

Cristian

The type declaration file included in the cytoscape-node-html-label package.json angers Angular 5.

ERROR in node_modules/@types/node/index.d.ts(87,13): error TS2451: Cannot redeclare block-scoped variable 'require'.
node_modules/@types/node/index.d.ts(99,13): error TS2451: Cannot redeclare block-scoped variable 'module'.
node_modules/cytoscape-node-html-label/dist/cytoscape-node-html-label.d.ts(1,15): error TS2451: Cannot redeclare block-scoped variable 'require'.
node_modules/cytoscape-node-html-label/dist/cytoscape-node-html-label.d.ts(2,15): error TS2451: Cannot redeclare block-scoped variable 'module'.
node_modules/cytoscape-node-html-label/dist/cytoscape-node-html-label.d.ts(4,15): error TS2451: Cannot redeclare block-scoped variable 'cytoscape'.
node_modules/cytoscape-node-html-label/dist/cytoscape-node-html-label.d.ts(16,19): error TS2451: Cannot redeclare block-scoped variable 'cytoscape'.

When I remove the "typings": "./dist/cytoscape-node-html-label.d.ts" from the cytoscape-node-html-label package.json everything works. Would it be possible, at the very least, to give us the options of installing the type declaration file separately instead of including it in the package?

Thanks,
-Chris

Version: 1.1.2
File: cytoscape-node-html-label.ts
Line: 299

Please remove the console.log('moveCyHandler');

Hi there,

Thanks for writing this library. It saved me a lot of time!

I added this lib to our code recently and I'm seeing really poor performance when I have more than 50 nodes on the graph. After some profiling, I found out that the browser spent tons of time on doing https://github.com/kaluginserg/cytoscape-node-html-label/blob/master/src/cytoscape-node-html-label.ts#L311 . I'm wondering if we can do things like debounce to bump the performance up.

I know do you probably did it on purpose. But can you explain why you put a setTimeout here?