Add "title" class to axes titles

hyanwong · mergify[bot] · commit c2b0c805dd08 · 2022-11-28T10:41:00.000Z
diff --git a/python/tests/data/svg/internal_sample_ts.svg b/python/tests/data/svg/internal_sample_ts.svg
@@ -13,7 +13,7 @@
 		</g>
 		<g class="axes">
 			<g class="x-axis">
-				<g transform="translate(500 200)">
+				<g class="title" transform="translate(500 200)">
 					<text class="lab" text-anchor="middle" transform="translate(0 -11)">Genome position</text>
 				</g>
 				<line x1="20" x2="980" y1="163.2" y2="163.2"/>
diff --git a/python/tests/data/svg/tree_both_axes.svg b/python/tests/data/svg/tree_both_axes.svg
@@ -6,7 +6,7 @@
 	<g class="tree t4">
 		<g class="axes">
 			<g class="x-axis">
-				<g transform="translate(118.4 200)">
+				<g class="title" transform="translate(118.4 200)">
 					<text class="lab" text-anchor="middle" transform="translate(0 -11)">Genome position</text>
 				</g>
 				<line x1="56.8" x2="180" y1="163.2" y2="163.2"/>
@@ -26,7 +26,7 @@
 				</g>
 			</g>
 			<g class="y-axis">
-				<g transform="translate(0 70.7)">
+				<g class="title" transform="translate(0 70.7)">
 					<text class="lab" text-anchor="middle" transform="translate(11) rotate(-90)">Time</text>
 				</g>
 				<line x1="56.8" x2="56.8" y1="131.4" y2="10"/>
diff --git a/python/tests/data/svg/tree_muts_all_edge.svg b/python/tests/data/svg/tree_muts_all_edge.svg
@@ -9,7 +9,7 @@
 		</g>
 		<g class="axes">
 			<g class="x-axis">
-				<g transform="translate(150 400)">
+				<g class="title" transform="translate(150 400)">
 					<text class="lab" text-anchor="middle" transform="translate(0 -11)">Genome position</text>
 				</g>
 				<line x1="20" x2="280" y1="363.2" y2="363.2"/>
diff --git a/python/tests/data/svg/tree_x_axis.svg b/python/tests/data/svg/tree_x_axis.svg
@@ -6,7 +6,7 @@
 	<g class="tree t1">
 		<g class="axes">
 			<g class="x-axis">
-				<g transform="translate(200 200)">
+				<g class="title" transform="translate(200 200)">
 					<text class="lab" text-anchor="middle" transform="translate(0 -11)">pos on genome</text>
 				</g>
 				<line x1="20" x2="380" y1="163.2" y2="163.2"/>
diff --git a/python/tests/data/svg/tree_y_axis_rank.svg b/python/tests/data/svg/tree_y_axis_rank.svg
@@ -6,7 +6,7 @@
 	<g class="tree t1">
 		<g class="axes">
 			<g class="y-axis">
-				<g transform="translate(0 89.1)">
+				<g class="title" transform="translate(0 89.1)">
 					<text class="lab" text-anchor="middle" transform="translate(11) rotate(-90)">Time (relative steps)</text>
 				</g>
 				<line x1="56.8" x2="56.8" y1="168.2" y2="10"/>
diff --git a/python/tests/data/svg/ts.svg b/python/tests/data/svg/ts.svg
@@ -13,7 +13,7 @@
 		</g>
 		<g class="axes">
 			<g class="x-axis">
-				<g transform="translate(500 200)">
+				<g class="title" transform="translate(500 200)">
 					<text class="lab" text-anchor="middle" transform="translate(0 -11)">Genome position</text>
 				</g>
 				<line x1="20" x2="980" y1="163.2" y2="163.2"/>
diff --git a/python/tests/data/svg/ts_multiroot.svg b/python/tests/data/svg/ts_multiroot.svg
@@ -16,7 +16,7 @@
 		</g>
 		<g class="axes">
 			<g class="x-axis">
