volview 4.0.0

package/src/store/view-configs/volume-coloring.ts

@@ -0,0 +1,193 @@
+import { MaybeRef } from '@vueuse/core';
+import { useDoubleRecord } from '@/src/composables/useDoubleRecord';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import vtkPiecewiseFunctionProxy from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
+import {
+  getColorFunctionRangeFromPreset,
+  getOpacityFunctionFromPreset,
+  getOpacityRangeFromPreset,
+} from '@/src/utils/vtk-helpers';
+import { DEFAULT_PRESET_BY_MODALITY } from '@/src/config';
+import { ColorTransferFunction } from '@/src/types/views';
+import {
+  removeDataFromConfig,
+  removeViewFromConfig,
+  serializeViewConfig,
+} from './common';
+import { DEFAULT_PRESET } from '../../vtk/ColorMaps';
+import { StateFile, ViewConfig } from '../../io/state-file/schema';
+import { VolumeColorConfig } from './types';
+import { useDICOMStore } from '../datasets-dicom';
+import { useImageStore } from '../datasets-images';
+
+export const DEFAULT_AMBIENT = 0.2;
+export const DEFAULT_DIFFUSE = 0.7;
+export const DEFAULT_SPECULAR = 0.3;
+
+function getPresetFromImageModality(imageID: string) {
+  const dicomStore = useDICOMStore();
+  if (imageID in dicomStore.imageIDToVolumeKey) {
+    const volKey = dicomStore.imageIDToVolumeKey[imageID];
+    const { Modality } = dicomStore.volumeInfo[volKey];
+    if (Modality in DEFAULT_PRESET_BY_MODALITY) {
+      return DEFAULT_PRESET_BY_MODALITY[Modality];
+    }
+  }
+  return DEFAULT_PRESET;
+}
+
+export const defaultVolumeColorConfig = (): VolumeColorConfig => ({
+  colorBy: {
+    arrayName: '',
+    location: 'pointData',
+  },
+  transferFunction: {
+    preset: '',
+    mappingRange: [0, 1],
+  },
+  opacityFunction: {
+    mode: vtkPiecewiseFunctionProxy.Mode.Gaussians,
+    gaussians: [],
+    mappingRange: [0, 1],
+  },
+  cvr: {
+    enabled: true,
+    lightFollowsCamera: true,
+    useVolumetricScatteringBlending: false,
+    volumetricScatteringBlending: 0.5,
+    useLocalAmbientOcclusion: true,
+    laoKernelRadius: 6,
+    laoKernelSize: 3,
+    ambient: DEFAULT_AMBIENT,
+    diffuse: DEFAULT_DIFFUSE,
+    specular: DEFAULT_SPECULAR,
+  },
+});
+
+export const setupVolumeColorConfig = () => {
+  // (viewID, dataID) -> VolumeColorConfig
+  const volumeColorConfigs = useDoubleRecord<VolumeColorConfig>();
+
+  const getVolumeColorConfig = (viewID: string, dataID: string) =>
+    volumeColorConfigs.get(viewID, dataID);
+
+  const getComputedVolumeColorConfig = (
+    viewID: MaybeRef<string | null>,
+    dataID: MaybeRef<string | null>
+  ) => volumeColorConfigs.getComputed(viewID, dataID);
+
+  const updateVolumeColorConfig = (
+    viewID: string,
+    dataID: string,
+    update: Partial<VolumeColorConfig>
+  ) => {
+    const config = {
+      ...defaultVolumeColorConfig(),
+      ...volumeColorConfigs.get(viewID, dataID),
+      ...update,
+    };
+    volumeColorConfigs.set(viewID, dataID, config);
+  };
+
+  const createUpdateFunc = <K extends keyof VolumeColorConfig>(
+    key: K,
+    validator: (config: VolumeColorConfig[K]) => VolumeColorConfig[K] = (i) => i
+  ) => {
+    return (
+      viewID: string,
+      dataID: string,
+      update: Partial<VolumeColorConfig[K]>
+    ) => {
+      const config =
+        volumeColorConfigs.get(viewID, dataID) ?? defaultVolumeColorConfig();
+      const updatedConfig = validator({
+        ...config[key],
+        ...update,
+      });
+      updateVolumeColorConfig(viewID, dataID, { [key]: updatedConfig });
+    };
+  };
+
+  const updateVolumeColorBy = createUpdateFunc('colorBy');
+  const updateVolumeColorTransferFunction =
+    createUpdateFunc('transferFunction');
+  const updateVolumeOpacityFunction = createUpdateFunc('opacityFunction');
+  const updateVolumeCVRParameters = createUpdateFunc('cvr', (cvrConfig) => {
+    return {
+      ...cvrConfig,
+      // 2X kernel size minimizes flickering lighting
+      // Limit kernel radius to [2*size, 2*size+10]
+      laoKernelRadius: Math.max(
+        2 * cvrConfig.laoKernelSize,
+        Math.min(2 * cvrConfig.laoKernelSize + 10, cvrConfig.laoKernelRadius)
+      ),
+    };
+  });
+
+  const setVolumeColorPreset = (
+    viewID: string,
+    imageID: string,
+    preset: string
+  ) => {
+    const imageStore = useImageStore();
+    const image = imageStore.dataIndex[imageID];
+    if (!image) return;
+    const imageDataRange = image.getPointData().getScalars().getRange();
+
+    const ctRange = getColorFunctionRangeFromPreset(preset);
+    const ctFunc: Partial<ColorTransferFunction> = {
+      preset,
+      mappingRange: ctRange || imageDataRange,
+    };
+    updateVolumeColorTransferFunction(viewID, imageID, ctFunc);
+
+    const opFunc = getOpacityFunctionFromPreset(preset);
+    const opRange = getOpacityRangeFromPreset(preset);
+    opFunc.mappingRange = opRange || imageDataRange;
+    updateVolumeOpacityFunction(viewID, imageID, opFunc);
+  };
+
+  const resetToDefaultColoring = (
+    viewID: string,
+    dataID: string,
+    image: vtkImageData
+  ) => {
+    const scalars = image.getPointData().getScalars();
+
+    updateVolumeColorBy(viewID, dataID, {
+      arrayName: scalars.getName(),
+      location: 'pointData',
+    });
+    setVolumeColorPreset(viewID, dataID, getPresetFromImageModality(dataID));
+  };
+
+  const serialize = (stateFile: StateFile) => {
+    serializeViewConfig(stateFile, getVolumeColorConfig, 'volumeColorConfig');
+  };
+
+  const deserialize = (viewID: string, config: Record<string, ViewConfig>) => {
+    Object.entries(config).forEach(([dataID, viewConfig]) => {
+      if (viewConfig.volumeColorConfig) {
+        volumeColorConfigs.set(viewID, dataID, viewConfig.volumeColorConfig);
+      }
+    });
+  };
+
+  return {
+    removeView: removeViewFromConfig(volumeColorConfigs),
+    removeData: removeDataFromConfig(volumeColorConfigs),
+    serialize,
+    deserialize,
+    actions: {
+      getVolumeColorConfig,
+      getComputedVolumeColorConfig,
+      updateVolumeColorConfig,
+      updateVolumeColorBy,
+      updateVolumeColorTransferFunction,
+      updateVolumeOpacityFunction,
+      updateVolumeCVRParameters,
+      resetToDefaultColoring,
+      setVolumeColorPreset,
+    },
+  };
+};

