volview 4.0.0

package/src/composables/useToast.js

@@ -0,0 +1,11 @@
+import { createToastInterface } from 'vue-toastification';
+
+const toast = createToastInterface({
+  position: 'bottom-left',
+  timeout: 3000,
+  hideProgressBar: true,
+  maxToasts: 3,
+  transition: 'Vue-Toastification__fade',
+});
+
+export const useToast = () => toast;

package/src/composables/useVTKCallback.ts

@@ -0,0 +1,33 @@
+import { vtkSubscription } from '@kitware/vtk.js/interfaces';
+import { isRef, onUnmounted, watchEffect } from '@vue/composition-api';
+import { MaybeRef } from '@vueuse/core';
+
+type Listener = (obj: any) => void;
+type VTKCallback = (listener: Listener) => vtkSubscription;
+
+export function useVTKCallback(
+  callback: MaybeRef<VTKCallback | null | undefined>
+) {
+  const handleListener = (listener: Listener) => {
+    let subscription: vtkSubscription | null = null;
+
+    const cleanup = () => {
+      subscription?.unsubscribe();
+      subscription = null;
+    };
+    onUnmounted(cleanup);
+
+    if (isRef(callback)) {
+      watchEffect(() => {
+        cleanup();
+        if (callback.value) {
+          subscription = callback.value(listener);
+        }
+      });
+    } else if (callback) {
+      subscription = callback(listener);
+    }
+  };
+
+  return handleListener;
+}

package/src/composables/useVTKWorldToDisplay.ts

@@ -0,0 +1,141 @@
+import vtkOpenGLRenderWindow from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow';
+import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
+import { Vector2, Vector3 } from '@kitware/vtk.js/types';
+import { computed, ref, unref, watchEffect } from '@vue/composition-api';
+import { MaybeRef, useResizeObserver } from '@vueuse/core';
+import { vec3 } from 'gl-matrix';
+import { useVTKCallback } from './useVTKCallback';
+import { computeWorldToDisplay } from '../utils/vtk-helpers';
+
+type MaybeCoords = Vector3 | vec3 | null | undefined;
+type MaybeMultiCoords = Vector3[] | vec3[] | null | undefined;
+type MaybeRenderer = vtkRenderer | null | undefined;
+
+/**
+ * Returns a reactive vtkOpenGLRenderWindow container ref.
+ *
+ * @param view
+ * @returns
+ */
+export function useVTKViewContainer(
+  view: MaybeRef<vtkOpenGLRenderWindow | null | undefined>
+) {
+  const container = ref<HTMLElement | null>(null);
+
+  const update = () => {
+    container.value = unref(view)?.getContainer() ?? null;
+  };
+
+  const onModified = useVTKCallback(computed(() => unref(view)?.onModified));
+  onModified(update);
+  update();
+
+  return container;
+}
+
+/**
+ * Transforms a list of world coordinates into display coordinates.
+ *
+ * @param worldCoords
+ * @param renderer
+ * @returns
+ */
+export function useVTKMultiWorldToDisplay(
+  worldCoords: MaybeRef<MaybeMultiCoords>,
+  renderer: MaybeRef<MaybeRenderer>
+) {
+  const displayCoords = ref<Vector2[]>([]);
+  const view = computed(
+    () =>
+      unref(renderer)
+        ?.getRenderWindow()
+        ?.getViews()?.[0] as vtkOpenGLRenderWindow
+  );
+  const container = useVTKViewContainer(view);
+
+  const update = () => {
+    const coords = unref(worldCoords);
+    const ren = unref(renderer);
+
+    if (coords == null || !ren) {
+      return;
+    }
+
+    displayCoords.value = coords.map((xyz) => {
+      const disp = computeWorldToDisplay(xyz as Vector3, ren)!;
+      // convert from canvas space to display space
+      return [
+        disp[0] / devicePixelRatio,
+        disp[1] / devicePixelRatio,
+      ] as Vector2;
+    }) as Vector2[];
+  };
+
+  const cameraOnModified = useVTKCallback(
+    computed(() => unref(renderer)?.getActiveCamera().onModified)
+  );
+
+  useResizeObserver(container, update);
+  watchEffect(update);
+  cameraOnModified(update);
+  update();
+
+  return displayCoords;
+}
+
+/**
+ * Transforms a single world coordinate into a display coordinate.
+ *
+ * @param worldCoords
+ * @param renderer
+ * @returns
+ */
+export function useVTKWorldToDisplay(
+  worldCoords: MaybeRef<MaybeCoords>,
+  renderer: MaybeRef<MaybeRenderer>
+) {
+  const manyCoords = computed(() => {
+    const c = unref(worldCoords);
+    if (c != null) {
+      return [c];
+    }
+    return null;
+  });
+
+  const displayCoords = useVTKMultiWorldToDisplay(manyCoords, renderer);
+  return computed(() => {
+    if (displayCoords.value.length === 1) {
+      return displayCoords.value[0];
+    }
+    return null;
+  });
+}
+
+/**
+ * Transforms a list of world coordinates into SVG coordinates.
+ *
+ * @param worldCoords
+ * @param renderer
+ * @returns
+ */
+export function useVTKMultiWorldToSVG(
+  worldCoords: MaybeRef<MaybeMultiCoords>,
+  renderer: MaybeRef<MaybeRenderer>
+) {
+  const displayCoords = useVTKMultiWorldToDisplay(worldCoords, renderer);
+  const svgCoords = computed(() => {
+    const disp = displayCoords.value;
+    const ren = unref(renderer);
+    const view = ren?.getRenderWindow()?.getViews()?.[0];
+    if (ren && view) {
+      const [, height] = view.getViewportSize(ren);
+      return disp.map((xy) => {
+        // flip Y axis
+        return [xy[0], height / devicePixelRatio - xy[1]];
+      });
+    }
+    return null;
+  });
+
+  return svgCoords;
+}

