volview 4.0.0

package/src/composables/useCurrentImage.ts

@@ -0,0 +1,74 @@
+import { computed } from '@vue/composition-api';
+import { useDatasetStore } from '../store/datasets';
+import { useDICOMStore } from '../store/datasets-dicom';
+import { defaultImageMetadata, useImageStore } from '../store/datasets-images';
+import { createLPSBounds, getAxisBounds } from '../utils/lps';
+
+// Returns a spatially inflated image extent
+export function getImageSpatialExtent(imageID: string | null) {
+  const imageStore = useImageStore();
+
+  if (imageID && imageID in imageStore.metadata) {
+    const { lpsOrientation } = imageStore.metadata[imageID];
+    const image = imageStore.dataIndex[imageID];
+    if (image) {
+      const extent = image.getSpatialExtent();
+      return {
+        Sagittal: getAxisBounds(extent, 'Sagittal', lpsOrientation),
+        Coronal: getAxisBounds(extent, 'Coronal', lpsOrientation),
+        Axial: getAxisBounds(extent, 'Axial', lpsOrientation),
+      };
+    }
+  }
+  return createLPSBounds();
+}
+
+export function useCurrentImage() {
+  const dataStore = useDatasetStore();
+  const dicomStore = useDICOMStore();
+  const imageStore = useImageStore();
+
+  const currentImageID = computed(() => {
+    const { primarySelection } = dataStore;
+    const { volumeToImageID } = dicomStore;
+
+    if (primarySelection?.type === 'image') {
+      return primarySelection.dataID;
+    }
+    if (primarySelection?.type === 'dicom') {
+      return volumeToImageID[primarySelection.volumeKey] || null;
+    }
+    return null;
+  });
+
+  const currentImageMetadata = computed(() => {
+    const { metadata } = imageStore;
+    const imageID = currentImageID.value;
+
+    if (imageID) {
+      return metadata[imageID];
+    }
+    return defaultImageMetadata();
+  });
+
+  const currentImageData = computed(() => {
+    // assumed to be only images for now
+    return dataStore.primaryDataset;
+  });
+
+  const currentImageExtent = computed(() =>
+    getImageSpatialExtent(currentImageID.value)
+  );
+
+  const isImageLoading = computed(() => {
+    return !!dataStore.primarySelection && !dataStore.primaryDataset;
+  });
+
+  return {
+    currentImageData,
+    currentImageID,
+    currentImageMetadata,
+    currentImageExtent,
+    isImageLoading,
+  };
+}

package/src/composables/useCurrentSlice.ts

@@ -0,0 +1,43 @@
+import { Vector3 } from '@kitware/vtk.js/types';
+import { computed } from '@vue/composition-api';
+import { MaybeRef } from '@vueuse/core';
+import { useViewConfigStore } from '../store/view-configs';
+import { getLPSAxisFromDir } from '../utils/lps';
+import { useCurrentImage } from './useCurrentImage';
+
+/**
+ * Returns information about the current slice.
+ *
+ * axisName: the name of the axis
+ * axisIndex: corresponding index in an LPS coordinate array
+ * number: slice value
+ * planeNormal: slice plane normal
+ * planeOrigin: slice plane origin
+ * @param viewID
+ */
+export function useCurrentSlice(viewID: MaybeRef<string | null>) {
+  const viewConfigStore = useViewConfigStore();
+  const currentImage = useCurrentImage();
+  const { currentImageMetadata } = currentImage;
+  const sliceConfig = viewConfigStore.getComputedSliceConfig(
+    viewID,
+    currentImage.currentImageID
+  );
+  return computed(() => {
+    const config = sliceConfig.value;
+    const { lpsOrientation } = currentImageMetadata.value;
+    if (config) {
+      const axis = getLPSAxisFromDir(config.axisDirection);
+      const planeOrigin = [0, 0, 0] as Vector3;
+      planeOrigin[lpsOrientation[axis]] = config.slice;
+      return {
+        axisName: axis,
+        axisIndex: lpsOrientation[axis],
+        number: config.slice,
+        planeNormal: lpsOrientation[config.axisDirection] as Vector3,
+        planeOrigin,
+      };
+    }
+    return null;
+  });
+}

