I am attempting to utilize diagram.highlightCollection in gojs to showcase nodes that do not meet a specific condition

I have a list of node IDs (keys) and I need to highlight those nodes. For empty nodes, the same condition works fine. For example:

checkEmptyNodes() {
           const emptyNodes = [];
           const diagDetails =  this.myserv.getDiagramData();
           if (!!diagDetails.nodeDataArray) {
               diagram.startTransaction('checking empty nodes');
               diagram.nodes.each(n => {
                   if (!n.part.data.answer) {
                       emptyNodes.push(n);
                   }
               });
               diagram.highlightCollection(emptyNodes);
               console.log(emptyNodes);
          } else {
              // data.answer = [];
          }
          diagram.commitTransaction('checking empty nodes');
          return emptyNodes;
}  

The above code is functional, but I also have similar code that doesn't throw any errors but doesn't highlight the nodes:

changeNodeColor(broken){
    const brokenNodes = [];
    diagram.nodes.each(n => {
        if (broken.includes(n.Zd.key)) {
            diagram.startTransaction('checking hanging nodes');
            brokenNodes.push(n);
        }
    });
    
    console.log("data here nk data");
    console.log(brokenNodes);
    diagram.highlightCollection(brokenNodes);
    diagram.commitTransaction('checking hanging nodes');
    return brokenNodes;
}

I'm unsure why the first code works and the second one does not. Any GoJS experts around?

Answer №1

I have previously addressed this inquiry on a different platform found at this link. Here is a recap of my response:

Avoid using the minified property name Zd, as it is not recommended in the documentation and forums. Stick to using officially documented API properties and methods available at .

It seems unusual that you are now incorporating startTransaction within an iteration or loop when you haven't done so previously. Remember to maintain a balanced use of startTransaction alongside commitTransaction (or rollbackTransaction). While typically sequential, these calls can also be nested.

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 is the best way to wrap the countdown numbers with <span> tags?

I have implemented the following countdown script: var clock = document.getElementById("timeleft"), tdy = new Date(1494979200000); countdown.setLabels( '| <span class="time-label">second</span>| <span class="time-label">minute< ...

The surprising twist of hasOwnProperty's behavior

I am currently working on a function that is designed to check whether an object contains keys such as 'id' or 'serif:id'. However, I have encountered some issues with its functionality. function returnIdPreferSerifId(object) { if ...

Each time the page is reloaded, the animation's frames per second (fps

In my project, I have two main pages: 'index' and 'about'. The 'about' page includes a cool animation that you can check out here. The issue I'm facing is that when I navigate from the 'index' page to the &apos ...

Implement scroll bar functionality on canvas following the initial loading phase

I am currently working with canvas and I need to implement a scroll bar only when it is necessary. Initially, when the page loads, there isn't enough content to require a scroll bar. My project involves creating a binary search tree visualizer where u ...

Issues Encountered During Form Data Transmission via XHR

I require the ability to transfer files from one cloud service to another using Azure Functions running Node. In order to do this, I have installed the necessary packages (axios, form-data, xmlhttprequest) and am coding in VSCode. However, when dealing wi ...

Creating a mandatory 'Select' component in Material UI with React JS

Is there a method to show an error message in red until a choice is selected? ...

Creating an object that tracks the frequency of each element from another object using JavaScript

I have a scenario where I need to create a new object based on the number of occurrences of specific minutes extracted from a timestamp stored in another object. Existing Object: { "data": { "dataArr": [ { ...

Is there a way to prevent the imported JQuery from causing issues with current code implementations?

Being a novice developer in Html/Javascript/CSS/Jquery coding, I recently encountered an issue while integrating Jquery into my project. When I imported Jquery, the styling of simple buttons went haywire. Jquery worked perfectly fine when using its classes ...

To close the responsive menu, simply click anywhere outside of the navigation bar

My issue involves a responsive menu with Bootstrap. On desktop, the menu closes fine; however, on the responsive view, I want it to close when clicking outside of the nav menu in any area. Here is my navigation code: <!-- Navigation --> <nav id= ...

Error with infiniteCarousel in Internet Explorer versions 7 and 8 when using jQuery

Hello everyone! I've run into a little issue with some jQuery code I'm using. It was working fine before, but after making several changes and improvements, I can't seem to figure out what the problem is. I keep getting JS errors in both IE7 ...

Tips for retrieving arguments within a method called from a template in vue.js?

Here is an example where I am attempting to call a method from the template and pass in some arguments. How can I access those arguments from within the method? Snippet from script: methods: { showBinaries(job, id) { let test_url = process.en ...

I am able to see the Redux props showing up in Redux DevTools, but for some reason they are not

I am facing an issue where I am passing a Redux prop to a component that is fetched from a payload. The payload successfully updates the state in my reducer and the component receives the prop (an array of objects fetched in the action) according to my Red ...

The 'palette' property is not found on the Type 'Theme' within the MUI Property

Having some trouble with MUI and TypeScript. I keep encountering this error message: Property 'palette' does not exist on type 'Theme'.ts(2339) Check out the code snippet below: const StyledTextField = styled(TextField)(({ theme }) = ...

Creating individual product pages from an array of objects: A step-by-step guide

Is there a way in Next.js to create individual pages for each object in an array with unique URLs? Here is the input array: Input Array const products = [ { url: "item-1", id: 1, name: "Item 1", description: "lor ...

Tips for creating a cursor follower that mirrors the position and size of another div when hovering over it

I am trying to create a cursor element that follows the mouse X and Y position. When this cursor hovers over a text element in the menu, I want it to change in size and position. The size of the cursor should match the width and height of the text being h ...

Choosing particular contenteditable divisions using jQuery

Consider the following HTML structure for a specific type of blog post editor: <div class="entry"> <div class="title" contenteditable="true"> <h2>Title goes here</h2> </div> <div class="content" contenteditable ...

Angular method $http.get is failing to function as intended

This is the HTML and JavaScript code I have written. <!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name ...

Combining the keys of two objects in JSON

console.log(a) ; // output in console window= 1 console.log(b);// output in console window= 2 var c = {a : b};// Is there a better way to do this? var d = JSON.stringify(c); d = encodeURIComponent(d); I want the final value of d to be {1:2}. ...

Tips for avoiding multiple function calls in React JS when a value changes

How can I avoid multiple function calls on user actions in my demo application? I have tabs and an input field, and I want a function to be called when the user changes tabs or types something in the input field. Additionally, I need the input field value ...

Creating an animated sidebar that moves at a different speed than the rest of the

I have a layout with a large sidebar and small content, where the "Fixed part" refers to sticky positioning. I'm attempting to achieve this using scrollTop, but the sidebar is causing some issues like this: The code should only be executed when the ...