package/src/store/view-configs/windowing.ts

@@ -0,0 +1,69 @@
+import { useDoubleRecord } from '@/src/composables/useDoubleRecord';
+import {
+  removeDataFromConfig,
+  removeViewFromConfig,
+  serializeViewConfig,
+} from './common';
+import { StateFile, ViewConfig } from '../../io/state-file/schema';
+import { WindowLevelConfig } from './types';
+
+export const defaultWindowLevelConfig = (): WindowLevelConfig => ({
+  width: 1,
+  level: 0.5,
+  min: 0,
+  max: 1,
+});
+
+export const setupWindowingConfig = () => {
+  // (viewID, dataID) -> WindowLevelConfig
+  const windowLevelConfigs = useDoubleRecord<WindowLevelConfig>();
+
+  const getWindowingConfig = (viewID: string, dataID: string) =>
+    windowLevelConfigs.get(viewID, dataID);
+
+  const updateWindowingConfig = (
+    viewID: string,
+    dataID: string,
+    update: Partial<WindowLevelConfig>
+  ) => {
+    const config = {
+      ...defaultWindowLevelConfig(),
+      ...windowLevelConfigs.get(viewID, dataID),
+      ...update,
+    };
+    windowLevelConfigs.set(viewID, dataID, config);
+  };
+
+  const resetWindowLevel = (viewID: string, dataID: string) => {
+    if (windowLevelConfigs.has(viewID, dataID)) {
+      const config = windowLevelConfigs.get(viewID, dataID)!;
+      const width = config.max - config.min;
+      const level = (config.max + config.min) / 2;
+      updateWindowingConfig(viewID, dataID, { width, level });
+    }
+  };
+
+  const serialize = (stateFile: StateFile) => {
+    serializeViewConfig(stateFile, getWindowingConfig, 'window');
+  };
+
+  const deserialize = (viewID: string, config: Record<string, ViewConfig>) => {
+    Object.entries(config).forEach(([dataID, viewConfig]) => {
+      if (viewConfig.window) {
+        windowLevelConfigs.set(viewID, dataID, viewConfig.window);
+      }
+    });
+  };
+
+  return {
+    removeView: removeViewFromConfig(windowLevelConfigs),
+    removeData: removeDataFromConfig(windowLevelConfigs),
+    serialize,
+    deserialize,
+    actions: {
+      getWindowingConfig,
+      updateWindowingConfig,
+      resetWindowLevel,
+    },
+  };
+};

