🎨 Format embedding axes with subscripts

🎨 Add mathjax=True to scatterplot 2d graph
Add html.Sub(1) workaround for Radio(label=...) for 2d axes options

automappa/pages/mag_refinement/components/scatterplot_2d.py

@@ -4,11 +4,9 @@
 from typing import Dict, List, Literal, Optional, Protocol, Set, Tuple, Union
 from dash_extensions.enrich import DashProxy, Input, Output, dcc, html
 from plotly import graph_objects as go
+from automappa.data.schemas import ContigSchema
 
-from automappa.utils.figures import (
-    format_axis_title,
-    get_scatterplot_2d,
-)
+from automappa.utils.figures import format_axis_title
 
 from automappa.components import ids
 
@@ -152,19 +150,29 @@ def scatterplot_2d_figure_callback(
         BOTTOM_MARGIN = 20
         TOP_MARGIN = 20
         legend = go.layout.Legend(visible=show_legend, x=1, y=1)
+
         # NOTE: Changing `uirevision` will trigger the graph to change
         # graph properties state (like zooming, panning, clicking on legend items).
         # i.e. if the axes change we want to reset the ui
         # See: https://community.plotly.com/t/preserving-ui-state-like-zoom-in-dcc-graph-with-uirevision-with-dash/15793
         # for more details
+        def format_title(axis: str) -> str:
+            axes_combinations = {
+                ContigSchema.X_1: r"$\text{X}_{1}$",
+                ContigSchema.X_2: r"$\text{X}_{2}$",
+                ContigSchema.COVERAGE: "Coverage",
+                ContigSchema.GC_CONTENT: "GC Content",
+            }
+            return axes_combinations[axis]
+
         layout = go.Layout(
             legend=legend,
             margin=dict(r=RIGHT_MARGIN, b=BOTTOM_MARGIN, l=LEFT_MARGIN, t=TOP_MARGIN),
             hovermode="closest",
             clickmode="event+select",
             uirevision=axes_columns,
-            xaxis=go.layout.XAxis(title=format_axis_title(x_axis)),
-            yaxis=go.layout.YAxis(title=format_axis_title(y_axis)),
+            xaxis=go.layout.XAxis(title=dict(text=format_title(x_axis))),
+            yaxis=go.layout.YAxis(title=dict(text=format_title(y_axis))),
             height=600,
         )
         return go.Figure(data=traces, layout=layout)
@@ -177,6 +185,7 @@ def scatterplot_2d_figure_callback(
                     id=ids.SCATTERPLOT_2D_FIGURE,
                     clear_on_unhover=True,
                     config={"displayModeBar": True, "displaylogo": False},
+                    mathjax=True,
                 ),
                 id=ids.LOADING_SCATTERPLOT_2D,
                 type="graph",

automappa/pages/mag_refinement/source.py

@@ -4,6 +4,7 @@
 import pandas as pd
 from pydantic import BaseModel
 from typing import Dict, List, Literal, Optional, Set, Tuple, Union
+from dash import html
 
 from sqlmodel import Session, and_, or_, select, func
 
@@ -286,7 +287,7 @@ def get_scaterplot3d_records(
         return data
 
     def get_color_by_column_options(self) -> List[Dict[Literal["label", "value"], str]]:
-        categoricals = [
+        categories = [
             ContigSchema.CLUSTER,
             ContigSchema.SUPERKINGDOM,
             ContigSchema.PHYLUM,
@@ -296,44 +297,31 @@ def get_color_by_column_options(self) -> List[Dict[Literal["label", "value"], st
             ContigSchema.GENUS,
             ContigSchema.SPECIES,
         ]
-        return [
-            {"label": category.title(), "value": category} for category in categoricals
-        ]
+        return [dict(label=category.title(), value=category) for category in categories]
 
     def get_scatterplot_2d_axes_options(
         self,
     ) -> List[Dict[Literal["label", "value", "disabled"], str]]:
-        options = []
-        axes_combinations = [
-            (ContigSchema.X_1, ContigSchema.X_2),
-            (ContigSchema.COVERAGE, ContigSchema.GC_CONTENT),
+        axes_labels = {
+            (ContigSchema.X_1, ContigSchema.X_2): html.P(
+                ["X", html.Sub("1"), " vs. ", "X", html.Sub("2")]
+            ),
+            (ContigSchema.COVERAGE, ContigSchema.GC_CONTENT): "Coverage vs. GC Content",
+        }
+        return [
+            dict(label=label, value="|".join(axes))
+            for axes, label in axes_labels.items()
         ]
-        for x_axis, y_axis in axes_combinations:
-            x_axis_label = (
-                "GC content" if ContigSchema.GC_CONTENT in x_axis else x_axis.title()
-            )
-            y_axis_label = (
-                "GC content" if ContigSchema.GC_CONTENT in y_axis else y_axis.title()
-            )
-            label = f"{x_axis_label} vs. {y_axis_label}"
-            value = "|".join([x_axis, y_axis])
-            options.append(dict(label=label, value=value))
-        return options
 
     def get_scatterplot_3d_zaxis_dropdown_options(
         self,
     ) -> List[Dict[Literal["label", "value", "disabled"], str]]:
         axes = {
-            ContigSchema.LENGTH,
-            ContigSchema.COVERAGE,
-            ContigSchema.GC_CONTENT,
+            ContigSchema.LENGTH: "length",
+            ContigSchema.COVERAGE: "Coverage",
+            ContigSchema.GC_CONTENT: "GC Content",
         }
-        options = []
-        for value in axes:
-            label = "GC content" if ContigSchema.GC_CONTENT in value else value.title()
-            options.append({"label": label, "value": value})
-
-        return options
+        return [dict(label=label, value=value) for value, label in axes.items()]
 
     def get_taxonomy_distribution_dropdown_options(
         self,
@@ -345,7 +333,7 @@ def get_taxonomy_distribution_dropdown_options(
             ContigSchema.GENUS,
             ContigSchema.SPECIES,
         ]
-        return [{"label": rank.title(), "value": rank} for rank in ranks]
+        return [dict(label=rank.title(), value=rank) for rank in ranks]
 
     def get_marker_overview(
         self, metagenome_id: int