structurizr / ui

UI code for Structurizr Lite, on-premises, and cloud service.
https://docs.structurizr.com/ui
MIT License
38 stars 22 forks source link

Client-side automatic layout with Dagre doesn't work with filtered views #57

Open breaker78 opened 4 months ago

breaker78 commented 4 months ago

Description

Using build tag 3196, the page or canvas size for my java generated diagrams automatically adjusted as the diagram increased in size. From build 3199 onwards, all my diagrams have the same canvas size. Diagrams which don't fit to this size are cropped.

The code change for the 3199 build seem to be removing the SafeMode property, so not sure why this would have caused the change in behaviour.

Steps to reproduce

  1. Run onpremises:3199 container
  2. Import json file
  3. Diagrams are all cropped to the same page/canvas size
  4. Run onpremises:3196 container
  5. Import json file
  6. Diagram sizes automatically adjust

Screenshot

No response

Code sample

No response

Configuration

com.structurizr-core:1.29.0 com.structurizr-client:1.29.9 onpremises:3199

Severity

Minor

Priority

I have no budget and there's no rush, please fix this for free

More information

No response

breaker78 commented 4 months ago

This is how the same diagram looks in the two different builds:

StructurizrUnCropped StructurizrCropped

simonbrowndotje commented 3 months ago

I can't reproduce this unfortunately, and build 3199 works okay for me. Does the issue still persist in the latest build (2024.03.03)? If so, please add an example workspace. Thanks!

breaker78 commented 3 months ago

Hi Simon, thanks for your reply. I've just tested it with the 2024.03.03 build and I get the same issue. I've attached a very simple component diagram, which has been clipped top and bottom: workspace.json structurizr

simonbrowndotje commented 3 months ago

Thanks for the JSON file. I know what the problem is, but I don't know how to fix it. If you're using the Java library to create your workspace, the workaround is to use an alternative version of the enableAutomaticLayout() method that forces the UI to run Graphviz rather than Dagre; for example this one -> https://github.com/structurizr/java/blob/master/structurizr-core/src/main/java/com/structurizr/view/ModelView.java#L158

breaker78 commented 3 months ago

Hi Simon, thanks for your response. Changing the layout from Dagre to Graphviz does fix this issue, but also introduces another issue. Using Graphviz, the layout of the SystemLandscape diagrams seem to be defined before the filter is applied (so all the components are drawn very far apart). To try and explain this better, using Graphviz I can see that all the components are drawn in the same location regardless of the filter applied, but using Dagre it moves the components based on the filter, which looks a lot better.

simonbrowndotje commented 3 months ago

Using Graphviz, the layout of the SystemLandscape diagrams seem to be defined before the filter is applied

This is actually how it's supposed to work, with all filtered views sharing the same layout. From https://docs.structurizr.com/ui/diagrams/filtered-view:

The main benefit of using filtered views is that element and relationship positions are shared between the filtered views.

If this isn't what you're looking for, you'll need to define a regular view and add elements based upon their tags instead (this is what the DSL expression include element.tag==<tag> does, but it's easy to replicate with Java code).

breaker78 commented 3 months ago

I've done what you suggested by just adding the relevant elements rather than applying a filter, and the diagrams look good. Thanks for your help