How to use the gojs.Binding function in gojs

default: return "";
      }
    }

    function convertToArrow(r) {
      switch (r) {
        case "generalization": return "Triangle";
        case "aggregation": return "StretchedDiamond";
        default: return "";
      }
    }

    myDiagram.linkTemplate =
      $(go.Link,
        { routing: go.Link.Orthogonal },
        new go.Binding("isLayoutPositioned", "relationship", convertIsTreeLink),
        $(go.Shape),
        $(go.Shape, { scale: 1.3, fill: "white" },
          new go.Binding("fromArrow", "relationship", convertFromArrow)),
        $(go.Shape, { scale: 1.3, fill: "white" },
          new go.Binding("toArrow", "relationship", convertToArrow))
      );

    // console.log('doc engine response', this.props.docs);
    
    // setup a few example class nodes and relationships
    var nodedata: any = [
      {
        key: 1,
        name: this.props.docs.rootModel.modelName,
        libraries: [],
        components: []

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() {

},"Attributes"), 
            // properties
            $(go.TextBlock, "Attributes",
                { row: 2, font: "italic 10pt sans-serif" },
                new go.Binding("visible", "visible", function(v) { return !v; }).ofObject("PROPERTIES")),
            $(go.Panel, "Vertical", { name: "PROPERTIES" },
                new go.Binding("itemArray", "attributes"),
                {
                row: 2, margin: 3, stretch: go.GraphObject.Fill,
                defaultAlignment: go.Spot.Left, background: "lightyellow",
                itemTemplate: propertyTemplate
                }
            ),
            $("PanelExpanderButton", "PROPERTIES",
                { row: 2, column: 1, alignment: go.Spot.TopRight, visible: false },
                new go.Binding("visible", "attributes", function(arr) { return arr.length > 0; })),

            // Libraries
          $(go.TextBlock,
            {
                row: 3, columnSpan: 2, margin: 3, alignment: go.Spot.LeftCenter,
                font: "italic bold 10pt sans-serif",
                isMultiline: false, editable: true
            },"Libraries"), 
          // properties
          $(go.TextBlock, "Libraries",
            { row: 4, font: "italic 10pt sans-serif" },
            new go.Binding("visible", "visible", function(v) { return !v; }).ofObject("PROPERTIES")),
          $(go.Panel, "Vertical", { name: "PROPERTIES" },
            new go.Binding("itemArray", "libraries"),
            {
              row: 4, margin: 3, stretch: go.GraphObject.Fill,

case "package": return "~";
        default: return v;
      }
    }

    // the item template for properties
    var propertyTemplate =
      $(go.Panel, "Horizontal",
        // property visibility/access
        $(go.TextBlock,
          { isMultiline: false, editable: false, width: 12 },
          new go.Binding("text", "visibility", convertVisibility)),
        // property name, underlined if scope=="class" to indicate static property
        $(go.TextBlock,
          { isMultiline: false, editable: true },
          new go.Binding("text", "name").makeTwoWay(),
          new go.Binding("isUnderline", "scope", function(s) { return s[0] === 'c' })),
        // property type, if known
        $(go.TextBlock, "",
          new go.Binding("text", "type", function(t) { return (t ? ": " : ""); })),
        $(go.TextBlock,
          { isMultiline: false, editable: true },
          new go.Binding("text", "type").makeTwoWay()),
        // property default value, if any
        $(go.TextBlock,
          { isMultiline: false, editable: false },
          new go.Binding("text", "default", function(s) { return s ? " = " + s : ""; }))
      );

    // the item template for methods
    var methodTemplate =
      $(go.Panel, "Horizontal",

$(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
            },
            new go.Binding("figure"),

$(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
            },
            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

},"i18nKeys"),  
          // methods
          $(go.TextBlock, "i18nKeys",
            { row: 12, 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", "i18nKeys"),
            {
              row: 12, margin: 3, stretch: go.GraphObject.Fill,
              defaultAlignment: go.Spot.Left, background: "lightyellow",
              itemTemplate: methodTemplate
            }
          ),
          $("PanelExpanderButton", "METHODS",
            { row: 12, column: 1, alignment: go.Spot.TopRight, visible: false },
            new go.Binding("visible", "i18nKeys", function(arr) { return arr.length > 0; })),
            
            // Actions
          $(go.TextBlock,
            {
                row: 13, columnSpan: 2, margin: 3, alignment: go.Spot.LeftCenter,
                font: "italic bold 10pt sans-serif",
                isMultiline: false, editable: true
            },"actions"),  
          // methods
          $(go.TextBlock, "Actions",
            { 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,

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) => {
                        const type = serverMapComponent.isBaseApplication(key) ? 'main' : 'normal';
                        return ServerMapTheme.general.node[type].fill.top;
                    }),
                    new go.Binding('stroke', 'key', (key, node) => {
                        const type = serverMapComponent.isBaseApplication(key) ? 'main' : 'normal';
                        return ServerMapTheme.general.node[type].stroke;
                    }),
                    new go.Binding('strokeWidth', 'key', (key) => {
                        const type = serverMapComponent.isBaseApplication(key) ? 'main' : 'normal';
                        return ServerMapTheme.general.node[type].strokeWidth;
                    })
                ),
                $(
                    go.Picture,
                    {
                        // row: 0,

)
                ),
                $(
                    go.Panel, 'Auto',
                    { row: 0, column: 0, alignment: go.Spot.TopCenter },
                    $(
                        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,