How to use the gojs.GraphObject function in gojs

init() {
        const $ = go.GraphObject.make;  // for conciseness in defining templates

        this.myDiagram = $(
            go.Diagram,
            'myDiagramDiv',  // create a Diagram for the DIV HTML element
            {
                initialContentAlignment: go.Spot.LeftCenter,
                layout: $(
                    go.TreeLayout,
                    {
                        angle: 0,
                        arrangement: go.TreeLayout.ArrangementVertical,
                        treeStyle: go.TreeLayout.StyleLayered
                    }),
                isReadOnly: true
            });

renderDiagram() {
    var $ = go.GraphObject.make;
    var myDiagram: any = {};
    var myPalette: any = {};
    myDiagram =
      $(go.Diagram, "myStateMachineDiagramDiv",  // must name or refer to the DIV HTML element
        {
          grid: $(go.Panel, "Grid",
                  $(go.Shape, "LineH", { stroke: "lightgray", strokeWidth: 0.5 }),
                  $(go.Shape, "LineH", { stroke: "gray", strokeWidth: 0.5, interval: 10 }),
                  $(go.Shape, "LineV", { stroke: "lightgray", strokeWidth: 0.5 }),
                  $(go.Shape, "LineV", { stroke: "gray", strokeWidth: 0.5, interval: 10 })
                ),
          "draggingTool.dragsLink": true,
          "draggingTool.isGridSnapEnabled": true,
          "linkingTool.isUnconnectedLinkValid": true,
          "linkingTool.portGravity": 20,
          "relinkingTool.isUnconnectedLinkValid": true,

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

          // Rules
          $(go.TextBlock,
            {
                row: 9, columnSpan: 2, margin: 3, alignment: go.Spot.LeftCenter,
                font: "italic bold 10pt sans-serif",
                isMultiline: false, editable: true
            },"Rules"),  
          // methods

import React, {
  Component
}
from 'react';
import go from 'gojs';


export default class GoFlow extends Component {
  diagram = null
  $ = go.GraphObject.make;

  initDiagram() {
    this.diagram =
      this.$(go.Diagram, "go-flow", {
        initialContentAlignment: go.Spot.Center, // center Diagram contents
        "undoManager.isEnabled": false // enable Ctrl-Z to undo and Ctrl-Y to redo
      });
    this.diagram.isReadOnly = true;
  }
  loadData(props) {
    var $ = this.$;

    // This function provides a common style for most of the TextBlocks.
    // Some of these values may be overridden in a particular TextBlock.
    function textStyle() {
      return {

selector: 'explore-search-details',
    templateUrl: './explorative-search-details.component.html',
    styleUrls: ['./explorative-search-details.component.css'],
    providers: [ExplorativeSearchService]
})


export class ExplorativeSearchDetailsComponent implements AfterViewInit, OnChanges {

    @Input() config: Object; // this comes from `explorative-search-form.component` (Parent)
    @Input() lang: string; // language selection which comes from the Parent
    @ViewChild('myDiagramDiv') div: ElementRef; // GoJS div as mentioned above in the @Component `template` param
    private hiddenElement: boolean = false; // to hide the graph or table
    /*GOJS Variables*/
    private myDiagram: go.Diagram;
    private $ = go.GraphObject.make;
    /*Parameters that will be passed to `explorative-search-filter.component (Child)*/
    arrayPassedToChild: any[] = []; // this is passed to the child NOW
    private filterQueryRoot: string;
    private filterQueryRootUrl: string;
    filterQuery: string;
    private nodeFilterName: string;
    private filterJSON: Object;
    /* To store selected properties*/
    private selectedProperties: Array = [];
    private selectedNodeKeys: any[] = [];
    private _nodeKeysBackup: any[] = [];
    /* SPARQL TABLE Variables */
    private sparqlSelectedOption: Object;
    private tableJSON: Object = {};
    private _tableJSONPaths = []; // for storing Paths when the figure is rendered again..
    private collectionOfFiltersFromChildren: any[] = []; // filters from the Children Components

componentDidMount() {
    var $ = go.GraphObject.make;
    var myDiagram: any = {};
    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          "undoManager.isEnabled": true,
          layout: $(go.TreeLayout,
                    { // this only lays out in trees nodes connected by "generalization" links
                      angle: 90,
                      path: go.TreeLayout.PathSource,  // links go from child to parent
                      setsPortSpot: false,  // keep Spot.AllSides for link connection spot
                      setsChildPortSpot: false,  // keep Spot.AllSides
                      // nodes not connected by "generalization" links are laid out horizontally
                      arrangement: go.TreeLayout.ArrangementHorizontal
                    })
        });

new go.Binding('strokeWidth', 'key', (key) => {
                        const type = serverMapComponent.isBaseApplication(key) ? 'main' : 'normal';
                        return ServerMapTheme.general.node[type].strokeWidth;
                    })
                ),
                $(
                    go.Picture,
                    {
                        // row: 0,
                        // column: 0,
                        // width: 100,
                        // height: 100,
                        // imageStretch: go.GraphObject.Uniform,
                        margin: new go.Margin(0, 0, 5, 0),
                        desiredSize: new go.Size(100, 100),
                        imageStretch: go.GraphObject.Uniform,
                        errorFunction: (e: any) => {
                            e.source = ServerMapTheme.general.common.funcServerMapImagePath(ServerMapTemplateWithGojs.NO_IMAGE_FOUND);
                        }
                    },
                    new go.Binding('source', 'serviceType', (type) => {
                        return ServerMapTheme.general.common.funcServerMapImagePath(type);
                    })
                ),
                $(
                    go.Shape,
                    {
                        row: 0,
                        column: 0,
                        fill: null,
                        name: 'BORDER_SHAPE',
                        width: 108,

).subscribe((diagram: go.Diagram) => {
            if (this.initialized) {
                this.overview.observed = diagram;
            } else {
                this.overview = go.GraphObject.make(go.Overview, this.overviewWrapper.nativeElement, {
                    observed: diagram
                });
                this.overview.box.elt(0)['figure'] = 'Rectangle';
                this.overview.box.elt(0)['stroke'] = '#E7555A';
                this.overview.box.elt(0)['strokeWidth'] = .5;
                this.initialized = true;
                this.showOverview = true;
            }
            this.cd.detectChanges();
        });
    }

private createDiagram(diagramId: string): Diagram {
        const $ = go.GraphObject.make;

        const myDiagram: Diagram = $(go.Diagram, diagramId, {
            initialContentAlignment: go.Spot.LeftCenter,
            layout: $(go.TreeLayout, {
                angle: 0,
                arrangement: go.TreeLayout.ArrangementVertical,
                treeStyle: go.TreeLayout.StyleLayered
            }),
            isReadOnly: false,
            allowHorizontalScroll: true,
            allowVerticalScroll: true,
            allowZoom: false,
            allowSelect: true,
            autoScale: Diagram.Uniform,
            contentAlignment: go.Spot.LeftCenter,
            TextEdited: this.onTextEdited

public static makeLinkTemplate(serverMapComponent: any) {
        const $ = go.GraphObject.make;
        return $(
            go.Link,
            {
                corner: 10,
                cursor: 'pointer',
                layerName: 'Foreground',
                reshapable: false,
                selectionAdorned: false,
                click: (event: go.InputEvent, obj: go.GraphObject) => {
                    serverMapComponent.onClickLink(event, obj);
                },
                doubleClick: (event: go.InputEvent, obj: go.GraphObject) => {
                    serverMapComponent.onDoubleClickLink(event, obj);
                },
                contextClick: (event: go.InputEvent, obj: go.GraphObject) => {
                    serverMapComponent.onContextClickLink(event, obj);