-				<g transform="translate(818.4 200)">
+				<g class="title" transform="translate(818.4 200)">
 					<text class="lab" text-anchor="middle" transform="translate(0 -11)">Genome position</text>
 				</g>
 				<line x1="56.8" x2="1580" y1="163.2" y2="163.2"/>
@@ -138,7 +138,7 @@
 				</g>
 			</g>
 			<g class="y-axis">
-				<g transform="translate(0 65.7)">
+				<g class="title" transform="translate(0 65.7)">
 					<text class="lab" text-anchor="middle" transform="translate(11) rotate(-90)">Time (generations)</text>
 				</g>
 				<line x1="56.8" x2="56.8" y1="121.4" y2="10"/>
diff --git a/python/tests/data/svg/ts_mut_highlight.svg b/python/tests/data/svg/ts_mut_highlight.svg
@@ -13,7 +13,7 @@
 		</g>
 		<g class="axes">
 			<g class="x-axis">
-				<g transform="translate(500 200)">
+				<g class="title" transform="translate(500 200)">
 					<text class="lab" text-anchor="middle" transform="translate(0 -11)">Genome position</text>
 				</g>
 				<line x1="20" x2="980" y1="163.2" y2="163.2"/>
diff --git a/python/tests/data/svg/ts_mut_times.svg b/python/tests/data/svg/ts_mut_times.svg
@@ -13,7 +13,7 @@
 		</g>
 		<g class="axes">
 			<g class="x-axis">
-				<g transform="translate(500 200)">
+				<g class="title" transform="translate(500 200)">
 					<text class="lab" text-anchor="middle" transform="translate(0 -11)">Genome position</text>
 				</g>
 				<line x1="20" x2="980" y1="163.2" y2="163.2"/>
diff --git a/python/tests/data/svg/ts_mut_times_logscale.svg b/python/tests/data/svg/ts_mut_times_logscale.svg
@@ -13,7 +13,7 @@
 		</g>
 		<g class="axes">
 			<g class="x-axis">
-				<g transform="translate(500 200)">
+				<g class="title" transform="translate(500 200)">
 					<text class="lab" text-anchor="middle" transform="translate(0 -11)">Genome position</text>
 				</g>
 				<line x1="20" x2="980" y1="163.2" y2="163.2"/>
diff --git a/python/tests/data/svg/ts_mutations_no_edges.svg b/python/tests/data/svg/ts_mutations_no_edges.svg
@@ -9,7 +9,7 @@
 		</g>
 		<g class="axes">
 			<g class="x-axis">
-				<g transform="translate(100 200)">
+				<g class="title" transform="translate(100 200)">
 					<text class="lab" text-anchor="middle" transform="translate(0 -11)">Genome position</text>
 				</g>
 				<line x1="20" x2="180" y1="163.2" y2="163.2"/>
diff --git a/python/tests/data/svg/ts_mutations_timed_no_edges.svg b/python/tests/data/svg/ts_mutations_timed_no_edges.svg
@@ -9,7 +9,7 @@
 		</g>
 		<g class="axes">
 			<g class="x-axis">
-				<g transform="translate(100 200)">
+				<g class="title" transform="translate(100 200)">
 					<text class="lab" text-anchor="middle" transform="translate(0 -11)">Genome position</text>
 				</g>
 				<line x1="20" x2="180" y1="163.2" y2="163.2"/>
diff --git a/python/tests/data/svg/ts_plain.svg b/python/tests/data/svg/ts_plain.svg
@@ -6,7 +6,7 @@
 	<g class="tree-sequence">
 		<g class="axes">
 			<g class="x-axis">
-				<g transform="translate(500 200)">
+				<g class="title" transform="translate(500 200)">
 					<text class="lab" text-anchor="middle" transform="translate(0 -11)">Genome position</text>
 				</g>
 				<line x1="20" x2="980" y1="163.2" y2="163.2"/>