package/src/composables/useViewProxy.ts

@@ -0,0 +1,87 @@
+import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
+import { computed, ref, unref, watch } from '@vue/composition-api';
+import { MaybeRef } from '@vueuse/core';
+import { ViewProxyType } from '../core/proxies';
+import { useViewStore } from '../store/views';
+import { useVTKCallback } from './useVTKCallback';
+
+export function useViewProxy<T extends vtkViewProxy = vtkViewProxy>(
+  id: MaybeRef<string>,
+  type: MaybeRef<ViewProxyType>
+) {
+  const viewStore = useViewStore();
+
+  const container = ref<HTMLElement | null>(null);
+
+  const setContainer = (el: HTMLElement | null | undefined) => {
+    container.value = el ?? null;
+  };
+
+  const viewProxy = computed<T>(() =>
+    viewStore.createOrGetViewProxy(unref(id), unref(type))
+  );
+
+  watch(viewProxy, (curViewProxy, oldViewProxy) => {
+    oldViewProxy.setContainer(null);
+    curViewProxy.setContainer(container.value);
+  });
+
+  watch(container, (curContainer) => {
+    viewProxy.value.setContainer(curContainer);
+    // setContainer doesn't call modified
+    viewProxy.value.modified();
+  });
+
+  return {
+    viewProxy,
+    setContainer,
+  };
+}
+
+function onViewProxyModified<T extends vtkViewProxy = vtkViewProxy>(
+  viewProxy: MaybeRef<T>,
+  callback: () => void
+) {
+  const onModified = useVTKCallback(
+    computed(() => unref(viewProxy).onModified)
+  );
+  onModified(callback);
+}
+
+export function useViewProxyMounted<T extends vtkViewProxy = vtkViewProxy>(
+  viewProxy: MaybeRef<T>,
+  callback: () => void
+) {
+  const mounted = ref(false);
+
+  onViewProxyModified(viewProxy, () => {
+    mounted.value = !!unref(viewProxy).getContainer();
+  });
+
+  watch(
+    mounted,
+    (m) => {
+      if (m) callback();
+    },
+    { immediate: true }
+  );
+}
+
+export function useViewProxyUnmounted<T extends vtkViewProxy = vtkViewProxy>(
+  viewProxy: MaybeRef<T>,
+  callback: () => void
+) {
+  const mounted = ref(false);
+
+  onViewProxyModified(viewProxy, () => {
+    mounted.value = !!unref(viewProxy).getContainer();
+  });
+
+  watch(
+    mounted,
+    (m, prev) => {
+      if (prev && !m) callback();
+    },
+    { immediate: true }
+  );
+}

