Skip to main content

A Streamlit component for NiiVue neuroimaging viewer

Project description

NiiVue Streamlit Component

A modern Streamlit component for visualizing neuroimaging data using NiiVue, built with TypeScript, Preact, and Vite.

๐Ÿš€ Quick Start

Simple Installation & Usage

  1. Install the component:

    pip install --index-url https://test.pypi.org/simple/ --no-deps niivue-streamlit
    
  2. Use in your Streamlit app:

    import streamlit as st
    from niivue_component import niivue_viewer
    
    uploaded_file = st.file_uploader("Choose a NIFTI file", type=["nii", "nii.gz"])
    
    if uploaded_file is not None:
        result = niivue_viewer(
            nifti_data=uploaded_file.getvalue(),
            filename=uploaded_file.name,
            height=700
        )
    
        # Handle click events
        if result:
            st.write(f"Clicked voxel: {result['voxel']}, Value: {result['value']}")
    

โœจ Features

  • ๐ŸŽจ Two Component Modes:
    • StyledViewer: Full-featured viewer with interactive menu and controls
    • UnstyledCanvas: Minimal canvas-only viewer for embedding
  • ๐Ÿ”„ Multiple View Modes:
    • Axial, Coronal, Sagittal slices
    • 3D render view
    • Multiplanar view with render
  • ๐Ÿ“Š Advanced Capabilities:
    • Multiple overlay images with custom colormaps
    • Surface mesh rendering (FreeSurfer pial, white, inflated, GIfTI, STL, OBJ, etc.)
    • Mesh overlays (curvature, thickness, annotations)
    • Combined volume + mesh visualization
    • Configurable display settings (crosshair, radiological convention, colorbar, interpolation)
    • Bidirectional communication (click events from viewer to Python)
    • DICOM support

๐Ÿ“– Advanced Usage

With Overlays

from niivue_component import niivue_viewer

result = niivue_viewer(
    nifti_data=main_image_bytes,
    filename="brain.nii.gz",
    overlays=[
        {
            "data": overlay_bytes,
            "name": "activation.nii.gz",
            "colormap": "hot",
            "opacity": 0.7
        }
    ],
    view_mode="multiplanar",
    styled=True,
    settings={
        "crosshair": True,
        "radiological": False,
        "colorbar": True,
        "interpolation": True
    },
    height=800
)

With Mesh Surfaces

from niivue_component import niivue_viewer

# Load a FreeSurfer surface mesh
mesh_data = open("lh.pial", "rb").read()

result = niivue_viewer(
    meshes=[{
        "data": mesh_data,
        "name": "lh.pial",
    }],
    view_mode="3d",
    height=700
)

Mesh with Overlays (Curvature, Thickness)

mesh_data = open("lh.pial", "rb").read()
thickness_data = open("lh.thickness", "rb").read()

result = niivue_viewer(
    meshes=[{
        "data": mesh_data,
        "name": "lh.pial",
        "overlays": [{
            "data": thickness_data,
            "name": "lh.thickness",
            "colormap": "redyell",
            "opacity": 0.7
        }]
    }],
    view_mode="3d",
    height=700
)

Volume with Mesh

# Display a volume image alongside a surface mesh
volume_data = open("brain.nii.gz", "rb").read()
mesh_data = open("lh.pial", "rb").read()

result = niivue_viewer(
    nifti_data=volume_data,
    filename="brain.nii.gz",
    meshes=[{
        "data": mesh_data,
        "name": "lh.pial",
    }],
    view_mode="3d",
    height=700
)

Minimal Viewer (No Menu)

# Perfect for embedding in complex layouts
result = niivue_viewer(
    nifti_data=image_bytes,
    filename="scan.nii",
    styled=False,  # Hide menu
    view_mode="axial",
    height=400
)

โšก Performance

Because Streamlit re-runs the whole script whenever a component calls Streamlit.setComponentValue, bidirectional click feedback from the viewer can become a bottleneck: without care, every mouse event re-reads the file, re-base64-encodes the NIfTI, and re-transmits it to the iframe. Three knobs keep the viewer snappy:

  1. @st.fragment โ€” wrap the viewer plus the UI that consumes its return value in a fragment. Clicks re-run only the fragment, not the whole page. See app_bidirectional.py.
  2. @st.cache_data โ€” cache Path.read_bytes() so the same bytes aren't re-loaded on every re-run. The component wrapper also caches the base64 encoding internally, keyed on the bytes object's identity, so caching your loader transparently skips re-encoding too.
  3. update_interval_ms โ€” controls the throttle on click events sent back to Python (default 100 ms). Pass None to disable feedback entirely when the return value isn't used (e.g. app_simple.py, app_overlay.py, app_advanced.py).

Minimal template:

import streamlit as st
from niivue_component import niivue_viewer
from pathlib import Path

@st.cache_data
def load_nifti(path: str) -> bytes:
    return Path(path).read_bytes()

image = load_nifti("brain.nii.gz")

