Merge pull request #9 from mindthemath/hotfix/docs

docs fixes + hip.theme support

Author: mathematicalmichael

.claude/settings.local.json

@@ -3,10 +3,10 @@
     "allow": [
       "Bash(npm run build:*)",
       "mcp__plugin_playwright_playwright__browser_drag",
-      "Bash(bun run build:*)",
-      "Bash(pip uninstall:*)",
       "Bash(bunx playwright test:*)",
-      "Bash(./build.sh:*)"
+      "Bash(./build.sh:*)",
+      "mcp__plugin_playwright_playwright__browser_run_code",
+      "Bash(make build:*)"
     ]
   }
 }

docs/experiment_settings.rst

@@ -22,7 +22,7 @@ Multiple points can share the same parent - this is especially useful when repre
 
 .. raw:: html
 
-    <iframe src="https://mindthemath.github.io/hiplot/_static/demo/demo_line_xy.html" height="1000px" style="width: 100%; border: 0;"></iframe>
+    <iframe src="https://mindthemath.github.io/hiplot/_static/demo/demo_line_xy.html?hip.theme=light" height="1000px" style="width: 100%; border: 0;"></iframe>
 
 
 .. _frontendRenderingSettings:

docs/getting_started.rst

@@ -7,7 +7,7 @@ Installing
 
 Python version
 ^^^^^^^^^^^^^^
-HiPlot requires python version 3.6 or newer (you can check your python version with :code:`python3 --version`)
+HiPlot requires Python version greater than 3.9 (you can check your Python version with :code:`python3 --version`)
 
 
 Python virtualenv
@@ -38,7 +38,7 @@ Within the activated environment, use the following command to install HiPlot:
 
 .. code-block:: bash
 
-    pip install -U hiplot  # Or for conda users: conda install -c conda-forge hiplot
+    pip install -U "hiplot-mm>=0.0.4"
 
 
 Congratulation, HiPlot is now ready to use! You can either:
@@ -65,7 +65,7 @@ Once we have created this object, we can display it with :class:`hiplot.Experime
 
 .. raw:: html
 
-    <iframe src="./_static/demo/demo_basic_usage.html?hip.PARALLEL_PLOT.height=300" height="700px" width="100%"></iframe>
+    <iframe src="./_static/demo/demo_basic_usage.html?hip.PARALLEL_PLOT.height=300&amp;hip.theme=light" height="700px" width="100%"></iframe>
 
 
 **Learn more** in the tutorial: :ref:`tutoNotebook`

docs/index.rst

@@ -21,7 +21,7 @@ Given about 7000 experimental datapoints, we want to understand which parameters
 
 .. raw:: html
 
-    <iframe src="./_static/demo/ml1.csv.html?hip.color_by=%22valid+ppl%22&amp;hip.PARALLEL_PLOT.height=300" height="1000px" style="width: 100%; border: 0;"></iframe>
+    <iframe src="./_static/demo/ml1.csv.html?hip.color_by=%22valid+ppl%22&amp;hip.PARALLEL_PLOT.height=300&amp;hip.theme=light" height="1000px" style="width: 100%; border: 0;"></iframe>
 
 
 HiPlot documentation

docs/tuto_javascript.rst

@@ -33,7 +33,7 @@ Basic example
 
 .. raw:: html
 
-    <iframe src="./_static/examples_javascript/Basic/index.html" height="700px" width="100%"></iframe>
+    <iframe src="./_static/examples_javascript/Basic/index.html?hip.theme=light" height="700px" width="100%"></iframe>
 
 
 Customizing HiPlot react component
@@ -69,4 +69,4 @@ An advanced example
 
 .. raw:: html
 
-    <iframe src="./_static/examples_javascript/Custom/index.html?hip.PARALLEL_PLOT.height=250" height="400px" width="100%"></iframe>
+    <iframe src="./_static/examples_javascript/Custom/index.html?hip.PARALLEL_PLOT.height=250&amp;hip.theme=light" height="400px" width="100%"></iframe>

docs/tuto_streamlit.rst

@@ -10,9 +10,9 @@ HiPlot component for Streamlit
 Getting started
 ----------------------------------
 
-You'll need both Streamlit (>=0.63 for `components support <https://docs.streamlit.io/develop/concepts/custom-components/intro>`_) and HiPlot (>=0.18)
+You'll need both Streamlit (>=0.63 for `components support <https://docs.streamlit.io/develop/concepts/custom-components/intro>`_) and HiPlot (hiplot-mm >= 0.0.4)
 
->>> pip install -U streamlit hiplot
+>>> pip install -U streamlit "hiplot-mm>=0.0.4"
 
 
 Displaying an :class:`hiplot.Experiment`

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "hiplot-mm"
-version = "0.0.4rc13"
+version = "0.0.4rc15"
 description = "High dimensional Interactive Plotting tool"
 readme = "README.md"
 license = "MIT"

src/distribution/plot.tsx

@@ -10,9 +10,15 @@ import * as d3 from "d3";
 import style from "../hiplot.module.css";
 import { create_d3_scale_without_outliers, ParamDef } from "../infertypes";
 import { convert_to_categorical_input } from "../lib/d3_scales";
