Merge pull request #756 from gavin-ts/rowless-class-height

render: fix rowless class height

ci/release/changelogs/next.md

@@ -28,6 +28,7 @@
 #### Bugfixes ⛑️
 
 - Fixes groups overlapping in sequence diagrams when they end in a self loop. [#728](https://github.com/terrastruct/d2/pull/728)
-- Fixed dimensions of unlabeled squares or circles with only a set width or height. [#702](https://github.com/terrastruct/d2/pull/702)
+- Fixes dimensions of unlabeled squares or circles with only a set width or height. [#702](https://github.com/terrastruct/d2/pull/702)
-- Fixed scaling of actor shapes in sequence diagrams. [#702](https://github.com/terrastruct/d2/pull/702)
+- Fixes scaling of actor shapes in sequence diagrams. [#702](https://github.com/terrastruct/d2/pull/702)
 - Images can now be set to sizes smaller than 128x128. [#702](https://github.com/terrastruct/d2/pull/702)
+- Fixes class height when there are no rows. [#756](https://github.com/terrastruct/d2/pull/756)

d2graph/d2graph.go

@@ -828,7 +828,7 @@ func (obj *Object) GetDefaultSize(mtexts []*d2target.MText, ruler *textmeasure.R
 			rowHeight := GetTextDimensions(mtexts, ruler, anyRowText, go2.Pointer(d2fonts.SourceCodePro)).Height + d2target.VerticalPadding
 			dims.Height = rowHeight * (len(obj.Class.Fields) + len(obj.Class.Methods) + 2)
 		} else {
-			dims.Height = go2.Max(12, labelDims.Height)
+			dims.Height = 2*go2.Max(12, labelDims.Height) + d2target.VerticalPadding
 		}
 
 	case d2target.ShapeSQLTable:

e2etests/regression_test.go

@@ -1,7 +1,10 @@
 package e2etests
 
 import (
+	"math"
 	"testing"
+
+	"oss.terrastruct.com/d2/d2target"
 )
 
 func testRegression(t *testing.T) {
@@ -446,6 +449,30 @@ b -> c
 
 `,
 		},
+		{
+			name: "empty_class_height",
+			script: `
+class1: class with rows {
+	shape: class
+	-num: int
+	-timeout: int
+}
+
+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")
+				}
+			},
+		},
 	}
 
 	runa(t, tcs)

e2etests/testdata/measured/empty-class/dagre/board.exp.json

@@ -10,7 +10,7 @@
         "y": 0
       },
       "width": 112,
-      "height": 12,
+      "height": 44,
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,

e2etests/testdata/measured/empty-class/dagre/sketch.exp.svg

@@ -3,7 +3,7 @@
 id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="316" height="216" viewBox="-102 -102 316 216"><style type="text/css">
+width="316" height="248" viewBox="-102 -102 316 248"><style type="text/css">
 <![CDATA[
 .shape {
   shape-rendering: geometricPrecision;
@@ -39,7 +39,7 @@ width="316" height="216" viewBox="-102 -102 316 216"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="a"><g class="shape" ><rect class="shape" x="0" y="0" width="112" height="12" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="112.000000" height="12.000000" fill="#0A0F25" /><line x1="0.000000" y1="12.000000" x2="112.000000" y2="12.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><mask id="3176154718" maskUnits="userSpaceOnUse" x="-100" y="-100" width="316" height="216">
+]]></script><g id="a"><g class="shape" ><rect class="shape" x="0" y="0" width="112" height="44" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="112.000000" height="44.000000" fill="#0A0F25" /><line x1="0.000000" y1="44.000000" x2="112.000000" y2="44.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><mask id="2019199647" maskUnits="userSpaceOnUse" x="-100" y="-100" width="316" height="248">
-<rect x="-100" y="-100" width="316" height="216" fill="white"></rect>
+<rect x="-100" y="-100" width="316" height="248" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[]]></style></svg>

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

@@ -0,0 +1,104 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "class1",
+      "type": "class",
+      "pos": {
+        "x": 0,
+        "y": 0
+      },
+      "width": 319,
+      "height": 184,
+      "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"
+        }
+      ],
+      "methods": null,
+      "columns": null,
+      "label": "class with rows",
+      "fontSize": 20,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 214,
+      "labelHeight": 31,
+      "zIndex": 0,
+      "level": 1,
+      "primaryAccentColor": "#0D32B2",
+      "secondaryAccentColor": "#4A6FF3",
+      "neutralAccentColor": "#676C7E"
+    },
+    {
+      "id": "class2",
+      "type": "class",
+      "pos": {
+        "x": 379,
+        "y": 46
+      },
+      "width": 362,
+      "height": 92,
+      "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": null,
+      "methods": null,
+      "columns": null,
+      "label": "class without rows",
+      "fontSize": 20,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 257,
+      "labelHeight": 31,
+      "zIndex": 0,
+      "level": 1,
+      "primaryAccentColor": "#0D32B2",
+      "secondaryAccentColor": "#4A6FF3",
+      "neutralAccentColor": "#676C7E"
+    }
+  ],
+  "connections": []
+}

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