package/src/composables/useDoubleRecord.ts

@@ -0,0 +1,77 @@
+import { computed, del, reactive, set, unref } from '@vue/composition-api';
+import { MaybeRef } from '@vueuse/core';
+
+export function useDoubleRecord<V>() {
+  type Map1 = Record<string, Record<string, V>>;
+  type Map2 = Record<string, string>;
+  const reactiveRoot = reactive<{ map: Map1 }>({
+    map: {},
+  });
+
+  const _set = (k1: string, k2: string, v: V) => {
+    if (!(k1 in reactiveRoot.map)) {
+      set(reactiveRoot.map, k1, reactive<Map2>({}));
+    }
+    set(reactiveRoot.map[k1], k2, v);
+  };
+
+  const get = (k1: string, k2: string) => {
+    return reactiveRoot.map[k1]?.[k2] ?? undefined;
+  };
+
+  const getComputed = (
+    k1: MaybeRef<string | null | undefined>,
+    k2: MaybeRef<string | null | undefined>
+  ) => {
+    return computed(() => {
+      const k1v = unref(k1);
+      const k2v = unref(k2);
+      const { map } = reactiveRoot;
+      if (!k1v || !k2v) return undefined;
+      return map[k1v]?.[k2v];
+    });
+  };
+
+  const has = (k1: string, k2: string) => {
+    const { map } = reactiveRoot;
+    return k1 in map && k2 in map[k1];
+  };
+
+  const hasComputed = (
+    k1: MaybeRef<string | null | undefined>,
+    k2: MaybeRef<string | null | undefined>
+  ) => {
+    return computed(() => {
+      const k1v = unref(k1);
+      const k2v = unref(k2);
+      const { map } = reactiveRoot;
+      if (!k1v || !k2v) return undefined;
+      return k1v in map && k2v in map[k1v];
+    });
+  };
+
+  const _delete = (k1: string, k2: string) => {
+    if (k1 in reactiveRoot.map) {
+      del(reactiveRoot.map[k1], k2);
+    }
+  };
+
+  const deleteFirstKey = (k1: string) => {
+    del(reactiveRoot.map, k1);
+  };
+
+  const deleteSecondKey = (k2: string) => {
+    Object.keys(reactiveRoot.map).forEach((k1) => _delete(k1, k2));
+  };
+
+  return {
+    set: _set,
+    get,
+    getComputed,
+    has,
+    hasComputed,
+    delete: _delete,
+    deleteFirstKey,
+    deleteSecondKey,
+  };
+}

package/src/composables/useEventListener.ts

@@ -0,0 +1,26 @@
+import { onUnmounted, Ref, watch } from '@vue/composition-api';
+import { NOOP } from '../constants';
+
+export function useEventListener(
+  targetRef: Ref<HTMLElement | null | undefined>,
+  eventName: string,
+  listener: (evt: Event) => void
+) {
+  let cleanup = NOOP;
+
+  watch(
+    targetRef,
+    (target) => {
+      cleanup();
+      cleanup = NOOP;
+
+      if (target) {
+        target.addEventListener(eventName, listener);
+        cleanup = () => target.removeEventListener(eventName, listener);
+      }
+    },
+    { immediate: true, flush: 'post' }
+  );
+
+  onUnmounted(cleanup);
+}

package/src/composables/useGlobalErrorHook.ts

@@ -0,0 +1,18 @@
+import { onBeforeUnmount, onMounted } from '@vue/composition-api';
+import { useMessageStore } from '../store/messages';
+
+export function useGlobalErrorHook() {
+  const messageStore = useMessageStore();
+
+  const onError = (event: ErrorEvent) => {
+    messageStore.addError('Application error (click for details)', event.error);
+  };
+
+  onMounted(() => {
+    window.addEventListener('error', onError);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('error', onError);
+  });
+}

