How to remove the group button

How to remove the group button.Can it be triggered in other ways.

image

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
  </head>
  <body>
    <div id="myDiagramDiv" style="border: solid 1px blue; height:600px"></div>
    <script>
      var $ = go.GraphObject.make;

      var myDiagram = $(go.Diagram, 'myDiagramDiv', {
        'undoManager.isEnabled': true, // enable Ctrl-Z to undo and Ctrl-Y to redo
        layout: $(go.TreeLayout, {
          angle: 90,
          arrangement: go.TreeLayout.ArrangementHorizontal,
          isRealtime: false
        })
      });

      myDiagram.nodeTemplate = $(
        go.Node,
        'Auto',
        $(go.Shape, 'Rectangle', { stroke: null, strokeWidth: 0, fill: '#fff' }),
        $(go.TextBlock, { margin: 7, font: 'Bold 14px Sans-Serif' }, new go.Binding('text', 'key'))
      );

      myDiagram.linkTemplate = $(
        go.Link,
        { routing: go.Link.Orthogonal, corner: 10 },
        $(go.Shape, { strokeWidth: 2 }),
        $(go.Shape, { toArrow: 'OpenTriangle' })
      );

      myDiagram.groupTemplate = $(
        go.Group,
        'Auto',
        {
          layout: $(go.TreeLayout, { angle: 90, arrangement: go.TreeLayout.ArrangementHorizontal, isRealtime: false }),
          isSubGraphExpanded: false,
          subGraphExpandedChanged: function(group) {}
        },

        $(go.Shape, 'Circle', { fill: null, stroke: 'gray', strokeWidth: 2 }),

        $(
          go.Panel,
          'Vertical',
          { defaultAlignment: go.Spot.Left, margin: 4 },
          $(
            go.Panel,
            'Horizontal',
            { defaultAlignment: go.Spot.Top },
            // the SubGraphExpanderButton is a panel that functions as a button to expand or collapse the subGraph
            $('SubGraphExpanderButton'),
            $(go.TextBlock, { font: 'Bold 18px Sans-Serif', margin: 4 }, new go.Binding('text', 'key'))
          ),
          $(go.Placeholder, { padding: new go.Margin(0, 10) })
        )
      );

      myDiagram.model.nodeDataArray = [
        { key: 'Beta', isGroup: true },
        { key: 'Gamma' },
        { key: 'Delta' },
        { key: 'Coco', group: 'Beta' }
      ];

      myDiagram.model.linkDataArray = [
        { from: 'Beta', to: 'Gamma' },
        { from: 'Coco', to: 'Delta' }
      ];
    </script>
  </body>
</html>

Remove this line:

$('SubGraphExpanderButton'),

There are many alternatives – your code just has to call https://gojs.net/latest/api/symbols/CommandHandler.html#collapseSubGraph or https://gojs.net/latest/api/symbols/CommandHandler.html#expandSubGraph.

Read more at https://gojs.net/latest/intro/commands.html

Also, see how that button is defined at https://gojs.net/latest/extensions/buttons.js