Basic Swim lane diagram with 3 rows

GoJS
1

Is there a basic example that I can find to make a Swim Lane diagram? I was looking to implement something really basic with 3 rows and some nodes on each row connect to other nodes on next rows.

Here is a image representation for it.

image
image1539×783 5.18 KB

2

That doesn’t really look like a swim lane diagram. In a swimming pool, swimmers are generally supposed to go along the lanes, not across them.

What you show looks more like what we call layer bands. See for example Layer Bands using a Background Part, although there the direction of growth is towards the right so the bands are vertical. In your case it appears that the direction of links generally goes downwards so the bands are horizontal.

I don’t know if TreeLayout is appropriate for your app – it depends on what the link relationships are. You can implement layer bands in other layered layouts, including LayeredDigraphLayout.

Might there be some nodes in each layer that do not have any connected links at all? If so, will you be providing that information in the model?

3

@walter thanks for the reply.

That is correct the direction will be downwards. I should be able to make the layer bands downwards? I would be using the TreeLayout all the link will have a parent. Sorry in the image I was missing some links for the other nodes. But I do have all the parents and child nodes.

4

Then just use that “Layer Bands” sample. Change the HORIZONTAL variable to be false and change the itemTemplate of the “Bands” node template so that each band looks the way that you like. And have the model data include the band header(s) that you want, used by that itemTemplate.

5

@walter is there a typescript version of that sample code? I’m using it on my Angular application and it gives me an error when I add the BandedTreeLayout to the layout option.

    let myDiagram = $(go.Diagram, "networkDiagram", {
      layout: $(BandedTreeLayout, {
        angle: HORIZONTAL ? 0 : 90,
        arrangement: HORIZONTAL ? go.TreeLayout.ArrangementVertical : go.TreeLayout.ArrangementHorizontal
      }),
      "undoManager.isEnabled": true
    });

I declared the Template before the @Component section. Should I move to an external file?

6

What is the error? Is that custom layout class not defined beforehand for the compiler?

7

@walter this is the error I get.

 ERROR in src/app/views/xxxxx/logic/xxxx-network-diagram/xxxxx-network-diagram.component.ts(200,17): error TS2345: Argument of type '() => void' is not assignable to parameter of type 'ConstructorType<() => void>'.
      Type '() => void' provides no match for the signature 'new (...args: any[]): any'.

the app builds. I just see that error on the console when it builds.

8

And does it run correctly?

You might want to cast BandedTreeLayout as a TreeLayout.

9

@walter It does run correctly, it just display the error on the build.

Do you have a sample on how to cast as a TreeLayout?

10 
$(BandedTreeLayout as go.TreeLayout, . . .
11

@walter

that gives me this error

ERROR in src/app/views/xxxxxx/xxxxx/xxxxxx-network-diagram/xxxxxxxxx-network-diagram.component.ts(175,17): error TS2345: Argument of type 'TreeLayout' is not assignable to parameter of type 'ConstructorType<TreeLayout>'.
      Type 'TreeLayout' provides no match for the signature 'new (...args: any[]): any'.
    src/app/views/xxxxxxx/xxxxxxx/xxxxxxx-network-diagram/xxxxxx-network-diagram.component.ts(175,17): error TS2352: Conversion of type '() => void' to type 'TreeLayout' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
     error TS2352: Conversion of type '() => void' to type 'TreeLayout' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
      Type '() => void' is missing the following properties from type 'TreeLayout': createNetwork, makeNetwork, doLayout, initializeTreeVertexValues, and 73 more.
12

That error also does not make sense. Both the original code and this modified code are correct because the compiled code runs correctly.

How are you importing BandedTreeLayout? Check the import statements in all of your files to make sure they all refer to the correct files.

13

So I made some changes to what you emailed me and it is working now.

    this.myDiagram = $(go.Diagram, "networkDiagram", {
      layout: new BandedTreeLayout()
    });

    this.myDiagram.layout.angle = HORIZONTAL ? 0 : 90;
    this.myDiagram.layout.arrangement = HORIZONTAL ? go.TreeLayout.ArrangementVertical : go.TreeLayout.ArrangementHorizontal;