volview 4.0.0

package/src/io/state-file/schema.ts

@@ -0,0 +1,277 @@
+import JSZip from 'jszip';
+import { z } from 'zod';
+import { Vector3 } from '@kitware/vtk.js/types';
+import vtkPiecewiseFunctionProxy, {
+  PiecewiseGaussian,
+  PiecewiseNode,
+} from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
+
+import {
+  Ruler,
+  Tools as ToolsEnum,
+  LPSCroppingPlanes,
+} from '@/src/store/tools/types';
+import { InteractionState } from '@/src/vtk/RulerWidget/state';
+
+import {
+  CameraConfig,
+  SliceConfig,
+  WindowLevelConfig,
+  VolumeColorConfig,
+} from '../../store/view-configs/types';
+import { LPSAxisDir, LPSAxis } from '../../types/lps';
+import { LayoutDirection } from '../../types/layout';
+import {
+  ViewType,
+  ColorBy,
+  ColorTransferFunction,
+  OpacityFunction,
+  OpacityGaussians,
+  OpacityPoints,
+  OpacityNodes,
+  ColoringConfig,
+  CVRConfig,
+} from '../../types/views';
+
+export enum DataSetType {
+  DICOM = 'dicom',
+  IMAGE = 'image',
+}
+
+const DataSetTypeNative = z.nativeEnum(DataSetType);
+
+const LPSAxisDir: z.ZodType<LPSAxisDir> = z.union([
+  z.literal('Left'),
+  z.literal('Right'),
+  z.literal('Posterior'),
+  z.literal('Anterior'),
+  z.literal('Superior'),
+  z.literal('Inferior'),
+]);
+
+const DataSet = z.object({
+  id: z.string(),
+  path: z.string(),
+  type: DataSetTypeNative,
+});
+export type DataSet = z.infer<typeof DataSet>;
+
+const LayoutDirectionNative = z.nativeEnum(LayoutDirection);
+
+export interface Layout {
+  name?: string;
+  direction: LayoutDirection;
+  items: Array<Layout | string>;
+}
+
+const Layout: z.ZodType<Layout> = z.lazy(() =>
+  z.object({
+    name: z.string().optional(),
+    direction: LayoutDirectionNative,
+    items: z.array(z.union([Layout, z.string()])),
+  })
+);
+
+const Vector3: z.ZodType<Vector3> = z.tuple([
+  z.number(),
+  z.number(),
+  z.number(),
+]);
+
+const WindowLevelConfig: z.ZodType<WindowLevelConfig> = z.object({
+  width: z.number(),
+  level: z.number(),
+  min: z.number(),
+  max: z.number(),
+});
+
+const SliceConfig: z.ZodType<SliceConfig> = z.object({
+  slice: z.number(),
+  min: z.number(),
+  max: z.number(),
+  axisDirection: LPSAxisDir,
+});
+
+const CameraConfig: z.ZodType<CameraConfig> = z.object({
+  parallelScale: z.number().optional(),
+  position: Vector3.optional(),
+  focalPoint: Vector3.optional(),
+  directionOfProjection: Vector3.optional(),
+  viewUp: Vector3.optional(),
+});
+
+const ColorBy: z.ZodType<ColorBy> = z.object({
+  arrayName: z.string(),
+  location: z.string(),
+});
+
+const PiecewiseGaussian: z.ZodType<PiecewiseGaussian> = z.object({
+  position: z.number(),
+  height: z.number(),
+  width: z.number(),
+  xBias: z.number(),
+  yBias: z.number(),
+});
+
+const PiecewiseNode: z.ZodType<PiecewiseNode> = z.object({
+  x: z.number(),
+  y: z.number(),
+  midpoint: z.number(),
+  sharpness: z.number(),
+});
+
+const OpacityGaussians: z.ZodType<OpacityGaussians> = z.object({
+  mode: z.literal(vtkPiecewiseFunctionProxy.Mode.Gaussians),
+  gaussians: PiecewiseGaussian.array(),
+  mappingRange: z.tuple([z.number(), z.number()]),
+});
+
+const OpacityPoints: z.ZodType<OpacityPoints> = z.object({
+  mode: z.literal(vtkPiecewiseFunctionProxy.Mode.Points),
+  preset: z.string(),
+  shift: z.number(),
+  mappingRange: z.tuple([z.number(), z.number()]),
+});
+
+const OpacityNodes: z.ZodType<OpacityNodes> = z.object({
+  mode: z.literal(vtkPiecewiseFunctionProxy.Mode.Nodes),
+  nodes: PiecewiseNode.array(),
+  mappingRange: z.tuple([z.number(), z.number()]),
+});
+
+const OpacityFunction = z.union([
+  OpacityGaussians,
+  OpacityPoints,
+  OpacityNodes,
+]);
+
+const ColorTransferFunction: z.ZodType<ColorTransferFunction> = z.object({
+  preset: z.string(),
+  mappingRange: z.tuple([z.number(), z.number()]),
+});
+
+const ColoringConfig: z.ZodType<ColoringConfig> = z.object({
+  colorBy: ColorBy,
+  transferFunction: ColorTransferFunction,
+  opacityFunction: OpacityFunction,
+});
+
+const CVRConfig: z.ZodType<CVRConfig> = z.object({
+  enabled: z.boolean(),
+  lightFollowsCamera: z.boolean(),
+  useVolumetricScatteringBlending: z.boolean(),
+  volumetricScatteringBlending: z.number(),
+  useLocalAmbientOcclusion: z.boolean(),
+  laoKernelSize: z.number(),
+  laoKernelRadius: z.number(),
+  ambient: z.number(),
+  diffuse: z.number(),
+  specular: z.number(),
+});
+
+const VolumeColorConfig: z.ZodType<VolumeColorConfig> = z.object({
+  colorBy: ColorBy,
+  transferFunction: ColorTransferFunction,
+  opacityFunction: OpacityFunction,
+  cvr: CVRConfig,
+});
+
+const ViewConfig = z.object({
+  window: WindowLevelConfig.optional(),
+  slice: SliceConfig.optional(),
+  camera: CameraConfig.optional(),
+  volumeColorConfig: VolumeColorConfig.optional(),
+});
+
+const ViewType: z.ZodType<ViewType> = z.union([
+  z.literal('2D'),
+  z.literal('3D'),
+]);
+
+export type ViewConfig = z.infer<typeof ViewConfig>;
+
+const View = z.object({
+  id: z.string(),
+  type: ViewType,
+  props: z.record(z.any()),
+  config: z.record(ViewConfig),
+});
+
+export type View = z.infer<typeof View>;
+
+export const LabelMap = z.object({
+  id: z.string(),
+  parent: z.string(),
+  path: z.string(),
+});
+
+export type LabelMap = z.infer<typeof LabelMap>;
+
+const LPSAxis: z.ZodType<LPSAxis> = z.union([
+  z.literal('Axial'),
+  z.literal('Sagittal'),
+  z.literal('Coronal'),
+]);
+
+const InteractionStateNative = z.nativeEnum(InteractionState);
+
+const Ruler: z.ZodType<Ruler> = z.object({
+  name: z.string(),
+  firstPoint: Vector3.nullable(),
+  secondPoint: Vector3.nullable(),
+  viewAxis: LPSAxis.nullable(),
+  slice: z.number().nullable(),
+  imageID: z.string(),
+  interactionState: InteractionStateNative,
+  color: z.string(),
+});
+
+const Crosshairs = z.object({
+  position: Vector3,
+});
+
+export type Crosshairs = z.infer<typeof Crosshairs>;
+
+const ToolsEnumNative = z.nativeEnum(ToolsEnum);
+
+const Paint = z.object({
+  activeLabelmapID: z.string().nullable(),
+  brushSize: z.number(),
+  brushValue: z.number(),
+  labelmapOpacity: z.number(),
+});
+
+const LPSCroppingPlanes: z.ZodType<LPSCroppingPlanes> = z.object({
+  Sagittal: z.tuple([z.number(), z.number()]),
+  Coronal: z.tuple([z.number(), z.number()]),
+  Axial: z.tuple([z.number(), z.number()]),
+});
+
+const Cropping = z.record(LPSCroppingPlanes);
+
+const Tools = z.object({
+  rulers: Ruler.array(),
+  crosshairs: Crosshairs,
+  paint: Paint,
+  crop: Cropping,
+  current: ToolsEnumNative,
+});
+
+export type Tools = z.infer<typeof Tools>;
+
+export const ManifestSchema = z.object({
+  version: z.string(),
+  dataSets: DataSet.array(),
+  labelMaps: LabelMap.array(),
+  tools: Tools,
+  views: View.array(),
+  primarySelection: z.string().optional(),
+  layout: Layout,
+});
+
+export type Manifest = z.infer<typeof ManifestSchema>;
+
+export interface StateFile {
+  zip: JSZip;
+  manifest: Manifest;
+}

