Issue on automaticLayout

[DonatoNicoletti]

Hello,
when insert long string in the container element and use automatically layout (left to right) the relationship don't start at the border of the container. It seems that the container label pops out and starts the relation line after (see relation between WebApp and API GW) . Could you help me?

[simonbrowndotje]

Do you have an example DSL to reproduce this?

[DonatoNicoletti]

`workspace {

!identifiers hierarchical

model {
    uDtcConfigurator = person "DTC Configurator"
    uVodafoneAdmin = person "Vodafone Admin"
    
    
    sDtc = softwareSystem "DTC Platform" {
        
        cWeb = container "WebApp" "S3 Web Server" "S3 Web Server"{
            uDtcConfigurator -> this "Use DTC" "" "relationStyle"
        }
        cAGW = container "API Gateway" "AWS API GW"{
            cWeb -> this "Use" "" "relationStyle"
        }
        cBff = container "BFF" "AWS Lambda"{
            cAGW -> this "Use" "" "relationStyle"
        }
    }
    
    sTms = softwareSystem "TMS" {
    
        cWeb = container "WebApp" "SPA React"{
            uVodafoneAdmin -> this "Use TMS" "" "relationStyle"
        }
        cAGW = container "API Gateway" "AWS API GW"{
            sDtc.cBff  -> this "Require Transport"
            cWeb -> this "Use" "" "relationStyle" 
        }
        cBff = container "BFF" "AWS Lambda"{
            cAGW -> this "Use" "" "relationStyle"
        }
        cDB = container "Database" "AWS Dynamodb"{
            cBff -> this "Read write to sss ssss ssss eeee tttt tttt ttyyy" "" "relationStyle"
        }
    }
    deProd = deploymentEnvironment "Production" {
        deploymentNode "Amazon Web Services" {
            tags "Amazon Web Services - Cloud"
            
            deploymentNode "EU-Central-1" {
                tags "Amazon Web Services - Region"
            
                route53 = infrastructureNode "Route 53" {
                    tags "Amazon Web Services - Route 53"
                }
              
                cloudfront = infrastructureNode "Cloudfront" {
                    tags "Amazon Web Services - API Gateway"
                }
                
                deploymentNode "S3" {
                    cloudfront -> this "HTTP" "" "relationStyle"
                    tags "Amazon Web Services - Simple Storage Service S3 Bucket"
                    containerInstance sTms.cWeb "" "containerStyle"
                    containerInstance sDtc.cWeb "" "containerStyle"
                   
                }
                deploymentNode "Lambda" {
                    tags "Amazon Web Services - Lambda"
                   
                    containerInstance sTms.cBff "" "containerStyle"
                    containerInstance sDtc.cBff "" "containerStyle"
                   
                }
                deploymentNode "API Gw" {
                    tags "Amazon Web Services - API Gateway"
                    containerInstance sTms.cAGW "" "containerStyle"
                    containerInstance sDtc.cAGW "" "containerStyle"
                   
                }
                 deploymentNode "Dynamodb" {
                    tags "Amazon Web Services - DynamoDB"
                    containerInstance sTms.cDB "" "containerStyle"
                   
                   
                }

            }
        }
    }
}
views {
    systemlandscape s  "slDTC" {
        include *
        autoLayout lr
       
    }
    systemcontext sDtc  "scDTC" {
        include *
        autoLayout lr
      
    }
    systemcontext sTms   "scTMS"{
        include *
        autoLayout lr
    
    }
    container sDtc "cDTC" {
        include *
        autoLayout lr
       
    }
    container sTms "cTMS" {
        include *
        autoLayout lr

    }
    
    deployment * deProd "dPROD" {
        include *
        autoLayout tb 400 400
    }
    styles {
        element "containerStyle" {
            background white
            stroke gray
            color gray
            shape RoundedBox
            
            
        }
        relationship "relationStyle" {
            width  100
            style solid
        }
    }
  themes default https://static.structurizr.com/themes/amazon-web-services-2020.04.30/theme.json
}

}`

[simonbrowndotje]

It looks fine to me via https://structurizr.com/dsl

[DonatoNicoletti]

Ok, I'm using safari...with chrome is ok. The issue is related only to safari browser. Tis

[simonbrowndotje]

