Combining existing CSS classes with node labels in Cytoscape JS for Angular: A Guide

My project follows a consistent CSS theme, but the node's CSS style doesn't match. I'm looking to adjust the label colors in the CSS based on whether it's day mode or night mode. How can I accomplish this?

this.cy = cytoscape({
    container: document.getElementById(this.pageId),
    boxSelectionEnabled: false,
    autounselectify: true,
    zoomingEnabled: true,
    panningEnabled: true,
    autoungrabify: false,
    elements: this.nodes,    
    style: [{
      selector: 'node',
      style: {
        'width':'data(cpu)',
        'height': 'data(cpu)',
        //'shape': 'circle',
        'background-image': 'data(HealthImage)',
        'background-fit': 'contain contain',
        'background-color': '#f5f7fa',
        'label': 'data(' + this.nodeName + ')',
        'cssClass': 'form-group', //I attempted this but it didn't work
        "text-valign": "bottom",
        "text-halign": "center",
        "font-size": "12px",
        "text-margin-y": "8px"
      }
    }]
});
cssangulartypescriptclasscytoscape.js

Answer №1

If you want to customize the style of cytoscape js, you can use JavaScript codes to do so. One approach could be setting a timer to automatically change the style or periodically checking the time and adjusting the style accordingly.

For more information on styling in cytoscape js, check out .

Answer №2

this.cy = cytoscape({
    container: document.getElementById(this.pageId),
    boxSelectionEnabled: false,
    autounselectify: true,
    zoomingEnabled: true,
    panningEnabled: true,
    autoungrabify: false,
    elements: this.nodes,    
    style: [{
      selector: 'node',
      style: {
        'width':'data(cpu)',
        'height': 'data(cpu)',
        //'shape': 'circle',
        'background-image': 'data(HealthImage)',
        'background-fit': 'contain contain',
        'background-color': '#f5f7fa',
        'label': 'data(' + this.nodeName + ')',
        'cssClass': 'form-group', //tried this didn't work
        "text-valign": "bottom",
        "text-halign": "center",
        "font-size": "12px",
        "text-margin-y": "8px"
      }
    }, {
      selector: '.day',
      style: { "text-background-color": "white" }
    }, {
      selector: '.night',
      style: { "text-background-color": "black" }
    }]
});

Next step is to assign the correct class to each node for proper display. Don't forget to remove any inactive classes before adding a new one.

 cy.elements().toggleClass('day').toggleClass('night');  // In case this doesn't work, consider using add/removeClass instead

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

What could be the reason why both the add and remove functions are unable to work simultaneously within a JavaScript function?

Hi there! I recently started diving into JavaScript and encountered a little hiccup. I've been working on a dice game where images change randomly whenever a button is clicked. The images transition from one to another, but I wanted to add a rolling ...

javascripthtmlcsscss-transitions

In React, the `context` is consistently an empty object

I am facing an issue while trying to establish a context in my React App. For some reason, I am unable to access context from the children components. Here is the parent component: import React from 'react' import MenuBar from './MenuBar.js ...

javascriptclassreactjsecmascript-6

The align-items property in Flexbox is not functioning as expected when applied to Link components contained within

