Merge pull request #769 from alixander/sql-table-styles

apply sql_table and class font-size

ci/release/changelogs/next.md

@@ -7,6 +7,8 @@
 
 - `d2 fmt` accepts multiple files to be formatted [#718](https://github.com/terrastruct/d2/issues/718)
 
+- `font-size` works for `sql_table` and `class` shapes [#769](https://github.com/terrastruct/d2/issues/769)
+
 - You can now use the reserved keywords `layers`/`scenarios`/`steps` to define diagrams
   with multiple levels of abstractions. [#714](https://github.com/terrastruct/d2/pull/714)
   Docs to come soon
@@ -26,6 +28,7 @@
 - Ensures shapes with icons have enough padding for their labels. [#702](https://github.com/terrastruct/d2/pull/702)
 - `--force-appendix` flag adds an appendix to SVG outputs with tooltips or links. [#761](https://github.com/terrastruct/d2/pull/761)
 - `d2 themes` subcommand to list themes. [#760](https://github.com/terrastruct/d2/pull/760)
+- `sql_table` header left-aligned with column [#769](https://github.com/terrastruct/d2/pull/769)
 
 #### Bugfixes ⛑️
 

d2exporter/export.go

@@ -136,10 +136,10 @@ func toShape(obj *d2graph.Object, theme *d2themes.Theme) d2target.Shape {
 	case d2target.ShapeClass:
 		shape.Class = *obj.Class
 		// The label is the header for classes and tables, which is set in client to be 4 px larger than the object's set font size
-		shape.FontSize -= 4
+		shape.FontSize -= d2target.HeaderFontAdd
 	case d2target.ShapeSQLTable:
 		shape.SQLTable = *obj.SQLTable
-		shape.FontSize -= 4
+		shape.FontSize -= d2target.HeaderFontAdd
 	}
 	shape.Label = text.Text
 	shape.LabelWidth = text.Dimensions.Width

d2graph/d2graph.go

@@ -465,6 +465,11 @@ func (obj *Object) Text() *d2target.MText {
 		isItalic = true
 	}
 	fontSize := d2fonts.FONT_SIZE_M
+
+	if obj.Class != nil || obj.SQLTable != nil {
+		fontSize = d2fonts.FONT_SIZE_L
+	}
+
 	if obj.OuterSequenceDiagram() == nil {
 		if obj.IsContainer() {
 			fontSize = obj.Level().LabelSize()
@@ -477,7 +482,7 @@ func (obj *Object) Text() *d2target.MText {
 	}
 	// Class and Table objects have Label set to header
 	if obj.Class != nil || obj.SQLTable != nil {
-		fontSize = d2fonts.FONT_SIZE_XL
+		fontSize += d2target.HeaderFontAdd
 	}
 	if obj.Class != nil {
 		isBold = false
@@ -795,17 +800,22 @@ func (obj *Object) GetDefaultSize(mtexts []*d2target.MText, ruler *textmeasure.R
 	case d2target.ShapeClass:
 		maxWidth := go2.Max(12, labelDims.Width)
 
+		fontSize := d2fonts.FONT_SIZE_L
+		if obj.Attributes.Style.FontSize != nil {
+			fontSize, _ = strconv.Atoi(obj.Attributes.Style.FontSize.Value)
+		}
+
 		for _, f := range obj.Class.Fields {
-			fdims := GetTextDimensions(mtexts, ruler, f.Text(), go2.Pointer(d2fonts.SourceCodePro))
+			fdims := GetTextDimensions(mtexts, ruler, f.Text(fontSize), go2.Pointer(d2fonts.SourceCodePro))
 			if fdims == nil {
-				return nil, fmt.Errorf("dimensions for class field %#v not found", f.Text())
+				return nil, fmt.Errorf("dimensions for class field %#v not found", f.Text(fontSize))
 			}
 			maxWidth = go2.Max(maxWidth, fdims.Width)
 		}
 		for _, m := range obj.Class.Methods {
-			mdims := GetTextDimensions(mtexts, ruler, m.Text(), go2.Pointer(d2fonts.SourceCodePro))
+			mdims := GetTextDimensions(mtexts, ruler, m.Text(fontSize), go2.Pointer(d2fonts.SourceCodePro))
 			if mdims == nil {
-				return nil, fmt.Errorf("dimensions for class method %#v not found", m.Text())
+				return nil, fmt.Errorf("dimensions for class method %#v not found", m.Text(fontSize))
 			}
 			maxWidth = go2.Max(maxWidth, mdims.Width)
 		}
@@ -820,9 +830,9 @@ func (obj *Object) GetDefaultSize(mtexts []*d2target.MText, ruler *textmeasure.R
 		// All rows should be the same height
 		var anyRowText *d2target.MText
 		if len(obj.Class.Fields) > 0 {
-			anyRowText = obj.Class.Fields[0].Text()
+			anyRowText = obj.Class.Fields[0].Text(fontSize)
 		} else if len(obj.Class.Methods) > 0 {
-			anyRowText = obj.Class.Methods[0].Text()
+			anyRowText = obj.Class.Methods[0].Text(fontSize)
 		}
 		if anyRowText != nil {
 			rowHeight := GetTextDimensions(mtexts, ruler, anyRowText, go2.Pointer(d2fonts.SourceCodePro)).Height + d2target.VerticalPadding
@@ -836,10 +846,16 @@ func (obj *Object) GetDefaultSize(mtexts []*d2target.MText, ruler *textmeasure.R
 		maxTypeWidth := 0
 		constraintWidth := 0
 
+		colFontSize := d2fonts.FONT_SIZE_L
+		if obj.Attributes.Style.FontSize != nil {
+			colFontSize, _ = strconv.Atoi(obj.Attributes.Style.FontSize.Value)
+		}
+
 		for i := range obj.SQLTable.Columns {
 			// Note: we want to set dimensions of actual column not the for loop copy of the struct
 			c := &obj.SQLTable.Columns[i]
-			ctexts := c.Texts()
+
+			ctexts := c.Texts(colFontSize)
 
 			nameDims := GetTextDimensions(mtexts, ruler, ctexts[0], fontFamily)
 			if nameDims == nil {
@@ -1327,15 +1343,23 @@ func (g *Graph) Texts() []*d2target.MText {
 			texts = appendTextDedup(texts, obj.Text())
 		}
 		if obj.Class != nil {
+			fontSize := d2fonts.FONT_SIZE_L
+			if obj.Attributes.Style.FontSize != nil {
+				fontSize, _ = strconv.Atoi(obj.Attributes.Style.FontSize.Value)
+			}
 			for _, field := range obj.Class.Fields {
-				texts = appendTextDedup(texts, field.Text())
+				texts = appendTextDedup(texts, field.Text(fontSize))
 			}
 			for _, method := range obj.Class.Methods {
-				texts = appendTextDedup(texts, method.Text())
+				texts = appendTextDedup(texts, method.Text(fontSize))
 			}
 		} else if obj.SQLTable != nil {
+			colFontSize := d2fonts.FONT_SIZE_L
+			if obj.Attributes.Style.FontSize != nil {
+				colFontSize, _ = strconv.Atoi(obj.Attributes.Style.FontSize.Value)
+			}
 			for _, column := range obj.SQLTable.Columns {
-				for _, t := range column.Texts() {
+				for _, t := range column.Texts(colFontSize) {
 					texts = appendTextDedup(texts, t)
 				}
 			}

d2target/class.go

@@ -2,8 +2,6 @@ package d2target
 
 import (
 	"fmt"
-
-	"oss.terrastruct.com/d2/d2renderers/d2fonts"
 )
 
 const (
@@ -25,10 +23,10 @@ type ClassField struct {
 	Visibility string `json:"visibility"`
 }
 
-func (cf ClassField) Text() *MText {
+func (cf ClassField) Text(fontSize int) *MText {
 	return &MText{
 		Text:     fmt.Sprintf("%s%s", cf.Name, cf.Type),
-		FontSize: d2fonts.FONT_SIZE_L,
+		FontSize: fontSize,
 		IsBold:   false,
 		IsItalic: false,
 		Shape:    "class",
@@ -52,10 +50,10 @@ type ClassMethod struct {
 	Visibility string `json:"visibility"`
 }
 
-func (cm ClassMethod) Text() *MText {
+func (cm ClassMethod) Text(fontSize int) *MText {
 	return &MText{
 		Text:     fmt.Sprintf("%s%s", cm.Name, cm.Return),
-		FontSize: d2fonts.FONT_SIZE_L,
+		FontSize: fontSize,
 		IsBold:   false,
 		IsItalic: false,
 		Shape:    "class",

d2target/sqltable.go

@@ -1,11 +1,13 @@
 package d2target
 
-import "oss.terrastruct.com/d2/d2renderers/d2fonts"
-
 const (
 	NamePadding   = 10
 	TypePadding   = 20
-	HeaderPadding = 20
+	HeaderPadding = 10
+
+	// Setting table font size sets it for columns
+	// The header needs to be a little larger for visual hierarchy
+	HeaderFontAdd = 4
 )
 
 type SQLTable struct {
@@ -19,18 +21,18 @@ type SQLColumn struct {
 	Reference  string `json:"reference"`
 }
 
-func (c SQLColumn) Texts() []*MText {
+func (c SQLColumn) Texts(fontSize int) []*MText {
 	return []*MText{
 		{
 			Text:     c.Name.Label,
-			FontSize: d2fonts.FONT_SIZE_L,
+			FontSize: fontSize,
 			IsBold:   false,
 			IsItalic: false,
 			Shape:    "sql_table",
 		},
 		{
 			Text:     c.Type.Label,
-			FontSize: d2fonts.FONT_SIZE_L,
+			FontSize: fontSize,
 			IsBold:   false,
 			IsItalic: false,
 			Shape:    "sql_table",

e2etests/regression_test.go

@@ -1,10 +1,7 @@
 package e2etests
 
 import (
-	"math"
 	"testing"
-
-	"oss.terrastruct.com/d2/d2target"
 )
 
 func testRegression(t *testing.T) {
@@ -462,23 +459,12 @@ class2: class without rows {
 	shape: class
 }
 `,
-			assertions: func(t *testing.T, g *d2target.Diagram) {
-				if len(g.Shapes) != 2 {
-					t.Fatal("expected 2 shapes")
-				}
-				c1Height := float64(g.Shapes[0].Height)
-				c2Height := float64(g.Shapes[1].Height)
-				if math.Round(c1Height/2.) != c2Height {
-					t.Fatal("expected rowless class to be 1/2 height of class with 2 rows")
-				}
-			},
 		},
 		{
 			name: "just-width",
 			script: `x: "teamwork: having someone to blame" {
   width: 100
 }
-
 `,
 		},
 	}

e2etests/stable_test.go

@@ -1838,6 +1838,55 @@ x.y -> a.b: {
   style.animated: true
 	target-arrowhead.shape: cf-many
 }
+`,
+		},
+		{
+			name: "sql_table_column_styles",
+			script: `Humor in the Court: {
+  shape: sql_table
+	Could you see him from where you were standing?: "I could see his head."
+	And where was his head?: Just above his shoulders.
+  style.fill: red
+  style.stroke: lightgray
+  style.font-color: orange
+  style.font-size: 20
+}
+
+Humor in the Court2: {
+  shape: sql_table
+	Could you see him from where you were standing?: "I could see his head."
+	And where was his head?: Just above his shoulders.
+  style.fill: red
+  style.stroke: lightgray
+  style.font-color: orange
+  style.font-size: 30
+}
+
+manager: BatchManager {
+  shape: class
+	style.font-size: 20
+
+  -num: int
+  -timeout: int
+  -pid
+
+  +getStatus(): Enum
+  +getJobs(): "Job[]"
+  +setTimeout(seconds int)
+}
+
+manager2: BatchManager {
+  shape: class
+	style.font-size: 30
+
+  -num: int
+  -timeout: int
+  -pid
+
+  +getStatus(): Enum
+  +getJobs(): "Job[]"
+  +setTimeout(seconds int)
+}
 `,
 		},
 		{

e2etests/testdata/regression/only_header_class_table/dagre/board.exp.json

@@ -49,10 +49,10 @@
       "id": "table",
       "type": "sql_table",
       "pos": {
-        "x": 341,
+        "x": 351,
         "y": 192
       },
-      "width": 401,
+      "width": 381,
       "height": 36,
       "opacity": 1,
       "strokeDash": 0,
@@ -92,10 +92,10 @@
       "id": "table with short col",
       "type": "sql_table",
       "pos": {
-        "x": 341,
+        "x": 351,
         "y": 328
       },
-      "width": 401,
+      "width": 381,
       "height": 72,
       "opacity": 1,
       "strokeDash": 0,

e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg

@@ -39,9 +39,9 @@ width="1286" height="604" viewBox="-102 -102 1286 604"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="class"><g class="shape" ><rect class="shape" x="0" y="0" width="1082" height="92" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="1082.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="541.000000" y="53.750000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="0.000000" y1="92.000000" x2="1082.000000" y2="92.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="table"><g class="shape" ><rect class="shape" x="341" y="192" width="401" height="36" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="341.000000" y="192.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="361.000000" y="217.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect class="shape" x="341" y="328" width="401" height="72" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="341.000000" y="328.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="361.000000" y="353.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text><text class="text" x="351.000000" y="387.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">ok</text>
+]]></script><g id="class"><g class="shape" ><rect class="shape" x="0" y="0" width="1082" height="92" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="1082.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="541.000000" y="53.750000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="0.000000" y1="92.000000" x2="1082.000000" y2="92.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="table"><g class="shape" ><rect class="shape" x="351" y="192" width="381" height="36" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="351.000000" y="192.000000" width="381.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="361.000000" y="217.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect class="shape" x="351" y="328" width="381" height="72" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="351.000000" y="328.000000" width="381.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="361.000000" y="353.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text><text class="text" x="361.000000" y="387.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">ok</text>
-<text class="text" x="392.000000" y="387.000000" style="text-anchor:start;font-size:20px;fill:#676C7E"></text>
+<text class="text" x="402.000000" y="387.000000" style="text-anchor:start;font-size:20px;fill:#676C7E"></text>
-<text class="text" x="722.000000" y="387.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="341.000000" y1="400.000000" x2="742.000000" y2="400.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 541.000000 94.000000 C 541.000000 132.000000 541.000000 152.000000 541.000000 188.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3555417327)"/></g><g id="(table -&gt; table with short col)[0]"><path d="M 541.000000 230.000000 C 541.000000 268.000000 541.000000 288.000000 541.000000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3555417327)"/></g><mask id="3555417327" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1286" height="604">
+<text class="text" x="712.000000" y="387.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="351.000000" y1="400.000000" x2="732.000000" y2="400.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 541.000000 94.000000 C 541.000000 132.000000 541.000000 152.000000 541.000000 188.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3867717235)"/></g><g id="(table -&gt; table with short col)[0]"><path d="M 541.000000 230.000000 C 541.000000 268.000000 541.000000 288.000000 541.000000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3867717235)"/></g><mask id="3867717235" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1286" height="604">
 <rect x="-100" y="-100" width="1286" height="604" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

e2etests/testdata/regression/only_header_class_table/elk/board.exp.json

@@ -49,10 +49,10 @@
       "id": "table",
       "type": "sql_table",
       "pos": {
-        "x": 352,
+        "x": 362,
         "y": 204
       },
-      "width": 401,
+      "width": 381,
       "height": 36,
       "opacity": 1,
       "strokeDash": 0,
@@ -92,10 +92,10 @@
       "id": "table with short col",
       "type": "sql_table",
       "pos": {
-        "x": 352,
+        "x": 362,
         "y": 340
       },
-      "width": 401,
+      "width": 381,
       "height": 72,
       "opacity": 1,
       "strokeDash": 0,

e2etests/testdata/regression/only_header_class_table/elk/sketch.exp.svg

@@ -39,9 +39,9 @@ width="1286" height="604" viewBox="-90 -90 1286 604"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="class"><g class="shape" ><rect class="shape" x="12" y="12" width="1082" height="92" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="1082.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="553.000000" y="65.750000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="12.000000" y1="104.000000" x2="1094.000000" y2="104.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="table"><g class="shape" ><rect class="shape" x="352" y="204" width="401" height="36" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="352.000000" y="204.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="372.000000" y="229.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect class="shape" x="352" y="340" width="401" height="72" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="352.000000" y="340.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="372.000000" y="365.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text><text class="text" x="362.000000" y="399.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">ok</text>
+]]></script><g id="class"><g class="shape" ><rect class="shape" x="12" y="12" width="1082" height="92" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="1082.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="553.000000" y="65.750000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="12.000000" y1="104.000000" x2="1094.000000" y2="104.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="table"><g class="shape" ><rect class="shape" x="362" y="204" width="381" height="36" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="362.000000" y="204.000000" width="381.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="372.000000" y="229.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect class="shape" x="362" y="340" width="381" height="72" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="362.000000" y="340.000000" width="381.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="372.000000" y="365.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text><text class="text" x="372.000000" y="399.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">ok</text>
-<text class="text" x="403.000000" y="399.000000" style="text-anchor:start;font-size:20px;fill:#676C7E"></text>
+<text class="text" x="413.000000" y="399.000000" style="text-anchor:start;font-size:20px;fill:#676C7E"></text>
-<text class="text" x="733.000000" y="399.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="352.000000" y1="412.000000" x2="753.000000" y2="412.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 553.000000 106.000000 L 553.000000 200.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#484768099)"/></g><g id="(table -&gt; table with short col)[0]"><path d="M 553.000000 242.000000 L 553.000000 336.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#484768099)"/></g><mask id="484768099" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1286" height="604">
+<text class="text" x="723.000000" y="399.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="362.000000" y1="412.000000" x2="743.000000" y2="412.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 553.000000 106.000000 L 553.000000 200.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3644627139)"/></g><g id="(table -&gt; table with short col)[0]"><path d="M 553.000000 242.000000 L 553.000000 336.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3644627139)"/></g><mask id="3644627139" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1286" height="604">
 <rect x="-100" y="-100" width="1286" height="604" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

e2etests/testdata/regression/sql_table_overflow/dagre/sketch.exp.svg

@@ -39,11 +39,11 @@ width="1392" height="312" viewBox="-102 -102 1392 312"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="table"><g class="shape" ><rect class="shape" x="0" y="0" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="534.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="20.000000" y="25.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_overflow</text><text class="text" x="10.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
+]]></script><g id="table"><g class="shape" ><rect class="shape" x="0" y="0" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="534.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="10.000000" y="25.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_overflow</text><text class="text" x="10.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
 <text class="text" x="272.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
 <text class="text" x="514.000000" y="59.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="0.000000" y1="72.000000" x2="534.000000" y2="72.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="10.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
 <text class="text" x="272.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>
-<text class="text" x="514.000000" y="95.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="0.000000" y1="108.000000" x2="534.000000" y2="108.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="table_constrained"><g class="shape" ><rect class="shape" x="594" y="0" width="594" height="108" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="594.000000" y="0.000000" width="594.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="614.000000" y="25.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_constrained_overflow</text><text class="text" x="604.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
+<text class="text" x="514.000000" y="95.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="0.000000" y1="108.000000" x2="534.000000" y2="108.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="table_constrained"><g class="shape" ><rect class="shape" x="594" y="0" width="594" height="108" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="594.000000" y="0.000000" width="594.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="604.000000" y="25.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_constrained_overflow</text><text class="text" x="604.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
 <text class="text" x="866.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
 <text class="text" x="1168.000000" y="59.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">UNQ</text><line x1="594.000000" y1="72.000000" x2="1188.000000" y2="72.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="604.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
 <text class="text" x="866.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>

e2etests/testdata/regression/sql_table_overflow/elk/sketch.exp.svg

@@ -39,11 +39,11 @@ width="1352" height="312" viewBox="-90 -90 1352 312"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="table"><g class="shape" ><rect class="shape" x="12" y="12" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="534.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="32.000000" y="37.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_overflow</text><text class="text" x="22.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
+]]></script><g id="table"><g class="shape" ><rect class="shape" x="12" y="12" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="534.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="22.000000" y="37.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_overflow</text><text class="text" x="22.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
 <text class="text" x="284.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
 <text class="text" x="526.000000" y="71.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="12.000000" y1="84.000000" x2="546.000000" y2="84.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="22.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
 <text class="text" x="284.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>
-<text class="text" x="526.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="12.000000" y1="120.000000" x2="546.000000" y2="120.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="table_constrained"><g class="shape" ><rect class="shape" x="566" y="12" width="594" height="108" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="566.000000" y="12.000000" width="594.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="586.000000" y="37.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_constrained_overflow</text><text class="text" x="576.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
+<text class="text" x="526.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="12.000000" y1="120.000000" x2="546.000000" y2="120.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="table_constrained"><g class="shape" ><rect class="shape" x="566" y="12" width="594" height="108" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="566.000000" y="12.000000" width="594.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="576.000000" y="37.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_constrained_overflow</text><text class="text" x="576.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
 <text class="text" x="838.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
 <text class="text" x="1140.000000" y="71.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">UNQ</text><line x1="566.000000" y1="84.000000" x2="1160.000000" y2="84.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="576.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
 <text class="text" x="838.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>

e2etests/testdata/stable/sql_table_column_styles/dagre/board.exp.json

@@ -0,0 +1,357 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "Humor in the Court",
+      "type": "sql_table",
+      "pos": {
+        "x": 0,
+        "y": 178
+      },
+      "width": 678,
+      "height": 108,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "red",
+      "stroke": "lightgray",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": [
+        {
+          "name": {
+            "label": "Could you see him from where you were standing?",
+            "fontSize": 0,
+            "fontFamily": "",
+            "language": "",
+            "color": "",
+            "italic": false,
+            "bold": false,
+            "underline": false,
+            "labelWidth": 418,
+            "labelHeight": 26
+          },
+          "type": {
+            "label": "I could see his head.",
+            "fontSize": 0,
+            "fontFamily": "",
+            "language": "",
+            "color": "",
+            "italic": false,
+            "bold": false,
+            "underline": false,
+            "labelWidth": 166,
+            "labelHeight": 26
+          },
+          "constraint": "",
+          "reference": ""
+        },
+        {
+          "name": {
+            "label": "And where was his head?",
+            "fontSize": 0,
+            "fontFamily": "",
+            "language": "",
+            "color": "",
+            "italic": false,
+            "bold": false,
+            "underline": false,
+            "labelWidth": 208,
+            "labelHeight": 26
+          },
+          "type": {
+            "label": "Just above his shoulders.",
+            "fontSize": 0,
+            "fontFamily": "",
+            "language": "",
+            "color": "",
+            "italic": false,
+            "bold": false,
+            "underline": false,
+            "labelWidth": 210,
+            "labelHeight": 26
+          },
+          "constraint": "",
+          "reference": ""
+        }
+      ],
+      "label": "Humor in the Court",
+      "fontSize": 20,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "orange",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 202,
+      "labelHeight": 31,
+      "zIndex": 0,
+      "level": 1,
+      "primaryAccentColor": "#0D32B2",
+      "secondaryAccentColor": "#4A6FF3",
+      "neutralAccentColor": "#676C7E"
+    },
+    {
+      "id": "Humor in the Court2",
+      "type": "sql_table",
+      "pos": {
+        "x": 738,
+        "y": 160
+      },
+      "width": 992,
+      "height": 144,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "red",
+      "stroke": "lightgray",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": [
+        {
+          "name": {
+            "label": "Could you see him from where you were standing?",
+            "fontSize": 0,
+            "fontFamily": "",
+            "language": "",
+            "color": "",
+            "italic": false,
+            "bold": false,
+            "underline": false,
+            "labelWidth": 627,
+            "labelHeight": 38
+          },
+          "type": {
+            "label": "I could see his head.",
+            "fontSize": 0,
+            "fontFamily": "",
+            "language": "",
+            "color": "",
+            "italic": false,
+            "bold": false,
+            "underline": false,
+            "labelWidth": 248,
+            "labelHeight": 38
+          },
+          "constraint": "",
+          "reference": ""
+        },
+        {
+          "name": {
+            "label": "And where was his head?",
+            "fontSize": 0,
+            "fontFamily": "",
+            "language": "",
+            "color": "",
+            "italic": false,
+            "bold": false,
+            "underline": false,
+            "labelWidth": 312,
+            "labelHeight": 38
+          },
+          "type": {
+            "label": "Just above his shoulders.",
+            "fontSize": 0,
+            "fontFamily": "",
+            "language": "",
+            "color": "",
+            "italic": false,
+            "bold": false,
+            "underline": false,
+            "labelWidth": 315,
+            "labelHeight": 38
+          },
+          "constraint": "",
+          "reference": ""
+        }
+      ],
+      "label": "Humor in the Court2",
+      "fontSize": 30,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "orange",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 303,
+      "labelHeight": 43,
+      "zIndex": 0,
+      "level": 1,
+      "primaryAccentColor": "#0D32B2",
+      "secondaryAccentColor": "#4A6FF3",
+      "neutralAccentColor": "#676C7E"
+    },
+    {
+      "id": "manager",
+      "type": "class",
+      "pos": {
+        "x": 1790,
+        "y": 48
+      },
+      "width": 422,
+      "height": 368,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#0A0F25",
+      "stroke": "#FFFFFF",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": [
+        {
+          "name": "num",
+          "type": "int",
+          "visibility": "private"
+        },
+        {
+          "name": "timeout",
+          "type": "int",
+          "visibility": "private"
+        },
+        {
+          "name": "pid",
+          "type": "",
+          "visibility": "private"
+        }
+      ],
+      "methods": [
+        {
+          "name": "getStatus()",
+          "return": "Enum",
+          "visibility": "public"
+        },
+        {
+          "name": "getJobs()",
+          "return": "Job[]",
+          "visibility": "public"
+        },
+        {
+          "name": "setTimeout(seconds int)",
+          "return": "void",
+          "visibility": "public"
+        }
+      ],
+      "columns": null,
+      "label": "BatchManager",
+      "fontSize": 20,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 170,
+      "labelHeight": 31,
+      "zIndex": 0,
+      "level": 1,
+      "primaryAccentColor": "#0D32B2",
+      "secondaryAccentColor": "#4A6FF3",
+      "neutralAccentColor": "#676C7E"
+    },
+    {
+      "id": "manager2",
+      "type": "class",
+      "pos": {
+        "x": 2272,
+        "y": 0
+      },
+      "width": 582,
+      "height": 464,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#0A0F25",
+      "stroke": "#FFFFFF",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": [
+        {
+          "name": "num",
+          "type": "int",
+          "visibility": "private"
+        },
+        {
+          "name": "timeout",
+          "type": "int",
+          "visibility": "private"
+        },
+        {
+          "name": "pid",
+          "type": "",
+          "visibility": "private"
+        }
+      ],
+      "methods": [
+        {
+          "name": "getStatus()",
+          "return": "Enum",
+          "visibility": "public"
+        },
+        {
+          "name": "getJobs()",
+          "return": "Job[]",
+          "visibility": "public"
+        },
+        {
+          "name": "setTimeout(seconds int)",
+          "return": "void",
+          "visibility": "public"
+        }
+      ],
+      "columns": null,
+      "label": "BatchManager",
+      "fontSize": 30,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 241,
+      "labelHeight": 43,
+      "zIndex": 0,
+      "level": 1,
+      "primaryAccentColor": "#0D32B2",
+      "secondaryAccentColor": "#4A6FF3",
+      "neutralAccentColor": "#676C7E"
+    }
+  ],
+  "connections": []
+}

e2etests/testdata/stable/sql_table_column_styles/elk/board.exp.json

@@ -0,0 +1,357 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "Humor in the Court",
+      "type": "sql_table",
+      "pos": {
+        "x": 12,
+        "y": 190
+      },
+      "width": 678,
+      "height": 108,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "red",
+      "stroke": "lightgray",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": [
+        {
+          "name": {
+            "label": "Could you see him from where you were standing?",
+            "fontSize": 0,
+            "fontFamily": "",
+            "language": "",
+            "color": "",
+            "italic": false,
+            "bold": false,
+            "underline": false,
+            "labelWidth": 418,
+            "labelHeight": 26
+          },
+          "type": {
+            "label": "I could see his head.",
+            "fontSize": 0,
+            "fontFamily": "",
+            "language": "",
+            "color": "",
+            "italic": false,
+            "bold": false,
+            "underline": false,
+            "labelWidth": 166,
+            "labelHeight": 26
+          },
+          "constraint": "",
+          "reference": ""
+        },
+        {
+          "name": {
+            "label": "And where was his head?",
+            "fontSize": 0,
+            "fontFamily": "",
+            "language": "",
+            "color": "",
+            "italic": false,
+            "bold": false,
+            "underline": false,
+            "labelWidth": 208,
+            "labelHeight": 26
+          },
+          "type": {
+            "label": "Just above his shoulders.",
+            "fontSize": 0,
+            "fontFamily": "",
+            "language": "",
+            "color": "",
+            "italic": false,
+            "bold": false,
+            "underline": false,
+            "labelWidth": 210,
+            "labelHeight": 26
+          },
+          "constraint": "",
+          "reference": ""
+        }
+      ],
+      "label": "Humor in the Court",
+      "fontSize": 20,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "orange",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 202,
+      "labelHeight": 31,
+      "zIndex": 0,
+      "level": 1,
+      "primaryAccentColor": "#0D32B2",
+      "secondaryAccentColor": "#4A6FF3",
+      "neutralAccentColor": "#676C7E"
+    },
+    {
+      "id": "Humor in the Court2",
+      "type": "sql_table",
+      "pos": {
+        "x": 710,
+        "y": 172
+      },
+      "width": 992,
+      "height": 144,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "red",
+      "stroke": "lightgray",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": [
+        {
+          "name": {
+            "label": "Could you see him from where you were standing?",
+            "fontSize": 0,
+            "fontFamily": "",
+            "language": "",
+            "color": "",
+            "italic": false,
+            "bold": false,
+            "underline": false,
+            "labelWidth": 627,
+            "labelHeight": 38
+          },
+          "type": {
+            "label": "I could see his head.",
+            "fontSize": 0,
+            "fontFamily": "",
+            "language": "",
+            "color": "",
+            "italic": false,
+            "bold": false,
+            "underline": false,
+            "labelWidth": 248,
+            "labelHeight": 38
+          },
+          "constraint": "",
+          "reference": ""
+        },
+        {
+          "name": {
+            "label": "And where was his head?",
+            "fontSize": 0,
+            "fontFamily": "",
+            "language": "",
+            "color": "",
+            "italic": false,
+            "bold": false,
+            "underline": false,
+            "labelWidth": 312,
+            "labelHeight": 38
+          },
+          "type": {
+            "label": "Just above his shoulders.",
+            "fontSize": 0,
+            "fontFamily": "",
+            "language": "",
+            "color": "",
+            "italic": false,
+            "bold": false,
+            "underline": false,
+            "labelWidth": 315,
+            "labelHeight": 38
+          },
+          "constraint": "",
+          "reference": ""
+        }
+      ],
+      "label": "Humor in the Court2",
+      "fontSize": 30,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "orange",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 303,
+      "labelHeight": 43,
+      "zIndex": 0,
+      "level": 1,
+      "primaryAccentColor": "#0D32B2",
+      "secondaryAccentColor": "#4A6FF3",
+      "neutralAccentColor": "#676C7E"
+    },
+    {
+      "id": "manager",
+      "type": "class",
+      "pos": {
+        "x": 1722,
+        "y": 60
+      },
+      "width": 422,
+      "height": 368,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#0A0F25",
+      "stroke": "#FFFFFF",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": [
+        {
+          "name": "num",
+          "type": "int",
+          "visibility": "private"
+        },
+        {
+          "name": "timeout",
+          "type": "int",
+          "visibility": "private"
+        },
+        {
+          "name": "pid",
+          "type": "",
+          "visibility": "private"
+        }
+      ],
+      "methods": [
+        {
+          "name": "getStatus()",
+          "return": "Enum",
+          "visibility": "public"
+        },
+        {
+          "name": "getJobs()",
+          "return": "Job[]",
+          "visibility": "public"
+        },
+        {
+          "name": "setTimeout(seconds int)",
+          "return": "void",
+          "visibility": "public"
+        }
+      ],
+      "columns": null,
+      "label": "BatchManager",
+      "fontSize": 20,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 170,
+      "labelHeight": 31,
+      "zIndex": 0,
+      "level": 1,
+      "primaryAccentColor": "#0D32B2",
+      "secondaryAccentColor": "#4A6FF3",
+      "neutralAccentColor": "#676C7E"
+    },
+    {
+      "id": "manager2",
+      "type": "class",
+      "pos": {
+        "x": 2164,
+        "y": 12
+      },
+      "width": 582,
+      "height": 464,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#0A0F25",
+      "stroke": "#FFFFFF",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": [
+        {
+          "name": "num",
+          "type": "int",
+          "visibility": "private"
+        },
+        {
+          "name": "timeout",
+          "type": "int",
+          "visibility": "private"
+        },
+        {
+          "name": "pid",
+          "type": "",
+          "visibility": "private"
+        }
+      ],
+      "methods": [
+        {
+          "name": "getStatus()",
+          "return": "Enum",
+          "visibility": "public"
+        },
+        {
+          "name": "getJobs()",
+          "return": "Job[]",
+          "visibility": "public"
+        },
+        {
+          "name": "setTimeout(seconds int)",
+          "return": "void",
+          "visibility": "public"
+        }
+      ],
+      "columns": null,
+      "label": "BatchManager",
+      "fontSize": 30,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 241,
+      "labelHeight": 43,
+      "zIndex": 0,
+      "level": 1,
+      "primaryAccentColor": "#0D32B2",
+      "secondaryAccentColor": "#4A6FF3",
+      "neutralAccentColor": "#676C7E"
+    }
+  ],
+  "connections": []
+}

e2etests/testdata/stable/sql_table_tooltip_animated/dagre/sketch.exp.svg

@@ -39,7 +39,7 @@ width="280" height="464" viewBox="-102 -118 280 464"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="x"><g class="shape" ><rect class="shape" x="0" y="0" width="60" height="72" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="60.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="20.000000" y="25.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">x</text><text class="text" x="10.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">y</text>
+]]></script><g id="x"><g class="shape" ><rect class="shape" x="0" y="0" width="60" height="72" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="60.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="10.000000" y="25.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">x</text><text class="text" x="10.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">y</text>
 <text class="text" x="40.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#676C7E"></text>
 <text class="text" x="40.000000" y="59.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="0.000000" y1="72.000000" x2="60.000000" y2="72.000000" style="stroke-width:2;stroke:#0A0F25" /><g transform="translate(44 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_3427_35082111)">
@@ -54,7 +54,7 @@ width="280" height="464" viewBox="-102 -118 280 464"><style type="text/css">
 </clipPath>
 </defs>
 </svg>
-</g><title>I like turtles</title></g></g><g id="a"><g class="shape" ><rect class="shape" x="0" y="172" width="60" height="72" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="172.000000" width="60.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="20.000000" y="197.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">a</text><text class="text" x="10.000000" y="231.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">b</text>
+</g><title>I like turtles</title></g></g><g id="a"><g class="shape" ><rect class="shape" x="0" y="172" width="60" height="72" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="172.000000" width="60.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="10.000000" y="197.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">a</text><text class="text" x="10.000000" y="231.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">b</text>
 <text class="text" x="40.000000" y="231.000000" style="text-anchor:start;font-size:20px;fill:#676C7E"></text>
 <text class="text" x="40.000000" y="231.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="0.000000" y1="244.000000" x2="60.000000" y2="244.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="(x -&gt; a)[0]"><marker id="mk-238431170" markerWidth="28.000000" markerHeight="30.000000" refX="25.000000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#0D32B2" stroke-width="2" fill="white"><circle class="connection" stroke="#0D32B2" stroke-width="2" fill="white" cx="5.000000" cy="15.000000" r="4.000000"/><path d="M25.000000,15.000000 36.000000,15.000000 M10.000000,15.000000 36.000000,0.000000 M10.000000,15.000000 36.000000,30.000000"/></g> </marker><path d="M 30.000000 74.000000 C 30.000000 112.000000 30.000000 132.000000 30.000000 168.000000" class="connection animated-connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-238431170)" mask="url(#2766896861)"/></g><mask id="2766896861" maskUnits="userSpaceOnUse" x="-100" y="-100" width="280" height="464">
 <rect x="-100" y="-100" width="280" height="464" fill="white"></rect>

e2etests/testdata/stable/sql_table_tooltip_animated/elk/sketch.exp.svg

@@ -39,7 +39,7 @@ width="280" height="464" viewBox="-90 -106 280 464"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="x"><g class="shape" ><rect class="shape" x="12" y="12" width="60" height="72" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="60.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="32.000000" y="37.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">x</text><text class="text" x="22.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">y</text>
+]]></script><g id="x"><g class="shape" ><rect class="shape" x="12" y="12" width="60" height="72" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="60.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="22.000000" y="37.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">x</text><text class="text" x="22.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">y</text>
 <text class="text" x="52.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#676C7E"></text>
 <text class="text" x="52.000000" y="71.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="12.000000" y1="84.000000" x2="72.000000" y2="84.000000" style="stroke-width:2;stroke:#0A0F25" /><g transform="translate(56 -4)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_3427_35082111)">
