Go testing

Hi,

I am evaluating GO JS.

Facing some issues while using IVR Charts.

  1. How to add button actions, (ex:on click of button need to open popover etc plz dont give me link to button codes … i have already referred button code no luck…)
    2 Aligning the buttons( in my example i have 2 buttons , first need to be aligned to left and the other one to right
    3.Tree Expand Button :: how to replace default + and - images with down arrow and up arrow

My Sample Example:

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="An Interactive Voice Response diagram showing a call-menu tree with various prompts and responses." />
  <!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
  <meta charset="UTF-8">
  <script src="go.js"></script>
  <script id="code">
    function init() {
      var $ = go.GraphObject.make;  // for conciseness in defining templates
      myDiagram =
        $(go.Diagram, "myDiagram",
          {
            allowCopy: false,
            initialContentAlignment: go.Spot.Center,
            "draggingTool.dragsTree": true,
            "commandHandler.deletesTree": false,
            layout:
              $(go.TreeLayout,
                { angle: 90, arrangement: go.TreeLayout.ArrangementFixedRoots }),
            "undoManager.isEnabled": true
          });

      var bluegrad = $(go.Brush, "Linear", { 0: "white", 1: "skyblue" });
      var greengrad = $(go.Brush, "Linear", { 0: "white", 1: "green" });
      var redgrad = $(go.Brush, "Linear", { 0: "white", 1: "red" });
      var yellowgrad = $(go.Brush, "Linear", { 0: "yellow", 1: "orange" });

      var actionTemplate =
        $(go.Panel, "Horizontal",
          $(go.Shape,
            { width: 12, height: 12 },
            new go.Binding("figure"),
            new go.Binding("fill")),
          $(go.TextBlock,
            new go.Binding("text"))
        );

      myDiagram.nodeTemplate =  // the default node template
        $(go.Node, "Vertical",
          { selectionObjectName: "BODY" },
          $(go.Panel, "Auto",
            { name: "BODY" },
            $(go.Shape, "RoundedRectangle",
              { fill: bluegrad , stroke: "#009be0", strokeWidth: 2 , width:250},
              new go.Binding("fill"),
              new go.Binding("stroke")),
            $(go.Panel, "Vertical",
              // the title
              $(go.TextBlock, { font: "bold 12pt roboto" },new go.Binding("text", "question")),
              // the optional list of actions
              $(go.Panel, "Table",
                { stretch: go.GraphObject.Horizontal,
                  visible: true },
                $(go.Panel, "Vertical",
                  {
                    row: 1, name: "COLLAPSIBLE",  // identify to the PanelExpanderButton
                    padding: 6,
                    stretch: go.GraphObject.Vertical,  // take up whole available width
                    //background: "",  // to distinguish from the node's body
                    defaultAlignment: go.Spot.Right,  // thus no need to specify alignment on each element
                    itemTemplate: actionTemplate  // the Panel created for each item in Panel.itemArray
                  },
                  new go.Binding("itemArray", "actions")  // bind Panel.itemArray to nodedata.actions
                )
              )
            )
          ),
          $(go.Panel,
            { height: 15 },
            $("TreeExpanderButton"))
        );
      myDiagram.linkTemplate =
        $(go.Link, go.Link.Orthogonal,
          { corner: 15 },
          $(go.Shape, { toArrow: "Standard",stroke: "#888", strokeWidth: 3 }),
          $(go.TextBlock, go.Link.OrientUpright,
            { background: "yellow",
                stroke: "#ff6d00",
              visible: false,  // unless the binding sets it to true for a non-empty string
              segmentIndex: -2,
              segmentOrientation: go.Link.None },
            new go.Binding("text", "answer"),
            // hide empty string;
            // if the "answer" property is undefined, visible is false due to above default setting
            new go.Binding("visible", "answer", function(a) { return (a ? true : false); }))
        );
      load();
    }
    function save() {
      document.getElementById("mySavedModel").value = myDiagram.model.toJson();
      myDiagram.isModified = false;
    }
    function load() {
      myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
    }
  </script>
</head>
> <body onload="init()">
> <div>
>  <div id="myDiagram" style="width:100%; height:700px"></div>
> <!--  <p>
>     <button id="SaveButton" onclick="save()">Save</button>
>     <button onclick="load()">Load</button>
>   </p>-->
>   <textarea id="mySavedModel" style="width:100%;height:300px;display:none">
>     {
>    "class":"go.GraphLinksModel",
>    "nodeDataArray":[
>       {
>          "key":"1",
>          "question":"MARYLAND INDUSTRY",
>          "actions":[
>             {
>                "text":"",
>                "figure":"ThickCross"
>             },
>             {
>                "text":"",
>                "figure":"BpmnEventConditional",
>                "fill":"yellow"
>             }
>          ]
>       },
>       {
>          "key":"2",
>          "question":"CHESTERFILED HOLDING",
>          "actions":[
>             {
>                "text":"",
>                "figure":"ThickCross"
>             },
>             {
>                "text":"",
>                "figure":"BpmnEventConditional",
>                "fill":"yellow"
>             }
>          ]
>       },
>       {
>          "key":"3",
>          "question":"FARMER HOLDING",
>           "actions":[
>                 {
>                    "text":"",
>                    "figure":"ThickCross"
>                 },
>                 {
>                    "text":"",
>                    "figure":"BpmnEventConditional",
>                    "fill":"yellow"
>                 }
>              ],
>             "fill":{
>             "class":"go.Brush",
>             "type":"Linear",
>             "colorStops":{
>                "0":"orange",
>                "1":"yellow"
>              }
>            }
>       },
>       {
>          "key":"4",
>          "question":"HEATON HOLDING",
>          "actions":[
>             {
>                "text":"",
>                "figure":"ThickCross"
>             },
>             {
>                "text":"",
>                "figure":"BpmnEventConditional",
>                "fill":"yellow"
>             }
>          ],
>          "fill":{
>             "class":"go.Brush",
>             "type":"Linear",
>             "colorStops":{
>                "0":"yellow",
>                "1":"orange"
>             }
>          }
>       },
>       {
>          "key":"5",
>          "question":"FRUIT",
>          "actions":[
>             {
>                "text":"",
>                "figure":"ThickCross"
>             },
>             {
>                "text":"",
>                "figure":"BpmnEventConditional",
>                "fill":"yellow"
>             }
>          ]
>       },
>       {
>          "key":"7",
>          "question":"LODGING",
>          "actions":[
>             {
>                "text":"",
>                "figure":"ThickCross"
>             },
>             {
>                "text":"",
>                "figure":"BpmnEventConditional",
>                "fill":"yellow"
>             }
>          ]
>       },
>       {
>          "key":"6",
>          "question":"WHEAT",
>          "actions":[
>             {
>                "text":"",
>                "figure":"ThickCross"
>             },
>             {
>                "text":"",
>                "figure":"BpmnEventConditional",
>                "fill":"yellow"
>             }
>          ]
>       },
>       {
>          "key":"8",
>          "question":"WHEAT 2",
>          "actions":[
>             {
>                "text":"",
>                "figure":"ThickCross"
>             },
>             {
>                "text":"",
>                "figure":"BpmnEventConditional",
>                "fill":"yellow"
>             }
>          ]
>       },
>       {
>          "key":"9",
>          "question":"WHEAT 3",
>          "actions":[
>             {
>                "text":"",
>                "figure":"ThickCross"
>             },
>             {
>                "text":"",
>                "figure":"BpmnEventConditional",
>                "fill":"yellow"
>             }
>          ]
>       },
>       {
>          "key":"10",
>          "question":"WHEAT 4",
>          "actions":[
>             {
>                "text":"",
>                "figure":"ThickCross"
>             },
>             {
>                "text":"",
>                "figure":"BpmnEventConditional",
>                "fill":"yellow"
>             }
>          ]
>       }
>    ],
>    "linkDataArray":[
>       {
>          "from":"1",
>          "to":"2",
>          "answer":"10%"
>       },
>       {
>          "from":"1",
>          "to":"3",
>          "answer":"60%"
>       },
>       {
>          "from":"1",
>          "to":"4",
>          "answer":"30%"
>       },
>       {
>          "from":"3",
>          "to":"5",
>          "answer":"10%"
>       },
>       {
>          "from":"3",
>          "to":"6",
>          "answer":"20%"
>       },
>       {
>          "from":"3",
>          "to":"7",
>          "answer":"70%"
>       },
>       {
>          "from":"6",
>          "to":"8",
>          "answer":"20%"
>       },
>       {
>          "from":"6",
>          "to":"9",
>          "answer":"50%"
>       },
>       {
>          "from":"6",
>          "to":"10",
>          "answer":"30%"
>       }
>    ]
> }
>    </textarea>
> </div>
> </body>
> </html>
  1. The programmer can provide behavior of a “Button” by setting its GraphObject.click property to be an event handler. There are examples of this in many samples. Read more at http://gojs.net/latest/api/symbols/GraphObject.html#click.
  2. I only see one button in your node template (including the item template).
    The more general answer is in learning how to use Panels. Please read http://gojs.net/latest/intro/panels.html and http://gojs.net/latest/intro/tablePanels.html and http://gojs.net/latest/intro/sizing.html.
  3. The reason I tell people to look at http://gojs.net/latest/extensions/Buttons.js is because that is how the buttons are defined, so they can see how to customize them. They can do that either by setting properties or by copying and modifying the code.
    In your case, if you look at the “TreeExpanderButton” in extensions/Buttons.js, you can see how if you set the _treeExpandedFigure and _treeCollapsedFigure properties, the Shape’s figure will be different.
        $("TreeExpanderButton",
          {
            _treeExpandedFigure: "TriangleUp",
            _treeCollapsedFigure: "TriangleDown"
          })

Thanks Walter,

Few more clarifications please.(Please refer the same example shared earlier )

  1. How to select a node by default
  2. Auto positioning the nodes when they overlaps
  3. On node select manually :: can we show only the links of the child nodes of the selected node and its parent (select any node , only its parent and children links should be visible )
  4. Show multiple stroke colors for the links ( eg: red for node 1 to node 2 , blue for node2 to node 3 etc)
  5. selecting node on click of any button inside the node( need to fire ChangedSelection event on select of any button inside the node)

It would be helpful if you can give some sample instead of referring any links.
Thanks in advance.

The best way to provide samples is by giving links to existing sample apps or examples in the documentation.

  1. Call Diagram.select or set the Part.isSelected property.
  2. That depends on the circumstances by which the nodes became overlapped. All of the standard Layouts normally ensure that nodes do not overlap, so if you set Diagram.layout, that should work.
    If you mean instead when users have manually moved nodes, you could either prevent it from happening in the first place, or you can fix it up afterwards.
    For the former case, consider this sample: http://gojs.net/latest/samples/dragUnoccupied.html
    For the latter case, implement a “SelectionMoved” DiagramEvent listener to move the selected nodes.
  3. This sounds just like what the Local View sample does: http://gojs.net/latest/samples/localView.html
  4. This is demonstrated by several samples, such as http://gojs.net/latest/samples/basic.html and http://gojs.net/latest/samples/euler.html
  5. Your button click event handler can select the node that it’s in:
  {
    click: function(e, obj) { obj.part.isSelected = true; ... }
  }

Thanks walter, it was helpful.

With regard to point #3 : i dont want to create a local view out of the existing diagram. With in the same diagram ,is it possible to show only the links of the child nodes of the selected node and parent .

One more : Can we apply zoom feature ? i mean zoom in and Zoom out etc.

Well, you could set the opacity to zero of all Parts that you do not want to show.

But maybe you would rather highlight those parts you do want to show, instead of hiding everything else? If that might be the case for your app, read http://gojs.net/latest/intro/highlighting.html. Note the last example.

Every GoJS diagram supports industry standard zooming techniques by keyboard, mouse wheel, and pinch. Unless your app disables zooming somehow. Read:
http://gojs.net/latest/intro/commands.html
http://gojs.net/latest/intro/permissions.html
http://gojs.net/latest/api/symbols/ToolManager.html#mouseWheelBehavior
Or just try it.

Thanks Walter.

Can you clarify further on the following:

  1. How to highlight the parent node as well ? http://gojs.net/latest/intro/highlighting.html has only node children were getting highlighted ( need to inlcude selected node parent as well)
  2. When any node is selected apart from its parent and children all other node links should be hidden or blurred (using opacity or something else plz share some ex.)
  3. how to use Graphlink moodel to set the data and links to model for IVR Charts?
    eg: instead of myDiagram.model = go.Model.fromJson(josn) using myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
  1. The Node class, http://gojs.net/latest/api/symbols/Node.html, has a bunch of methods which help you navigate the graph. Adapt the code in the showConnections function from that page about highlighting, http://gojs.net/latest/intro/highlighting.html.
  2. Yes, set the GraphObject.opacity to zero or to a small number, on all of the Parts that you want to de-emphasize.
  3. Yes, that’s exactly how to set the Diagram.model to a new model if you want to build it programmatically rather than just loading one saved by Model.toJson. I think if you search the samples you’ll find a number of examples where the model is constructed programmatically.

That’s particularly the case where the modeled data already exists in memory, such as http://gojs.net/latest/samples/classHierarchy.html and http://gojs.net/latest/samples/DOMTree.html and http://gojs.net/latest/samples/visualTree.html. Although those are all tree-structured.

Thanks walter.

how can I show bootstrap popover with some content to the right of the button element?
Is there a way to specify an ID for the button that can be used by the popover (getElementById) to place the popover to the right of the button for example? Please share some samples .

Sample code:

$(“Button”,{width:20, height:20,alignment: new go.Spot(1, 1),cursor: “pointer”},
$(go.Picture,{ source: “card.png”, width:20, height:20}),{
click: function(e, obj) {

                                }
                            }
                        )

I have already answered you by email, so you didn’t need to ask here.

But by coincidence I have already answered here too: Launching bootstrap pop-over on click of a button