MNutils 1.2.0__py3-none-any.whl

mnutils/plotting/_widgets/mrsi_inspector.py

@@ -0,0 +1,70 @@
+import base64
+from pathlib import Path
+
+from ._html import render_html
+from ._shared import load_css, load_esm
+
+_DIR = Path(__file__).parent
+_JS = load_esm(_DIR / "mrsi_inspector.js")
+_CSS = load_css(_DIR / "mrsi_inspector.css")
+
+
+class MRSIVoxelInspectorWidget:
+    """Interactive T1 + MRSI overlay with click/keyboard voxel selection.
+
+    Every anatomical slice is a pre-rendered WebP frame (T1 + MRSI overlay, no
+    voxel box baked in). The voxel outline and the spectrum plot are drawn
+    client-side from data embedded directly in the displayed HTML: the
+    display affine (for projecting a voxel index to display pixel
+    coordinates, and for inverting a click back to a voxel index) and a
+    compressed spectra buffer (one spectrum per (x, y, MRSI slice) triple, in
+    the units already selected by the caller -- magnitude, autophased, or
+    real). None of this requires a Python kernel after the widget is
+    displayed.
+    """
+
+    def __init__(
+        self,
+        *,
+        left_frames: list[bytes],
+        slice_titles: list[str],
+        n_anat_slices: int,
+        initial_slice: int,
+        image_width: int,
+        image_height: int,
+        mrsi_to_display_affine: list[float],
+        display_to_mrsi_affine: list[float],
+        grid_shape: tuple[int, int, int],
+        mrsi_dims: tuple[int, int],
+        initial_voxel: tuple[int, int, int],
+        ppm: list[float],
+        spectra_bytes: bytes,
+        spectra_scale: float,
+        spectra_min: float,
+        spectra_max: float,
+        npts: int,
+        spectrum_label: str = "Spectrum",
+    ) -> None:
+        self._data = {
+            "left_frames": [base64.b64encode(frame).decode("ascii") for frame in left_frames],
+            "slice_titles": slice_titles,
+            "n_anat_slices": n_anat_slices,
+            "initial_slice": initial_slice,
+            "image_width": image_width,
+            "image_height": image_height,
+            "mrsi_to_display_affine": mrsi_to_display_affine,
+            "display_to_mrsi_affine": display_to_mrsi_affine,
+            "grid_shape": list(grid_shape),
+            "mrsi_dims": list(mrsi_dims),
+            "initial_voxel": list(initial_voxel),
+            "ppm": ppm,
+            "spectra_bytes": base64.b64encode(spectra_bytes).decode("ascii"),
+            "spectra_scale": spectra_scale,
+            "spectra_min": spectra_min,
+            "spectra_max": spectra_max,
+            "npts": npts,
+            "spectrum_label": spectrum_label,
+        }
+
+    def _repr_html_(self) -> str:
+        return render_html(_JS, _CSS, self._data)

mnutils/plotting/_widgets/slice_viewer.css

@@ -0,0 +1,38 @@
+.mnutils-slice-viewer {
+  margin-top: 1em;
+}
+
+.mnutils-slice-viewer-bar {
+  justify-content: flex-start;
+  border-bottom: 1px solid var(--mnu-border-soft);
+}
+
+.mnutils-slice-viewer-bar .mnu-lbl,
+.mnutils-slice-viewer-bar .mnu-readout {
+  font-size: 1.1em;
+}
+
+.mnutils-slice-viewer-bar .mnu-readout {
+  font-family: inherit;
+  font-weight: 700;
+  line-height: inherit;
+  min-width: 0;
+  color: var(--mnu-fg-strong);
+}
+
+.mnutils-slice-viewer-bar .mnu-slider {
+  flex: none;
+  width: min(100%, 320px);
+  height: 1.3em;
+}
+
+.mnutils-slice-viewer-panel {
+  display: flex;
+  justify-content: center;
+  border-bottom: none;
+}
+
+.mnutils-slice-viewer-image {
+  max-width: 100%;
+  height: auto;
+}

mnutils/plotting/_widgets/slice_viewer.js

@@ -0,0 +1,41 @@
+function renderWidget(data, el) {
+  const frames = data.frames;
+  const nSlices = data.n_slices;
+  const label = data.slice_label;
+  const initialIndex = data.initial_index;
+
+  const urls = frames.map(
+    (b64) => URL.createObjectURL(new Blob([b64ToBytes(b64)], { type: "image/png" })),
+  );
+
+  const viewer = document.createElement("div");
+  viewer.className = "mnu-viewer mnutils-slice-viewer";
+
+  const panel = document.createElement("div");
+  panel.className = "mnu-panel mnutils-slice-viewer-panel";
+
+  const img = document.createElement("img");
+  img.className = "mnutils-slice-viewer-image";
+  img.src = urls[initialIndex];
+
+  panel.append(img);
+
+  const { lbl, slider, readout } = makeSliceSlider({
+    min: 0,
+    max: nSlices - 1,
+    value: initialIndex,
+    label,
+    formatReadout: (idx) => String(idx),
+    onInput: (idx) => {
+      img.src = urls[idx];
+    },
+  });
+
+  const bar = makeBar(makeGroup(lbl, readout), slider);
+  bar.classList.add("mnutils-slice-viewer-bar");
+
+  viewer.append(bar, panel);
+  el.append(viewer);
+}
+
+export default renderWidget;

mnutils/plotting/_widgets/slice_viewer.py

@@ -0,0 +1,35 @@
+import base64
+from pathlib import Path
+
+from ._html import render_html
+from ._shared import load_css, load_esm
+
+_DIR = Path(__file__).parent
+_JS = load_esm(_DIR / "slice_viewer.js")
+_CSS = load_css(_DIR / "slice_viewer.css")
+
+
+class SliceViewerWidget:
+    """Slider-driven viewer over a stack of pre-rendered PNG frames.
+
+    All frames are embedded directly in the displayed HTML, so the slider
+    works purely client-side -- no Python kernel is needed after the widget
+    is displayed, which is what makes it survive a static docs build.
+    """
+
+    def __init__(
+        self,
+        frames: list[bytes],
+        n_slices: int,
+        initial_index: int = 0,
+        slice_label: str = "Slice",
+    ) -> None:
+        self._data = {
+            "frames": [base64.b64encode(frame).decode("ascii") for frame in frames],
+            "n_slices": n_slices,
+            "initial_index": initial_index,
+            "slice_label": slice_label,
+        }
+
+    def _repr_html_(self) -> str:
+        return render_html(_JS, _CSS, self._data)