How to use the gojs.Panel function in gojs

// bind the Part.layerName to control the Node's layer depending on whether it isSelected
        new go.Binding("layerName", "isSelected", function(sel) {
          return sel ? "Foreground" : "";
        }).ofObject(),
        // define the node's outer shape
        $(go.Shape, "Rectangle", {
          name: "SHAPE",
          fill: "#00FF00",
          stroke: null,
          // set the port properties:
          portId: "",
          fromLinkable: true,
          toLinkable: true,
          cursor: "pointer"
        }),
        $(go.Panel, "Horizontal",
          $(go.Picture, {
              name: "Picture",
              desiredSize: new go.Size(39, 50),
              margin: new go.Margin(6, 8, 6, 10),
            },
            new go.Binding("source", "key", findHeadShot)),
          // define the panel where the text will appear
          $(go.Panel, "Table", {
              maxSize: new go.Size(150, 999),
              margin: new go.Margin(6, 10, 0, 3),
              defaultAlignment: go.Spot.Left
            },
            $(go.RowColumnDefinition, {
              column: 2,
              width: 4
            }),

{
                initialContentAlignment: go.Spot.Center,
                padding: 10,
                isReadOnly: false,
                'animationManager.isEnabled': false, // disable Animation
                'allowVerticalScroll': false, // no vertical scroll for diagram
                'toolManager.mouseWheelBehavior': go.ToolManager.WheelNone // do not zoom diagram on wheel scroll
            });
        this.myDiagram.addLayerBefore(this.$(go.Layer, { name: 'red' }), this.myDiagram.findLayer('Grid'));
        this.myDiagram.addLayerBefore(this.$(go.Layer, { name: 'green' }), this.myDiagram.findLayer('Grid'));
        let commonToolTip = this.$(go.Adornment, 'Auto',
            {
                isShadowed: true
            },
            this.$(go.Shape, { fill: '#FFFFCC' }),
            this.$(go.Panel, 'Vertical',
                {
                    margin: 3
                },
                this.$(go.TextBlock,  // bound to node data
                    {
                        margin: 4, font: 'bold 12pt sans-serif'
                    },
                    new go.Binding('text')),
                this.$(go.TextBlock,  // bound to Adornment because of call to Binding.ofObject
                    new go.Binding('text', '',
                        (ad) => {
                            return 'Connections: ' + ad.adornedPart.linksConnected.count;
                        }).ofObject())
            )  // end Vertical Panel
        );  // end Adornment
        this.myDiagram.nodeTemplate =

$("PanelExpanderButton", "METHODS",
            { row: 14, column: 1, alignment: go.Spot.TopRight, visible: false },
            new go.Binding("visible", "actions", function(arr) { return arr.length > 0; })),

             // Effects
          $(go.TextBlock,
            {
                row: 15, columnSpan: 2, margin: 3, alignment: go.Spot.LeftCenter,
                font: "italic bold 10pt sans-serif",
                isMultiline: false, editable: true
            },"effects"),  
          // methods
          $(go.TextBlock, "Effects",
            { row: 16, font: "italic 10pt sans-serif" },
            new go.Binding("visible", "visible", function(v) { return !v; }).ofObject("METHODS")),
          $(go.Panel, "Vertical", { name: "METHODS" },
            new go.Binding("itemArray", "effects"),
            {
              row: 16, margin: 3, stretch: go.GraphObject.Fill,
              defaultAlignment: go.Spot.Left, background: "lightyellow",
              itemTemplate: methodTemplate
            }
          ),
          $("PanelExpanderButton", "METHODS",
            { row: 16, column: 1, alignment: go.Spot.TopRight, visible: false },
            new go.Binding("visible", "effects", function(arr) { return arr.length > 0; })),

        // Reducer
          $(go.TextBlock,
            {
                row: 17, columnSpan: 2, margin: 3, alignment: go.Spot.LeftCenter,
                font: "italic bold 10pt sans-serif",

initDiagram () {
      const $ = go.GraphObject.make
      this.diagram =
          $(go.Diagram, 'erDiagramDiv', // must name or refer to the DIV HTML element
            {
              initialContentAlignment: go.Spot.Center,
              allowDelete: false,
              allowCopy: false,
              layout: $(go.ForceDirectedLayout),
              'undoManager.isEnabled': true
            })

      // the template for each attribute in a node's array of item data
      const itemTempl =
          $(go.Panel, 'Horizontal',
            $(go.Shape,
              { desiredSize: new go.Size(10, 10),
                margin: new go.Margin(0, 5, 0, 0) },
              new go.Binding('figure', 'figure'),
              new go.Binding('fill', 'color')),
            $(go.TextBlock,
              { stroke: '#333333',
                font: 'bold 14px sans-serif',
                margin: new go.Margin(0, 10, 0, 0) },
              new go.Binding('text', 'name')),
            $(go.TextBlock,
              { stroke: '#333333',
                font: 'bold 14px sans-serif' },
              new go.Binding('text', 'desc'))
          )

myDiagram.linkTemplate =
      $(go.Link,  // the whole link panel
        { selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate },
        { relinkableFrom: true, relinkableTo: true, reshapable: true },
        {
          routing: go.Link.AvoidsNodes,
          curve: go.Link.JumpOver,
          corner: 5,
          toShortLength: 4
        },
        new go.Binding("points").makeTwoWay(),
        $(go.Shape,  // the link path shape
          { isPanelMain: true, strokeWidth: 2 }),
        $(go.Shape,  // the arrowhead
          { toArrow: "Standard", stroke: null }),
        $(go.Panel, "Auto",
          new go.Binding("visible", "isSelected").ofObject(),
          $(go.Shape, "RoundedRectangle",  // the link shape
            { fill: "#F8F8F8", stroke: null }),
          $(go.TextBlock,
            {
              textAlign: "center",
              font: "10pt helvetica, arial, sans-serif",
              stroke: "#919191",
              margin: 2,
              minSize: new go.Size(10, NaN),
              editable: true
            },
            new go.Binding("text").makeTwoWay())
        )
      );
    const { containers } =  this.props.docs;

contextClick: (event: go.InputEvent, obj: go.GraphObject) => {
                    serverMapComponent.onContextClickNode(event, obj);
                }
            },
            new go.Binding('key', 'key'),
            new go.Binding('category', 'serviceType'),
            $(
                go.Shape,
                {
                    strokeWidth: 0,
                    figure: 'Rectangle',
                    fill: null,
                }
            ),
            $(
                go.Panel,
                go.Panel.Table,
                {
                    cursor: 'pointer'
                },
                $(go.RowColumnDefinition, {column: 0, minimum: 108}),
                $(
                    go.Shape,
                    {
                        row: 0,
                        column: 0,
                        width: 108,
                        height: 108,
                        figure: 'Circle',
                        position: new go.Point(-4, -4),
                    },
                    new go.Binding('fill', 'key', (key) => {

go.Picture,
                        {
                            margin: new go.Margin(5, 0, 0, 0),
                            width: 28,
                            height: 28,
                            source: ServerMapTheme.general.common.funcServerMapImagePath(ServerMapTheme.general.common.icon.filter),
                            visible: false,
                            imageStretch: go.GraphObject.Uniform
                        },
                        new go.Binding('visible', 'isFiltered')
                    )
                )
            ),
            $(
                go.Panel,
                go.Panel.Auto,
                {
                    position: new go.Point(10, 0),
                    width: 120,
                    height: 120
                },
                $(
                    go.Picture,
                    {
                        width: 20,
                        height: 20,
                        source: ServerMapTheme.general.common.funcServerMapImagePath(ServerMapTheme.general.common.icon.error),
                        imageStretch: go.GraphObject.Uniform
                    },
                    new go.Binding('visible', '', (data) => {
                        return data.isAuthorized && data.hasAlert;
                    })