How to use the gojs.TextBlock function in gojs

new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
          $(go.Shape, "Rectangle",  // default figure
            {
              portId: "", // the default port: if no spot on link data, use closest side
              fromLinkable: true, toLinkable: true, cursor: "pointer",
              fill: "white",  // default color
              strokeWidth: 2
            },
            new go.Binding("figure"),
            new go.Binding("fill")),
          $(go.TextBlock,
            {
              font: "bold 10pt Helvetica, Arial, sans-serif",
              margin: 8,
              maxSize: new go.Size(160, NaN),
              wrap: go.TextBlock.WrapFit,
              editable: false
            },
            new go.Binding("text").makeTwoWay())
        ),
        // four small named ports, one on each side:
        makePort("T", go.Spot.Top, false, true),
        makePort("L", go.Spot.Left, true, true),
        makePort("R", go.Spot.Right, true, true),
        makePort("B", go.Spot.Bottom, true, false),
        { // handle mouse enter/leave events to show/hide the ports
          mouseEnter: function(e, node) { showSmallPorts(node, true); },
          mouseLeave: function(e, node) { showSmallPorts(node, false); }
        },
      );

    function showSmallPorts(node, show) {

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
            }),
            $(go.TextBlock, textStyle(), // the name
              {
                row: 0,
                column: 0,
                columnSpan: 5,
                font: "12pt Segoe UI,sans-serif",
                editable: true,
                isMultiline: false,
                minSize: new go.Size(10, 16)
              },
              new go.Binding("text", "name").makeTwoWay()),
            $(go.TextBlock, "Desc: ", textStyle(), {
              row: 1,
              column: 0
            }),
            $(go.TextBlock, textStyle(), {
                row: 1,

) // end Node

      // define the Link template, representing a relationship
      this.diagram.linkTemplate =
          $(go.Link, // the whole link panel
            {
              selectionAdorned: true,
              layerName: 'Foreground',
              reshapable: true,
              routing: go.Link.AvoidsNodes,
              corner: 5,
              curve: go.Link.JumpOver
            },
            $(go.Shape, // the link shape
              { stroke: '#303B45', strokeWidth: 2.5 }),
            $(go.TextBlock, // the 'from' label
              {
                textAlign: 'center',
                font: 'bold 14px sans-serif',
                stroke: '#1967B3',
                segmentIndex: 0,
                segmentOffset: new go.Point(NaN, NaN),
                segmentOrientation: go.Link.OrientUpright
              },
              new go.Binding('text', 'text')),
            $(go.TextBlock, // the 'to' label
              {
                textAlign: 'center',
                font: 'bold 14px sans-serif',
                stroke: '#1967B3',
                segmentIndex: -1,
                segmentOffset: new go.Point(NaN, NaN),

{
          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;  
    const { value, subValue } = this.state;
    const docName: any = (subValue === 0) ? _.keys(containers[value].reduxActions())[0] : subValue;
    const diagramName = containers[value].docs[docName].template;
    const docVariables = containers[value].docs[docName].vars;

{ row: 14, 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", "actions"),
            {
              row: 14, margin: 3, stretch: go.GraphObject.Fill,
              defaultAlignment: go.Spot.Left, background: "lightyellow",
              itemTemplate: methodTemplate
            }
          ),
          $("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
            }

'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 =
            this.$(go.Node, 'Spot',
                {
                    locationSpot: go.Spot.Center,
                    locationObjectName: 'SHAPE',  // Node.location is the center of the Shape

this.myDiagram.toolManager.mouseWheelBehavior = ToolManager.WheelScroll;

        // define a simple Node template
        this.myDiagram.nodeTemplate =
            $(
                go.Node,
                'Auto',  // the Shape will go around the TextBlock
                { selectionChanged: (node: Node) => this.props.onNodeSelection(node.key as string, node.isSelected) },
                $(
                    go.Shape,
                    'RoundedRectangle',
                    { strokeWidth: 0 },
                    // Shape.fill is bound to Node.data.color
                    new go.Binding('fill', 'color')),
                $(
                    go.TextBlock,
                    { margin: 8 },  // some room around the text
                    // TextBlock.text is bound to Node.data.key
                    new go.Binding('text', 'key'))
            );

        // create the model data that will be represented by Nodes and Links
        this.myDiagram.model = new go.GraphLinksModel(this.props.model.nodeDataArray, this.props.model.linkDataArray);
    }
    render() {

},
                    new go.Binding('text')),
                    new go.Binding('layerName', 'color')
            );

        // this is the root node, at the center of the circular layers
        this.myDiagram.nodeTemplateMap.add('Root',
            this.$(go.Node, 'Auto',
                {
                    locationSpot: go.Spot.Center,
                    selectionAdorned: true,
                    toolTip: commonToolTip
                },
                this.$(go.Shape, 'Circle',
                    { fill: 'white' }),
                this.$(go.TextBlock,
                    { font: 'bold 12pt sans-serif', margin: 5 },
                    new go.Binding('text'))
            ));

        // define the Link template
        this.myDiagram.linkTemplate =
            this.$(go.Link,
                {
                    routing: go.Link.Normal,
                    curve: go.Link.Bezier,
                    selectionAdorned: false,
                    layerName: 'Background'
                },
                this.$(go.Shape,
                    {
                        stroke: 'black',  // default value, but is data-bound

autoScale: Diagram.Uniform,
            contentAlignment: go.Spot.LeftCenter,
            TextEdited: this.onTextEdited
        });

        myDiagram.toolManager.panningTool.isEnabled = false;
        myDiagram.toolManager.mouseWheelBehavior = ToolManager.WheelScroll;

        myDiagram.nodeTemplate = $(
            go.Node,
            'Auto',
            {
                selectionChanged: node => this.props.onNodeSelection(node.key as string, node.isSelected)
            },
            $(go.Shape, 'RoundedRectangle', { strokeWidth: 0 }, new go.Binding('fill', 'color')),
            $(go.TextBlock, { margin: 8, editable: true }, new go.Binding('text', 'label'))
        );

        return myDiagram;
    }

margin: 4
                    },
                    $(
                        go.Picture,
                        {
                            source: ServerMapTheme.general.common.funcServerMapImagePath(ServerMapTheme.general.common.icon.filter),
                            width: 28,
                            height: 28,
                            margin: 1,
                            visible: false,
                            imageStretch: go.GraphObject.Uniform
                        },
                        new go.Binding('visible', 'isFiltered')
                    ),
                    $(
                        go.TextBlock,
                        {
                            name: 'LINK_TEXT',
                            font: ServerMapTheme.general.common.font.normal,
                            margin: new go.Margin(1),
                            textAlign: 'center'
                        },
                        new go.Binding('text', 'totalCount', (val) => {
                            return parseInt(val, 10).toLocaleString();
                        }),
                        new go.Binding('stroke', 'hasAlert', (hasAlert) => {
                            if (hasAlert) {
                                return ServerMapTheme.general.link.normal.fontColor.alert;
                            } else {
                                return ServerMapTheme.general.link.normal.fontColor.normal;
                            }
                        })