@@ -54,7 +54,7 @@ width="280" height="464" viewBox="-90 -106 280 464"><style type="text/css">
 </clipPath>
 </defs>
 </svg>
-</g><title>I like turtles</title></g></g><g id="a"><g class="shape" ><rect class="shape" x="12" y="184" width="60" height="72" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="12.000000" y="184.000000" width="60.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="32.000000" y="209.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">a</text><text class="text" x="22.000000" y="243.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">b</text>
+</g><title>I like turtles</title></g></g><g id="a"><g class="shape" ><rect class="shape" x="12" y="184" width="60" height="72" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="12.000000" y="184.000000" width="60.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="22.000000" y="209.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">a</text><text class="text" x="22.000000" y="243.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">b</text>
 <text class="text" x="52.000000" y="243.000000" style="text-anchor:start;font-size:20px;fill:#676C7E"></text>
 <text class="text" x="52.000000" y="243.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="12.000000" y1="256.000000" x2="72.000000" y2="256.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="(x -&gt; a)[0]"><marker id="mk-238431170" markerWidth="28.000000" markerHeight="30.000000" refX="25.000000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#0D32B2" stroke-width="2" fill="white"><circle class="connection" stroke="#0D32B2" stroke-width="2" fill="white" cx="5.000000" cy="15.000000" r="4.000000"/><path d="M25.000000,15.000000 36.000000,15.000000 M10.000000,15.000000 36.000000,0.000000 M10.000000,15.000000 36.000000,30.000000"/></g> </marker><path d="M 42.000000 86.000000 L 42.000000 180.000000" class="connection animated-connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-238431170)" mask="url(#3528968)"/></g><mask id="3528968" maskUnits="userSpaceOnUse" x="-100" y="-100" width="280" height="464">
 <rect x="-100" y="-100" width="280" height="464" fill="white"></rect>