package/src/composables/useMultiSelection.ts

@@ -0,0 +1,29 @@
+import {
+  computed,
+  Ref,
+  ref,
+  UnwrapRefSimple,
+  watch,
+} from '@vue/composition-api';
+
+export function useMultiSelection<T = string>(allItems: Ref<T[]>) {
+  const selected = ref<T[]>([]);
+  const selectedAll = ref(false);
+  const selectedSome = computed(() => selected.value.length > 0);
+
+  watch(selected, () => {
+    selectedAll.value =
+      selected.value.length > 0 &&
+      selected.value.length === allItems.value.length;
+  });
+
+  watch(selectedAll, (yn) => {
+    if (yn) {
+      selected.value = allItems.value as UnwrapRefSimple<T[]>;
+    } else {
+      selected.value = [];
+    }
+  });
+
+  return { selected, selectedAll, selectedSome };
+}

package/src/composables/useOrientationLabels.ts

@@ -0,0 +1,62 @@
+import { computed, Ref, ref } from '@vue/composition-api';
+import { vec3 } from 'gl-matrix';
+import { Vector3 } from '@kitware/vtk.js/types';
+import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
+import { EPSILON } from '../constants';
+import { useVTKCallback } from './useVTKCallback';
+
+export function toOrderedLabels(vec: Vector3) {
+  return (
+    vec
+      .map((v, i) => ({ value: v, axis: i }))
+      // remove components close to zero, since we won't show those labels
+      .filter(({ value }) => Math.abs(value) > EPSILON)
+      // sort from largest to smallest component
+      .sort((a, b) => Math.abs(b.value) - Math.abs(a.value))
+      // apply labels
+      .map(({ value, axis }) => (Math.sign(value) === 1 ? 'LPS' : 'RAI')[axis])
+      .join('')
+  );
+}
+
+/**
+ * Computes orientation labels for a given view.
+ *
+ * Labels are with respect to the current camera orientation.
+ *
+ * vtk.js coordinate coordinate is implied to be LPS, so orientation labels
+ * are determined solely from the camera' direction and view-up.
+ */
+export function useOrientationLabels(view: Ref<vtkViewProxy>) {
+  const camera = computed(() => view.value.getCamera());
+
+  const top = ref('');
+  const left = ref('');
+  const bottom = ref('');
+  const right = ref('');
+
+  function updateAxes() {
+    const vup = camera.value.getViewUp();
+    const vdir = camera.value.getDirectionOfProjection();
+    const vright = [0, 0, 0] as Vector3;
+
+    // vup and vdir should not be parallel for cameras
+    vec3.cross(vright, vdir, vup);
+
+    const vbottom = vup.map((c) => c * -1) as Vector3;
+    const vleft = vright.map((c) => c * -1) as Vector3;
+
+    top.value = toOrderedLabels(vup);
+    right.value = toOrderedLabels(vright);
+    bottom.value = toOrderedLabels(vbottom);
+    left.value = toOrderedLabels(vleft);
+  }
+
+  const cameraOnModified = useVTKCallback(
+    computed(() => camera.value.onModified)
+  );
+  cameraOnModified(updateAxes);
+  updateAxes();
+
+  return { top, right, bottom, left };
+}

package/src/composables/usePanels.ts

