[Question] Best practice for schematic-like graph using sprotty-elk

[KylarJFH]

Hey,

I have previously asked a few questions regarding elk and sprotty and greatly appreciate your responses.
After working with the sprotty-elk package for a while now, I still find myself stumped while attempting to produce my desired results.

While I know I'm asking a lot, I'd greatly appreciate a best-practise sprotty-elk implementation that creates a graph based on the following file: minimal-schematic-for-github-question.yaml.

The file contains devices with terminals. Terminals can contain pins. These devices, terminals and pins serve as endpoints for electrical connections and are represented by nodes/ports in the graph. Terminals have a property (left/right) that should control where in the device node the terminal is placed.
Connections from the file are represented by edges.

I apologise for the great ask and will appreciate any advice given.

[gfontorbe]

Hi @KylarJFH,

do you already have a translation layer between your yaml file to a sprotty graph? That would be the first step.

Once you have that you need to decide what layout algorithm you want to use for your diagram. Once we know that, we can configure the algorithm so that it behaves as close as possible to what you expect.

[KylarJFH]

Hi @gfontorbe, thanks for taking time. I greatly appreciate it.

After transformation I have an SGraph that looks something like this: minimal-schematic_sgraph.json.

Looking at the available algorithms, I believe layered to be the right choice for this purpose as it mentions circuit schematics on its reference page. What do you think?
With my current styling and configuration, I am getting a graph that looks like shown in the screenshot.

@injectable()
export class SchematicGraphLayoutConfigurator extends DefaultLayoutConfigurator {
  protected override graphOptions(): LayoutOptions | undefined {
    return {
      'org.eclipse.elk.algorithm': 'org.eclipse.elk.layered',
      'org.eclipse.elk.edgeRouting': 'ORTHOGONAL',
      'org.eclipse.elk.direction': 'RIGHT',
      'org.eclipse.elk.hierarchyHandling': 'INCLUDE_CHILDREN',
      'org.eclipse.elk.layered.spacing.nodeNodeBetweenLayers': '100',
      'org.eclipse.elk.layered.spacing.edgeEdgeBetweenLayers': '20',
      'org.eclipse.elk.layered.spacing.edgeNodeBetweenLayers': '20',
      'org.eclipse.elk.spacing.nodeNode': '30',
      'org.eclipse.elk.spacing.labelNode': '5',
      'org.eclipse.elk.spacing.edgeNode': '30',
      'org.eclipse.elk.spacing.edgeEdge': '20',
    };
  }

  protected override nodeOptions(): LayoutOptions | undefined {
    return {
      'org.eclipse.elk.nodeSize.constraints': 'MINIMUM_SIZE NODE_LABELS PORTS PORT_LABELS',
      'org.eclipse.elk.nodeLabels.placement': 'OUTSIDE H_LEFT V_TOP',
      'org.eclipse.elk.portLabels.placement': 'OUTSIDE ALWAYS_OTHER_SAME_SIDE',
    };
  }
}

• Ideally the terminal nodes along with their ports should be placed on the left or right within the device node based on the side property in the yaml. I assume I will need to do some preprocessing of the elkgraph for this. This is the part I have been hung up on the most. I want to constrain the placement of nodes but cannot use the fixed algorithm within the device nodes, since that causes this issue.
• Can a custom LayoutConfigurator be used to apply one set of properties to nodes of type A and another set of properties to type B, or are these configurations always applied to all nodes?
• My intention is to place the label for terminal nodes in their center which and rotating them by 270° clockwise. I would place the label in the center by using 'org.eclipse.elk.nodeLabels.placement': 'INSIDE H_CENTER V_CENTER'. Is there an elk configuration to rotate a label or would I need to do this via a custom view in views.tsx?
• Do you have other general recommendations for my layout?

[gfontorbe]

1. You can "force" nodes to be in the first or last layer in a layered diagram.

One important thing to understand is that if you have nodes inside of nodes, then you basically have a full diagram inside of a node (with the properties that are inherited from the graph configuration).

If have two layers only (left and right) depending on the size, I would look into this. You can pass your node as an argument to the nodeOptions and decide what layer you want your node to be in depending on the side

2. You can use your node as an argument to the nodeOptions method and apply any logic you want before constructing the options object.

3. I don't think ELK handles arbitrary label rotation. You can deal with that in the view, or as a post-processor if needed.

Hope this is helpful.

In case you have more questions, we might consider building an example (or several atomic ones) to illustrate the issues and possible solution. It's good for us to see what users are struggling with and prepare appropriate documentation.

[KylarJFH]

@gfontorbe Thank you once again, I will try to work with these and report back once I've gotten somewhere (or not).