Warning from Cytoscape.js: "The use of `label` for setting the width of a node is no longer supported. Please update your style settings for the node width." This message appears when attempting to create

I'm currently utilizing Cytoscape.js for rendering a dagre layout graph.

When it comes to styling the node, I am using the property width: label in the code snippet below:

const cy = cytoscape({

  container: document.getElementById('cyGraph'),
  maxZoom: 3,
  minZoom: 0.3,
  elements: dataForCytoscape,

  style: [
    {
      selector: 'node',
      style: {
        'shape': 'round-rectangle',
        'background-color': '#fff',
        'label': 'data(name)',
        'text-valign': 'center',
        'color': '#333333',
        'border-width': 1,
        'border-color': '#2E1A61',
        'width': 'label',
        'font-size': '10px',
        "padding-left": '5px',
        "padding-right": '5px',
        "padding-top": '5px',
        "padding-bottom": '5px'
      }
    },
    {
      selector: 'edge',
      style: {
        ...
      }
    }
  ],

  layout: {
    name: 'dagre'
  }

});

The code functions properly and the nodes match the width of their inner labels. However, there's a warning displayed in the console:

The style value of `label` is deprecated for `width`

Query: Is there an alternate method to ensure that the width of Cytoscape nodes align with the inner label?

javascriptcsstypescriptcytoscape.js

Answer №1

After running some tests, I managed to find a solution on my own. I opted to calculate the width based on the data stored in the 'data(name)' field.

As a result, I replaced 'width': 'label' with the following arrow function:

'width': (node:any) => { return node.data('name').length * 7 }

In this method, I am determining the length of the string in the label (which contains the name field) and multiplying it by a constant value (I initially chose '10', but eventually settled on '7' as the most suitable in my scenario).

This approach successfully eliminates any warnings, ensuring that the graph nodes comfortably accommodate the width of the label bearing the name.

An alternative solution was proposed by canbax in the comments section:

You can establish a dynamic width using data properties. For instance, 'width': 'data(label_width)' Here, each node must possess a data property named label_width

Answer №2

I thought of a different method. Here, you can dynamically create a canvas element, set the font, and then calculate the text measurement.

'width': (node) => { 
    const ctx = document.createElement('canvas').getContext("2d");
    const fStyle = node.pstyle('font-style').strValue;
    const size = node.pstyle('font-size').pfValue + 'px';
    const family = node.pstyle('font-family').strValue;
    const weight = node.pstyle('font-weight').strValue;

    ctx.font = fStyle + ' ' + weight + ' ' + size + ' ' + family;
    return ctx.measureText(node.data('name'));
}

Although this approach may be more resource-intensive, it could provide more precise measurements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Troubleshooting: jQuery Find function not functioning correctly with HTML template

I am having trouble with a Shopify liquid code that I am trying to load into an HTML template <script type="text/template" id="description"> <div class="product-ddd"> {{ product.description }} </div> ...

javascripthtmljqueryshopify

Ways to create a downward expanding navigation menu when collapsed

Trying to accomplish the following, please refer to the image below. I am looking to have the yellow bar extend down when the collapsed menu is open. Currently, the navigation links are hidden behind the logo as shown in the second image below. Is there a ...

cssbootstrap-4

Methods to fill a data table cell

I have recently created a table and I am facing an issue in populating the tds cells using JavaScript. The data for the table is coming from the server. Here's my table: <table id="report" class="infoRecurso" id='testExportId' style="wid ...

javascriptjqueryhtml

The file uploader on the HTML page only allows for PNG files to be uploaded

Currently, I am working on an application where I am facing a challenge related to file uploads. Specifically, I have an input field like this: <input id="full_demo" type="hidden" name="test[image]"> I am looking for a way to restrict the upload of ...

jqueryhtmlcssjpeg

When transformed into clickable links, the list items start piling up on

Here are two groups of code along with a straightforward question that most people can answer easily, but still worth asking. Below is the initial piece of code with working CSS implementation: <div class="subTopHolder"> <ul class="language ...

htmlcss

Creating numerous strings using template literals

I am looking to create multiple strings using a template literal and an array variable. For instance, a template literal allows you to replace an expression with its content in a string: var = "world"; tpl = `Hello ${var}!`; console.log(tpl); // Hello wor ...