@@ -0,0 +1,104 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "class1",
+      "type": "class",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 319,
+      "height": 184,
+      "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"
+        }
+      ],
+      "methods": null,
+      "columns": null,
+      "label": "class with rows",
+      "fontSize": 20,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 214,
+      "labelHeight": 31,
+      "zIndex": 0,
+      "level": 1,
+      "primaryAccentColor": "#0D32B2",
+      "secondaryAccentColor": "#4A6FF3",
+      "neutralAccentColor": "#676C7E"
+    },
+    {
+      "id": "class2",
+      "type": "class",
+      "pos": {
+        "x": 351,
+        "y": 58
+      },
+      "width": 362,
+      "height": 92,
+      "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": null,
+      "methods": null,
+      "columns": null,
+      "label": "class without rows",
+      "fontSize": 20,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 257,
+      "labelHeight": 31,
+      "zIndex": 0,
+      "level": 1,
+      "primaryAccentColor": "#0D32B2",
+      "secondaryAccentColor": "#4A6FF3",
+      "neutralAccentColor": "#676C7E"
+    }
+  ],
+  "connections": []
+}

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

@@ -10,7 +10,7 @@
         "y": 0
       },
       "width": 1082,
-      "height": 36,
+      "height": 92,
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
@@ -50,7 +50,7 @@
       "type": "sql_table",
       "pos": {
         "x": 341,
-        "y": 136
+        "y": 192
       },
       "width": 401,
       "height": 36,
@@ -93,7 +93,7 @@
       "type": "sql_table",
       "pos": {
         "x": 341,
-        "y": 272
+        "y": 328
       },
       "width": 401,
       "height": 72,
@@ -189,19 +189,19 @@
       "route": [
         {
           "x": 541,
-          "y": 36
+          "y": 92
         },
         {
           "x": 541,
-          "y": 76
+          "y": 132
         },
         {
           "x": 541,
-          "y": 96
+          "y": 152
         },
         {
           "x": 541,
-          "y": 136
+          "y": 192
         }
       ],
       "isCurve": true,
@@ -237,19 +237,19 @@
       "route": [
         {
           "x": 541,
-          "y": 172
+          "y": 228
         },
         {
           "x": 541,
-          "y": 212
+          "y": 268
         },
         {
           "x": 541,
-          "y": 232
+          "y": 288
         },
         {
           "x": 541,
-          "y": 272
+          "y": 328
         }
       ],
       "isCurve": true,

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

@@ -3,7 +3,7 @@
 id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="1286" height="548" viewBox="-102 -102 1286 548"><style type="text/css">
