10 Layout
Step 11/12 — 11 Layout Data
01 Creating the View 02 Creating Graph Elements 03 Managing Viewport 04 Setting Styles 05 Label Placement 06 Basic Interaction 07 Undo Clipboard Support 08 Grouping 09 Data Binding 10 Layout 11 Layout Data 12 Analysis Algorithms
12 Analysis Algorithms

# Layout Data

## How to consider graph data in automatic layout

This step shows how to configure a layout algorithm using the information stored in the first label of each node.

In this demo, the preferred alignment for each node within its layer (top, center or bottom) is defined by its label. We use this value to configure the layout algorithm.

- Select a different alignment for a node by changing its label text to `Top`, `Center` or `Bottom`. The layout is updated automatically after editing a label.

- Create new nodes and run a new layout. Newly created nodes will be center-aligned, unless otherwise specified by the user.

Note | Nodes with label text other than 'Top', 'Center' or 'Bottom' will be center-aligned.

We create a LayoutData instance that defines how each node should be aligned.

    // Configure the layout data using the information from the node labels
    const hierarchicLayoutData = new HierarchicLayoutData({
      nodeLayoutDescriptors: (
        node: INode
      ): HierarchicLayoutNodeLayoutDescriptor =>
        new HierarchicLayoutNodeLayoutDescriptor({
          // Set the alignment of the node based on the label
          layerAlignment: getAlignment(node)
        })
    })

The layer alignment can take values between 0 and 1, where 0 corresponds to top alignment, 0.5 to center alignment and 1.0 to bottom alignment.

    function getAlignment(node: INode): number {
      const text = node.labels.at(0)?.text?.toLowerCase() ?? 'center'
      switch (text) {
        default:
        case 'center':
          return 0.5
        case 'top':
          return 0.0
        case 'bottom':
          return 1.0
      }
    }

The layout data is used as a parameter for morphLayout to pass the information to the layout algorithm.

    await graphComponent.morphLayout({
      layout: new MinimumNodeSizeStage(hierarchicLayout),
      layoutData: hierarchicLayoutData,
      morphDuration: '1s',
      easedAnimation: true
    })

12 Analysis Algorithms