javascriptnode.js

Is there a term in JavaScript that denotes an object that can be serialized into JSON format?

Can you help me find a term for basic objects that accentuates their simplicity? Particularly, objects that do not reference themselves and do not have any methods or bindings (i.e. JSON-serializable). The terms I am currently using are: "flat object" " ...

javascriptjsonterminologycode-complexity

What are the steps to resolve an invalid token error when receiving it? (repl.it)

Today marks my introduction to node.js, recommended by a friend. Due to limited resources, I have opted to utilize repl.it for hosting. However, I am faced with an error in my first attempt at using it. The purpose of my current script is to make my user ...

javascriptnode.jsdiscord.js

Children can easily access multiple items within a list by using the ul tag

I am struggling with changing the class of ul inside the ul.navigator. I want to change it only when I click on a particular li, but my current approach doesn't seem to be working. Can anyone provide some guidance or assistance? $('.navigator& ...

javascriptjqueryhtmlcsschildren

Using CSS to create a hover effect on a button that shows multiple links

I have a button in my navigation bar that I want to enhance with hover functionality. When a user hovers over the button, I want the text on the button to disappear and reveal three different clickable links inside the button. The actual button itself sh ...

htmlcss

Creating a progress bar with blank spaces using HTML, CSS, and JavaScript

Upon running the code below, we encounter an issue when the animation starts. The desired effect is to color the first ten percent of the element, then continue coloring incrementally until reaching 80%. However, as it stands now, the animation appears mes ...

javascriptcsshtml

Blogger's homepage URL obtained using JSON data

Please note: I don't have a background in programming. I'm making an effort to learn as much as possible. As I was reading (and later experimenting with) the solution to this query, it dawned on me that having the same information in JSON form ...

javascriptjsonblogger

Tips for incorporating scrolling into a sub menu

I'm currently attempting to incorporate vertical scroll only for my sub-menu using CSS, without including a horizontal scroll. However, the issue arises when I remove the horizontal scroll - it causes the nested sub-menu within the initial one to bre ...

htmlcsswordpressmenu

JavaScript Firebase: Service worker malfunctioning during navigation

I'm currently developing a website that relies on firebase messaging. To make this happen, a specialized service worker for firebase has been integrated into the site. This website functions as a webchat platform where messages are synchronized and s ...

javascriptangular-ui-routerfirebase-cloud-messagingservice-worker

Navigating routes with regular expressions in Express

Recently, I've implemented the regex pattern /^\/(\d{5})$/ in my express route. However, an error has surfaced. The error message reads: SyntaxError: Invalid regular expression: /^\/^\/(?(?:([^\/]+?)){5})$\/?$/: Inval ...

javascriptregexnode.jsexpress

Interact with visible elements by automating mouse clicks with puppeteer

When attempting to click on various elements within a page, my goal is to do so only if they are visible. While achieving this in selenium with the is_displayed method was simple, I have struggled to find a similar approach in puppeteer. I attempted to imp ...

javascriptseleniumpuppeteer

The dynamic routing feature in React fails to function properly after the application is built or deployed

I'm facing an issue with getting a React route to function properly in the build version of my app or when deployed on Render. Here are the routes I have: <Route path="/" element={userID ? <Home /> : <Login />} /> <Route ...

javascriptreactjsexpressreact-router

Activate/Deactivate toggle using Vue.js

new Vue({ el: '#app', data: { terms: false, fullname: false, mobile: false, area: false, city: false, }, computed: { isDisabled: function(){ return !this.terms && !this.fullname && !this.mob ...

javascriptvue.js

Struggling to retrieve the value from ng-model?

Currently, I am utilizing this account due to being logged into Facebook on my other account and not having access to my phone for the verification code process. On another note, I am struggling to retrieve the value from an ng-model despite numerous atte ...

javascriptangularjs

Effective methods for eliminating timezone in JavaScript

I need to display the time and format {{transaction.submitTime | date:'yyyy-MM-dd HH:mm:ss Z'}} Currently, it displays 2015-04-23 02:18:43 +0700 However, I would like to show the time without +0700, where the hour will be incremented by 7. Is ...

javascriptangularjsdate