package/src/store/view-configs.ts

@@ -0,0 +1,78 @@
+import { defineStore } from 'pinia';
+
+import { setupSlicingConfig } from './view-configs/slicing';
+import { setupWindowingConfig } from './view-configs/windowing';
+import { setupCameraConfig } from './view-configs/camera';
+import { setupVolumeColorConfig } from './view-configs/volume-coloring';
+import { StateFile, ViewConfig } from '../io/state-file/schema';
+import { useImageStore } from './datasets-images';
+
+/**
+ * This store saves view configuration that is associated with a specific
+ * view. The key is a synthetic id generated from the view ID and data ID.
+ */
+export const useViewConfigStore = defineStore('viewConfig', () => {
+  const sliceConfig = setupSlicingConfig();
+  const windowingConfig = setupWindowingConfig();
+  const cameraConfig = setupCameraConfig();
+  const volumeColorConfig = setupVolumeColorConfig();
+
+  const removeView = (viewID: string) => {
+    sliceConfig.removeView(viewID);
+    windowingConfig.removeView(viewID);
+    cameraConfig.removeView(viewID);
+    volumeColorConfig.removeView(viewID);
+  };
+
+  const removeData = (dataID: string, viewID?: string) => {
+    sliceConfig.removeData(dataID, viewID);
+    windowingConfig.removeData(dataID, viewID);
+    cameraConfig.removeData(dataID, viewID);
+    volumeColorConfig.removeData(dataID, viewID);
+  };
+
+  const serialize = (stateFile: StateFile) => {
+    sliceConfig.serialize(stateFile);
+    windowingConfig.serialize(stateFile);
+    cameraConfig.serialize(stateFile);
+    volumeColorConfig.serialize(stateFile);
+  };
+
+  const deserialize = (
+    viewID: string,
+    config: Record<string, ViewConfig>,
+    dataIDMap: Record<string, string>
+  ) => {
+    // First update the view config map to use the new dataIDs
+    const updatedConfig: Record<string, ViewConfig> = {};
+    Object.entries(config).forEach(([dataID, viewConfig]) => {
+      const newDataID = dataIDMap[dataID];
+      updatedConfig[newDataID] = viewConfig;
+    });
+
+    sliceConfig.deserialize(viewID, updatedConfig);
+    windowingConfig.deserialize(viewID, updatedConfig);
+    cameraConfig.deserialize(viewID, updatedConfig);
+    volumeColorConfig.deserialize(viewID, updatedConfig);
+  };
+
+  // delete hook
+  const imageStore = useImageStore();
+  imageStore.$onAction(({ name, args }) => {
+    if (name === 'deleteData') {
+      const [id] = args;
+      removeData(id);
+    }
+  });
+
+  return {
+    removeView,
+    removeData,
+    serialize,
+    deserialize,
+    ...sliceConfig.actions,
+    ...windowingConfig.actions,
+    ...cameraConfig.actions,
+    ...volumeColorConfig.actions,
+  };
+});

package/src/store/views.ts

