Unable to search next nodes by text

I have added Search Button with search textbox to end of Go JJS Diagram. I am able to Search Nodes first time. But unable to Search next matching node by again clicking on Search button multiple times with same search text.

Code :


        function searchDiagram() {  // called by button
            var input = document.getElementById("mySearch");
            if (!input) return;
            myDiagram.focus();

            myDiagram.startTransaction("highlight search");

            if (input.value) {
                // 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
                var safe = input.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                var regex = new RegExp(safe, "i");
                var results = myDiagram.findNodesByExample({ text: regex },
                    { nation: regex },
                    { title: regex },
                    { headOf: regex });
                myDiagram.highlightCollection(results);
                // try to center the diagram at the first node that was found
                if (results.count > 0) myDiagram.centerRect(results.first().actualBounds);
            } else {  // empty string only clears highlighteds collection
                myDiagram.clearHighlighteds();
            }

            myDiagram.commitTransaction("highlight search");
        }
 

If your HTML button is calling your searchDiagram function every time, then every time it will do the search and highlight the (probably) same resulting collection of nodes.

I think you are asking about how to sometimes get the behavior of the spacebar key. That keyboard event calls CommandHandler.scrollToPart with no argument. CommandHandler | GoJS API

So you will need to change your HTML button’s click function to call myDiagram.commandHandler.scrollToPart() when you want that behavior.

1 Like

Hi
i am facing exception “maximum call stack size exceeded” whenever i am searching node for
large diagram .

What is the stack trace showing the cause of the excessive recursion?

yes, its happens due to multiple calls. issue raise for isVisible variable size.

Gojs Code:
V.prototype.isVisible = function() {
if (!U.prototype.isVisible.call(this))
return !1;
var a = !0
, b = vi
, c = this.diagram;
if (null !== c) {
if (c.animationManager.es(this))
return !0;
a = c.isTreePathToChildren;
b = c.treeCollapsePolicy
}
if (b === vi) {
if (a = this.ig(),
null !== a && !a.isTreeExpanded)
return !1
} else if (b === Ck) {
if (a = a ? this.xu() : this.yu(),
0 < a.count && a.all(function(a) {
return !a.isTreeExpanded
}))
return !1
} else if (b === Dk && (a = a ? this.xu() : this.yu(),
0 < a.count && a.any(function(a) {
return !a.isTreeExpanded
})))
return !1;
a = this.labeledLink;
return null !== a ? a.isVisible() : !0
}

Do you have a very deep tree-structured graph, and are most of the nodes collapsed?

yes, there is deep tree-structured graph with LayeredDigraphLayout and i am using grouping in my diagram also and yes may be chance to be nodes are collapsed.

searching not working only for some node of large diagrams.

Diagram:

I just experimented with a 1000-deep tree, with all nodes Node.isTreeExpanded initially set to false. I executed a call to CommandHandler.scrollToPart of a node that was nearly at the bottom of the tree. It worked correctly, without any stack overflow, although the default animation was too slow for me to wait that long to expand each node in the parent chain starting at the root.

How can we reproduce the problem?

Have you tried using the go-debug.js library instead of go.js? If you do you might discover some problems in your code that aren’t reported when using go.js.

Hi
i am using go.js library and I am already set Node.isTreeExpanded to false but its not work , whenever i am set Node.isTreeExpanded to true stack overflow issue is resolve but my requirement is to set Node.isTreeExpanded to false .

Code:

How deeply nested are your Groups?

Could you please characterize the nodes that you cannot show?

Can you always find the nodes OK? Is the problem only that you cannot show them when calling CommandHandler.scrollToPart?

How can we reproduce the problem?

Is there a reason you have not shared the stack trace?

1.may be above 1000 Group and Simple nodes nested deeply .
2.i am using both Group and simple nodes .
3. No always not find the nodes OK, Sometime CommandHandoer.scrollToPart not working fine issue comes in for calling.

Code:

