Rerendering Whole Network Programatically

[mossy426]

We're in the middle of migrating microbetrace.cdc.gov from using d3.js to Unovis (Angular).

I've looked at documentation and gallery examples, but I don't see how I can programatically trigger rerendering of the entire network to, for instance, trigger the nodeLabel function to run on all nodes after I change another variable that the nodeLabel function considers.

For Example:

 nodeLabel = (n: NodeDatum, i: number) => this.getLabelByVariable(i)
 
 getLabelByVariable( index : number) {

        // If no label variable then should be none
        if (this.widgets['node-label-variable'] == 'None') {
            return '';
        } else {
            return this.session.data.nodes[index][this.widgets['node-label-variable']]
        }
    }

I have another function that changes the 'this.widgets['node-label-variable']', so then I want the nodeLabel function to be called on all nodes. Right now the node/link functions will only tigger for a specific node when I click on a node on the graph. I've tried change detection to see if that would work, but it doesn't appear to do anything either.

Any prompt help would be greatly appreaciated, and love this tool! Thank you.

[rokotyan]

@mossy426 Excited to hear that!

As far as I remember, you can trigger a change detection in Angular to make it re-render the graph:

• https://angular.io/api/core/ChangeDetectorRef#!#detectChanges-anchor.
• https://developapa.com/angular-rerender/

@reb-dev Can you please check how we do it?

If that doesn't help, you can try updating the entire data object like this.nodes = [...nodes]. This way Angular will understand that the data has been updated and needs to be rendered again. Also feel free to create an online example somewhere (e.g. CodesSandox). It'll make it easier for us to take a look and provide feedback.

[mossy426]

Appreciate the assistance! Yes I've tried with change detection, and tried both mark for check and detect changes after updating the entire object as you can see in the above and still not getting anything triggered. I'll get to creating an online sample. Thanks!

[mossy426]

https://stackblitz.com/edit/angular-zyybxk?file=src%2Fforce-graph%2Fforce-graph.component.ts

Here is an example. I change the size variable after button click and now that the variable has been updated I want to update all the nodes.

[mossy426]

Figured it out! I had to reassign a new data object, rather than a nodes array. Since the entire data object is what's being passed to the graph (not the nodes/links), you must reassign that object instead and it rerenders all nodes/links again.

That being said, the whole network rearranges itself when rerendering, which may prove frustrating when you've moved everything into a specific position.

[mossy426]

"dependencies": {
    "@angular/animations": "16.2.12",
    "@angular/cdk": "16.0.2",
    "@angular/common": "16.2.12",
    "@angular/compiler": "16.2.12",
    "@angular/core": "16.2.12",
    "@angular/forms": "16.2.12",
    "@angular/material": "16.2.14",
    "@angular/platform-browser": "16.2.12",
    "@angular/platform-browser-dynamic": "16.2.12",
    "@unovis/angular": "1.4.1-alpha.8",
    "@unovis/ts": "1.3.5",
    "rxjs": "7.8.1",
    "tslib": "2.6.2",
    "web-worker": "^1.3.0",
    "zone.js": "0.13.3"
  },

Updated the stackblitz to 1.4.1-alpha.8
https://stackblitz.com/edit/angular-zyybxk-v1f6cy?file=src%2Fforce-graph%2Fforce-graph.component.ts

It still says the fixNodePositionAfterSimulation isn't a property of the GraphForceLayoutSettings interface, so I made it any again just to be able to pass it in.

Seeing the same issue. Would I also need to update the unovis typscript from 1.3.5 to something else as well?

I will checkout the other workaround as well

[rokotyan]

@mossy426 I think I know what the problem might be. The versions of @unovis/angular and @unovis/ts should match, and you have "@unovis/angular": "1.4.1-alpha.8" and "@unovis/ts": "1.3.5"

[rokotyan]

Basically @unovis/angular is just an adaptor, the main codebase is @unovis/ts

[mossy426]

Oh, That was it! Thanks so much for your help guys! :)

[rokotyan]

@mossy426 Nice, you're welcome

[rokotyan]

@mossy426 Right! Somehow I didn't think about it. Glad you were able to solve the problem.

[rokotyan]

@reb-dev Can you convert this into a discussion please so the others can see it.