@@ -0,0 +1,130 @@
+import { set, del } from '@vue/composition-api';
+import vtkAbstractRepresentationProxy from '@kitware/vtk.js/Proxy/Core/AbstractRepresentationProxy';
+import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
+import { defineStore } from 'pinia';
+import { DefaultViewSpec, InitViewSpecs } from '../config';
+import { ViewProxyType } from '../core/proxies';
+import { Layout, LayoutDirection } from '../types/layout';
+import { useViewConfigStore } from './view-configs';
+import { ViewSpec } from '../types/views';
+import {
+  StateFile,
+  Layout as StateFileLayout,
+  View,
+} from '../io/state-file/schema';
+
+interface State {
+  layout: Layout;
+  viewSpecs: Record<string, ViewSpec>;
+}
+
+export const useViewStore = defineStore('view', {
+  state: (): State => ({
+    layout: {
+      direction: LayoutDirection.V,
+      items: [],
+    },
+    viewSpecs: structuredClone(InitViewSpecs),
+  }),
+  getters: {
+    viewIDs(state) {
+      return Object.keys(state.viewSpecs);
+    },
+    getViewProxy() {
+      return <T extends vtkViewProxy>(id: string) => {
+        return this.$proxies.getView<T>(id);
+      };
+    },
+    getDataRepresentationForView() {
+      return <T extends vtkAbstractRepresentationProxy>(
+        dataID: string,
+        viewID: string
+      ) => {
+        return <T | null>(
+          this.$proxies.getDataRepresentationForView(dataID, viewID)
+        );
+      };
+    },
+  },
+  actions: {
+    createOrGetViewProxy<T extends vtkViewProxy = vtkViewProxy>(
+      id: string,
+      type: ViewProxyType
+    ) {
+      return (
+        this.$proxies.getView<T>(id) ?? <T>this.$proxies.createView(id, type)
+      );
+    },
+    addView(id: string) {
+      if (!(id in this.viewSpecs)) {
+        set(this.viewSpecs, id, structuredClone(DefaultViewSpec));
+      }
+    },
+    removeView(id: string) {
+      if (id in this.viewSpecs) {
+        del(this.viewSpecs, id);
+        this.$proxies.removeView(id);
+      }
+    },
+    setLayout(layout: Layout) {
+      this.layout = layout;
+
+      const layoutsToProcess = [layout];
+      while (layoutsToProcess.length) {
+        const ly = layoutsToProcess.shift()!;
+        ly.items.forEach((item) => {
+          if (typeof item === 'string') {
+            // item is a view ID
+            this.addView(item);
+          } else {
+            layoutsToProcess.push(item);
+          }
+        });
+      }
+    },
+    serialize(stateFile: StateFile) {
+      const viewConfigStore = useViewConfigStore();
+      const { manifest } = stateFile;
+      const { views } = manifest;
+
+      manifest.layout = this.layout as StateFileLayout;
+
+      // Serialize the view specs
+      Object.entries(this.viewSpecs).forEach(([id, spec]) => {
+        const type = spec.viewType;
+        const { props } = spec;
+        const config = {};
+
+        const view = {
+          id,
+          type,
+          props,
+          config,
+        };
+
+        views.push(view);
+      });
+
+      // Serialize the view config
+      viewConfigStore.serialize(stateFile);
+    },
+    deserialize(views: View[], dataIDMap: Record<string, string>) {
+      const viewConfigStore = useViewConfigStore();
+
+      views.forEach((view) => {
+        const viewID = view.id;
+
+        const viewSpec = {
+          viewType: view.type,
+          props: view.props,
+        };
+
+        this.viewSpecs[viewID] = viewSpec;
+
+        // Now delegate the deserialization of the view config
+        const { config } = view;
+        viewConfigStore.deserialize(viewID, config, dataIDMap);
+      });
+    },
+  },
+});

package/src/types/index.ts

@@ -0,0 +1,16 @@
+import { StoreDefinition } from 'pinia';
+
+export type NullableValues<T> = {
+  [K in keyof T]: T[K] | null;
+};
+
+export type PiniaStoreState<S extends StoreDefinition> =
+  ReturnType<S>['$state'];
+
+export type SampleDataset = {
+  name: string;
+  filename: string;
+  description: string;
+  url: string;
+  image: string;
+};

package/src/types/layout.ts

@@ -0,0 +1,10 @@
+export enum LayoutDirection {
+  V = 'V',
+  H = 'H',
+}
+
+export type Layout = {
+  direction: LayoutDirection;
+  items: Array<Layout | string>;
+  name?: string;
+};

package/src/types/lps.ts