I'm in the process of creating a simple navigation bar using flexbox, but I'm encountering an issue where the content within the unordered list is not vertically centered. Below is the HTML code snippet: *,*::before,*::after{ margin: 0; ...

htmlcssreactjsflexboxnext.js

Is there a CSS3 Selector With Similar Functionality to jQuery's .click()?

For a few years now, I have been utilizing a pure CSS navigation system. However, with the recent increase in mobile site projects at my workplace, I am encountering issues with drop-down menus not functioning properly on mobile devices. Despite this chall ...

javascriptjquerycsscss-selectors

The optimal method for selecting a button from a group of buttons on a calculator using pure JavaScript

I have developed an HTML/CSS code inspired by the Mac/Apple calculator design. It features buttons organized in 5 rows using flexbox. You can view my code on this codepen: <div class="wrapper"> <div class="calheader"> ...

javascripthtmlcss

tips for concealing a row in the mui data grid

I am working on a data grid using MUI and I have a specific requirement to hide certain rows based on a condition in one of the columns. The issue is that while there are props available for hiding columns, such as hide there doesn't seem to be an eq ...

javascriptreactjstypescriptmaterial-ui

Substitute the specific class title with the present class

Here is a sample class (supposed to be immutable): class A { normalMethod1(): A{ const instance = this.staticMethod1(); return instance; } static staticMethod1: A(){ return new this(); } } The code above works fine, but how can I re ...

javascripttypescriptclass

Enhance the appearance of the navbar on mobile devices by customizing the styling in Bootstrap 5

Hi everyone, this is my first time posting a question here so please be gentle :) I recently implemented a script to change the CSS of my navbar when scrolling. window.addEventListener("scroll", function () { let header = document.querySelector(".navbar") ...

javascripthtmlcssnavbarbootstrap-5

Bootstrap's square-shaped columns

I would like to implement a grid of squares for navigation purposes. By squares, I mean that the colored areas should have equal width and height. Currently, I have achieved this using JavaScript, but I am interested in a CSS-only solution. My project is ...

javascriptjqueryhtmlcsstwitter-bootstrap

Achieving TypeScript strictNullChecks compatibility with vanilla JavaScript functions that return undefined

In JavaScript, when an error occurs idiomatic JS code returns undefined. I converted this code to TypeScript and encountered a problem. function multiply(foo: number | undefined){ if (typeof foo !== "number"){ return; }; return 5 * foo; } ...

typescriptstrictnullchecks

Automatic closing of multile- vel dropdowns in Bootstrap is not enabled by default

I have successfully implemented bootstrap multilevel dropdowns. However, I am facing an issue where only one child is displayed at a time. <div class="container"> <div class="dropdown"> <button class="btn btn-default dropdown-to ...

javascripthtmlcsstwitter-bootstrapdropdown

An easy method to define argument types for every function type in TypeScript

How can I assign argument types to each function type in TypeScript? Each function has a parameter associated with it. [Example] type F1 = (arg: number) => void; type F2 = (arg: string) => void; const caller = (f: F1 | F2) => (n: number | strin ...

typescript

Is there a way to achieve a similar outcome on my site?

Recently, I noticed a mouse-hover effect on two websites and found it quite appealing. This is the specific effect that caught my attention. Can anyone provide me with insight on how to implement this effect on my own webpage? It only shows up beneath you ...

javascriptphpjqueryhtmlcss

Position your Logo to the left, align the Menu in the center, and place top links on the right using Bootstrap

I am currently struggling to create two rows with the logo aligned to the left, 'Home' and 'User' menu links at the top right corner, and a second row displaying 'Link1', 'Link2', 'Link3' menus centered. Th ...

htmlcsstwitter-bootstrapbootstrap-4

Error encountered: ⨯ Compilation of TypeScript failed

My current project is utilizing Node.js in conjunction with TypeScript An issue has arisen during compilation within my Node.js application: E:\NodeProjects\esshop-mongodb-nodejs\node_modules\ts-node\src\index.ts:859 ret ...

node.jstypescript

How come my donut graphs are sitting outside the box while all other types of charts are properly aligned?

I am encountering an issue with my charts where all of them are positioned in the center of a div when drawn by the user, except for the donut charts. They seem to be placed outside of the top-left corner instead. Can anyone provide insights as to why this ...

javascriptjquerycssd3.js

How to perfectly align squares in CSS Grid

I'm working on arranging four squares in a grid pattern, two on top and two on the bottom, with equal spacing between them. Currently, the squares shift based on the fr value in CSS grid, resulting in uneven spacing like this: I want to align all fou ...

htmlcsscss-gridcentering

Utilizing jQuery for displaying or hiding list elements

To view all the code, click on this link: http://jsfiddle.net/yrgK8/ A section titled "news" is included in the code snippet below: <ul id="news"> <li><p>asfdsadfdsafdsafdsafdsafdsafdsafdsa</p></li> <li>&l ...

javascriptjqueryhtmlcssslideshow

Encase a group of child elements within a parent container using

Currently, I am able to wrap an entire li-element in an ordered list with a link: $(e).wrap('<a href="#" onclick="window.open(\'/xyz/\');return false;"></a>'); This is the HTML construct: <li class=""> ...

javascriptjqueryhtmlcss

Resources for ExpressJS

New to ExpressJS and trying to figure out how to reference images stored in the /public/images/ directory in my /public/stylesheets/styles.css The code snippet below doesn't seem to be working for me: .home-bg { background-image:url('../ima ...

cssnode.jsexpress