Arcs

The <NotebookRenderer /> component reads a .ipynb file from public/ and renders it as a static, read-only Jupyter-style document. Code is highlighted with shiki , markdown cells are rendered with react-markdown, and outputs (stdout, dataframes, plots, errors) are shown inline.

Usage

content/my-page.mdx


import { NotebookRenderer } from '@/components/notebook/NotebookRenderer'
 
<NotebookRenderer src="/arcs.ipynb" />

Live example

Below is public/arcs.ipynb rendered with the component:

python/new.ipynb

In [4]

python

import higlass as hg

file = "/media/rudhra/ChenLabData1/Middleware/nishi_output/mcool_files/SRR17733626/SRR17733626.mcool"
file = "/workspace/workdisk3/rudhra/Desktop/experiments/plots/quest/MMTBMP031124.mcool"
CHROM_SIZES = "/workspace/workdisk3/rudhra/database/main_chroms/hg38.chrom.sizes"
GENES_BEDDB = "/workspace/workdisk3/rudhra/Desktop/experiments/plots/chromspec_arcs_viz/hg38_genes.beddb"

In [5]

python

cool_ts = hg.cooler(file)
chrom_ts = hg.chromsizes(CHROM_SIZES)
genes_ts = hg.beddb(GENES_BEDDB)
cool_ts

ClodiusTileset(datatype='matrix', tiles_impl=functools.partial(<function tiles at 0x76f2ad9709d0>, '/workspace/workdisk3/rudhra/Desktop/experiments/plots/quest/MMTBMP031124.mcool'), info_impl=functools.partial(<function tileset_info at 0x76f2ad9708b0>, '/workspace/workdisk3/rudhra/Desktop/experiments/plots/quest/MMTBMP031124.mcool'))

In [6]

python

import higlass as hg

# --- Tracks ---
heatmap    = hg.combine(cool_ts.track("heatmap"), chrom_ts.track("2d-chromosome-grid"))
chrom_h    = chrom_ts.track("horizontal-chromosome-labels")
chrom_v    = chrom_ts.track("horizontal-chromosome-labels")
genes      = genes_ts.track("horizontal-gene-annotations")

# --- View ---
view = hg.view(
    (heatmap, "center"),
    (genes,   "top"),
    (chrom_h, "top"),
    (chrom_v, "left"),
    width=10,
)
view

Supported outputs

stream — stdout and stderr text
execute_result / display_data for:
- image/png and image/jpeg (base64)
- image/svg+xml
- text/html (e.g. pandas DataFrames)
- application/json
- text/plain fallback
error — ANSI codes are stripped from tracebacks

Notes

Static renderer — cells are never executed.
Light and dark color schemes are applied automatically via prefers-color-scheme.