diff --git a/python/tests/data/svg/ts_plain_y.svg b/python/tests/data/svg/ts_plain_y.svg
@@ -6,7 +6,7 @@
 	<g class="tree-sequence">
 		<g class="axes">
 			<g class="x-axis">
-				<g transform="translate(518.4 200)">
+				<g class="title" transform="translate(518.4 200)">
 					<text class="lab" text-anchor="middle" transform="translate(0 -11)">Genome position</text>
 				</g>
 				<line x1="56.8" x2="980" y1="163.2" y2="163.2"/>
@@ -50,7 +50,7 @@
 				</g>
 			</g>
 			<g class="y-axis">
-				<g transform="translate(0 65.7)">
+				<g class="title" transform="translate(0 65.7)">
 					<text class="lab" text-anchor="middle" transform="translate(11) rotate(-90)">Time</text>
 				</g>
 				<line x1="56.8" x2="56.8" y1="121.4" y2="10"/>
diff --git a/python/tests/data/svg/ts_rank.svg b/python/tests/data/svg/ts_rank.svg
@@ -13,7 +13,7 @@
 		</g>
 		<g class="axes">
 			<g class="x-axis">
-				<g transform="translate(518.4 200)">
+				<g class="title" transform="translate(518.4 200)">
 					<text class="lab" text-anchor="middle" transform="translate(0 -11)">Genome position</text>
 				</g>
 				<line x1="56.8" x2="980" y1="163.2" y2="163.2"/>
@@ -96,7 +96,7 @@
 				</g>
 			</g>
 			<g class="y-axis">
-				<g transform="translate(0 65.7)">
+				<g class="title" transform="translate(0 65.7)">
 					<text class="lab" text-anchor="middle" transform="translate(11) rotate(-90)">Node time</text>
 				</g>
 				<line x1="56.8" x2="56.8" y1="121.4" y2="10"/>
diff --git a/python/tests/data/svg/ts_x_lim.svg b/python/tests/data/svg/ts_x_lim.svg
@@ -11,7 +11,7 @@
 		</g>
 		<g class="axes">
 			<g class="x-axis">
-				<g transform="translate(300 200)">
+				<g class="title" transform="translate(300 200)">
 					<text class="lab" text-anchor="middle" transform="translate(0 -11)">Genome position</text>
 				</g>
 				<line x1="20" x2="580" y1="163.2" y2="163.2"/>
diff --git a/python/tests/data/svg/ts_xlabel.svg b/python/tests/data/svg/ts_xlabel.svg
@@ -13,7 +13,7 @@
 		</g>
 		<g class="axes">
 			<g class="x-axis">
-				<g transform="translate(500 200)">
+				<g class="title" transform="translate(500 200)">
 					<text class="lab" text-anchor="middle" transform="translate(0 -11)">genomic position (bp)</text>
 				</g>
 				<line x1="20" x2="980" y1="163.2" y2="163.2"/>
diff --git a/python/tests/data/svg/ts_y_axis.svg b/python/tests/data/svg/ts_y_axis.svg
@@ -13,7 +13,7 @@
 		</g>
 		<g class="axes">
 			<g class="x-axis">
-				<g transform="translate(518.4 200)">
+				<g class="title" transform="translate(518.4 200)">
 					<text class="lab" text-anchor="middle" transform="translate(0 -11)">Genome position</text>
 				</g>
 				<line x1="56.8" x2="980" y1="163.2" y2="163.2"/>
@@ -96,7 +96,7 @@
 				</g>
 			</g>
 			<g class="y-axis">
-				<g transform="translate(0 65.7)">
+				<g class="title" transform="translate(0 65.7)">
 					<text class="lab" text-anchor="middle" transform="translate(11) rotate(-90)">Time (generations)</text>
 				</g>
 				<line x1="56.8" x2="56.8" y1="121.4" y2="10"/>
diff --git a/python/tests/data/svg/ts_y_axis_log.svg b/python/tests/data/svg/ts_y_axis_log.svg
@@ -13,7 +13,7 @@
 		</g>
 		<g class="axes">
 			<g class="x-axis">
