Support HTML in column labels (#224)

Co-authored-by: danthe3rd <[email protected]>

hiplot/experiment.py

@@ -96,6 +96,7 @@ class ValueDef(_DictSerializable):
         For example :code:`"interpolateSinebow"`.
         To inverse the colormap, append `#inverse` to the name (eg :code:`"interpolateSinebow#inverse"`)
     :ivar label_css: Space-separated bootstrap CSS classes to apply on the label when supported
+    :ivar label_html: HTML code used to render the column name
 
     See :attr:`hiplot.Experiment.parameters_definition`
     """
@@ -113,6 +114,7 @@ def __init__(
         self.label_css = label_css
         self.force_value_min: tp.Optional[float] = None
         self.force_value_max: tp.Optional[float] = None
+        self.label_html: tp.Optional[str] = None
 
     def force_range(self, minimum: float, maximum: float) -> "ValueDef":
         """
@@ -139,6 +141,7 @@ def _asdict(self) -> tp.Dict[str, tp.Any]:
             "force_value_min": self.force_value_min,
             "force_value_max": self.force_value_max,
             "label_css": self.label_css,
+            "label_html": self.label_html,
         }
 
 

hiplot/fetchers_demo.py

@@ -322,6 +322,18 @@ def demo_3xcols() -> hip.Experiment:
     return xp
 
 
+def demo_col_html() -> hip.Experiment:
+    COL1 = "<h1>col1</h1>"
+    COL2 = "col_2"
+    experiment = hip.Experiment.from_iterable([
+        {COL1: 1.0, COL2: 1},
+        {COL1: 2.0, COL2: 2},
+        {COL1: 3.0, COL2: 3},
+    ])
+    experiment.parameters_definition[COL2].label_html = "col<sub>2</sub>"
+    return experiment
+
+
 README_DEMOS: t.Dict[str, t.Callable[[], hip.Experiment]] = {
     "demo": demo,
     "demo_3xcols": demo_3xcols,
@@ -346,4 +358,5 @@ def demo_3xcols() -> hip.Experiment:
     "demo_color_interpolate_inverse": demo_color_interpolate_inverse,
     "demo_first_value_nan": demo_first_value_nan,
     "demo_weighted_rows": demo_weighted_rows,
+    "demo_col_html": demo_col_html,
 }

src/infertypes.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
+import $ from "jquery";
 import * as d3 from "d3";
 
 import * as color from "color";
@@ -315,6 +315,7 @@ export function infertypes(url_states: PersistentState, table: Array<Datapoint>,
             'force_value_min': hint !== undefined && hint.force_value_min != null ? hint.force_value_min : null,
             'force_value_max': hint !== undefined && hint.force_value_max != null ? hint.force_value_max : null,
             'label_css': hint !== undefined && hint.label_css !== null ? hint.label_css : "",
+            'label_html': hint !== undefined && hint.label_html !== null && hint.label_html !== undefined ? hint.label_html : $("<div>").text(key).html(),
         };
         // What other types we can render as?
         if (numeric) {

src/lib/svghelpers.ts

@@ -58,7 +58,7 @@ export function foCreateAxisLabel(pd: ParamDef, cm?: React.RefObject<ContextMenu
         .classed("label-name", true)
         .classed(style.axisLabelText, true)
         .classed("d-inline-block", true)
-        .html(pd.name)
+        .html(pd.label_html)
         .on("contextmenu", function() {
             if (cm) {
                 cm.current.show(d3.event.pageX, d3.event.pageY, pd.name);

src/rowsdisplaytable.tsx

@@ -110,7 +110,7 @@ export class RowsDisplayTable extends React.Component<TablePluginProps, RowsDisp
         var columns: Array<{[k: string]: any}> = this.ordered_cols.map(function(x) {
             const pd = me.props.params_def[x];
             return {
-                'title': x == '' ? '' : $("<span />").attr("class", pd.label_css).text(x)[0].outerHTML,
+                'title': x == '' ? '' : $("<span />").attr("class", pd.label_css).html(pd.label_html)[0].outerHTML,
                 'defaultContent': 'null',
                 'type': x == '' ? 'html' : (pd.numeric ? "num" : "string"),
                 'visible': !me.props.hide || !me.props.hide.includes(x),

src/types.ts

@@ -35,6 +35,7 @@ export interface HiPlotValueDef { // Mirror of python `hip.ValueDef`
     force_value_min: number | null;
     force_value_max: number | null;
     label_css: string | null;
+    label_html: string | null;
 };
 
 export interface DatapointsCompressed {