package/src/io/state-file/utils.ts

@@ -0,0 +1,33 @@
+import { StateFile, DataSetType } from './schema';
+import { useFileStore } from '../../store/datasets-files';
+
+export async function serializeData(
+  stateFile: StateFile,
+  dataIDs: string[],
+  dataType: DataSetType
+) {
+  const fileStore = useFileStore();
+  const { manifest } = stateFile;
+  const { zip } = stateFile;
+  const { dataSets } = manifest;
+
+  dataIDs.forEach((id) => {
+    const files = fileStore.getFiles(id);
+    if (files === null) {
+      throw new Error(`No files for dataID: ${id}`);
+    }
+
+    const dataPath = `data/${id}/`;
+    dataSets.push({
+      id,
+      path: dataPath,
+      type: dataType,
+    });
+
+    files.forEach((file: File) => {
+      const filePath = `data/${id}/${file.name}`;
+
+      zip.file(filePath, file);
+    });
+  });
+}

package/src/io/types.ts

@@ -0,0 +1,4 @@
+export interface FileEntry {
+  file: File;
+  path: string;
+}

package/src/io/vtk/async.reader.worker.ts

@@ -0,0 +1,50 @@
+import vtkSTLReader from '@kitware/vtk.js/IO/Geometry/STLReader';
+import vtkXMLImageDataReader from '@kitware/vtk.js/IO/XML/XMLImageDataReader';
+import vtkXMLPolyDataReader from '@kitware/vtk.js/IO/XML/XMLPolyDataReader';
+
+import workerHandler from '@/src/utils/workerHandler';
+import { readFile } from './common';
+
+const Readers = {
+  stl: {
+    readerClass: vtkSTLReader,
+    asBinary: true,
+  },
+  vti: {
+    readerClass: vtkXMLImageDataReader,
+    asBinary: true,
+  },
+  vtp: {
+    readerClass: vtkXMLPolyDataReader,
+    asBinary: true,
+  },
+};
+
+export interface ReaderWorkerInput {
+  file: File;
+  readerName: keyof typeof Readers;
+}
+
+workerHandler.registerHandler(async (data: ReaderWorkerInput) => {
+  try {
+    const { file, readerName } = data;
+    if (!file) {
+      throw new Error('No file provided');
+    }
+    if (!(readerName in Readers)) {
+      throw new Error(`No reader found for ${file.name}`);
+    }
+
+    const { readerClass, asBinary } = Readers[readerName];
+    const ds = await readFile(file, readerClass, asBinary);
+    return {
+      status: 'success',
+      obj: ds.getState(),
+    };
+  } catch (error) {
+    return {
+      status: 'fail',
+      error: error as Error,
+    };
+  }
+});

