@biongff/vizarr 1.0.1 → 1.2.0

package/CONTRIBUTING.md

@@ -1,82 +0,0 @@
-## Feedback and Contribution
-
-Thanks for your interest in `vizarr`! I welcome any input, feedback, bug reports, and contributions. 
-Please do not hesitate to reach out if you have any questions!
-
-### Setting up a development environment
-
-In order to make changes to `vizarr`, you will need to fork the repository. Clone your fork
-of the repository to your local machine and change directories:
-
-```bash
-git clone https://github.com/your-username/vizarr.git
-cd vizarr
-``` 
-
-Set the `upstream` remote to the base `vizarr` repository:
-
-```bash
-git remote add upstream https://github.com/hms-dbmi/vizarr.git
-```
-
-Install the dependencies to develop and build `vizarr` via `pnpm`.
-
-```bash
-pnpm install 
-```
-
-> Note: You need to have [Node.js](https://nodejs.org/en/) (v20.0 or later) to build
-> and develop `vizarr`. I recommend using [`nvm`](https://github.com/nvm-sh/nvm) or
-> [`fnm`](https://github.com/Schniz/fnm) to manage different version of Node.js
-> on your machine.
-
-### Running the development server
-
-```bash
-pnpm dev
-```
-
-The `dev` command will start a development server on `http://localhost:5173`
-which you can navigate to in your web browser. You can "live" edit the contents
-of any of the files within `src/` or `public/` when running this server;
-changes are reflected instantly in the browser. Stop the development server
-when you are done making changes.
-
-- `src/` - contains all TypeScript source code
-- `public/` - contains all static assets required for the site
-
-Have a look at the other `script` commands in `package.json` for the project. These are standard to any JS
-build and can be executed by running `pnpm <command>`.
-
-### Making changes
-
-Create a new feature branch:
-
-```bash
-git checkout main -b your-feature-branch-name
-```
-
-Add and commit your changed files.
-
-### Sharing your changes
-
-Update your remote branch:
-
-```bash
-git push -u origin your-feature-branch-name
-```
-
-You can then make a pull-request to `vizarr`'s `main` branch. When making a
-pull-request, your code will be checked for linting with `biome`. Please run
-`pnpm fix` to automatically format your code when making a pull-request.
-
-
-### (Note to self) Building and publishing `vizarr`
-
-Build a production version of the site:
-
-```bash
-pnpm version [<new version> | major | minor | patch]
-pnpm publish
-```
-

package/README.md

@@ -1,85 +0,0 @@
-<h1>
-<p align="center">
-  <img src="./assets/logo-wide.svg" alt="vizarr" width="200">
-</h1>
-<samp>
-  <p align="center">
-    <span>view multiscale zarr images online and in notebooks</span>
-      <br>
-      <br>
-      <a href="https://hms-dbmi.github.io/vizarr/?source=https://minio-dev.openmicroscopy.org/idr/v0.3/idr0062-blin-nuclearsegmentation/6001240.zarr">standalone app</a> .
-      <a href="./python/notebooks/getting_started.ipynb">python api</a> .
-      <a href="https://colab.research.google.com/github/hms-dbmi/vizarr/blob/main/python/notebooks/mandelbrot.ipynb">open in colab</a>
-  </p>
-</samp>
-</p>
-
-## About 
-
-**Vizarr** is a minimal, purely client-side program for viewing zarr-based images.
-
-- ⚡ **GPU accelerated rendering** with [Viv](https://github.com/hms-dbmi/viv)
-- 💻 Purely **client-side** zarr access with [zarrita.js](https://github.com/manzt/zarrita.js)
-- 🌎 A **standalone [web app](https://hms-dbmi/vizarr)** for viewing entirely in the browser.
-- 🐍 An [anywidget](https://github.com/manzt/anywidget) **Python API** for
-  programmatic control in notebooks.
-- 📦 Supports any `zarr-python` [store](https://zarr.readthedocs.io/en/stable/api/storage.html)
-  as a backend.
-
-<p align="center">
-  <img src="./assets/screenshot.png" alt="Multiscale OME-Zarr in Jupyter Notebook with Vizarr" width="500">
-</p>
-
-## Getting started
-
-**Vizarr**  provides two primary interfaces for interacting with the core viewer:
-
-### 1. Standalone Web App
-
-You can use the standalone web app by copying and pasting a URL to a Zarr store as the `?source` query parameter in the [web app](https://hms-dbmi.github.io/vizarr).
-
-For example, to view [this dataset](https://minio-dev.openmicroscopy.org/idr/v0.3/idr0062-blin-nuclearsegmentation/6001240.zarr) from the IDR, navigate to the following URL:
-
-```
-https://hms-dbmi.github.io/vizarr/?source=https://minio-dev.openmicroscopy.org/idr/v0.3/idr0062-blin-nuclearsegmentation/6001240.zarr
-```
-
-### 2. Python API
-
-The Python API is an [anywidget](https://github.com/manzt/anywidget), allowing programatic control of the viewer in computational notebooks like Jupyter, JupyterLab, Colab, and VS Code. The easiest way to get started is to open a Zarr store and load it into the viewer.
-
-```python
-import vizarr
-import zarr
-
-store = zarr.open("./path/to/ome.zarr")
-viewer = vizarr.Viewer()
-viewer.add_image(store)
-viewer
-```
-
-To learn more, see the [getting started](./python/notebooks/getting_started.ipynb) notebook.
-
-## Data types
-
-**Vizarr** supports viewing 2D slices of n-Dimensional Zarr arrays, allowing
-users to choose a single channel or blended composites of multiple channels
-during analysis. It has special support for the developing OME-NGFF format for
-multiscale and multimodal images. Currently, Viv supports `int8`, `int16`,
-`int32`, `uint8`, `uint16`, `uint32`, `float32`, `float64` arrays, but
-contributions are welcome to support more np.dtypes!
-
-## Limitations
-
-`vizarr` was built to support the registration use case above where multiple, pyramidal OME-Zarr images
-are viewed within a Jupyter Notebook. Support for other Zarr arrays is supported but not as well tested. 
-More information regarding the viewing of generic Zarr arrays can be found in the example notebooks.
-
-## Citation
-
-If you are using Vizarr in your research, please cite our paper:
-
-> Trevor Manz, Ilan Gold, Nathan Heath Patterson, Chuck McCallum, Mark S Keller, Bruce W Herr II, Katy Börner, Jeffrey M Spraggins, Nils Gehlenborg,
-> "[Viv: multiscale visualization of high-resolution multiplexed bioimaging data on the web](https://www.nature.com/articles/s41592-022-01482-7)."
-> **Nature Methods** (2022), [doi:10.31219/10.1038/s41592-022-01482-7](https://doi.org/10.1038/s41592-022-01482-7)
-

package/assets/logo-wide.svg

@@ -1,60 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 516.22 126.13">
-  <defs>
-    <style>
-      .cls-1, .cls-2, .cls-3, .cls-4 {
-        mix-blend-mode: multiply;
-      }
-
-      .cls-1, .cls-2, .cls-3, .cls-5, .cls-6, .cls-7 {
-        stroke-width: 0px;
-      }
-
-      .cls-1, .cls-7 {
-        fill: #ef4136;
-      }
-
-      .cls-2, .cls-5 {
-        fill: #27aae1;
-      }
-
-      .cls-3, .cls-6 {
-        fill: #39b54a;
-      }
-
-      .cls-8 {
-        isolation: isolate;
-      }
-    </style>
-  </defs>
-  <g class="cls-8">
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <polygon class="cls-2" points="72.82 40.61 49.38 0 7.5 0 72.82 113.14 138.15 0 96.27 0 72.82 40.61"/>
-        <polygon class="cls-1" points="102.06 12.99 72.82 63.62 43.59 12.99 15 12.99 80.32 126.13 145.65 12.99 102.06 12.99"/>
-        <polygon class="cls-3" points="72.82 63.62 43.59 12.99 0 12.99 65.32 126.13 130.65 12.99 102.06 12.99 72.82 63.62"/>
-        <g class="cls-4">
-          <path class="cls-7" d="M160.22,17.14h13.85l-20.36,92.36h-13.85l20.36-92.36Z"/>
-          <path class="cls-7" d="M172.96,98.15l63.84-68.82h-48.6l2.63-12.19h67.44l-2.35,11.35-64.11,68.82h49.85l-2.77,12.19h-68.41l2.49-11.35Z"/>
-          <path class="cls-7" d="M318.91,90.39h-45.28l-11.63,19.11h-15.92l57.05-92.36h17.31l16.34,92.36h-14.54l-3.32-19.11ZM280.41,78.07h37.25l-7.89-48.47-29.36,48.47Z"/>
-          <path class="cls-7" d="M387.58,73.92h-18.14l-7.75,35.59h-13.85l20.36-92.36h35.59c13.85,0,26.86,9.28,26.86,24.65,0,17.03-11.91,29.63-28.94,31.43l15.37,36.28h-15.23l-14.26-35.59ZM416.11,43.04c0-8.03-7.2-13.71-14.68-13.71h-22.02l-7.2,32.4h23.26c13.16,0,20.63-8.31,20.63-18.69Z"/>
-          <path class="cls-7" d="M473.16,73.92h-18.14l-7.75,35.59h-13.85l20.36-92.36h35.59c13.85,0,26.86,9.28,26.86,24.65,0,17.03-11.91,29.63-28.94,31.43l15.37,36.28h-15.23l-14.26-35.59ZM501.68,43.04c0-8.03-7.2-13.71-14.68-13.71h-22.02l-7.2,32.4h23.26c13.16,0,20.63-8.31,20.63-18.69Z"/>
-        </g>
-        <g class="cls-4">
-          <path class="cls-5" d="M160.22,17.14h13.85l-20.36,92.36h-13.85l20.36-92.36Z"/>
-          <path class="cls-5" d="M172.96,98.15l63.84-68.82h-48.6l2.63-12.19h67.44l-2.35,11.35-64.11,68.82h49.85l-2.77,12.19h-68.41l2.49-11.35Z"/>
-          <path class="cls-5" d="M318.91,90.39h-45.28l-11.63,19.11h-15.92l57.05-92.36h17.31l16.34,92.36h-14.54l-3.32-19.11ZM280.41,78.07h37.25l-7.89-48.47-29.36,48.47Z"/>
-          <path class="cls-5" d="M387.58,73.92h-18.14l-7.75,35.59h-13.85l20.36-92.36h35.59c13.85,0,26.86,9.28,26.86,24.65,0,17.03-11.91,29.63-28.94,31.43l15.37,36.28h-15.23l-14.26-35.59ZM416.11,43.04c0-8.03-7.2-13.71-14.68-13.71h-22.02l-7.2,32.4h23.26c13.16,0,20.63-8.31,20.63-18.69Z"/>
-          <path class="cls-5" d="M473.16,73.92h-18.14l-7.75,35.59h-13.85l20.36-92.36h35.59c13.85,0,26.86,9.28,26.86,24.65,0,17.03-11.91,29.63-28.94,31.43l15.37,36.28h-15.23l-14.26-35.59ZM501.68,43.04c0-8.03-7.2-13.71-14.68-13.71h-22.02l-7.2,32.4h23.26c13.16,0,20.63-8.31,20.63-18.69Z"/>
-        </g>
-        <g class="cls-4">
-          <path class="cls-6" d="M160.22,17.14h13.85l-20.36,92.36h-13.85l20.36-92.36Z"/>
-          <path class="cls-6" d="M172.96,98.15l63.84-68.82h-48.6l2.63-12.19h67.44l-2.35,11.35-64.11,68.82h49.85l-2.77,12.19h-68.41l2.49-11.35Z"/>
-          <path class="cls-6" d="M318.91,90.39h-45.28l-11.63,19.11h-15.92l57.05-92.36h17.31l16.34,92.36h-14.54l-3.32-19.11ZM280.41,78.07h37.25l-7.89-48.47-29.36,48.47Z"/>
-          <path class="cls-6" d="M387.58,73.92h-18.14l-7.75,35.59h-13.85l20.36-92.36h35.59c13.85,0,26.86,9.28,26.86,24.65,0,17.03-11.91,29.63-28.94,31.43l15.37,36.28h-15.23l-14.26-35.59ZM416.11,43.04c0-8.03-7.2-13.71-14.68-13.71h-22.02l-7.2,32.4h23.26c13.16,0,20.63-8.31,20.63-18.69Z"/>
-          <path class="cls-6" d="M473.16,73.92h-18.14l-7.75,35.59h-13.85l20.36-92.36h35.59c13.85,0,26.86,9.28,26.86,24.65,0,17.03-11.91,29.63-28.94,31.43l15.37,36.28h-15.23l-14.26-35.59ZM501.68,43.04c0-8.03-7.2-13.71-14.68-13.71h-22.02l-7.2,32.4h23.26c13.16,0,20.63-8.31,20.63-18.69Z"/>
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>

package/assets/logo.svg

@@ -1,36 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 145.65 126.13">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #ef4136;
-      }
-
-      .cls-1, .cls-2, .cls-3 {
-        mix-blend-mode: multiply;
-        stroke-width: 0px;
-      }
-
-      .cls-2 {
-        fill: #27aae1;
-      }
-
-      .cls-3 {
-        fill: #39b54a;
-      }
-
-      .cls-4 {
-        isolation: isolate;
-      }
-    </style>
-  </defs>
-  <g class="cls-4">
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <polygon class="cls-2" points="72.82 40.61 49.38 0 7.5 0 72.82 113.14 138.15 0 96.27 0 72.82 40.61"/>
-        <polygon class="cls-1" points="102.06 12.99 72.82 63.62 43.59 12.99 15 12.99 80.32 126.13 145.65 12.99 102.06 12.99"/>
-        <polygon class="cls-3" points="72.82 63.62 43.59 12.99 0 12.99 65.32 126.13 130.65 12.99 102.06 12.99 72.82 63.62"/>
-      </g>
-    </g>
-  </g>
-</svg>

package/assets/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

package/biome.json

@@ -1,34 +0,0 @@
-{
-  "$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
-  "organizeImports": {
-    "enabled": true
-  },
-  "formatter": {
-    "enabled": true,
-    "indentStyle": "space",
-    "indentWidth": 2,
-    "lineEnding": "lf",
-    "lineWidth": 120
-  },
-  "linter": {
-    "enabled": true,
-    "rules": {
-      "recommended": true,
-      "style": {
-        "useConst": "off",
-        "noParameterAssign": "off"
-      },
-      "suspicious": {
-        "noShadowRestrictedNames": "off"
-      }
-    }
-  },
-  "files": {
-    "ignore": ["python"]
-  },
-  "vcs": {
-    "enabled": true,
-    "clientKind": "git",
-    "useIgnoreFile": true
-  }
-}

package/index.html

@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link
-      rel="icon"
-      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔬</text></svg>"
-    />
-    <link rel="alternate icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="A minimal, purely client-side program for viewing Zarr-based images." />
-    <title>vizarr</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <script type="module" src="/main.ts"></script>
-    <style>
-      html {
-        background-color: black;
-      }
-    </style>
-  </body>
-</html>

package/main.ts

@@ -1,52 +0,0 @@
-import debounce from "just-debounce-it";
-import * as vizarr from "./src/index";
-
-async function main() {
-  console.log(`vizarr v${vizarr.version}: https://github.com/hms-dbmi/vizarr`);
-  // biome-ignore lint/style/noNonNullAssertion: We know the element exists
-  const viewer = await vizarr.createViewer(document.querySelector("#root")!);
-  const url = new URL(window.location.href);
-
-  if (!url.searchParams.has("source")) {
-    return;
-  }
-
-  // see if we have initial viewState
-  const viewStateString = url.searchParams.get("viewState");
-  if (viewStateString) {
-    const viewState = JSON.parse(viewStateString);
-    viewer.setViewState(viewState);
-  }
-
-  // Add event listener to sync viewState as query param.
-  // Debounce to limit how quickly we are pushing to browser history
-  viewer.on(
-    "viewStateChange",
-    debounce((update: vizarr.ViewState) => {
-      const url = new URL(window.location.href);
-      url.searchParams.set("viewState", JSON.stringify(update));
-      window.history.replaceState(window.history.state, "", decodeURIComponent(url.href));
-    }, 200),
-  );
-
-  // parse image config
-  // @ts-expect-error - TODO: validate config
-  const config: vizarr.ImageLayerConfig = {};
-
-  for (const [key, value] of url.searchParams) {
-    // @ts-expect-error - TODO: validate config
-    config[key] = value;
-  }
-
-  // Make sure the source URL is decoded.
-  viewer.addImage(config);
-
-  const newLocation = decodeURIComponent(url.href);
-
-  // Only update history if the new location is different from the current
-  if (window.location.href !== newLocation) {
-    window.history.replaceState(window.history.state, "", newLocation);
-  }
-}
-
-main();

package/patches/@vivjs__loaders@0.17.2.patch

@@ -1,13 +0,0 @@
-diff --git a/dist/index.mjs b/dist/index.mjs
-index b709ea0b4eb932f46b304b4cd8d241ac09e37a8b..37788b9807822f2d4bc257a5079f534a1d34dea7 100644
---- a/dist/index.mjs
-+++ b/dist/index.mjs
-@@ -1,8 +1,6 @@
- import { BaseDecoder, fromBlob, fromFile, fromUrl, GeoTIFFImage, addDecoder } from 'geotiff';
--import { decompress } from 'lzw-tiff-decoder';
- import quickselect from 'quickselect';
- import * as z from 'zod';
--import { KeyError, openGroup, HTTPStore } from 'zarr';
- 
- var __defProp$3 = Object.defineProperty;
- var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;

package/python/.python-version

@@ -1 +0,0 @@
-3.13

package/python/README.md

@@ -1,14 +0,0 @@
-# vizarr
-
-```sh
-pip install vizarr
-```
-
-```python
-import vizarr
-import zarr
-
-viewer = vizarr.Viewer()
-viewer.add_image(source=zarr.open("path/to/ome.zarr"))
-viewer
-```

package/python/Untitled.ipynb

@@ -1,40 +0,0 @@
-{
- "cells": [
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "20794451-c89f-497d-aa89-3c6a432326fc",
-   "metadata": {},
-   "outputs": [],
-   "source": []
-  }
- ],
- "metadata": {
-  "kernelspec": {
-   "display_name": "Python 3 (ipykernel)",
-   "language": "python",
-   "name": "python3"
-  },
-  "language_info": {
-   "codemirror_mode": {
-    "name": "ipython",
-    "version": 3
-   },
-   "file_extension": ".py",
-   "mimetype": "text/x-python",
-   "name": "python",
-   "nbconvert_exporter": "python",
-   "pygments_lexer": "ipython3",
-   "version": "3.12.3"
-  },
-  "widgets": {
-   "application/vnd.jupyter.widget-state+json": {
-    "state": {},
-    "version_major": 2,
-    "version_minor": 0
-   }
-  }
- },
- "nbformat": 4,
- "nbformat_minor": 5
-}

package/python/deno.json

@@ -1,22 +0,0 @@
-{
-	"lock": false,
-	"compilerOptions": {
-		"checkJs": true,
-		"allowJs": true,
-		"lib": [
-			"ES2022",
-			"DOM",
-			"DOM.Iterable"
-		]
-	},
-	"fmt": {
-		"useTabs": true
-	},
-	"lint": {
-		"rules": {
-			"exclude": [
-				"prefer-const"
-			]
-		}
-	}
-}

package/python/notebooks/IDR_example.ipynb

@@ -1,86 +0,0 @@
-{
- "cells": [
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "# Viewing an image from the IDR\n",
-    "\n",
-    "OME-NGFF is an open standard for imaging from the OME community. The Imaging Data Resource (IDR) provides serveral publically available images in this format."
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "!pip install --quiet fsspec zarr requests aiohttp"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "## Open the remote zarr"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "from fsspec import get_mapper\n",
-    "import zarr\n",
-    "\n",
-    "# Create a remote mapping to the data\n",
-    "url = \"https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001240.zarr/\"\n",
-    "store = get_mapper(url)\n",
-    "z_grp = zarr.open(store, mode='r')\n",
-    "z_grp"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "##  View with vizarr"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "import vizarr\n",
-    "\n",
-    "viewer = vizarr.Viewer()\n",
-    "viewer.add_image(source=z_grp)\n",
-    "viewer"
-   ]
-  }
- ],
- "metadata": {
-  "kernelspec": {
-   "display_name": "Python 3 (ipykernel)",
-   "language": "python",
-   "name": "python3"
-  },
-  "language_info": {
-   "codemirror_mode": {
-    "name": "ipython",
-    "version": 3
-   },
-   "file_extension": ".py",
-   "mimetype": "text/x-python",
-   "name": "python",
-   "nbconvert_exporter": "python",
-   "pygments_lexer": "ipython3",
-   "version": "3.12.3"
-  }
- },
- "nbformat": 4,
- "nbformat_minor": 4
-}

package/python/notebooks/README.md

@@ -1,35 +0,0 @@
-# Examples
-
-## Install Requirements
-
-The examples require the `vizarr` [anywidget](https://github.com/manzt/anywidget). If running locally, please install the following:
-
-```bash
-pip install vizarr
-```
-
-## Getting Started
-
-This example will work in the Jupyter, JupyterLab, VS Code, and more. We recommend trying our JupyterLab.
-
-```bash
-$ jupyter lab getting_started.ipynb
-```
-
-## Viewing an Image from the Imaging Data Resource
-
-OME-NGFF is an open standard for imaging from the OME community. The [Imaging Data Resource](https://idr.openmicroscopy.org) (IDR) 
-provides serveral images in this format which are publically available.
-
-```bash
-$ jupyter lab IDR_example.ipynb
-```
-
-## Display a Zoomable Mandelbrot Set
-
-This notebook a contains a `vizarr` example visualizing a generic multiscale Zarr. The first cells create the
-underlying generative Zarr store. It dynamically creates "chunks" at different zoom levels and associated array metadata.
-
-```bash
-$ jupyter lab mandelbrot.ipynb
-```