@sarc-mediq/viewer

Native Cornerstone3D DICOM viewer component for SARC MedIQ apps. Black-box: give it a studyInstanceUID + DICOMweb root, it fetches (QIDO/WADO) and renders — series navigation, thumbnails, cine + frame transport, a 1×1/2×2/3×3 grid, and core tools (window-level, pan, zoom, measure/annotate). No Redux, no host imports.

Install

Published to public npm under the @sarc-mediq scope (same as @sarc-mediq/react-diagrams). No registry config needed:

yarn add @sarc-mediq/viewer

Usage

import { StudyViewer } from "@sarc-mediq/viewer"

<StudyViewer
  source={{ studyInstanceUID, dicomWebRoot: "/api/ohif/proxy" }}
  onActiveFrameChange={(frame) => {
    /* host: dispatch into your viewer slice */
  }}
/>

When studyInstanceUID === "" it renders a placeholder.

Required host build config (Vite)

The viewer uses @cornerstonejs/dicom-image-loader, which ships web workers and WASM codecs. The package keeps these as normal dependencies (not bundled), so the consuming app's bundler must be configured for them:

// vite.config.ts (consumer)
export default defineConfig({
  plugins: [react(), viteCommonjs()],          // @originjs/vite-plugin-commonjs
  worker: { format: "es" },
  resolve: { dedupe: ["react", "react-dom"] },
  optimizeDeps: {
    exclude: ["@cornerstonejs/dicom-image-loader"],
    include: ["dicom-parser"],
  },
})

react/react-dom are peerDependencies — the consumer provides them, and dedupe prevents the duplicate-React hooks crash.

Develop

yarn install
yarn build        # tsup → dist (ESM + CJS + .d.ts)
yarn test
yarn lint
yarn typecheck

Public API

| Prop | Type | Notes | | --- | --- | --- | | source.studyInstanceUID | string | DICOM StudyInstanceUID (not an exam id) | | source.dicomWebRoot | string | DICOMweb proxy root | | onActiveFrameChange? | (frame: number) => void | host wires to its viewer slice |

The Redux/viewerSlice integration (frame-jump handshake, annotations) lives in the host, not this package.