@@ -0,0 +1,40 @@
+import { Vector2 } from '@kitware/vtk.js/types';
+import { vec3 } from 'gl-matrix';
+
+export type LPSAxis = 'Axial' | 'Sagittal' | 'Coronal';
+
+export type LPSAxisDir =
+  | 'Left'
+  | 'Right'
+  | 'Posterior'
+  | 'Anterior'
+  | 'Superior'
+  | 'Inferior';
+
+export interface LPSDirections {
+  // Maps LPS direction to world-space direction (not index-space direction)
+  // These should match columns of the current image orientation matrix.
+  Left: vec3;
+  Right: vec3;
+  Posterior: vec3;
+  Anterior: vec3;
+  Superior: vec3;
+  Inferior: vec3;
+
+  // maps LPS axis to column in direction matrix
+  Coronal: 0 | 1 | 2;
+  Sagittal: 0 | 1 | 2;
+  Axial: 0 | 1 | 2;
+}
+
+export interface LPSPoint {
+  Sagittal: number;
+  Coronal: number;
+  Axial: number;
+}
+
+export interface LPSBounds {
+  Sagittal: Vector2;
+  Coronal: Vector2;
+  Axial: Vector2;
+}

package/src/types/views.ts

@@ -0,0 +1,65 @@
+import {
+  IPiecewiseFunctionProxyMode,
+  PiecewiseGaussian,
+  PiecewiseNode,
+} from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
+
+export type ViewType = '2D' | '3D';
+
+export interface ViewSpec {
+  viewType: ViewType;
+  props: Record<string, any>;
+}
+
+export interface ColorBy {
+  arrayName: string;
+  location: string;
+}
+
+export interface OpacityGaussians {
+  mode: IPiecewiseFunctionProxyMode.Gaussians;
+  gaussians: PiecewiseGaussian[];
+  mappingRange: [number, number];
+}
+
+export interface OpacityPoints {
+  mode: IPiecewiseFunctionProxyMode.Points;
+  // base preset that has the opacity points
+  preset: string;
+  shift: number;
+  mappingRange: [number, number];
+}
+
+export interface OpacityNodes {
+  mode: IPiecewiseFunctionProxyMode.Nodes;
+  nodes: PiecewiseNode[];
+  mappingRange: [number, number];
+}
+
+export type OpacityFunction = OpacityGaussians | OpacityPoints | OpacityNodes;
+
+export interface ColorTransferFunction {
+  preset: string;
+  mappingRange: [number, number];
+}
+export interface ColoringConfig {
+  colorBy: ColorBy;
+  transferFunction: ColorTransferFunction;
+  opacityFunction: OpacityFunction;
+}
+
+export interface CVRConfig {
+  enabled: boolean;
+
+  lightFollowsCamera: boolean;
+
+  useVolumetricScatteringBlending: boolean;
+  volumetricScatteringBlending: number;
+
+  useLocalAmbientOcclusion: boolean;
+  laoKernelSize: number;
+  laoKernelRadius: number;
+  ambient: number;
+  diffuse: number;
+  specular: number;
+}

package/src/types/vtk-types.ts

@@ -0,0 +1,29 @@
+import { vtkAlgorithm, vtkObject } from '@kitware/vtk.js/interfaces';
+import vtkProxyManager from '@kitware/vtk.js/Proxy/Core/ProxyManager';
+import vtkDataSet from '@kitware/vtk.js/Common/DataModel/DataSet';
+import vtkLPSView2DProxy from '../vtk/LPSView2DProxy';
+import vtkLPSView3DProxy from '../vtk/LPSView3DProxy';
+
+export interface vtkClass {
+  newInstance: () => vtkObject;
+  extend: (publiAPI: any, model: any) => void;
+}
+
+export interface vtkReader extends vtkObject, vtkAlgorithm {
+  parseAsArrayBuffer: (ab: ArrayBufferLike) => void;
+  parseAsText: (text: string) => void;
+}
+
+export interface vtkWriter extends vtkObject {
+  write: (data: vtkDataSet) => any;
+}
+
+export default interface vtkProxyObject extends vtkObject {
+  getProxyId(): string;
+  getProxyGroup(): string;
+  getProxyName(): string;
+  getProxyManager(): vtkProxyManager;
+  setProxyManager(manager: vtkProxyManager): void;
+}
+
+export type vtkLPSViewProxy = vtkLPSView2DProxy | vtkLPSView3DProxy;