@@ -0,0 +1,42 @@
+import { computed, ref, Ref, watch } from '@vue/composition-api';
+
+export interface Panel {
+  key: string;
+  isOpen: boolean;
+}
+
+export function usePanels(keys: Ref<Set<string>>) {
+  const panels = ref<Panel[]>([]);
+
+  watch(
+    keys,
+    (newKeys, oldKeys) => {
+      // remove deleted
+      panels.value = panels.value.filter(({ key }) => newKeys.has(key));
+
+      const addedKeys = [...newKeys].filter((key) => !oldKeys?.has(key));
+      // order in  temporal created order, not template order.  See https://github.com/vuetifyjs/vuetify/issues/11225
+      panels.value = [
+        ...panels.value,
+        ...addedKeys.map((key) => ({ key, isOpen: true })),
+      ];
+    },
+    // flush: 'post' keeps panels open when deleting patients
+    // because panels.value has the same number panels in v-expansion-panels after flush
+    { flush: 'post', immediate: true }
+  );
+
+  const handlePanelChange = (changeKey: string) => {
+    const panel = panels.value.find(({ key }) => key === changeKey);
+    panel!.isOpen = !panel!.isOpen;
+  };
+
+  const openPanels: Ref<number[]> = computed(() => {
+    return panels.value
+      .map(({ isOpen }, idx) => ({ isOpen, idx }))
+      .filter(({ isOpen }) => isOpen)
+      .map(({ idx }) => idx);
+  });
+
+  return { handlePanelChange, openPanels };
+}

package/src/composables/usePersistCameraConfig.ts

@@ -0,0 +1,138 @@
+import { manageVTKSubscription } from '@src/composables/manageVTKSubscription';
+import { Ref } from '@vue/composition-api';
+import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
+import { useViewConfigStore } from '../store/view-configs';
+import { CameraConfig } from '../store/view-configs/types';
+
+export function usePersistCameraConfig(
+  viewID: Ref<string>,
+  dataID: Ref<string | null>,
+  viewProxy: Ref<vtkViewProxy>,
+  ...toPersist: (keyof CameraConfig)[]
+) {
+  const viewConfigStore = useViewConfigStore();
+  let persistCameraConfig = true;
+
+  // We setup this list of functions to avoid if and indexOf in the onModified
+  // call.
+  const persist: (() => void)[] = [];
+
+  if (toPersist.indexOf('position') > -1) {
+    persist.push(() => {
+      if (dataID.value !== null && persistCameraConfig) {
+        viewConfigStore.updateCameraConfig(viewID.value, dataID.value, {
+          position: viewProxy.value.getCamera().getPosition(),
+        });
+      }
+    });
+  }
+  if (toPersist.indexOf('viewUp') > -1) {
+    persist.push(() => {
+      if (dataID.value !== null && persistCameraConfig) {
+        viewConfigStore.updateCameraConfig(viewID.value, dataID.value, {
+          viewUp: viewProxy.value.getCamera().getViewUp(),
+        });
+      }
+    });
+  }
+  if (toPersist.indexOf('focalPoint') > -1) {
+    persist.push(() => {
+      if (dataID.value !== null && persistCameraConfig) {
+        viewConfigStore.updateCameraConfig(viewID.value, dataID.value, {
+          focalPoint: viewProxy.value.getCamera().getFocalPoint(),
+        });
+      }
+    });
+  }
+  if (toPersist.indexOf('directionOfProjection') > -1) {
+    persist.push(() => {
+      if (dataID.value !== null && persistCameraConfig) {
+        viewConfigStore.updateCameraConfig(viewID.value, dataID.value, {
+          directionOfProjection: viewProxy.value
+            .getCamera()
+            .getDirectionOfProjection(),
+        });
+      }
+    });
+  }
+  if (toPersist.indexOf('parallelScale') > -1) {
+    persist.push(() => {
+      if (dataID.value !== null && persistCameraConfig) {
+        viewConfigStore.updateCameraConfig(viewID.value, dataID.value, {
+          parallelScale: viewProxy.value.getCamera().getParallelScale(),
+        });
+      }
+    });
+  }
+
+  manageVTKSubscription(
+    viewProxy.value.getCamera().onModified(() => {
+      persist.forEach((persistFunc) => persistFunc());
+    })
+  );
+
+  function blockPersistingCameraConfig(func: () => void) {
+    persistCameraConfig = false;
+    try {
+      func();
+    } finally {
+      persistCameraConfig = true;
+    }
+  }
+
+  function restoreCameraConfig(cameraConfig: CameraConfig) {
+    blockPersistingCameraConfig(() => {
+      toPersist.forEach((key: keyof CameraConfig) => {
+        // Parallel scale
+        if (key === 'parallelScale' && cameraConfig.parallelScale) {
+          viewProxy.value
+            .getCamera()
+            .setParallelScale(cameraConfig.parallelScale);
+        }
+        // Position
+        else if (key === 'position' && cameraConfig.position) {
+          const { position } = cameraConfig;
+          viewProxy.value
+            .getCamera()
+            .setPosition(position[0], position[1], position[2]);
+        }
+        // Focal point
+        else if (key === 'focalPoint' && cameraConfig.focalPoint) {
+          const { focalPoint } = cameraConfig;
+          viewProxy.value
+            .getCamera()
+            .setFocalPoint(focalPoint[0], focalPoint[1], focalPoint[2]);
+          viewProxy.value
+            .getInteractorStyle2D()
+            .setCenterOfRotation([...focalPoint]);
+          viewProxy.value
+            .getInteractorStyle3D()
+            .setCenterOfRotation([...focalPoint]);
+        }
+        // Direction of projection
+        else if (
+          key === 'directionOfProjection' &&
+          cameraConfig.directionOfProjection
+        ) {
+          const { directionOfProjection } = cameraConfig;
+          viewProxy.value
+            .getCamera()
+            .setDirectionOfProjection(
+              directionOfProjection[0],
+              directionOfProjection[1],
+              directionOfProjection[2]
+            );
+        }
+        // View up
+        else if (key === 'viewUp' && cameraConfig.viewUp) {
+          const { viewUp } = cameraConfig;
+          viewProxy.value
+            .getCamera()
+            .setViewUp(viewUp[0], viewUp[1], viewUp[2]);
+        }
+      });
+    });
+  }
+
+  return { restoreCameraConfig };
+}

