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

Material UI Snackbar background color not able to be changed

Currently, I'm working on an ErrorHandler component in React.JS that displays a Material UI Snackbar whenever it catches an error. The issue I'm facing is trying to change the background color of the Snackbar to red, which seems to be problematic ...

Key Assignment in Vue FireStore - Potential Undefined Object Situation

My goal is to assign Firestore data, passed through props, to a reactive proxy object in Vue. However, I am encountering an error that says: Object is possibly 'undefined'. (property) fireStoreData: Record<string, any> | undefined To strea ...

Having trouble getting the Vue.js Element-UI dialog to function properly when embedded within a child component

Take a look at the main component: <template lang="pug"> .wrapper el-button(type="primary", @click="dialogAddUser = true") New User hr // Dialog: Add User add-edit-user(:dialog-visible.sync="dialogAddUser") </template> <s ...

Checking for mobile SSR in a ReactJS applicationUncover the signs of mobile

I recently integrated the mobile-detect library into my project following this informative tutorial: link /src/utiles/isMobile.tsx: import MobileDetect from "mobile-detect"; import { GetServerSidePropsContext } from "next"; export co ...

Ways to bring GIFs into NextJS

I am currently working on my portfolio website using Nextjs and I would like to incorporate gifs into the site. However, I have been struggling to figure out how to do so. Below is the code that I have been working with: https://i.stack.imgur.com/zjoiD.pn ...

Is it worth the effort to assign propTypes for mandatory properties repeatedly throughout nested components?

When one component always calls another, but adds some properties, do you use PropTypes for required properties in the calling component even if they are checked in the component being called? Or only at the higher level? To illustrate: const Input = pro ...

Using the foreach Loop in Javascript and AngularJs

Having trouble with a foreach loop because you're not sure of the column name to access specific data? Here's a solution to display all columns along with their corresponding data: angular.forEach(data, function(value, key) { console.log( &a ...

Can a constructor function be utilized as a parameter type in another function within TypeScript?

Recently, I came across TypeScript and after watching some video reviews, I see great potential in it. It seems to offer better code completion, implicit code documentation, and enhanced type safety for JavaScript. I'm currently in the process of con ...

React: the props appear to be undefined when they should actually have a value

I have a requirement for my props in the children class to be an array of Event objects. Prior to using it in App.js, I am checking if the array is empty like this: function App() { class Event { constructor(id, title, date){ this.id = id; ...

determine the height of a div using jquery calculations

If a div is positioned relative and contains child divs that are positioned absolute, the parent div will have no set height. However, if the contents of the div change dynamically, there should be a way to calculate and adjust the height of the parent acc ...

The attempt to compress the code from this particular file within the node_modules directory was unsuccessful

Hey there! I'm facing an issue while attempting to compile my React project using npm run build. Upon running this command in the console, I encountered the following error message: Failed to minify the code from this file: ./node_modules/react- ...

Using JavaScript to replace a radio button with the term "selected"

I am currently in the process of developing a quiz that is powered by jQuery and possibly JSON, with data being stored in a database. Everything is functioning correctly at this point, but I would like to enhance the user interface by hiding the radio butt ...

What is the best way to delete rows from an HTML table?

I am trying to update the table, but every time the setInterval function is triggered, the append method adds the same rows again. I want the old rows to be removed before inserting the new ones. $(document).ready(function() { function updateT ...

Definitions for TypeScript related to the restivus.d.ts file

If you're looking for the TypeScript definition I mentioned, you can find it here. I've been working with a Meteor package called restivus. When using it, you simply instantiate the constructor like this: var Api = new Restivus({ useDefaultA ...

The JavaScript date picker is malfunctioning in the HTML editor, but it functions properly in Fiddle

I have a working format available in a JS fiddle. Here is the code I have used on my demo site: I created a new folder named "js" and placed datepicker.js inside it, then linked it in my HTML like this: <script type="text/javascript" src="js/datepicke ...

How can VueX be leveraged to add an item to an array and also delete an item from the same array?

https://stackblitz.com/edit/vue-script-setup-with-vuex-gfjaff?file=src/components/UserProfile.vue I'm currently working on a feature where I can input a name into a dispatch function and have it added to an array. Eventually, I plan to include a text ...

Using SWR in React to conditionally fetch data and making Axios calls within an array map

With my project, I am working with two different API endpoints to retrieve data. The second endpoint requires a query parameter that is obtained from the response of the first endpoint. To handle this scenario, I have created a custom hook using the useSW ...

What is the most efficient way to transform an array of objects into a compact string?

I'm exploring a new project with an import/export feature in mind. Initially, I will have an array containing approximately 45 simple objects structured like this: {"id": "someId", "quantity": 3} To make it exportable, t ...

How to Determine the Size of a JSON Response Using JQuery?

When using a JQuery getJSON call, how can I determine the length of the JSON data that is returned? function refreshRoomList() { $.getJSON('API/list_rooms', function (rooms) { if (rooms.length > 0) { ...

Reset dropdown selection when a search query is made

Currently experimenting with Angular to develop a proof of concept. Utilizing a functional plunker where selecting an option from a dropdown populates a list of items from an $http.get( ). Additionally, there is a search input that should trigger its own $ ...