e2etests/testdata/stable/sql_tables/dagre/sketch.exp.svg

@@ -39,7 +39,7 @@ width="1000" height="664" viewBox="-102 -102 1000 664"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="users"><g class="shape" ><rect class="shape" x="0" y="0" width="268" height="216" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="268.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="20.000000" y="25.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">users</text><text class="text" x="10.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
+]]></script><g id="users"><g class="shape" ><rect class="shape" x="0" y="0" width="268" height="216" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="268.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="10.000000" y="25.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">users</text><text class="text" x="10.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
 <text class="text" x="111.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
 <text class="text" x="248.000000" y="59.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="0.000000" y1="72.000000" x2="268.000000" y2="72.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="10.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">name</text>
 <text class="text" x="111.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
@@ -49,7 +49,7 @@ width="1000" height="664" viewBox="-102 -102 1000 664"><style type="text/css">
 <text class="text" x="111.000000" y="167.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
 <text class="text" x="248.000000" y="167.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="0.000000" y1="180.000000" x2="268.000000" y2="180.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="10.000000" y="203.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">last_login</text>
 <text class="text" x="111.000000" y="203.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">datetime</text>
-<text class="text" x="248.000000" y="203.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">PK</text><line x1="0.000000" y1="216.000000" x2="268.000000" y2="216.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="products"><g class="shape" ><rect class="shape" x="328" y="18" width="164" height="180" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="328.000000" y="18.000000" width="164.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="348.000000" y="43.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">products</text><text class="text" x="338.000000" y="77.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
+<text class="text" x="248.000000" y="203.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">PK</text><line x1="0.000000" y1="216.000000" x2="268.000000" y2="216.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="products"><g class="shape" ><rect class="shape" x="328" y="18" width="164" height="180" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="328.000000" y="18.000000" width="164.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="338.000000" y="43.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">products</text><text class="text" x="338.000000" y="77.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
 <text class="text" x="405.000000" y="77.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
 <text class="text" x="472.000000" y="77.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="328.000000" y1="90.000000" x2="492.000000" y2="90.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="338.000000" y="113.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">price</text>
 <text class="text" x="405.000000" y="113.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">decimal</text>