package/src/io/vtk/async.ts

@@ -0,0 +1,58 @@
+import vtk from '@kitware/vtk.js/vtk';
+
+import PromiseWorker from '@/src/utils/promise-worker';
+import vtkDataSet from '@kitware/vtk.js/Common/DataModel/DataSet';
+import { vtkObject } from '@kitware/vtk.js/interfaces';
+import { StateObject } from './common';
+
+interface SuccessReadResult {
+  status: 'success';
+  obj: StateObject;
+}
+
+interface FailResult {
+  status: 'fail';
+  error: Error;
+}
+
+type ReadResult = SuccessReadResult | FailResult;
+
+export const runAsyncVTKReader = (readerName: string) => async (file: File) => {
+  const worker = new PromiseWorker(
+    new Worker(new URL('./async.reader.worker.ts', import.meta.url))
+  );
+  const data = (await worker.postMessage({
+    file,
+    readerName,
+  })) as ReadResult;
+  if (data.status === 'success') {
+    return vtk(data.obj) as vtkObject;
+  }
+  throw data.error;
+};
+
+interface SuccessWriteResult {
+  status: 'success';
+  data: string;
+}
+type WriteResult = SuccessWriteResult | FailResult;
+
+export const runAsyncVTKWriter =
+  (writerName: string) => async (dataSet: vtkDataSet) => {
+    const worker = new PromiseWorker(
+      new Worker(new URL('./async.writer.worker.ts', import.meta.url))
+    );
+    const result = (await worker.postMessage({
+      obj: dataSet.getState(),
+      writerName,
+    })) as WriteResult;
+    if (result.status === 'success') {
+      return result.data;
+    }
+    throw result.error;
+  };
+
+export const stlReader = runAsyncVTKReader('stl');
+export const vtiReader = runAsyncVTKReader('vti');
+export const vtpReader = runAsyncVTKReader('vtp');
+export const vtiWriter = runAsyncVTKWriter('vti');