+width="1286" height="604" viewBox="-102 -102 1286 604"><style type="text/css">
 <![CDATA[
 .shape {
   shape-rendering: geometricPrecision;
@@ -39,10 +39,10 @@ width="1286" height="548" viewBox="-102 -102 1286 548"><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="36" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="1082.000000" height="36.000000" fill="#0A0F25" /><text class="text-mono" x="541.000000" y="25.750000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="0.000000" y1="36.000000" x2="1082.000000" y2="36.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="table"><g class="shape" ><rect class="shape" x="341" y="136" width="401" height="36" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="341.000000" y="136.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="361.000000" y="161.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="272" width="401" height="72" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="341.000000" y="272.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="361.000000" y="297.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text><text class="text" x="351.000000" y="331.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="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>
-<text class="text" x="392.000000" y="331.000000" style="text-anchor:start;font-size:20px;fill:#676C7E"></text>
+<text class="text" x="392.000000" y="387.000000" style="text-anchor:start;font-size:20px;fill:#676C7E"></text>
-<text class="text" x="722.000000" y="331.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="341.000000" y1="344.000000" x2="742.000000" y2="344.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 38.000000 C 541.000000 76.000000 541.000000 96.000000 541.000000 132.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2063588009)"/></g><g id="(table -&gt; table with short col)[0]"><path d="M 541.000000 174.000000 C 541.000000 212.000000 541.000000 232.000000 541.000000 268.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2063588009)"/></g><mask id="2063588009" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1286" height="548">
+<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">
-<rect x="-100" y="-100" width="1286" height="548" fill="white"></rect>
+<rect x="-100" y="-100" width="1286" height="604" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
 .text {

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

@@ -10,7 +10,7 @@
         "y": 12
       },
       "width": 1082,
-      "height": 36,
+      "height": 92,
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
@@ -50,7 +50,7 @@
       "type": "sql_table",
       "pos": {
         "x": 352,
-        "y": 148
+        "y": 204
       },
       "width": 401,
       "height": 36,
@@ -93,7 +93,7 @@
       "type": "sql_table",
       "pos": {
         "x": 352,
-        "y": 284
+        "y": 340
       },
       "width": 401,
       "height": 72,
@@ -189,11 +189,11 @@
       "route": [
         {
           "x": 553,
-          "y": 48
+          "y": 104
         },
         {
           "x": 553,
-          "y": 148
+          "y": 204
         }
       ],
       "animated": false,
@@ -228,11 +228,11 @@
       "route": [
         {
           "x": 553,
-          "y": 184
+          "y": 240
         },
         {
           "x": 553,
-          "y": 284
+          "y": 340
         }
       ],
       "animated": false,

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

@@ -3,7 +3,7 @@
 id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="1286" height="548" viewBox="-90 -90 1286 548"><style type="text/css">
+width="1286" height="604" viewBox="-90 -90 1286 604"><style type="text/css">
 <![CDATA[
 .shape {
   shape-rendering: geometricPrecision;
@@ -39,10 +39,10 @@ width="1286" height="548" viewBox="-90 -90 1286 548"><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="36" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="1082.000000" height="36.000000" fill="#0A0F25" /><text class="text-mono" x="553.000000" y="37.750000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="12.000000" y1="48.000000" x2="1094.000000" y2="48.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="table"><g class="shape" ><rect class="shape" x="352" y="148" width="401" height="36" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="352.000000" y="148.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="372.000000" y="173.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="284" width="401" height="72" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="352.000000" y="284.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="372.000000" y="309.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text><text class="text" x="362.000000" y="343.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="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>
-<text class="text" x="403.000000" y="343.000000" style="text-anchor:start;font-size:20px;fill:#676C7E"></text>
+<text class="text" x="403.000000" y="399.000000" style="text-anchor:start;font-size:20px;fill:#676C7E"></text>
-<text class="text" x="733.000000" y="343.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="352.000000" y1="356.000000" x2="753.000000" y2="356.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 50.000000 L 553.000000 144.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4173877699)"/></g><g id="(table -&gt; table with short col)[0]"><path d="M 553.000000 186.000000 L 553.000000 280.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4173877699)"/></g><mask id="4173877699" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1286" height="548">
+<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">
-<rect x="-100" y="-100" width="1286" height="548" fill="white"></rect>
+<rect x="-100" y="-100" width="1286" height="604" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
 .text {