package/src/composables/useResizeObserver.ts

@@ -0,0 +1,37 @@
+import { onBeforeUnmount, Ref, unref, watch } from '@vue/composition-api';
+
+/**
+ * Invokes a callback whenever an element is resized.
+ */
+export function useResizeObserver(
+  targetElRef: Ref<Element | null | undefined>,
+  callback: (entry: ResizeObserverEntry) => void
+) {
+  const observer = new ResizeObserver((entries) => {
+    if (entries.length === 1) {
+      callback(entries[0]);
+    }
+  });
+
+  watch(
+    targetElRef,
+    (targetEl, prevTarget) => {
+      if (prevTarget) {
+        observer.unobserve(prevTarget);
+      }
+      if (targetEl) {
+        observer.observe(targetEl);
+      }
+    },
+    { immediate: true }
+  );
+
+  onBeforeUnmount(() => {
+    const targetEl = unref(targetElRef);
+    if (targetEl) {
+      observer.unobserve(targetEl);
+    }
+  });
+
+  return observer;
+}

package/src/composables/useResizeToFit.ts

@@ -0,0 +1,50 @@
+import { ref } from '@vue/composition-api';
+import vtkCamera from '@kitware/vtk.js/Rendering/Core/Camera';
+import { manageVTKSubscription } from '@src/composables/manageVTKSubscription';
+import { vec3 } from 'gl-matrix';
+
+export function useResizeToFit(
+  camera: vtkCamera,
+  initialValue: boolean = false
+) {
+  const resizeToFit = ref(initialValue);
+
+  let trackResizeToFit = true;
+  const cachedCameraInfo = {
+    position: [0, 0, 0] as vec3,
+    parallelScale: 0,
+  };
+
+  manageVTKSubscription(
+    camera.onModified(() => {
+      if (trackResizeToFit && resizeToFit.value) {
+        const position = camera.getPosition();
+        const parallelScale = camera.getParallelScale();
+        if (
+          !vec3.equals(position, cachedCameraInfo.position) ||
+          parallelScale !== cachedCameraInfo.parallelScale
+        ) {
+          resizeToFit.value = false;
+        }
+      }
+    })
+  );
+
+  function ignoreResizeToFitTracking(cb: () => void) {
+    if (trackResizeToFit) {
+      trackResizeToFit = false;
+      try {
+        cb();
+      } finally {
+        trackResizeToFit = true;
+      }
+    }
+  }
+
+  function resetResizeToFitTracking() {
+    cachedCameraInfo.position = camera.getPosition();
+    cachedCameraInfo.parallelScale = camera.getParallelScale();
+  }
+
+  return { resizeToFit, ignoreResizeToFitTracking, resetResizeToFitTracking };
+}