package/src/io/vtk/async.writer.worker.ts

@@ -0,0 +1,46 @@
+import vtkXMLImageDataWriter from '@kitware/vtk.js/IO/XML/XMLImageDataWriter';
+import vtkDataSet from '@kitware/vtk.js/Common/DataModel/DataSet';
+
+import workerHandler from '@/src/utils/workerHandler';
+import vtkLabelMap from '@/src/vtk/LabelMap';
+import vtk from '@kitware/vtk.js/vtk';
+
+import { writeData, StateObject } from './common';
+
+const Writers = {
+  vti: {
+    writerClass: vtkXMLImageDataWriter,
+  },
+};
+
+export interface WorkerInput {
+  obj: StateObject;
+  writerName: keyof typeof Writers;
+}
+
+vtk.register('vtkLabelMap', vtkLabelMap.newInstance);
+
+workerHandler.registerHandler(async (inputData: WorkerInput) => {
+  try {
+    const { obj, writerName } = inputData;
+    if (!obj) {
+      throw new Error('No data provided');
+    }
+    if (!(writerName in Writers)) {
+      throw new Error(`No writer found for ${writerName}`);
+    }
+
+    const { writerClass } = Writers[writerName];
+
+    const serialized = await writeData(writerClass, vtk(obj) as vtkDataSet);
+    return {
+      status: 'success',
+      data: serialized,
+    };
+  } catch (error) {
+    return {
+      status: 'fail',
+      error: error as Error,
+    };
+  }
+});

package/src/io/vtk/common.ts

@@ -0,0 +1,30 @@
+import { vtkReader, vtkWriter, vtkClass } from '@/src/types/vtk-types';
+import { readFileAsArrayBuffer, readFileAsUTF8Text } from '@/src/io';
+import vtkDataSet from '@kitware/vtk.js/Common/DataModel/DataSet';
+
+export async function readFile(
+  file: File,
+  vtkReaderClass: vtkClass,
+  asBinary = true
+) {
+  const reader: vtkReader = vtkReaderClass.newInstance() as vtkReader;
+  if (asBinary) {
+    const buffer = await readFileAsArrayBuffer(file);
+    reader.parseAsArrayBuffer(buffer);
+  } else {
+    const buffer = await readFileAsUTF8Text(file);
+    reader.parseAsText(buffer);
+  }
+  return reader.getOutputData();
+}
+
+export async function writeData(vtkWriterClass: vtkClass, data: vtkDataSet) {
+  const writer: vtkWriter = vtkWriterClass.newInstance() as vtkWriter;
+
+  return writer.write(data);
+}
+
+export interface StateObject {
+  vtkClass: string;
+  [attrName: string]: unknown;
+}

package/src/io/zip.ts

@@ -0,0 +1,31 @@
+import JSZip from 'jszip';
+import { FileEntry } from './types';
+
+export async function extractFilesFromZip(zipFile: File): Promise<FileEntry[]> {
+  const zip = await JSZip.loadAsync(zipFile);
+  const promises: Promise<File>[] = [];
+  const paths: string[] = [];
+  zip.forEach((relPath, file) => {
+    if (!file.dir) {
+      const splitPath = file.name.split('/');
+      const baseName = splitPath[splitPath.length - 1];
+      const path = [...splitPath.slice(0, splitPath.length - 1), ''].join('/');
+      const fileEntry = zip.file(file.name);
+      if (fileEntry) {
+        promises.push(
+          fileEntry.async('blob').then((blob) => new File([blob], baseName))
+        );
+        paths.push(path);
+      }
+    }
+  });
+
+  return Promise.all(promises).then((files) => {
+    return files.map((file, index) => {
+      return {
+        file,
+        path: paths[index],
+      };
+    });
+  });
+}

package/src/main.js

