Not able to drag node in palette properly into flow diagram

GoJS
1

I am trying the data flow diagram example (Data Flow Diagram) but with a palette containing the nodes. When I drag a node into the flow diagram, it appears as just a small rectangle with the ‘Table’, ‘Join’ text, no image of the node with all the ports is shown. Not sure what I need to do other than just creating a palette like below:
myPalette =
$(go.Palette, “myPaletteDiv”, // must name or refer to the DIV HTML element
{
scrollsPageOnFocus: false,
nodeTemplateMap: myDiagram.nodeTemplateMap, // share the templates used by myDiagram
model: new go.GraphLinksModel([ // specify the contents of the Palette
{ category: “Table”, text: “Table” },
{ category: “Join”, text: “Join” },
{ category: “Project”, text: “Project” },
{ category: “Filter”, text: “Filter” },
{ category: “Group”, text: “Group” },
{ category: “Sort”, text: “Sort” },
])
});

2

One thing I saw was that if I remove the “nodeCategoryProperty”: “type”, from the textarea definition, then I was able to get the node properly dragged into the flow diagram. So somehow having this declared made the dragging of the node buggy. But now I am running into another problem - when I save the diagram I get the following being saved - the Nodes are being keys like -1, -2, -3 etc. I would have expected positive key numbers.

{ “class”: “go.GraphLinksModel”,
“linkFromPortIdProperty”: “frompid”,
“linkToPortIdProperty”: “topid”,
“nodeDataArray”: [
{“category”:“Join”, “text”:“Join”, “key”:-2},
{“category”:“Table”, “text”:“Table”, “key”:-1},
{“category”:“Project”, “text”:“Project”, “key”:-3},
{“category”:“Join”, “text”:“Join”, “key”:-4}
],
“linkDataArray”: [
{“from”:-1, “to”:-2, “frompid”:“OUT”, “topid”:“L”},
{“from”:-3, “to”:-2, “frompid”:“OUT”, “topid”:“R”},
{“from”:-2, “to”:-4, “frompid”:“UL”, “topid”:“L”},
{“from”:-2, “to”:-4, “frompid”:“ML”, “topid”:“R”}
]}

3

Yes, if you are using the node templates from the Data Flow sample, your Palette model data needs to have the sample properties as the Data Flow Diagram’s model:

    myPalette =
      $(go.Palette, "myPaletteDiv", // must name or refer to the DIV HTML element
        {
          scrollsPageOnFocus: false,
          nodeTemplateMap: myDiagram.nodeTemplateMap, // share the templates used by myDiagram
          model: $(go.GraphLinksModel,
            {
              nodeCategoryProperty: "type",
              linkFromPortIdProperty: "frompid",
              linkToPortIdProperty: "topid",
              nodeDataArray: [ // specify the contents of the Palette
                { type: "Table", text: "Table" },
                { type: "Join", text: "Join" },
                { type: "Project", text: "Project" },
                { type: "Filter", text: "Filter" },
                { type: "Group", text: "Group" },
                { type: "Sort", text: "Sort" },
              ]
            })
        });

Those model properties named “…Property” give the you the flexibility to use whatever property names that you want in your model data.

Regarding key values, you can control the keys that are generated when there is no key on the data or when the key value is a duplicate of an existing node’s key. Model | GoJS API
Of course you cannot have arbitrary functions in JSON-formatted text, so you will need to assign that property to a suitable function when you initialize the model.