package/src/composables/useSceneBuilder.ts

@@ -0,0 +1,96 @@
+import vtkAbstractRepresentationProxy from '@kitware/vtk.js/Proxy/Core/AbstractRepresentationProxy';
+import { computed, Ref, watch } from '@vue/composition-api';
+import { useViewStore } from '../store/views';
+import { vtkLPSViewProxy } from '../types/vtk-types';
+
+interface Scene {
+  baseImage?: Ref<string | null>;
+  labelmaps?: Ref<string[]>;
+  models?: Ref<string[]>;
+}
+
+type RepProxy = vtkAbstractRepresentationProxy;
+
+export function useSceneBuilder<
+  BaseImageType extends RepProxy = RepProxy,
+  LabelMapType extends RepProxy = RepProxy,
+  ModelType extends RepProxy = RepProxy
+>(viewID: Ref<string>, sceneIDs: Scene) {
+  const viewStore = useViewStore();
+  const viewProxy = computed(() =>
+    viewStore.getViewProxy<vtkLPSViewProxy>(viewID.value)
+  );
+
+  const baseImageRep = computed(() => {
+    const _viewID = viewID.value;
+    if (sceneIDs.baseImage) {
+      const imageID = sceneIDs.baseImage.value;
+      if (imageID) {
+        return viewStore.getDataRepresentationForView<BaseImageType>(
+          imageID,
+          _viewID
+        );
+      }
+    }
+    return null;
+  });
+
+  const labelmapReps = computed(() => {
+    const _viewID = viewID.value;
+    if (sceneIDs.labelmaps) {
+      const labelmapIDs = sceneIDs.labelmaps.value;
+      if (labelmapIDs) {
+        return labelmapIDs
+          .map((id) =>
+            viewStore.getDataRepresentationForView<LabelMapType>(id, _viewID)
+          )
+          .filter(Boolean) as LabelMapType[];
+      }
+    }
+    return [];
+  });
+
+  const modelReps = computed(() => {
+    const _viewID = viewID.value;
+    if (sceneIDs.models) {
+      const modelIDs = sceneIDs.models.value;
+      if (modelIDs) {
+        return modelIDs
+          .map((id) =>
+            viewStore.getDataRepresentationForView<ModelType>(id, _viewID)
+          )
+          .filter(Boolean) as ModelType[];
+      }
+    }
+    return [];
+  });
+
+  watch(
+    [viewProxy, baseImageRep, labelmapReps, modelReps],
+    ([view, baseRep, lmReps, mReps]) => {
+      if (!view) {
+        throw new Error('[useSceneBuilder] No view available');
+      }
+
+      view.removeAllRepresentations();
+
+      if (baseRep) {
+        // we control the color mapping range manually
+        baseRep.setRescaleOnColorBy(false);
+        view.addRepresentation(baseRep);
+      }
+      lmReps.forEach((rep) => view.addRepresentation(rep));
+      mReps.forEach((rep) => view.addRepresentation(rep));
+
+      // TODO not sure why I need this, but might as well keep
+      // the renderer up to date.
+      // For reference, this doesn't get invoked when resetting the
+      // camera with a supplied bounds, so we manually invoke it here.
+      view.getRenderer().computeVisiblePropBounds();
+      view.render();
+    },
+    { deep: true, immediate: true }
+  );
+
+  return { baseImageRep, labelmapReps, modelReps };
+}