ProtSpace Web is a browser-based visualization tool for exploring protein language model (pLM) embeddings. Built with modular web components (canvas renderer, interactive legend, control bar), it enables interactive exploration through dimensionality reduction methods (PCA, UMAP, t-SNE) with zoom, pan, and selection. Color by features, view 3D protein structures, and export images or data files for sharing.
Demo: https://tsenoner.github.io/protspace_web/ → Drag & drop .parquetbundle files
Option 1: Google Colab (no local installation needed)
Generate .parquetbundle files directly in your browser:
Option 2: Python ProtSpace (local installation)
pip install protspace
# Query UniProt and generate visualization files
protspace-query -q "(ft_domain:phosphatase) AND (reviewed:true)" -o output_dir
# Or use your own embeddings
protspace-local -i embeddings.h5 -o output_dirSee the Python ProtSpace repository for details.
Use the web components in any HTML page or JavaScript framework:
<!DOCTYPE html>
<html>
<head>
<script type="module">
import '@protspace/core';
</script>
</head>
<body>
<protspace-data-loader id="loader" allow-drop></protspace-data-loader>
<protspace-scatterplot id="plot"></protspace-scatterplot>
<protspace-legend auto-sync scatterplot-selector="protspace-scatterplot"></protspace-legend>
<protspace-control-bar
auto-sync
scatterplot-selector="protspace-scatterplot"
></protspace-control-bar>
<script type="module">
const loader = document.getElementById('loader');
const plot = document.getElementById('plot');
loader.addEventListener('data-loaded', (e) => {
plot.data = e.detail.data;
plot.selectedProjectionIndex = 0;
plot.selectedFeature = Object.keys(e.detail.data.features)[0] || '';
});
</script>
</body>
</html><protspace-data-loader>: Loads.parquetbundlefiles<protspace-scatterplot>: 2D scatter plot<protspace-legend>: Filter and color categories<protspace-control-bar>: Switch projections and export
git clone https://github.com/tsenoner/protspace_web.git
cd protspace_web
pnpm install
pnpm dev # starts local demo at http://localhost:5173-
Prettier (formatting)
- Format all files:
pnpm run format - Check without writing:
pnpm run format:check
- Format all files:
-
ESLint (code quality)
- Lint all packages:
pnpm run lint - Auto-fix safe issues:
pnpm run lint:fix
- Lint all packages:
Prettier handles formatting and ESLint focuses on correctness and best practices. The ESLint config integrates eslint-config-prettier to avoid conflicts with Prettier's formatting.
Apache License 2.0 - see LICENSE