package/src/composables/useVolumeThumbnailing.ts

@@ -0,0 +1,173 @@
+import {
+  del,
+  onBeforeUnmount,
+  reactive,
+  ref,
+  set,
+  watch,
+} from '@vue/composition-api';
+import vtkLookupTableProxy from '@kitware/vtk.js/Proxy/Core/LookupTableProxy';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import vtkPiecewiseFunctionProxy from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
+import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
+import { Vector3 } from '@kitware/vtk.js/types';
+import { createVolumeThumbnailer } from '../core/thumbnailers/volume-thumbnailer';
+import { useCameraOrientation } from './useCameraOrientation';
+import { useImageStore } from '../store/datasets-images';
+import { InitViewIDs, InitViewSpecs } from '../config';
+import { useCurrentImage } from './useCurrentImage';
+import {
+  getColorFunctionRangeFromPreset,
+  getOpacityRangeFromPreset,
+} from '../utils/vtk-helpers';
+import { PresetNameList } from '../vtk/ColorMaps';
+
+function resetOpacityFunction(
+  pwfProxy: vtkPiecewiseFunctionProxy,
+  dataRange: [number, number],
+  presetName: string
+) {
+  // reset pwf proxy range
+  pwfProxy.setDataRange(...dataRange);
+
+  const preset = vtkColorMaps.getPresetByName(presetName);
+  if (preset.OpacityPoints) {
+    const OpacityPoints = preset.OpacityPoints as number[];
+    const points = [];
+    for (let i = 0; i < OpacityPoints.length; i += 2) {
+      points.push([OpacityPoints[i], OpacityPoints[i + 1]]);
+    }
+
+    const [xmin, xmax] = dataRange;
+    const width = xmax - xmin;
+    const pointsNormalized = points.map(([x, y]) => [(x - xmin) / width, y]);
+
+    pwfProxy.setMode(vtkPiecewiseFunctionProxy.Mode.Points);
+    pwfProxy.setPoints(pointsNormalized);
+  } else {
+    pwfProxy.setMode(vtkPiecewiseFunctionProxy.Mode.Gaussians);
+    pwfProxy.setGaussians(vtkPiecewiseFunctionProxy.Defaults.Gaussians);
+  }
+}
+
+export function useVolumeThumbnailing(thumbnailSize: number) {
+  const thumbnails = reactive<Record<string, Record<string, string>>>({});
+  const thumbnailer = createVolumeThumbnailer(thumbnailSize);
+  const currentThumbnails = ref<Record<string, string>>({});
+
+  const { currentImageMetadata, currentImageID, currentImageData } =
+    useCurrentImage();
+
+  // same as 3D view
+  const { cameraDirVec, cameraUpVec } = useCameraOrientation(
+    InitViewSpecs[InitViewIDs.Three].props.viewDirection,
+    InitViewSpecs[InitViewIDs.Three].props.viewUp,
+    currentImageMetadata
+  );
+
+  // used to interrupt a thumbnailing cycle if
+  // doThumbnailing is called again
+  let interruptSentinel = Symbol('interrupt');
+
+  async function doThumbnailing(imageID: string, image: vtkImageData) {
+    const localSentinel = Symbol('interrupt');
+    interruptSentinel = localSentinel;
+
+    thumbnailer.setInputImage(image);
+    const imageDataRange = image.getPointData().getScalars().getRange();
+
+    async function helper(presetName: string) {
+      // bail if a new thumbnail process has started
+      if (interruptSentinel !== localSentinel) {
+        return;
+      }
+
+      // sanity check; did the current image change
+      if (imageID !== currentImageID.value) {
+        return;
+      }
+
+      if (!(imageID in thumbnails)) {
+        set(thumbnails, imageID, {});
+      }
+
+      if (presetName in thumbnails[imageID]) {
+        return;
+      }
+
+      const opRange = getOpacityRangeFromPreset(presetName);
+      resetOpacityFunction(
+        thumbnailer.opacityFuncProxy,
+        opRange || imageDataRange,
+        presetName
+      );
+
+      thumbnailer.colorTransferFuncProxy.setMode(
+        vtkLookupTableProxy.Mode.Preset
+      );
+      thumbnailer.colorTransferFuncProxy.setPresetName(presetName);
+      const ctRange = getColorFunctionRangeFromPreset(presetName);
+      thumbnailer.colorTransferFuncProxy.setDataRange(
+        ...(ctRange || imageDataRange)
+      );
+
+      thumbnailer.resetCameraWithOrientation(
+        cameraDirVec.value as Vector3,
+        cameraUpVec.value as Vector3
+      );
+
+      const renWin = thumbnailer.scene.getRenderWindow();
+      renWin.render();
+      const imageURL = await renWin.captureImages()[0];
+      if (imageURL) {
+        set(thumbnails[imageID], presetName, imageURL);
+      }
+    }
+
+    PresetNameList.reduce(
+      (promise, presetName) => promise.then(() => helper(presetName)),
+      Promise.resolve()
+    );
+  }
+
+  // workaround for computed not properly working on deeply reactive objects
+  // in vue 2.
+  watch(
+    thumbnails,
+    () => {
+      if (currentImageID.value) {
+        currentThumbnails.value = thumbnails[currentImageID.value];
+      }
+    },
+    { deep: true }
+  );
+
+  // force thumbnailing to stop
+  onBeforeUnmount(() => {
+    interruptSentinel = Symbol('unmount');
+  });
+
+  // trigger thumbnailing
+  watch(
+    currentImageID,
+    (imageID) => {
+      if (imageID) {
+        doThumbnailing(imageID, currentImageData.value!);
+      }
+    },
+    { immediate: true }
+  );
+
+  // delete thumbnails if an image is deleted
+  const imageStore = useImageStore();
+  imageStore.$onAction(({ name, args, after }) => {
+    if (name === 'deleteData') {
+      const [id] = args as [string];
+      if (id in thumbnails) {
+        after(() => del(thumbnails, id));
+      }
+    }
+  });
+
+  return { currentThumbnails };
+}

