GoJS-server communication - the most efficient way?

Well, our current approach towards this is pretty trivial. What we are actually doing is we post full “nodeDataArray” of our tree layout diagram whenever there is any change (e.g. node creation, deletion, node-text editing etc). These changes are detected by watching the “nodeDataArray” using angular “$.watch” function (as used here in this example Minimal GoJS Sample with AngularJS).

Initially, we tried implementing light API calls by sending each change separately for every event. This approach, sometimes, resulted in inconsistent data in diagram when the operations were performed at a very fast pace.

Using the approach of sending whole of “nodeDataArray” to the server on each change resulted in no inconsistencies of diagram’s data but it has actually messed up our architecture (Insertion and Deletion on every POST call in the back-end).

Ideally, we would like to use all of our API methods (GET, POST, PUT, DELETE), and asynchronously update the nodes on success response from server (without blocking the UI) to update Ids of the nodes. But, we couldn’t find any suitable example for this. If you could point us in right direction, or show us some examples for achieving what we’re are tying to do, it’ll be highly appreciated.

Many Regards.

The basic idea is to implement a Model Changed listener. Either handle ChangedEvents immediately, or preferably handle the ChangedEvents when ChangedEvent | GoJS API. At the latter times you can run through all of the ChangedEvents that are held in the just-finished Transaction and pick out the ones that you want to send server requests.

A relatively new way to handle finished transactions is to send incremental model changes, by calling
Model | GoJS API. Please examine this sample: State Chart With Incremental Saves

We are using a TreeModel for our diagram. And when I tried using the incrementalmodel approach, this error was shown in the console.

Uncaught Error: GraphLinksModel.linkKeyProperty must not be an empty string for .toIncrementalJson() to succeed.

We’ll investigate as soon as we can.

I just tried modifying a sample app that uses a TreeModel, the Org Chart Editor sample. All I did was add this Diagram initialization:

          "ModelChanged": function(e) {
            if (e.isTransactionFinished) {
              // this records each Transaction as a JSON-format string
              console.log(myDiagram.model.toIncrementalJson(e));
            }
          },

As far as I can tell, it’s working well.

My guess is that you have some confusion in your code, because clearly there is a GraphLinksModel that you are using and giving an error message, in addition to the TreeModel that you thought you were using.

This is diagram initialization

 $$(go.Diagram, "orgChartDiagramDiv", // ID of the div
                {
                    initialAutoScale: go.Diagram.Uniform,
                    initialViewportSpot: go.Spot.Center,
                    initialContentAlignment: go.Spot.Center,
                    hasHorizontalScrollbar: false,
                    hasVerticalScrollbar: false,
                    allowHorizontalScroll: true,
                    allowVerticalScroll: true,
                    scrollMode: go.Diagram.InfiniteScroll,
                    "commandHandler.deletesTree": true,
                    "commandHandler.copiesTree": true,
                    "commandHandler.copiesParentKey": true,
                    "toolManager.mouseWheelBehavior": go.ToolManager.WheelScroll,
                    "draggingTool.dragsTree": true,
                    "animationManager.duration": 600,
                    //  "ChangedSelection": updateSelection,
                    "ModelChanged": updateAngular,
                    validCycle: go.Diagram.CycleDestinationTree, // make sure users can only create trees

                    layout: $$(go.TreeLayout, {
                        treeStyle: go.TreeLayout.StyleLastParents,
                        arrangement: go.TreeLayout.ArrangementHorizontal,
                        angle: 90,
                        layerSpacing: 40,
                        nodeSpacing: 85,
                        alternateAngle: 90,
                        alternateLayerSpacing: 35,
                        alternateAlignment: go.TreeLayout.AlignmentCenterChildren,
                        alternateNodeSpacing: 20
                    }),
                    "undoManager.isEnabled": true // enable undo & redo
                }, {

This is load of tree model

orgChartService.loadTree().then(function (orgChartNodesArray) {
            if (orgChartNodesArray.length < 3) {
                $scope.showTips = true;
            }
        

            $scope.model = new go.TreeModel(orgChartNodesArray);
            $scope.model.selectedNodeData = null;
        });

This above code is called well after the diagram is loaded as it waits for the server response. I think it’s what causing the issue.

Apart from this, I’ve searched using CTRL + F, there is no mentioning of “Graphlinks” anywhere in the file.

Am I missing something in the declarations?
Thanks

Yes, it worked after I did the initialization of TreeModel without waiting for the server response.