@@ -57,13 +57,13 @@ width="1000" height="664" viewBox="-102 -102 1000 664"><style type="text/css">
 <text class="text" x="405.000000" y="149.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
 <text class="text" x="472.000000" y="149.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="328.000000" y1="162.000000" x2="492.000000" y2="162.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="338.000000" y="185.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">name</text>
 <text class="text" x="405.000000" y="185.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
-<text class="text" x="472.000000" y="185.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="328.000000" y1="198.000000" x2="492.000000" y2="198.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="orders"><g class="shape" ><rect class="shape" x="328" y="316" width="164" height="144" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="328.000000" y="316.000000" width="164.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="348.000000" y="341.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">orders</text><text class="text" x="338.000000" y="375.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
+<text class="text" x="472.000000" y="185.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="328.000000" y1="198.000000" x2="492.000000" y2="198.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="orders"><g class="shape" ><rect class="shape" x="328" y="316" width="164" height="144" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="328.000000" y="316.000000" width="164.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="338.000000" y="341.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">orders</text><text class="text" x="338.000000" y="375.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
 <text class="text" x="449.000000" y="375.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
 <text class="text" x="472.000000" y="375.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="328.000000" y1="388.000000" x2="492.000000" y2="388.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="338.000000" y="411.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">user_id</text>
 <text class="text" x="449.000000" y="411.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
 <text class="text" x="472.000000" y="411.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="328.000000" y1="424.000000" x2="492.000000" y2="424.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="338.000000" y="447.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">product_id</text>
 <text class="text" x="449.000000" y="447.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