package/src/composables/useWebGLWatchdog.ts

@@ -0,0 +1,32 @@
+import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
+import { useEventListener, useThrottleFn } from '@vueuse/core';
+import { Messages } from '../constants';
+import { useMessageStore } from '../store/messages';
+import { onProxyManagerEvent, ProxyManagerEvent } from './onProxyManagerEvent';
+
+export function useWebGLWatchdog() {
+  const watchdogs = new Map<string, () => void>();
+
+  const reportError = useThrottleFn(() => {
+    const messageStore = useMessageStore();
+    messageStore.addError(Messages.WebGLLost.title, Messages.WebGLLost.details);
+  }, 100);
+
+  onProxyManagerEvent(ProxyManagerEvent.ProxyCreated, (id, obj) => {
+    if (!obj || !obj.isA('vtkViewProxy')) return;
+    const view = obj as vtkViewProxy;
+    // TODO getCanvas() typing
+    const rw = view.getOpenglRenderWindow() as any;
+    const canvas = rw.getCanvas() as HTMLCanvasElement;
+
+    const cleanup = useEventListener(canvas, 'webglcontextlost', reportError);
+    watchdogs.set(id, cleanup);
+  });
+
+  onProxyManagerEvent(ProxyManagerEvent.ProxyDeleted, (id) => {
+    if (watchdogs.has(id)) {
+      watchdogs.get(id)!();
+      watchdogs.delete(id);
+    }
+  });
+}

