How to use the gojs.Node function in gojs

$(go.Shape, { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),

        $(go.Shape, { alignment: go.Spot.BottomLeft, cursor: "se-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
        $(go.Shape, { alignment: go.Spot.Bottom, cursor: "s-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
        $(go.Shape, { alignment: go.Spot.BottomRight, cursor: "sw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" })
      );

    var nodeRotateAdornmentTemplate =
      $(go.Adornment,
        { locationSpot: go.Spot.Center, locationObjectName: "CIRCLE" },
        $(go.Shape, "Circle", { name: "CIRCLE", cursor: "pointer", desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
        $(go.Shape, { geometryString: "M3.5 7 L3.5 30", isGeometryPositioned: true, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] })
      );

    myDiagram.nodeTemplate =
      $(go.Node, "Spot",
        { locationSpot: go.Spot.Center },
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        { selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate },
        { resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate },
        { rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate },
        new go.Binding("angle").makeTwoWay(),
        // the main object is a Panel that surrounds a TextBlock with a Shape
        $(go.Panel, "Auto",
          { name: "PANEL" },
          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

function textStyle() {
      return {
        font: "9pt  Segoe UI,sans-serif",
        stroke: "white"
      };
    }

    // This converter is used by the Picture.
    function findHeadShot(key) {
      if (key < 0 || key > 16) return "images/HSnopic.png"; // There are only 16 images on the server
      return "images/HS" + key + ".png"
    }

    // the template we defined earlier
    this.diagram.nodeTemplate =
      $(go.Node, "Auto",
        // for sorting, have the Node.text be the data.name
        new go.Binding("text", "name"),
        // 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"

portId: ''  // so links will go to the shape, not the whole node
                    },
                    new go.Binding('fill', 'color')),
                this.$(go.TextBlock,
                    {
                        name: 'TEXTBLOCK',
                        alignment: go.Spot.Right,
                        alignmentFocus: go.Spot.Left
                    },
                    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,
                {

s += param.name + ": " + param.type;
              }
              return s + ")";
          })),
        // method return type, if any
        $(go.TextBlock, "",
          new go.Binding("text", "type", function(t) { return (t ? ": " : ""); })),
        $(go.TextBlock,
          { isMultiline: false, editable: true },
          new go.Binding("text", "type").makeTwoWay())
      );

    // this simple template does not have any buttons to permit adding or
    // removing properties or methods, but it could!
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        {
          locationSpot: go.Spot.Center,
          fromSpot: go.Spot.AllSides,
          toSpot: go.Spot.AllSides
        },
        $(go.Shape, { fill: "lightyellow" }),
        $(go.Panel, "Table",
          { defaultRowSeparatorStroke: "black" },
          // header
          $(go.TextBlock,
            {
              row: 0, columnSpan: 2, margin: 3, alignment: go.Spot.Center,
              font: "bold 12pt sans-serif",
              isMultiline: false, editable: true
            },
            new go.Binding("text", "name").makeTwoWay()),

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
                    selectionAdorned: false, // keep it false to differentiate between click and drag of a node..
                    click: (e: go.InputEvent, obj: go.GraphObject): void => { this.nodeClicked(e, obj); },
                    toolTip: commonToolTip,
                },
                this.$(go.Shape, 'Circle',
                    {
                        name: 'SHAPE',
                        fill: 'lightgray',  // default value, but also data-bound
                        stroke: 'transparent',
                        strokeWidth: 2,
                        desiredSize: new go.Size(20, 20),
                        portId: ''  // so links will go to the shape, not the whole node
                    },

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'))
          )

      // define the Node template, representing an entity
      this.diagram.nodeTemplate =
          $(go.Node, 'Auto', // the whole node panel
            { selectionAdorned: true,
              resizable: true,
              layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
              fromSpot: go.Spot.AllSides,
              toSpot: go.Spot.AllSides,
              isShadowed: true,
              shadowColor: '#C5C1AA' },
            new go.Binding('location', 'location').makeTwoWay(),
            // whenever the PanelExpanderButton changes the visible property of the 'LIST' panel,
            // clear out any desiredSize set by the ResizingTool.
            new go.Binding('desiredSize', 'visible', () => new go.Size(NaN, NaN)).ofObject('LIST'),
            // define the node's outer shape, which will surround the Table
            $(go.Shape, 'Rectangle',
              { fill: this.getBrush('lightgrad'), stroke: '#756875', strokeWidth: 3 }),
            $(go.Panel, 'Table',
              { margin: 8, stretch: go.GraphObject.Fill },

isReadOnly: true
            });

        this.myDiagram.allowHorizontalScroll = true;
        this.myDiagram.allowVerticalScroll = true;
        this.myDiagram.allowZoom = false;
        this.myDiagram.allowSelect = true;
        this.myDiagram.autoScale = Diagram.Uniform;
        this.myDiagram.contentAlignment = go.Spot.LeftCenter;
        this.myDiagram.toolManager.panningTool.isEnabled = false;
        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

private onTextEdited(e: go.DiagramEvent) {
        const tb = e.subject;
        if (tb === null) {
            return;
        }
        const node = tb.part;
        if (node instanceof go.Node && this.props.onTextChange) {
            this.props.onTextChange({ key: node.key as string, text: tb.text });
        }
    }
}

public static makeNodeGroupTemplate(serverMapComponent: any) {
        const $ = go.GraphObject.make;
        return $(
            go.Node,
            go.Panel.Auto,
            {
                position: new go.Point(0, 0),
                selectionAdorned: false,
                click: (event: go.InputEvent, obj: go.GraphObject) => {
                    serverMapComponent.onClickNode(event, obj);
                },
                doubleClick: (event: go.InputEvent, obj: go.GraphObject) => {
                    serverMapComponent.onDoubleClickNode(event, obj);
                },
                contextClick: (event: go.InputEvent, obj: go.GraphObject) => {
                    serverMapComponent.onContextClickNode(event, obj);
                }
            },
            new go.Binding('key', 'key'),
            new go.Binding('category', 'serviceType'),