@@ -0,0 +1,66 @@
+import '@/public/global.css';
+import '@kitware/vtk.js/Rendering/Profiles/All';
+import 'vue-toastification/dist/index.css';
+
+import Vue from 'vue';
+import VueCompositionAPI from '@vue/composition-api';
+import VueToast from 'vue-toastification';
+import { createPinia, PiniaVuePlugin } from 'pinia';
+import vtkProxyManager from '@kitware/vtk.js/Proxy/Core/ProxyManager';
+import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
+import vtkImageMapper from '@kitware/vtk.js/Rendering/Core/ImageMapper';
+
+import App from './components/App.vue';
+import vuetify from './plugins/vuetify';
+import { DICOMIO } from './io/dicom';
+import { FILE_READERS } from './io';
+import { registerAllReaders } from './io/readers';
+import proxyConfiguration from './vtk/proxy';
+import { CorePiniaProviderPlugin } from './core/provider';
+import ProxyWrapper from './core/proxies';
+import { patchExitPointerLock } from './utils/hacks';
+
+Vue.config.productionTip = false;
+
+Vue.use(VueCompositionAPI);
+Vue.use(VueToast);
+Vue.use(PiniaVuePlugin);
+
+// patches
+patchExitPointerLock();
+
+// Initialize global mapper topologies
+// polys and lines in the front
+vtkMapper.setResolveCoincidentTopologyToPolygonOffset();
+vtkMapper.setResolveCoincidentTopologyPolygonOffsetParameters(-3, -3);
+vtkMapper.setResolveCoincidentTopologyLineOffsetParameters(-3, -3);
+// image poly in the back
+vtkImageMapper.setResolveCoincidentTopologyToPolygonOffset();
+vtkImageMapper.setResolveCoincidentTopologyPolygonOffsetParameters(1, 1);
+
+registerAllReaders(FILE_READERS);
+
+const proxyManager = vtkProxyManager.newInstance({ proxyConfiguration });
+
+const dicomIO = new DICOMIO();
+dicomIO.initialize();
+
+const pinia = createPinia();
+pinia.use(
+  CorePiniaProviderPlugin({
+    proxies: new ProxyWrapper(proxyManager),
+    dicomIO,
+  })
+);
+
+const app = new Vue({
+  vuetify,
+  proxyManager,
+  pinia,
+  provide: {
+    ProxyManager: proxyManager,
+  },
+  render: (h) => h(App),
+});
+
+app.$mount('#app');

package/src/main.ts

@@ -0,0 +1 @@
+import './main.js';

package/src/plugins/vuetify.js

@@ -0,0 +1,25 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib';
+import { useLocalStorage } from '@vueuse/core';
+
+import KitwareMark from '@/src/components/icons/KitwareLogoIcon.vue';
+
+Vue.use(Vuetify);
+
+const store = useLocalStorage('dark', true);
+
+export default new Vuetify({
+  icons: {
+    values: {
+      kitwareMark: {
+        component: KitwareMark,
+      },
+    },
+  },
+  theme: {
+    dark: store.value,
+  },
+  breakpoint: {
+    mobileBreakpoint: 'sm',
+  },
+});

package/src/shims-itk.d.ts

@@ -0,0 +1,67 @@
+declare module 'itk/IOTypes' {
+  const IOTypes = {
+    Text: 'Text',
+    Binary: 'Binary',
+    Image: 'Image',
+    Mesh: 'Mesh',
+    vtkPolyData: 'vtkPolyData',
+  } as const;
+
+  export default IOTypes;
+}
+
+declare module 'itk/runPipelineBrowser' {
+  async function runPipelineBrowser(
+    webWorker: Worker | null | boolean,
+    pipelinePath: string | URL,
+    args: string[],
+    outputs: PipelineOutput[] | null,
+    inputs: PipelineInput[] | null
+  ): Promise<any>;
+
+  export = runPipelineBrowser;
+}
+
+declare module 'itk/extensionToImageIO' {
+  export default {} as Map<string, string>;
+}
+
+declare module 'itk/readImageArrayBuffer' {
+  export default () => any;
+}
+
+declare module 'itk/ImageType' {
+  export interface ImageType {
+    dimension: number;
+    componentType: string;
+    pixelType: string;
+    components: number;
+  }
+
+  export default ImageType;
+}
+
+declare module 'itk/Image' {
+  import ImageType from 'itk/ImageType';
+  type TypedArray =
+    | Uint8Array
+    | Uint8ClampedArray
+    | Int8Array
+    | Uint16Array
+    | Int16Array
+    | Uint32Array
+    | Int32Array
+    | Float32Array
+    | Float64Array;
+
+  export interface Image {
+    imageType: ImageType;
+    origin: number[];
+    spacing: number[];
+    direction: number[];
+    size: number[];
+    data: TypedArray | null;
+  }
+
+  export default Image;
+}

package/src/shims-misc.d.ts

@@ -0,0 +1,4 @@
+declare module '*.jpg' {
+  const url: string;
+  export default url;
+}