npm install error

[GlitchEclipse]

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

[josejulio]

Could you share the error that you get?

[GlitchEclipse]

I was getting an error in the .d.ts file but it doesn't seem to be there now after I restarted my computer. Not sure why. I do have an issue on registering it.

I import it. import * as nodeHtmlLabel from 'cytoscape-node-html-label';

Attempt to register it

 cytoscape.use(edgehandles);
 cytoscape.use(autoPan);
 cytoscape.use(undoRedo);
 cytoscape.use(nodeHtmlLabel); // getting an error here

Error is:

Argument of type 'typeof mport("d:/ProdCoreNg/ProdCoreNg/ProdCore/node_modules/cytoscape-node-html-label/dist/cytoscape-node-html-label")' is not assignable to parameter of type 'Ext'. Type 'typeof import("d:/ProdCoreNg/ProdCoreNg/ProdCore/node_modules/cytoscape-node-html-label/dist/cytoscape-node-html-label")' provides no match for the signature '(cytoscape: (options?: CytoscapeOptions) => Core): void'

I am probably registering wrong, but I am following the cytoscape examples of registering and other works with the cytospace.use syntax.

[josejulio]

Ah yes, this one is registered as follows:

nodeHtmlLabel(cytoscape);

Let me know if that helps.

[GlitchEclipse]

when I use that syntax I get this error

This expression is not callable. Type 'typeof import("d:/ProdCoreNg/ProdCoreNg/ProdCore/node_modules/cytoscape-node-html-label/dist/cytoscape-node-html-label")' has no call signatures

[josejulio]

I'm importing it like this:

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

Ignore for now the cytoscape-node-html-label.d.ts, it looks wrong to me.

[GlitchEclipse]

Thank you. I have it working, but the text was showing up at the top of the graph instead of under the node like I thought it would. I pretty much just copied the example. What did I do wrong?

      this.cy.nodeHtmlLabel([
        {
          query: 'node', // cytoscape query selector
          halign: 'center', // title vertical position. Can be 'left',''center, 'right'
          valign: 'bottom', // title vertical position. Can be 'top',''center, 'bottom'
          halignBox: 'center', // title vertical position. Can be 'left',''center, 'right'
          valignBox: 'botom', // title relative box vertical position. Can be 'top',''center, 'bottom'
          //cssClass: '', // any classes will be as attribute of <div> container for every title
          tpl: function(data) {
            return '<span>' + 'this is my test template' + '</span>'; // your html template here
          }
        }
      ]);

[josejulio]

It will be easier if you can put up a reproducer, try to use this one as a template

https://jsbin.com/kutiporoye/1/edit?html,js,output

[GlitchEclipse]

That seemed to help a little bit. Last hurdle is this. Sorry I can't seem to reproduce and I am not that great with stackblitz and other sites like that because of the npm installs I need to do on them.

When I hover over a node I am getting this. The data I have set in the html (zone 1 and the 3) are in the div of the node html label, but not sure where this came from. Have you seen this before?

this.cy.nodeHtmlLabel([
        {
            query: 'node',
            valignBox: "bottom",
            halignBox: "center",
            tpl: function(data) {
                return '<div >' +
                 '<div><label >' + data.name + ' </label> </div>' +
                 '<div><label>' + data.id + ' </label> </div>' +
                 '</div>';
            }
        }
      ]);

[GlitchEclipse]

So apparently this extension conflicts with another extension called edgehandles. That is where the hover artifact is coming from.

Not sure if this is something that can be fixed I did my best to reproduce on this. If you hover over the node it just reproduces the label html.

https://stackblitz.com/edit/node-html-issue?file

[josejulio]

I have never used this edgehandles extension, but i can see the following:

So it looks like the edgehandles extension is creating a new node on hover, and the node-html-label is detecting that and adding labels as well.

Look what it does if i comment the node-html-label code:

What you can do to avoid having labels on that new node, is to have a more restrictive query, you could add the class name to all your "organic" nodes and use that on the label.

In your reproducer, if you change

this.cy.nodeHtmlLabel([
        {
          query: 'node',

to

this.cy.nodeHtmlLabel([
        {
          query: '.l2',

(note that l2 is a classname of the node in the reproducer) You get the following:

Is that what you were looking for?

[GlitchEclipse]

That should work, but when I apply .l2 to the query, the html disappears. Is this a custom class or native to the extension and should just work ?

ok, yes I see it is a custom class added to the node elements. Thanks. I'll see how much damage I can do. Thank you for the help. It was greatly appreciated.

[josejulio]

That should work, but when I apply .l2 to the query, the html disappears. Is this a custom class or native to the extension and should just work ?

That class was part of the reproducer you sent, I was only using it, I forked your reproducer with above change:

https://stackblitz.com/edit/node-html-issue-2vg2d5?file=src%2Fapp%2Fgraph%2Fgraph.component.ts

[josejulio]

ok, yes I see it is a custom class added to the node elements. Thanks. I'll see how much damage I can do. Thank you for the help. It was greatly appreciated.

Great!

[josejulio]

I'll close this issue.

[GlitchEclipse]

Sorry, can you help with the css example? I copied the cy-title_name css and added the cssClass to the example. Made font red and it doesn't seem to be taking.

https://stackblitz.com/edit/node-html-issue-thdwkt

[josejulio]

The css generated by (i think angular) is not exactly the one you see, so the result (from here):

I don't know anything about angular, but you would need to use that _ngcontent-tye-c40 (possibily auto generated?) and add to your html? Or have a css that doesn't get processed by angular?

[GlitchEclipse]

Yeah, you can't access the auto generated stuff like that. I decided just to put it in line with the html for now. Sorry for having so much trouble with it. I put this html code in brackets and it doesn't come out with the giant space between the two labels. Do you know how to alleviate the spacing issue between the two div with the labels? I put a blue border to see the spacing easier.

My goal is to have a lot of information below each point like this:

[image] Zone 1 - Type ZNE00001 Gas Prod: 12322 .123213 etc

So I am going for limited spacing between each html element

Then based on the type I will change the image I have to a different type image on load so I assume that will be a different class style I will need to load. If I can't do it through a general css file, how will I do that in line?

Or do I just need to make several instances of node-html-label and load a different class query for each type?

https://stackblitz.com/edit/node-html-issue?file=src%2Fapp%2Fgraph%2Fgraph.component.ts

[josejulio]

You need to style the div, set the width, heights etc as you would do to style other parts of your app. They are taking too much space, because they are using the default values for the height / line height, etc.

You can accomplish something like this (and surely more complex stuff):

Which is a bunch of divs and spans with background-color, border, etc.