package/src/composables/useWidgetManager.ts

@@ -0,0 +1,41 @@
+import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
+import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
+import { CaptureOn } from '@kitware/vtk.js/Widgets/Core/WidgetManager/Constants';
+import { computed, onUnmounted, Ref, watch } from '@vue/composition-api';
+import { useViewProxyMounted, useViewProxyUnmounted } from './useViewProxy';
+
+export function useWidgetManager(viewProxy: Ref<vtkViewProxy>) {
+  const widgetManager = computed(() => {
+    const wm = vtkWidgetManager.newInstance({
+      pickingEnabled: false,
+      useSvgLayer: false,
+      captureOn: CaptureOn.MOUSE_MOVE,
+    });
+    return wm;
+  });
+
+  useViewProxyMounted(viewProxy, () => {
+    widgetManager.value.setRenderer(viewProxy.value.getRenderer());
+    widgetManager.value.enablePicking();
+  });
+
+  useViewProxyUnmounted(viewProxy, () => {
+    widgetManager.value.disablePicking();
+  });
+
+  watch(widgetManager, (curWM, oldWM) => {
+    if (curWM) {
+      curWM.setRenderer(viewProxy.value.getRenderer());
+      curWM.enablePicking();
+    }
+    if (oldWM) {
+      oldWM.delete();
+    }
+  });
+
+  onUnmounted(() => {
+    widgetManager.value.delete();
+  });
+
+  return { widgetManager };
+}

package/src/config.ts