-<text class="text" x="472.000000" y="447.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="328.000000" y1="460.000000" x2="492.000000" y2="460.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="shipments"><g class="shape" ><rect class="shape" x="552" y="18" width="244" height="180" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="552.000000" y="18.000000" width="244.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="572.000000" y="43.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">shipments</text><text class="text" x="562.000000" y="77.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
+<text class="text" x="472.000000" y="447.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="328.000000" y1="460.000000" x2="492.000000" y2="460.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="shipments"><g class="shape" ><rect class="shape" x="552" y="18" width="244" height="180" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="552.000000" y="18.000000" width="244.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="562.000000" y="43.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">shipments</text><text class="text" x="562.000000" y="77.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
 <text class="text" x="728.000000" y="77.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
 <text class="text" x="776.000000" y="77.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="552.000000" y1="90.000000" x2="796.000000" y2="90.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="562.000000" y="113.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">order_id</text>
 <text class="text" x="728.000000" y="113.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>

e2etests/testdata/stable/sql_tables/elk/sketch.exp.svg

@@ -39,7 +39,7 @@ width="920" height="664" viewBox="-90 -90 920 664"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="users"><g class="shape" ><rect class="shape" x="12" y="12" width="268" height="216" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="268.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="32.000000" y="37.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">users</text><text class="text" x="22.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
+]]></script><g id="users"><g class="shape" ><rect class="shape" x="12" y="12" width="268" height="216" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="268.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="22.000000" y="37.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">users</text><text class="text" x="22.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
 <text class="text" x="123.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
 <text class="text" x="260.000000" y="71.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="12.000000" y1="84.000000" x2="280.000000" y2="84.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="22.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">name</text>
 <text class="text" x="123.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
