The GoJS chart fails to refresh after the transaction has been finalized

I have integrated a GoJS diagram into my VueJs application. I am currently working on adding a search feature that highlights specific nodes with text matches. However, I encountered an issue where the diagram does not update immediately after triggering the search function by name and setting the highlight to nodes. The border color remains unchanged until I manually move the element that should be highlighted.

Here is my implementation of the diagram:

const myDiagram = $(go.Diagram, this.$refs.goJsDiagram, {
            initialContentAlignment: go.Spot.Top,
            "undoManager.isEnabled": false,
            layout: $(CustomLayeredDigraphLayout, // Specify the layout here
                {
                    direction: 90, // Top-to-bottom layout (90 degrees)
                    layerSpacing: 50 // Adjust spacing between layers as needed
                })
        });

myDiagram.nodeTemplate =
    $(go.Node, "Vertical",  // Main node layout set to vertical                   
        $(go.Panel, "Auto",   // Panel holding shape and text
            $(go.Shape, "Rectangle", {
                strokeWidth: 2,
                fill: "white"
            },
                new go.Binding("stroke", "", (data) => this.getStroke(data)).ofObject()
            ),
            $(go.TextBlock, {
                margin: new go.Margin(28, 22, 28, 22),
                font: "bold 22px sans-serif",  // Adjust font settings
                stroke: "black"  // Text color                            
            },
                new go.Binding("text", "Name")
            )
        )
    );

Implementation of custom border color function:

getStroke(node) {
    if (node.data.IsHighlighted) {
        return "yellow"; // Color for selected nodes
    }
    if (node.data.IsSelected) {
        return "green"; // Color for selected nodes
    }
    return "black"; // Default color          
}

Node search function logic:

findNodeByName(name) {
    let foundNode = false;

    this.myDiagram.nodes.each((node) => {
        if (name && node.data.Name.toLowerCase().includes(name.toLowerCase())) {
            if (!node.data.IsHighlighted) {
                node.diagram.startTransaction('selected');
                node.diagram.model.setDataProperty(node.data, "IsHighlighted", true);
                node.diagram.startTransaction('selected');
            }
            foundNode = true;
        } else {
            if (node.data.IsHighlighted) {
                node.diagram.startTransaction('selected');
                node.diagram.model.setDataProperty(node.data, "IsHighlighted", false);
                node.diagram.startTransaction('selected');
            }
        }
    });

    return foundNode;
}

The dynamic update seems to be failing despite trying multiple solutions. What could possibly be causing this issue?

Answer №1

If you come across the same issue as I did, here's the solution. The problem lies with Vue.js v3 - all references to instances of Diagram, Node, Link, and so on must be non-reactive. Make sure no data has references to these diagram objects. If you need to access your diagram outside of the init method, simply use this.myDiagram = myDiagram; at the end of it, without including myDiagram in data().

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

Is there a way to remove specific mesh elements from a scene in Unity?

When I create multiple mesh objects with the same name, I encounter difficulties in selecting and removing them all from the scene. Despite attempting to traverse the function, I have not been successful in addressing the issue. event.preventDefault(); ...

Having an issue with my code in angular 12 where I am unable to successfully call an API to retrieve a token, and then pass that token to another API for further processing

Here is the code snippet containing two methods: getToken and validateuser. I am fetching the token from getToken and passing it as a parameter to validateuser. However, before retrieving the token, my second API call is being executed. ...

"Vue.js Mustache Syntax: Beautifying Data Binding with Curly Br