-import { foCreateAxisLabel, foDynamicSizeFitContent } from "../lib/svghelpers";
 import { ParamType, Datapoint } from "../types";
 
+function labelTextFromHtml(html: string, fallback: string): string {
+  const tmp = document.createElement("div");
+  tmp.innerHTML = html || "";
+  const text = (tmp.textContent || tmp.innerText || "").trim();
+  return text.length ? text : fallback;
+}
+
 const margin = { top: 20, right: 20, bottom: 50, left: 60 };
 
 interface BinsDrawData {
@@ -87,19 +93,11 @@ export class DistributionPlot extends React.Component<DistributionPlotData, {}>
       );
       d3.select(this.axisBottomName.current)
         .html(null)
-        .append(
-          function () {
-            return foCreateAxisLabel(this.props.param_def, null, null);
-          }.bind(this),
-        )
-        .classed("distrplot_axislabel", true)
-        .attr("x", -4)
-        .attr("text-anchor", "end");
-      d3.select(this.axisBottomName.current)
-        .select(".distrplot_axislabel")
-        .each(function (this: SVGForeignObjectElement) {
-          foDynamicSizeFitContent(this);
-        });
+        .append("text")
+        .attr("text-anchor", "middle")
+        .attr("font-weight", "bold")
+        .attr("fill", "currentColor")
+        .text(labelTextFromHtml(this.props.param_def.label_html, this.props.axis));
       this.axisRight.current.innerHTML = "";
     } else {
       dataScale.range([this.figureHeight(), 0]);
@@ -112,6 +110,13 @@ export class DistributionPlot extends React.Component<DistributionPlotData, {}>
         .transition()
         .duration(animate ? this.props.animateMs : 0)
         .call(d3.axisLeft(dataScale).ticks(1 + this.props.height / 50));
+      d3.select(this.axisBottomName.current)
+        .html(null)
+        .append("text")
+        .attr("text-anchor", "middle")
+        .attr("font-weight", "bold")
+        .attr("fill", "currentColor")
+        .text("Density");
     }
   }
   createDataScaleAndAxis(): void {
@@ -354,14 +359,21 @@ export class DistributionPlot extends React.Component<DistributionPlotData, {}>
   }
 
   render() {
-    const leftAxisLabel = this.isVertical() ? "Density" : this.props.axis;
     return (
       <div data-testid="distribution-plot" data-axis={this.props.axis}>
         <svg width={this.props.width} height={this.props.height}>
-          <g transform={`translate(${margin.left}, 15)`} textAnchor="start" fontWeight="bold">
-            <text style={{ stroke: "white", strokeWidth: "0.2em" }}>{leftAxisLabel}</text>
-            <text>{leftAxisLabel}</text>
-          </g>
+          <text
+            x={13}
+            y={15}
+            textAnchor="start"
+            fontWeight="bold"
+            fill="currentColor"
+            className={style.axisLabelText}
+          >
+            {this.isVertical()
+              ? "Density"
+              : labelTextFromHtml(this.props.param_def.label_html, this.props.axis)}
+          </text>
           <g
             ref={this.svgContainer}
             className={style["distr-graph-svg"]}
@@ -386,8 +398,8 @@ export class DistributionPlot extends React.Component<DistributionPlotData, {}>
             ></g>
             <g
               ref={this.axisBottomName}
-              transform={`translate(${this.figureWidth()}, ${this.props.height - margin.top - 30})`}
-              textAnchor="end"
+              transform={`translate(${this.figureWidth() / 2}, ${this.props.height - margin.top - 10})`}
+              textAnchor="middle"
               fontWeight="bold"
             ></g>
           </g>

src/hiplot_web.tsx

@@ -16,11 +16,18 @@ import { UploadDataProvider } from "./dataproviders/upload";
 
 export function build_props(extra?: any): HiPlotProps {
   const searchParams = new URLSearchParams(location.search);
+  const themeParam =
+    searchParams.get("hip.theme") ??
+    searchParams.get("hiplot.theme") ??
+    searchParams.get("HIPLOT.theme");
   const darkParam =
     searchParams.get("hip.dark") ??
     searchParams.get("hiplot.dark") ??
     searchParams.get("HIPLOT.dark");
-  const darkValue = normalizeDarkModeSetting(darkParam, "auto");
+  // `hip.theme` is the preferred query parameter. Keep `hip.dark` as a
+  // compatibility fallback for existing links.
+  const themeOrDarkParam = themeParam !== null ? themeParam : darkParam;
+  const darkValue = normalizeDarkModeSetting(themeOrDarkParam, "auto");
   var props = {
     experiment: null,
     persistentState: new PersistentStateInURL("hip"),

src/infertypes.ts

@@ -387,7 +387,7 @@ export function infertypes(
       }
     }
     if (info.type == ParamType.NUMERICLOG) {
-      info.ticks_format = d3.format(".1e");
+      info.ticks_format = ".1e";
     }
     return info;
   }