React gojs Highlight node like angular gojs

GoJS
1

This is the angular code i used for highlighting the nodes. But, it doesn’t seem to work for react?. Any Thoughts on this?

searchDiagram() {
		this.diagram.nodeTemplate.mouseEnter;

		this.diagram.startTransaction("highlight search");

		if (this.searchValue) {
			// search four different data properties for the string, any of which may match for success
			// create a case insensitive RegExp from what the user typed
			let regex = new RegExp(this.searchValue, "i");
			let results = this.diagram.findNodesByExample(
				{ key: regex },
				{ desc: regex }
			);
			this.diagram.highlightCollection(results);
			// try to center the diagram at the first node that was found
			if (results.count > 0) {
				this.diagram.centerRect(results.first().actualBounds);
			}
		} else {
			// empty string only clears highlighteds collection
			this.diagram.clearHighlighteds();
		}

		this.diagram.commitTransaction("highlight search");
	}
2

The reference to mouseEnter is superfluous.

That code should work in any environment. Maybe your template(s) are not the same, or at least do not implement highlighting the way that you want. Is this.searchValue correct?

3

The this.searchValue is alright, I get the value of the node i want to highlight and I removed mouseEnter as it was superfluous and tried again. Still no luck.

4

Are the node templates correct?

5

Yeah, the nodeTemplates are alright like in the angular code

6

And is the node data correct in the model, so that the desired node(s) can actually be found?

7

I’m using the same code and data from angular code with react modifications based on the documentation. I have fixed several issues with the react code, but this one is problematic. Is there a way to highlight nodes in react like we did in angular?

8

Here’s an example based on gojs-react-basic. See the DiagramWrapper file which contains the search/highlight functionality.

1 Like
9

Thanks i’ll check on it.

10

It worked, after i added const diagram = this.diagramRef.current?.getDiagram(); to the function.

Thanks for your help.