Each element object in my list array has been numbered using the row index as shown below: {{tableData[props.index-1] = props.index }} The code above worked perfectly fine. Initially, I assumed that it would be the left side value (tableData[props.index ...

After refreshing the page, Google Chrome finally displays the CSS styles correctly

I'm currently working on a JavaScript script to showcase images on a webpage. These images are loaded using an AJAX request and a CSS style is directly applied using jQuery. The script functions correctly on Firefox, Opera, and IE, but Google Chrome i ...

When saving, Vue sporadically creates misleading error messages

Recently, I started a new Vue project that wasn't very populated. When I run the command below, everything runs smoothly... npm run serve However, as soon as I make a small change in my project and hit CTRL+S, the Vue instance is rebuilt and strange ...

Inconsistent reliability of Loopback-context prompts the search for an alternative solution

After encountering some reliability issues with the loopback-context package, I decided to try an alternative approach. Instead of relying on setting the current user object in my middleware using loopback-context, I opted to fetch the accessToken from the ...

Tips for applying border radius to a Quasar table

I'm attempting to design a table with a header that looks like this https://i.sstatic.net/aTAMC.png After trying the following code, I've had no success <q-table binary-state-sort table-header-class="text-white bg-44b2b8 round ...

Is it possible to determine if the user is able to navigate forward in browser history?

Is there a way to check if browser history exists using JavaScript? Specifically, I want to determine if the forward button is enabled or not Any ideas on how to achieve this? ...

To avoid any sudden movements on the page when adding elements to the DOM using jQuery, is there a way to prevent the page from

I have a challenge where I am moving a DIV from a hidden iFrame to the top of a page using jQuery. Here is my current code: $(document).ready(function($) { $('#precontainer').clone().insertBefore(parent.document.querySelectorAll(".maincontainer" ...

Conduct a text search within mongoDB to retrieve the corresponding reference document for every item stored in the collection

I am in the process of developing a search functionality for a collection of trips. This search feature will check if the trip includes specific city names (origin and destination). Each trip entry contains the user ID of the person who created it. The sea ...

Tips for incorporating only the CSS portion of tailwind into your project?

I am looking to exclusively utilize the CSS portion of Tailwind. An admin is writing an article and wants to incorporate all Tailwind classes within it. However, since Tailwind classes are generated during the React project build, there's a possibilit ...

having trouble retrieving data from JSON array using JavaScript

I am having trouble fetching the JSON value to determine if the person in the photo is wearing glasses. The value is spread across four arrays: photos, tags, attributes, and glasses. My goal is to check if the value "value" is either true or false. I have ...

Issues with Javascript positioning in Chrome and Safari are causing some functionality to malfunction

My Javascript script is designed to keep an image centered in the window even when the window is smaller than the image. It achieves this by adjusting the left offset of the image so that its center aligns with the center of the screen. If the window is la ...

What could be the reason for data.map not being recognized as a function?

I developed the following React component: import React, { useState } from 'react'; export default function Example(){ var friend = function (id, firstName, lastName){ this.id = id; this.firstName = firstName; this.lastName = lastN ...

Adding a class to an element in AngularJS

I have a question about entering empty values in an input field and highlighting its boundary. I added a new class 'warning' for this purpose and created the following code. HTML: `<body ng-app="TestPage"> <form ng-controller="TestFor ...

Unique option preservation on customized HTML select menus - Maintain original selection

Currently, I am attempting to replicate a custom HTML select based on the example provided by W3 Schools. You can view the demo through this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select The issue I am encountering is that ...

Receive real-time updates from the query and then provide the results using Vuex and Firestore

I have encountered an issue while trying to retrieve data from a Firestore real-time query and perform other actions. Although I am able to receive the data from Firebase as an Object, I am facing a problem when trying to access the properties of the retur ...

Can you assist me with setting a value in an ASP dropdownlist?

I have an asp dropdownlist and I need to set its value from the client side. Although I am able to retrieve the data from the client side, I am facing difficulty in setting it in my asp dropdownlist using JavaScript. HTML <div class="col-md-6 form-gro ...

Discovering a CSS value using jQueryUncovering the CSS value with jQuery

Currently, I have a script that allows me to change the color of an event in a calendar to red when clicked. eventClick: function(calEvent, jsEvent, view) { $(this).css('border-color', 'red'); } Now, I want to enhance this featur ...

I'm having trouble managing state properly in Safari because of issues with the useState hook

Encountering Safari compatibility issues when updating a component's state. Though aware of Safari's stricter mode compared to Chrome, the bug persists. The problem arises with the inputs: https://i.sstatic.net/WSOJr.png Whenever an option is ...