@@ -49,7 +49,7 @@ width="920" height="664" viewBox="-90 -90 920 664"><style type="text/css">
 <text class="text" x="123.000000" y="179.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
 <text class="text" x="260.000000" y="179.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="12.000000" y1="192.000000" x2="280.000000" y2="192.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="22.000000" y="215.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">last_login</text>
 <text class="text" x="123.000000" y="215.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">datetime</text>
-<text class="text" x="260.000000" y="215.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">PK</text><line x1="12.000000" y1="228.000000" x2="280.000000" y2="228.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="products"><g class="shape" ><rect class="shape" x="300" y="48" width="164" height="180" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="300.000000" y="48.000000" width="164.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="320.000000" y="73.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">products</text><text class="text" x="310.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
+<text class="text" x="260.000000" y="215.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">PK</text><line x1="12.000000" y1="228.000000" x2="280.000000" y2="228.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="products"><g class="shape" ><rect class="shape" x="300" y="48" width="164" height="180" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="300.000000" y="48.000000" width="164.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="310.000000" y="73.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">products</text><text class="text" x="310.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
 <text class="text" x="377.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
 <text class="text" x="444.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="300.000000" y1="120.000000" x2="464.000000" y2="120.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="310.000000" y="143.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">price</text>
 <text class="text" x="377.000000" y="143.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">decimal</text>