-				<g transform="translate(518.4 200)">
+				<g class="title" transform="translate(518.4 200)">
 					<text class="lab" text-anchor="middle" transform="translate(0 -11)">Genome position</text>
 				</g>
 				<line x1="56.8" x2="980" y1="163.2" y2="163.2"/>
@@ -96,7 +96,7 @@
 				</g>
 			</g>
 			<g class="y-axis">
-				<g transform="translate(0 65.7)">
+				<g class="title" transform="translate(0 65.7)">
 					<text class="lab" text-anchor="middle" transform="translate(11) rotate(-90)">Time (log scale)</text>
 				</g>
 				<line x1="56.8" x2="56.8" y1="121.4" y2="10"/>
diff --git a/python/tests/data/svg/ts_y_axis_regular.svg b/python/tests/data/svg/ts_y_axis_regular.svg
@@ -13,7 +13,7 @@
 		</g>
 		<g class="axes">
 			<g class="x-axis">
-				<g transform="translate(518.4 200)">
+				<g class="title" transform="translate(518.4 200)">
 					<text class="lab" text-anchor="middle" transform="translate(0 -11)">Genome position</text>
 				</g>
 				<line x1="56.8" x2="980" y1="163.2" y2="163.2"/>
@@ -96,7 +96,7 @@
 				</g>
 			</g>
 			<g class="y-axis">
-				<g transform="translate(0 65.7)">
+				<g class="title" transform="translate(0 65.7)">
 					<text class="lab" text-anchor="middle" transform="translate(11) rotate(-90)">Time</text>
 				</g>
 				<line x1="56.8" x2="56.8" y1="121.4" y2="10"/>
diff --git a/python/tests/test_drawing.py b/python/tests/test_drawing.py
@@ -2461,6 +2461,7 @@ def test_known_svg_tree_x_axis(self, overwrite_viz, draw_plotbox):
         svg_no_css = svg[svg.find("</style>") :]
         assert svg_no_css.count("axes") == 1
         assert svg_no_css.count("x-axis") == 1
+        assert svg_no_css.count("title") == 1
         assert svg_no_css.count("y-axis") == 0
         self.verify_known_svg(svg, "tree_x_axis.svg", overwrite_viz, width=400)
 
@@ -2482,6 +2483,7 @@ def test_known_svg_tree_y_axis_rank(self, overwrite_viz, draw_plotbox):
         assert svg_no_css.count("axes") == 1
         assert svg_no_css.count("x-axis") == 0
         assert svg_no_css.count("y-axis") == 1
+        assert svg_no_css.count("title") == 1
         self.verify_known_svg(svg, "tree_y_axis_rank.svg", overwrite_viz)
 
     def test_known_svg_tree_both_axes(self, overwrite_viz, draw_plotbox):
@@ -2491,6 +2493,7 @@ def test_known_svg_tree_both_axes(self, overwrite_viz, draw_plotbox):
         assert svg_no_css.count("axes") == 1
         assert svg_no_css.count("x-axis") == 1
         assert svg_no_css.count("y-axis") == 1
+        assert svg_no_css.count("title") == 2
         self.verify_known_svg(svg, "tree_both_axes.svg", overwrite_viz)
 
     def test_known_svg_tree_root_mut(self, overwrite_viz, draw_plotbox):
diff --git a/python/tskit/drawing.py b/python/tskit/drawing.py
@@ -693,6 +693,7 @@ def draw_x_axis(
                 self.x_label,
                 x_axis,
                 pos=((self.plotbox.left + self.plotbox.right) / 2, self.plotbox.max_y),
+                group_class="title",
                 class_="lab",
                 transform="translate(0 -11)",
                 text_anchor="middle",
@@ -783,6 +784,7 @@ def draw_y_axis(
                 self.y_label,
                 y_axis,
                 pos=(0, (upper + lower) / 2),
+                group_class="title",
                 class_="lab",
                 text_anchor="middle",
                 transform="translate(11) rotate(-90)",