@st.fragment
def viewer():
    result = niivue_viewer(
        nifti_data=image,
        filename="brain.nii.gz",
        key="viewer",
        update_interval_ms=100,  # or None to disable feedback
    )
    if result:
        st.write(result)

viewer()

๐Ÿ“š API Reference

niivue_viewer()

Parameters:

  • nifti_data (bytes, optional): Raw NIFTI file data
  • filename (str): Displayed filename
  • overlays (list[dict], optional): Overlay images list
    • data (bytes): Overlay data
    • name (str): Overlay name
    • colormap (str): Colormap (default: 'red')
    • opacity (float): 0-1 (default: 0.5)
  • meshes (list[dict], optional): Mesh surfaces list
    • data (bytes): Mesh file data
    • name (str): Mesh filename (must include extension, e.g. 'lh.pial', 'brain.gii')
    • overlays (list[dict], optional): Mesh overlays (curvature, thickness, etc.)
      • data (bytes): Overlay data
      • name (str): Overlay filename
      • colormap (str): Colormap (default: 'redyell')
      • opacity (float): 0-1 (default: 0.7)
  • height (int): Height in pixels (default: 600)
  • view_mode (str): 'axial', 'coronal', 'sagittal', '3d', 'multiplanar' (default)
  • styled (bool): Show menu (default: True)
  • settings (dict, optional):
    • crosshair (bool): default True
    • radiological (bool): default False
    • colorbar (bool): default False
    • interpolation (bool): default True
  • update_interval_ms (int or None): throttle for click events sent back to Python (default: 100 ms). None disables feedback entirely โ€” use it when the return value isn't consumed to avoid any Python round-trip during mouse interaction.
  • key (str, optional): Component key

Returns:

dict or None with click event data:

  • type: 'voxel_click'
  • voxel: [x, y, z]
  • mm: [x, y, z]
  • value: float
  • filename: str

๐Ÿ› ๏ธ Development

Dev mode (live reload)

In dev mode, the Python package points to a local Vite dev server instead of built files.

Terminal 1 โ€” start the frontend dev server (port 3001):

pnpm dev

Terminal 2 โ€” run the example app with the dev flag:

NIIVUE_DEV=1 streamlit run app.py

The frontend hot-reloads on changes.

Production mode (built files)

Build the frontend first, then run Streamlit normally:

pnpm build
streamlit run app.py

_RELEASE = True (the default) serves from niivue_component/frontend/build/.

Running Examples

# Simple example
streamlit run app.py

# Advanced example with all features
streamlit run app_advanced.py

๐Ÿ“ Supported Formats

๐Ÿ—๏ธ Architecture

niivue_component/
โ”œโ”€โ”€ __init__.py                 # Python API
โ”œโ”€โ”€ frontend/
โ”‚   โ”œโ”€โ”€ src/
โ”‚   โ”‚   โ”œโ”€โ”€ components/
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ StyledViewer.tsx
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ UnstyledCanvas.tsx
โ”‚   โ”‚   โ”œโ”€โ”€ types.ts
โ”‚   โ”‚   โ””โ”€โ”€ utils.ts
โ”‚   โ”œโ”€โ”€ vite.config.ts
โ”‚   โ””โ”€โ”€ package.json
โ””โ”€โ”€ build/                      # Compiled assets (generated, not in git)

๐Ÿ”ง Building for Distribution

Build files are not committed to git. To prepare the Python package for release:

pnpm build
python -m build

This compiles frontend assets into niivue_component/frontend/build/, which is then bundled into the Python package.

๐Ÿ“„ License

BSD-2-Clause

๐Ÿ™ Credits

Built on top of:

Project details


Release history Release notifications | RSS feed

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

niivue_streamlit-0.3.1.dev71.tar.gz (787.9 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

niivue_streamlit-0.3.1.dev71-py3-none-any.whl (787.6 kB view details)

Uploaded Python 3

File details

Details for the file niivue_streamlit-0.3.1.dev71.tar.gz.

File metadata

  • Download URL: niivue_streamlit-0.3.1.dev71.tar.gz
  • Upload date:
  • Size: 787.9 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/6.2.0 CPython/3.11.15

File hashes

Hashes for niivue_streamlit-0.3.1.dev71.tar.gz
Algorithm Hash digest
SHA256 ba48d0c9a951d4f1be0f725533635fc96925fdbf82a9f172a505284aef953f33
MD5 f4cee2261ea6772e40e9d66919e6b546
BLAKE2b-256 c9d1ddd05c632aa6a10501fb79ebf65dce268de1448b7992cc93c155915ede8e

See more details on using hashes here.

File details

Details for the file niivue_streamlit-0.3.1.dev71-py3-none-any.whl.

File metadata

File hashes

Hashes for niivue_streamlit-0.3.1.dev71-py3-none-any.whl
Algorithm Hash digest
SHA256 d8f08120a18aaccd4b9011379b6ee3887ffa18cb10f3477895fa575dcab1d41d
MD5 38088ce8d53f1f81084ce1cc975164d2
BLAKE2b-256 f535f703dcc596cff17e6b1e548bfe6b3e73c3a604541a4b13ed4d7b43046a19

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page