volview 4.0.0 → 4.0.1

package/src/composables/useToast.js

@@ -1,11 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,141 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,173 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,182 +0,0 @@
-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',
-};