@@ -57,13 +57,13 @@ width="920" height="664" viewBox="-90 -90 920 664"><style type="text/css">
 <text class="text" x="377.000000" y="179.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
 <text class="text" x="444.000000" y="179.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="300.000000" y1="192.000000" x2="464.000000" y2="192.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="310.000000" y="215.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">name</text>
 <text class="text" x="377.000000" y="215.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
-<text class="text" x="444.000000" y="215.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="300.000000" y1="228.000000" x2="464.000000" y2="228.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="orders"><g class="shape" ><rect class="shape" x="300" y="328" width="164" height="144" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="300.000000" y="328.000000" width="164.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="320.000000" y="353.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">orders</text><text class="text" x="310.000000" y="387.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
+<text class="text" x="444.000000" y="215.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="300.000000" y1="228.000000" x2="464.000000" y2="228.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="orders"><g class="shape" ><rect class="shape" x="300" y="328" width="164" height="144" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="300.000000" y="328.000000" width="164.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="310.000000" y="353.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">orders</text><text class="text" x="310.000000" y="387.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
 <text class="text" x="421.000000" y="387.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
 <text class="text" x="444.000000" y="387.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="300.000000" y1="400.000000" x2="464.000000" y2="400.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="310.000000" y="423.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">user_id</text>
 <text class="text" x="421.000000" y="423.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
 <text class="text" x="444.000000" y="423.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="300.000000" y1="436.000000" x2="464.000000" y2="436.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="310.000000" y="459.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">product_id</text>
 <text class="text" x="421.000000" y="459.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