4.try to take Groups and nodes, take some nodes are inside groups and some nodes are outside of groups of diagram whose text is similar and try to search node .

Diagram:

NodeData:
{
“nodeData”: [
{
“key”: “SCREENID-4”,
“text”: “LetterforRecord.aspx”,
“category”: “Screen”,
“isGroup”: false,
“group”: “GroupID-12”,
“isButtonvisible”: true
},
{
“key”: “SCREENID-3”,
“text”: “LetterforRecord.aspx.designer”,
“category”: “Screen”,
“isGroup”: false,
“group”: “GroupID-12”,
“isButtonvisible”: true
},
{
“key”: “MissingProgramID-28”,
“text”: “LetterforRecord.aspx”,
“category”: “Missing Program”,
“isGroup”: false,
“group”: “”,
“isButtonvisible”: true
},
{
“key”: “GroupID-12”,
“text”: “OOSI_Web\OOSI_C\ReportWebPage”,
“category”: “Path”,
“isGroup”: true,
“group”: “”,
“isButtonvisible”: false
},
],
}

I was asking how deeply nested the groups were. Are you saying that there is a Node for which Part.findSubGraphLevel returns 1000 or more? That seems unlikely to me.

I adapted my test app so that there is a node for which Part.findSubGraphLevel returns 199 and Node.findTreeLevel also returns 199. Starting with all Groups Group.isSubGraphExpanded false and all Nodes Node.isTreeExpanded false, I successfully called CommandHandler.scrollToPart on that doubly deeply nested node.

I was trying to distinguish between finding and showing nodes, to narrow down the situation in which there is a problem. You have been calling Diagram.findNodesByExample. Has this ever failed to return the nodes that you were expecting to find? I would expect that that method has been reliable.

So is the problem only happening upon a call to CommandHandler.scrollToPart? How can you characterize the differences between nodes that you can scroll to and ones that you cannot?

In which browsers do you get that exception? On which platforms? And on which browsers and platforms does everything always work reliably?

Hi
i think issue is not happened due to deeply nested groups because i am facing same issue for small diagram .
whenever i am going to search node Assume two node are there having same text one is inside group and second is outside group and Group.isSubGraphExpanded is false that time i am not able to search node .
for more clarity please check 4 th point of last reply .

Seems to work well:

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:300px"></div>
  <button id="myTestButton">Invoke <b>CommandHandler.scrollToPart</b></button>
  <br>
  Invoke it repeatedly to cycle through the selected (or highlighted) parts.

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      "undoManager.isEnabled": true
    });

myDiagram.groupTemplate =
  $(go.Group, "Vertical",
    { isSubGraphExpanded: false },
    $(go.Panel, "Horizontal",
      $("SubGraphExpanderButton"),
      $(go.TextBlock, new go.Binding("text"))
    ),
    $(go.Placeholder, { padding: 10, background: "whitesmoke" })
  );

myDiagram.model = new go.GraphLinksModel(
  {
"nodeDataArray": [
{
"key": "SCREENID-4",
"text": "LetterforRecord.aspx",
"category": "Screen",
"isGroup": false,
"group": "GroupID-12",
"isButtonvisible": true
},
{
"key": "SCREENID-3",
"text": "LetterforRecord.aspx.designer",
"category": "Screen",
"isGroup": false,
"group": "GroupID-12",
"isButtonvisible": true
},
{
"key": "MissingProgramID-28",
"text": "LetterforRecord.aspx",
"category": "Missing Program",
"isGroup": false,
"group": "",
"isButtonvisible": true
},
{
"key": "GroupID-12",
"text": "OOSI_Web\OOSI_C\ReportWebPage",
"category": "Path",
"isGroup": true,
"group": "",
"isButtonvisible": false
},
],
});

const results = myDiagram.findNodesByExample({ text: /Record/ });
myDiagram.selectCollection(results);

document.getElementById("myTestButton").addEventListener("click", e => {
  myDiagram.commandHandler.scrollToPart();
});
  </script>
</body>
</html>