It works fine for me on Safari too.

[DonatoNicoletti]

After a refresh is ok :).
I have another question with the attached DSL. In the "Container TMS" view I can see 2 relations with "Vodafone Admin" person. Why I can see only a relation in the "System Context TMS" view?

`workspace {

!identifiers hierarchical

model {
    uDtcConfigurator = person "DTC Configurator"
    uVodafoneAdmin = person "Vodafone Admin"
    
    
    sDtc = softwareSystem "DTC Platform" {
        
        cWeb = container "WebApp" "Delivers the static content" "S3 Web Server"{
            uDtcConfigurator -> this "Visit" "" 
        }
        cAGW = container "API Gateway" "AWS API GW"{
            cWeb -> this "Use" "" "relationStyle"
        }
        cBff = container "BFF" "AWS Lambda"{
            cAGW -> this "Use" "" "relationStyle"
        }
    }
    
    sTms = softwareSystem "TMS" {
    
        cWeb = container "WebApp" "Delivers the static content" "AWS S3 Web Server"{
            uVodafoneAdmin -> this "Visit TMS application" 
        }
        cSpa = container "Single Page Application" "Provide all the TMS functionalities" "React" "cBrowser"{
            uVodafoneAdmin -> this "Operate on TMS"
            cWeb -> this "Delivers to the web browser" 
        }
        cAGW = container "API Gateway" "Provide TMS REST API" "AWS API GW"{
            sDtc.cBff  -> this "Require Transport API Call" "JSON/HTTPS"
            cSpa -> this "Make API call" "JSON/HTTPS"
        }
        cBff = container "BFF" "Implement TMS REST API" "AWS Lambda"{
            cAGW -> this "Use" "PROXY" 
        }
        cDB = container "Database" "Store TMS Informations" "AWS Dynamodb" "cDatabase"{
            cBff -> this "Read from and write to" "AWS SDK" 
        }
    }
    deProd = deploymentEnvironment "Production" {
        deploymentNode "Amazon Web Services" {
            tags "Amazon Web Services - Cloud"
            
            deploymentNode "EU-Central-1" {
                tags "Amazon Web Services - Region"
            
                route53 = infrastructureNode "Route 53" {
                    tags "Amazon Web Services - Route 53"
                }
              
                cloudfront = infrastructureNode "Cloudfront" {
                    tags "Amazon Web Services - API Gateway"
                }
                
                deploymentNode "S3" {
                    cloudfront -> this "HTTP" "" "relationStyle"
                    tags "Amazon Web Services - Simple Storage Service S3 Bucket"
                    containerInstance sTms.cWeb "" "containerStyle"
                    containerInstance sDtc.cWeb "" "containerStyle"
                   
                }
                deploymentNode "Lambda" {
                    tags "Amazon Web Services - Lambda"
                   
                    containerInstance sTms.cBff "" "containerStyle"
                    containerInstance sDtc.cBff "" "containerStyle"
                   
                }
                deploymentNode "API Gw" {
                    tags "Amazon Web Services - API Gateway"
                    containerInstance sTms.cAGW "" "containerStyle"
                    containerInstance sDtc.cAGW "" "containerStyle"
                   
                }
                 deploymentNode "Dynamodb" {
                    tags "Amazon Web Services - DynamoDB"
                    containerInstance sTms.cDB "" "containerStyle"
                   
                   
                }

            }
        }
    }
}
views {
    systemlandscape s  "slDTC" {
        include *
        autoLayout lr
       
    }
    systemcontext sDtc  "scDTC" {
        include *
        autoLayout lr
      
    }
    systemcontext sTms   "scTMS"{
        include *
        autoLayout tb
    
    }
    container sDtc "cDTC" {
        include *
        autoLayout lr
       
    }
    container sTms "cTMS" {
        include *
        autoLayout lr

    }
    
    deployment * deProd "dPROD" {
        include *
        autoLayout tb 400 400
    }
    styles {
        element "cBrowser" {
            shape WebBrowser
        }
        element "cDatabase" {
            shape Cylinder
        }
        element "containerStyle" {
            background white
            stroke gray
            color gray
            shape RoundedBox
            
            
        }
    }
  themes default https://static.structurizr.com/themes/amazon-web-services-2020.04.30/theme.json
}

}`