-<text class="text" x="444.000000" y="459.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="300.000000" y1="472.000000" x2="464.000000" y2="472.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="shipments"><g class="shape" ><rect class="shape" x="484" y="48" width="244" height="180" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="484.000000" y="48.000000" width="244.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="504.000000" y="73.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">shipments</text><text class="text" x="494.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
+<text class="text" x="444.000000" y="459.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="300.000000" y1="472.000000" x2="464.000000" y2="472.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="shipments"><g class="shape" ><rect class="shape" x="484" y="48" width="244" height="180" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="484.000000" y="48.000000" width="244.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="494.000000" y="73.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">shipments</text><text class="text" x="494.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
 <text class="text" x="660.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
 <text class="text" x="708.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="484.000000" y1="120.000000" x2="728.000000" y2="120.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="494.000000" y="143.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">order_id</text>
 <text class="text" x="660.000000" y="143.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>

e2etests/testdata/todo/shape_set_width_height/dagre/sketch.exp.svg

@@ -808,7 +808,7 @@ width="2482" height="2672" viewBox="-102 -102 2482 2672"><style type="text/css">
 <text class="text-mono" x="1048.000000" y="1086.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">getJobs()</text>
 <text class="text-mono" x="1798.000000" y="1086.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">Job[]</text><text class="text-mono" x="1028.000000" y="1136.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">+</text>
 <text class="text-mono" x="1048.000000" y="1136.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">setTimeout(seconds int)</text>
-<text class="text-mono" x="1798.000000" y="1136.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">void</text></g></g><g id="users"><g class="shape" ><rect class="shape" x="1018" y="2068" width="800" height="400" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="1018.000000" y="2068.000000" width="800.000000" height="66.666667" fill="#0A0F25" /><text class="text" x="1038.000000" y="2109.083333" style="text-anchor:start;font-size:24px;fill:#FFFFFF">users</text><text class="text" x="1028.000000" y="2173.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
+<text class="text-mono" x="1798.000000" y="1136.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">void</text></g></g><g id="users"><g class="shape" ><rect class="shape" x="1018" y="2068" width="800" height="400" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="1018.000000" y="2068.000000" width="800.000000" height="66.666667" fill="#0A0F25" /><text class="text" x="1028.000000" y="2109.083333" style="text-anchor:start;font-size:24px;fill:#FFFFFF">users</text><text class="text" x="1028.000000" y="2173.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
 <text class="text" x="1129.000000" y="2173.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
 <text class="text" x="1798.000000" y="2173.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="1018.000000" y1="2201.333333" x2="1818.000000" y2="2201.333333" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="1028.000000" y="2239.666667" style="text-anchor:start;font-size:20px;fill:#0D32B2">name</text>
 <text class="text" x="1129.000000" y="2239.666667" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>

e2etests/testdata/todo/shape_set_width_height/elk/sketch.exp.svg

@@ -808,7 +808,7 @@ width="2622" height="2644" viewBox="-90 -90 2622 2644"><style type="text/css">
 <text class="text-mono" x="1240.000000" y="1070.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">getJobs()</text>
 <text class="text-mono" x="1990.000000" y="1070.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">Job[]</text><text class="text-mono" x="1220.000000" y="1120.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">+</text>
 <text class="text-mono" x="1240.000000" y="1120.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">setTimeout(seconds int)</text>
-<text class="text-mono" x="1990.000000" y="1120.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">void</text></g></g><g id="users"><g class="shape" ><rect class="shape" x="1210" y="2052" width="800" height="400" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="1210.000000" y="2052.000000" width="800.000000" height="66.666667" fill="#0A0F25" /><text class="text" x="1230.000000" y="2093.083333" style="text-anchor:start;font-size:24px;fill:#FFFFFF">users</text><text class="text" x="1220.000000" y="2157.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
+<text class="text-mono" x="1990.000000" y="1120.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">void</text></g></g><g id="users"><g class="shape" ><rect class="shape" x="1210" y="2052" width="800" height="400" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="1210.000000" y="2052.000000" width="800.000000" height="66.666667" fill="#0A0F25" /><text class="text" x="1220.000000" y="2093.083333" style="text-anchor:start;font-size:24px;fill:#FFFFFF">users</text><text class="text" x="1220.000000" y="2157.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
 <text class="text" x="1321.000000" y="2157.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
 <text class="text" x="1990.000000" y="2157.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="1210.000000" y1="2185.333333" x2="2010.000000" y2="2185.333333" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="1220.000000" y="2223.666667" style="text-anchor:start;font-size:20px;fill:#0D32B2">name</text>
 <text class="text" x="1321.000000" y="2223.666667" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>