@@ -0,0 +1,182 @@
+import MRICardiacThumbnail from '@/src/assets/samples/MRI-Cardiac.jpg';
+import MRIPROSTATExThumbnail from '@/src/assets/samples/MRI-PROSTATEx.jpg';
+import MRAHeadThumbnail from '@/src/assets/samples/MRA-Head_and_Neck.jpg';
+import CTAHeadThumbnail from '@/src/assets/samples/CTA-Head_and_Neck.jpg';
+import USFetusThumbnail from '@/src/assets/samples/3DUS-Fetus.jpg';
+import { Layout, LayoutDirection } from './types/layout';
+import { ViewSpec } from './types/views';
+import { SampleDataset } from './types';
+
+/**
+ * These are the initial view IDs.
+ */
+export const InitViewIDs: Record<string, string> = {
+  Coronal: 'Coronal',
+  Sagittal: 'Sagittal',
+  Axial: 'Axial',
+  Three: '3D',
+};
+
+/**
+ * View spec for the initial view IDs.
+ */
+export const InitViewSpecs: Record<string, ViewSpec> = {
+  [InitViewIDs.Coronal]: {
+    viewType: '2D',
+    props: {
+      viewDirection: 'Right',
+      viewUp: 'Superior',
+    },
+  },
+  [InitViewIDs.Sagittal]: {
+    viewType: '2D',
+    props: {
+      viewDirection: 'Posterior',
+      viewUp: 'Superior',
+    },
+  },
+  [InitViewIDs.Axial]: {
+    viewType: '2D',
+    props: {
+      viewDirection: 'Superior',
+      viewUp: 'Anterior',
+    },
+  },
+  [InitViewIDs.Three]: {
+    viewType: '3D',
+    props: {
+      viewDirection: 'Posterior',
+      viewUp: 'Superior',
+    },
+  },
+};
+
+/**
+ * The default view spec.
+ */
+export const DefaultViewSpec = InitViewSpecs[InitViewIDs.Axial];
+
+/**
+ * Defines the default layouts.
+ */
+export const Layouts: Record<string, Layout> = [
+  {
+    name: 'Axial Primary',
+    direction: LayoutDirection.V,
+    items: [
+      InitViewIDs.Axial,
+      {
+        direction: LayoutDirection.H,
+        items: [InitViewIDs.Three, InitViewIDs.Coronal, InitViewIDs.Sagittal],
+      },
+    ],
+  },
+  {
+    name: '3D Primary',
+    direction: LayoutDirection.V,
+    items: [
+      InitViewIDs.Three,
+      {
+        direction: LayoutDirection.H,
+        items: [InitViewIDs.Coronal, InitViewIDs.Sagittal, InitViewIDs.Axial],
+      },
+    ],
+  },
+  {
+    name: 'Quad View',
+    direction: LayoutDirection.H,
+    items: [
+      {
+        direction: LayoutDirection.V,
+        items: [InitViewIDs.Coronal, InitViewIDs.Three],
+      },
+      {
+        direction: LayoutDirection.V,
+        items: [InitViewIDs.Sagittal, InitViewIDs.Axial],
+      },
+    ],
+  },
+  {
+    name: '3D Only',
+    direction: LayoutDirection.H,
+    items: [InitViewIDs.Three],
+  },
+].reduce((layouts, layout) => {
+  return { ...layouts, [layout.name]: layout };
+}, {});
+
+export const LABELMAP_PALETTE = {
+  0: [0, 0, 0, 0], // eraser
+  1: [153, 153, 0, 255],
+  2: [76, 76, 0, 255],
+  3: [255, 255, 0, 255],
+  4: [0, 76, 0, 255],
+  5: [0, 153, 0, 255],
+  6: [0, 255, 0, 255],
+  7: [76, 0, 0, 255],
+  8: [153, 0, 0, 255],
+  9: [255, 0, 0, 255],
+  10: [0, 76, 76, 255],
+  11: [0, 153, 153, 255],
+  12: [0, 255, 255, 255],
+  13: [0, 0, 76, 255],
+  14: [0, 0, 153, 255],
+} as Record<number, number[]>;
+
+export const SAMPLE_DATA: SampleDataset[] = [
+  {
+    name: 'CTA Head and Neck',
+    filename: 'CTA-Head_and_Neck.zip',
+    description:
+      'CTA head and neck scan of elderly patient with tumor. (80 MB)',
+    url: 'https://data.kitware.com/api/v1/item/6347159711dab81428208e24/download',
+    image: CTAHeadThumbnail,
+  },
+  {
+    name: 'MRA Head and Neck',
+    filename: 'MRA-Head_and_Neck.zip',
+    description:
+      'MRA from Patient Contributed Image Repository. Click application help icon "(?)" for more info. (15 MB)',
+    url: 'https://data.kitware.com/api/v1/item/6352a2b311dab8142820a33b/download',
+    image: MRAHeadThumbnail,
+  },
+  {
+    name: 'MRI Cardiac 3D and Cine',
+    filename: 'MRI-Cardiac-3D_and_Cine.zip',
+    description:
+      'MRI scan with two series: 3D axial non-gated and 2 chamber cine. (4 MB)',
+    url: 'https://data.kitware.com/api/v1/item/6350b28f11dab8142820949d/download',
+    image: MRICardiacThumbnail,
+  },
+  {
+    name: 'MRI PROSTATEx',
+    filename: 'MRI-PROSTATEx-0004.zip',
+    description:
+      'MRI from the SPIE-AAPM-NCI PROSTATEx challenge. Click application help "(?)" icon for more info. (3 MB)',
+    url: 'https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download',
+    image: MRIPROSTATExThumbnail,
+  },
+  {
+    name: '3D US Fetus',
+    filename: '3DUS-Fetus.mha',
+    description:
+      '3D ultrasound of a baby. Downloaded from tomovision.com.(8 MB)',
+    url: 'https://data.kitware.com/api/v1/item/635679c311dab8142820a4f4/download',
+    image: USFetusThumbnail,
+  },
+];
+
+export const TOOL_COLORS = [
+  '#8de4d3',
+  '#f0a4b1',
+  '#58f24c',
+  '#a3c9fe',
+  '#c8f251',
+  '#fea53b',
+];
+
+export const DEFAULT_PRESET_BY_MODALITY: Record<string, string> = {
+  CT: 'CT-AAA',
+  MR: 'CT-Coronary-Arteries-2',
+  US: 'US-Fetal',
+};