Node shapes with label inside not showing

[aguinaldoabbj]

Hi all,

I've found a very intriguing issue regarding node shapes with a label inside. They are not showing in the canvas except for the "database" shape. Shapes with a label outside the node work accordingly.

`{
  "static": {
    "color": "lightgreen",
    "shape": "dot",
    "value": 10,
    "font": {
      "color": "black",
      "background": "none",
      "strokeWidth": "0",
      "size": "15"
    }
  },
}`

`{
  "static": {
    "color": "lightgreen",
    "shape": "ellipse",
    "value": 10,
    "font": {
      "color": "black",
      "background": "none",
      "strokeWidth": "0",
      "size": "15"
    }
  },
}`

`{
  "static": {
    "color": "lightgreen",
    "shape": "database",
    "value": 10,
    "font": {
      "color": "black",
      "background": "none",
      "strokeWidth": "0",
      "size": "15"
    }
  },
}

What happens to the "ellipse" shape also happens with "box", "circle" and "text", but not with "database".

[thebestnom]

Hmm... That sounds like a problem in vis-network, Ill test that later, maybe in those shapes the text is the size of the shape?

[aguinaldoabbj]

Hmm... That sounds like a problem in vis-network, Ill test that later, maybe in those shapes the text is the size of the shape?

I've tested with vis-network alone and the problem doesn't appear. According to the docs, those nodes shapes with text inside grow proportionally to the label font size. It indeed happens with the "database" shape. The other shapes with text inside behave weirdly. Look what happens with the "circle" shape:

And for the "box" shape:

[thebestnom]

That's so weird, Ill have to test that to get an idea 😅

[warrenchu]

Where in the config did you put this? Is it under labels?

[thebestnom]

What do you mean?

[beth27]

@aguinaldoabbj Did you use neovis.js-2.0.0-alpha5 while facing this issue? I need to work with shapes with labels outside. But in my case, none of the shapes, except circle (which seems to be the default one) are working. Would you know where I should make changes in my code?

      var config = {
        container_id: "pcc",
        neo4j: {
          server_url: "bolt://localhost:7687",
          server_user: "neo4j",
          server_password: "",
        },
        visConfig: {
          nodes: {
            shape: "dot",
            //size: 10,
          },
          edges: {
            arrows: {
              to: { enabled: true }
           }
          },
          layout: {
            hierarchical: {
              enabled: true,
              direction: "UD",
              sortMethod: "directed",
            }
          },
        },
        labels: {
          "App_Programs": {
            label: "program_name",
            [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
              static: {
                color: "#97c2fc",
                //shape: "dot",
                //size: 25,
                font: {
                  "background": "none",
                  "strokeWidth": "0",
                  "size": 12,
                  "color": "black"
                }
              },
              cypher: {
                value: "MATCH (n) RETURN n"
              },
              function: {
                title: NeoVis.objectToTitleHtml
              },
            },
          },
          "External_Programs":
          {
            label: "program_name",
            [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
              static: {
                //"shape": "dot",
                //"size": 25,
                "color": "#FB7E81",
                font: {
                  "background": "none",
                  "strokeWidth": "0",
                  "size": 12,
                  "color": "black"
                }
              },
              cypher: {
                value: "MATCH (n) RETURN n"
              },
              function: {
                title: NeoVis.objectToTitleHtml
              },
            },
          }
        },
        relationships: {
          "calls": {
            "thickness": "0.1",
            "arrows": true,
            //"caption": false
          },
        },
        initial_cypher: "MATCH (n:App_Programs) OPTIONAL MATCH (n)-[r:calls]->(m) RETURN n,r,m"
      };

      pcc = new NeoVis.default(config);
      pcc.render();
      console.log(pcc.nodes);

[aguinaldoabbj]

@aguinaldoabbj Did you use neovis.js-2.0.0-alpha5 while facing this issue? I need to work with shapes with labels outside. But in my case, none of the shapes, except circle (which seems to be the default one) are working. Would you know where I should make changes in my code?

      var config = {
        container_id: "pcc",
        neo4j: {
          server_url: "bolt://localhost:7687",
          server_user: "neo4j",
          server_password: "",
        },
        visConfig: {
          nodes: {
            shape: "dot",
            //size: 10,
          },
          edges: {
            arrows: {
              to: { enabled: true }
           }
          },
          layout: {
            hierarchical: {
              enabled: true,
              direction: "UD",
              sortMethod: "directed",
            }
          },
        },
        labels: {
          "App_Programs": {
            label: "program_name",
            [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
              static: {
                color: "#97c2fc",
                //shape: "dot",
                //size: 25,
                font: {
                  "background": "none",
                  "strokeWidth": "0",
                  "size": 12,
                  "color": "black"
                }
              },
              cypher: {
                value: "MATCH (n) RETURN n"
              },
              function: {
                title: NeoVis.objectToTitleHtml
              },
            },
          },
          "External_Programs":
          {
            label: "program_name",
            [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
              static: {
                //"shape": "dot",
                //"size": 25,
                "color": "#FB7E81",
                font: {
                  "background": "none",
                  "strokeWidth": "0",
                  "size": 12,
                  "color": "black"
                }
              },
              cypher: {
                value: "MATCH (n) RETURN n"
              },
              function: {
                title: NeoVis.objectToTitleHtml
              },
            },
          }
        },
        relationships: {
          "calls": {
            "thickness": "0.1",
            "arrows": true,
            //"caption": false
          },
        },
        initial_cypher: "MATCH (n:App_Programs) OPTIONAL MATCH (n)-[r:calls]->(m) RETURN n,r,m"
      };

      pcc = new NeoVis.default(config);
      pcc.render();
      console.log(pcc.nodes);

Yes, I'm using the latest alpha. Here the only shape that works with label inside is "database". All shapes with labels outside work as expected.