volview 4.0.0

package/src/components/tools/ruler/RulerWidget2D.vue

@@ -0,0 +1,154 @@
+<script lang="ts">
+import { useRulerStore } from '@/src/store/tools/rulers';
+import { vtkRulerViewWidget } from '@/src/vtk/RulerWidget';
+import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
+import {
+  computed,
+  defineComponent,
+  onBeforeUnmount,
+  onMounted,
+  PropType,
+  ref,
+  toRefs,
+  watch,
+  watchEffect,
+} from '@vue/composition-api';
+import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
+import { vtkSubscription } from '@kitware/vtk.js/interfaces';
+import { getCSSCoordinatesFromEvent } from '@/src/utils/vtk-helpers';
+import { LPSAxisDir } from '@/src/types/lps';
+
+export default defineComponent({
+  name: 'RulerWidget2D',
+  props: {
+    rulerId: {
+      type: String,
+      required: true,
+    },
+    widgetManager: {
+      type: Object as PropType<vtkWidgetManager>,
+      required: true,
+    },
+    viewId: {
+      type: String,
+      required: true,
+    },
+    viewDirection: {
+      type: String as PropType<LPSAxisDir>,
+      required: true,
+    },
+    slice: {
+      type: Number,
+      required: true,
+    },
+    focused: Boolean,
+  },
+  setup(props, { emit }) {
+    const {
+      rulerId: rulerIDRef,
+      widgetManager: widgetManagerRef,
+      viewDirection,
+      focused,
+      slice,
+    } = toRefs(props);
+    const rulerStore = useRulerStore();
+    const factoryRef = computed(() =>
+      rulerStore.getVTKFactory(rulerIDRef.value)
+    );
+    const widgetRef = ref<vtkRulerViewWidget | null>(null);
+    const rulerRef = computed(() => rulerStore.rulers[rulerIDRef.value]);
+
+    onMounted(() => {
+      if (!factoryRef.value) {
+        throw new Error(
+          `No widget exists for ruler with ID ${rulerIDRef.value}`
+        );
+      }
+      const widgetManager = widgetManagerRef.value;
+      const factory = factoryRef.value;
+
+      widgetRef.value = widgetManager.addWidget(factory) as vtkRulerViewWidget;
+    });
+
+    // --- right click handling --- //
+
+    let rightClickSub: vtkSubscription | null = null;
+
+    onMounted(() => {
+      rightClickSub = widgetRef.value!.onRightClickEvent((eventData) => {
+        const coords = getCSSCoordinatesFromEvent(eventData);
+        if (coords) {
+          emit('contextmenu', coords);
+        }
+      });
+    });
+
+    onBeforeUnmount(() => {
+      if (rightClickSub) {
+        rightClickSub.unsubscribe();
+        rightClickSub = null;
+      }
+    });
+
+    // --- manipulator --- //
+
+    const manipulator = vtkPlaneManipulator.newInstance();
+
+    onMounted(() => {
+      widgetRef.value!.setManipulator(manipulator);
+    });
+
+    const { currentImageMetadata } = useCurrentImage();
+
+    watchEffect(() => {
+      updatePlaneManipulatorFor2DView(
+        manipulator,
+        viewDirection.value,
+        rulerRef.value.slice ?? slice.value,
+        currentImageMetadata.value
+      );
+    });
+
+    // --- focus --- //
+
+    watchEffect(() => {
+      const widgetManager = widgetManagerRef.value;
+      const widget = widgetRef.value;
+      if (focused.value) {
+        widgetManager.grabFocus(widget!);
+      } else {
+        // TODO unfocus the specific widget; necessary?
+      }
+    });
+
+    onBeforeUnmount(() => {
+      const widgetManager = widgetManagerRef.value;
+      const widget = widgetRef.value;
+      widgetManager.removeWidget(widget!);
+    });
+
+    // --- visibility --- //
+
+    watch(
+      () => {
+        const rulerSlice = rulerRef.value.slice;
+        const curSlice = slice.value;
+        return !Number.isInteger(rulerSlice) || rulerSlice === curSlice;
+      },
+      (visible) => {
+        widgetRef.value!.setVisibility(visible);
+      }
+    );
+
+    onMounted(() => {
+      // hide handle visibility
+      widgetRef.value!.setHandleVisibility(false);
+      widgetManagerRef.value.renderWidgets();
+    });
+
+    return () => null;
+  },
+});
+</script>

package/src/composables/__tests__/useDoubleRecord.spec.ts

@@ -0,0 +1,57 @@
+import { expect } from 'chai';
+import vueCompositionApi, { computed } from '@vue/composition-api';
+import Vue from 'vue';
+import { useDoubleRecord } from '../useDoubleRecord';
+
+Vue.use(vueCompositionApi);
+
+describe('useDoubleRecord', () => {
+  it('should work', () => {
+    type Config = {
+      propA: number;
+    };
+
+    const dr = useDoubleRecord<Config>();
+
+    const ab = dr.getComputed('a', 'b');
+    const abPropA = computed(() => ab.value?.propA);
+    const hasAB = dr.hasComputed('a', 'b');
+    expect(ab.value).to.be.undefined;
+    expect(abPropA.value).to.be.undefined;
+    expect(hasAB.value).to.be.false;
+
+    dr.set('a', 'b', {
+      propA: 43,
+    });
+
+    expect(ab.value).to.not.be.undefined;
+    expect(hasAB.value).to.be.true;
+    expect(abPropA.value).to.equal(43);
+
+    dr.set('a', 'b', {
+      ...ab.value!,
+      propA: 11,
+    });
+    expect(abPropA.value).to.equal(11);
+
+    dr.deleteSecondKey('b');
+
+    expect(ab.value).to.be.undefined;
+    expect(abPropA.value).to.be.undefined;
+    expect(hasAB.value).to.be.false;
+
+    dr.set('a', 'b', {
+      propA: 9,
+    });
+
+    expect(hasAB.value).to.be.true;
+
+    dr.deleteFirstKey('a');
+
+    expect(hasAB.value).to.be.false;
+
+    expect(() => {
+      dr.delete('nonexistent', 'nonexistent');
+    }).to.not.throw;
+  });
+});

package/src/composables/__tests__/useOrientationLabels.spec.ts

@@ -0,0 +1,29 @@
+import { expect } from 'chai';
+
+import { toOrderedLabels } from '@src/composables/useOrientationLabels';
+
+const SQRT1_3 = 1 / Math.sqrt(3);
+
+describe('toOrderedLabels', () => {
+  it("correctly orders a vector's LPS labels", () => {
+    type Cases = Array<[[number, number, number], string]>;
+    const cases: Cases = [
+      [[1, 0, 0], 'L'],
+      [[0, 1, 0], 'P'],
+      [[0, 0, 1], 'S'],
+      [[Math.SQRT1_2, Math.SQRT1_2, 0], 'LP'],
+      [[Math.SQRT1_2, -Math.SQRT1_2, 0], 'LA'],
+      [[0, Math.SQRT1_2, Math.SQRT1_2], 'PS'],
+      [[0, Math.SQRT1_2, -Math.SQRT1_2], 'PI'],
+      [[Math.SQRT1_2, 0, Math.SQRT1_2], 'LS'],
+      [[-Math.SQRT1_2, 0, Math.SQRT1_2], 'RS'],
+      [[SQRT1_3, SQRT1_3, SQRT1_3], 'LPS'],
+      [[-SQRT1_3, SQRT1_3, -SQRT1_3], 'RPI'],
+      [[0.06, 0.989, 0.128], 'PSL'],
+    ];
+
+    cases.forEach(([vector, expected]) =>
+      expect(toOrderedLabels(vector)).to.equal(expected)
+    );
+  });
+});

package/src/composables/isViewAnimating.ts

@@ -0,0 +1,25 @@
+import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
+import { computed, ref, unref } from '@vue/composition-api';
+import { MaybeRef } from '@vueuse/core';
+import { useVTKCallback } from './useVTKCallback';
+
+export function isViewAnimating(viewProxy: MaybeRef<vtkViewProxy>) {
+  const isAnimating = ref(false);
+
+  const onStartAnimation = useVTKCallback(
+    computed(() => unref(viewProxy).getInteractor().onStartAnimation)
+  );
+  const onEndAnimation = useVTKCallback(
+    computed(() => unref(viewProxy).getInteractor().onEndAnimation)
+  );
+
+  onStartAnimation(() => {
+    isAnimating.value = true;
+  });
+
+  onEndAnimation(() => {
+    isAnimating.value = false;
+  });
+
+  return isAnimating;
+}

package/src/composables/manageVTKSubscription.ts

@@ -0,0 +1,6 @@
+import { onUnmounted } from '@vue/composition-api';
+import { vtkSubscription } from '@kitware/vtk.js/interfaces';
+
+export function manageVTKSubscription(subscription: vtkSubscription) {
+  onUnmounted(() => subscription.unsubscribe());
+}

package/src/composables/onProxyManagerEvent.ts

@@ -0,0 +1,50 @@
+import { vtkSubscription } from '@kitware/vtk.js/interfaces';
+import { onBeforeUnmount } from '@vue/composition-api';
+import { withProxyManager } from './proxyManager';
+import vtkProxyObject from '../types/vtk-types';
+
+export enum ProxyManagerEvent {
+  ProxyCreated,
+  ProxyModified,
+  ProxyDeleted,
+  ProxyRegistrationChange,
+}
+
+export function onProxyManagerEvent(
+  event: ProxyManagerEvent,
+  cb: (proxyID: string, obj: vtkProxyObject | null) => void
+) {
+  const subs: vtkSubscription[] = [];
+
+  withProxyManager((proxyManager) => {
+    const proxySubs = Object.create(null);
+
+    subs.push(
+      proxyManager.onProxyRegistrationChange((info) => {
+        const { action, proxyId, proxy } = info;
+        if (action === 'register') {
+          if (event === ProxyManagerEvent.ProxyCreated) {
+            cb(proxyId, proxy);
+          }
+          if (event === ProxyManagerEvent.ProxyModified) {
+            proxySubs[proxyId] = proxy.onModified(() => cb(proxyId, proxy));
+          }
+        } else if (action === 'unregister') {
+          if (proxyId in proxySubs) {
+            proxySubs[proxyId].unsubscribe();
+            delete proxySubs[proxyId];
+          }
+          if (event === ProxyManagerEvent.ProxyDeleted) {
+            cb(proxyId, null);
+          }
+        }
+      })
+    );
+  });
+
+  onBeforeUnmount(() => {
+    while (subs.length) {
+      subs.pop()!.unsubscribe();
+    }
+  });
+}

package/src/composables/proxyManager.ts

@@ -0,0 +1,13 @@
+import { inject } from '@vue/composition-api';
+import vtkProxyManager from '@kitware/vtk.js/Proxy/Core/ProxyManager';
+
+const defaultKey = 'ProxyManager';
+
+export function withProxyManager(cb: (pxm: vtkProxyManager) => void) {
+  const pxm = inject<vtkProxyManager>('ProxyManager');
+  return pxm ? cb(pxm) : null;
+}
+
+export function useProxyManager(key = defaultKey) {
+  return inject<vtkProxyManager>(key ?? defaultKey);
+}

package/src/composables/sync/__tests__/createPrimitiveSyncContext.spec.ts

@@ -0,0 +1,41 @@
+import Vue from 'vue';
+import VueCompositionApi, { ref } from '@vue/composition-api';
+import { expect } from 'chai';
+import { createPrimitiveSyncContext } from '../createPrimitiveSyncContext';
+
+describe('createPrimitiveSyncContext', () => {
+  before(() => {
+    Vue.use(VueCompositionApi);
+  });
+
+  it('should work', () => {
+    const useSync = createPrimitiveSyncContext(0);
+
+    const var1 = ref(0);
+    const var2 = ref(0);
+    const key1 = ref('key1');
+    const key2 = ref('key1');
+
+    useSync(key1, var1);
+    useSync(key2, var2);
+
+    expect(var1.value).to.equal(0);
+    expect(var2.value).to.equal(0);
+
+    var1.value = 2;
+
+    expect(var1.value).to.equal(2);
+    expect(var2.value).to.equal(2);
+
+    var2.value = 4;
+
+    expect(var1.value).to.equal(4);
+    expect(var2.value).to.equal(4);
+
+    key2.value = 'key2';
+    var2.value = 6;
+
+    expect(var1.value).to.equal(4);
+    expect(var2.value).to.equal(6);
+  });
+});

package/src/composables/sync/__tests__/useWindowingSync.spec.ts

@@ -0,0 +1,51 @@
+import Vue from 'vue';
+import VueCompositionApi, { computed, ref } from '@vue/composition-api';
+import { WindowLevelConfig } from '@/src/store/view-configs/types';
+import Sinon from 'sinon';
+import chai, { expect } from 'chai';
+import SinonChai from 'sinon-chai';
+import { useWindowingSync } from '../useWindowingSync';
+
+chai.use(SinonChai);
+
+function makeContext(k: string) {
+  const setSpy = Sinon.spy();
+  const windowing = ref<WindowLevelConfig>({
+    width: 1,
+    level: 0,
+    min: 0,
+    max: 10,
+  });
+  const key = ref(k);
+  const source = computed({
+    get: () => windowing.value,
+    set: (newValue) => {
+      setSpy(newValue);
+      windowing.value = newValue;
+    },
+  });
+
+  return { windowing, key, source, setSpy };
+}
+
+describe('useWindowingSync', () => {
+  before(() => {
+    Vue.use(VueCompositionApi);
+  });
+  it('should work', () => {
+    const ctxt1 = makeContext('abc');
+    const ctxt2 = makeContext('abc');
+
+    useWindowingSync(ctxt1.key, ctxt1.source);
+    useWindowingSync(ctxt2.key, ctxt2.source);
+
+    const newValue = {
+      ...ctxt1.windowing.value,
+      level: 4,
+    };
+    ctxt1.windowing.value = newValue;
+
+    expect(ctxt2.setSpy).to.have.been.calledWith(newValue);
+    expect(ctxt2.windowing.value.level).to.equal(newValue.level);
+  });
+});

package/src/composables/sync/createPrimitiveSyncContext.ts

@@ -0,0 +1,83 @@
+import { ref, Ref, UnwrapRef, watch } from '@vue/composition-api';
+import { WatchOptions } from 'vue';
+
+/**
+ * immediate: sync from sync state to valueRef immediately.
+ */
+type SyncOptions = {
+  immediate: boolean;
+  watchOptions?: WatchOptions;
+};
+
+/**
+ * Only tested on primitive values.
+ */
+export function createPrimitiveSyncContext<T, K>(initialState: T) {
+  const states = new Map<K, Ref<UnwrapRef<T>>>();
+  const usage = new Map<K, number>();
+
+  const register = (key: K, valueRef: Ref<T>, options?: SyncOptions) => {
+    if (!states.has(key)) {
+      states.set(key, ref(initialState));
+    }
+    const state = states.get(key)!;
+    usage.set(key, 1 + (usage.get(key) ?? 0));
+
+    const stopTo = watch(
+      valueRef,
+      (newValue) => {
+        if (newValue !== state.value) {
+          state.value = newValue as UnwrapRef<T>;
+        }
+      },
+      {
+        flush: 'sync',
+        immediate: true,
+        ...options?.watchOptions,
+      }
+    );
+
+    const stopFrom = watch(
+      state,
+      (newState) => {
+        if (newState !== valueRef.value) {
+          /* eslint-disable-next-line no-param-reassign */
+          valueRef.value = newState as T;
+        }
+      },
+      {
+        flush: 'sync',
+        immediate: true,
+        ...options?.watchOptions,
+      }
+    );
+
+    return () => {
+      stopTo();
+      stopFrom();
+
+      usage.set(key, usage.get(key)! - 1);
+      if (usage.get(key) === 0) {
+        usage.delete(key);
+        states.delete(key);
+      }
+    };
+  };
+
+  const useSync = (key: Ref<K>, valueRef: Ref<T>, options?: SyncOptions) => {
+    let cleanup: (() => void) | null = null;
+    watch(
+      key,
+      (newKey) => {
+        if (cleanup) cleanup();
+        cleanup = register(newKey, valueRef, options);
+      },
+      {
+        flush: 'sync',
+        immediate: true,
+      }
+    );
+  };
+
+  return useSync;
+}

package/src/composables/sync/useWindowingSync.ts

@@ -0,0 +1,48 @@
+import { WindowLevelConfig } from '@/src/store/view-configs/types';
+import {
+  computed,
+  Ref,
+  triggerRef,
+  WritableComputedRef,
+} from '@vue/composition-api';
+import { createPrimitiveSyncContext } from './createPrimitiveSyncContext';
+
+function generateComputed(
+  source: WritableComputedRef<WindowLevelConfig | null>,
+  prop: keyof WindowLevelConfig
+) {
+  return computed({
+    get: () => source.value?.[prop] || null,
+    set: (newValue) => {
+      if (source.value && newValue != null) {
+        /* eslint-disable no-param-reassign */
+        source.value = {
+          ...source.value,
+          [prop]: newValue,
+        };
+      }
+    },
+  });
+}
+
+const useLevelSync = createPrimitiveSyncContext<number | null, string | null>(
+  0
+);
+const useWidthSync = createPrimitiveSyncContext<number | null, string | null>(
+  0
+);
+
+export function useWindowingSync(
+  dataID: Ref<string | null>,
+  source: WritableComputedRef<WindowLevelConfig | null>
+) {
+  const level = generateComputed(source, 'level');
+  const width = generateComputed(source, 'width');
+
+  // not 100% sure why, but this triggers tracking.
+  triggerRef(level);
+  triggerRef(width);
+
+  useLevelSync(dataID, level);
+  useWidthSync(dataID, width);
+}

package/src/composables/useAppLoadingNotifications.ts

@@ -0,0 +1,73 @@
+import { TYPE } from 'vue-toastification';
+import { useToast } from '@/src/composables/useToast';
+import { ToastID } from 'vue-toastification/dist/types/src/types';
+import { useMessageStore } from '../store/messages';
+
+export function useAppLoadingNotifications() {
+  const toast = useToast();
+  const messageStore = useMessageStore();
+
+  let loadingCount = 0;
+  let toastID: ToastID | null = null;
+  let error: Error | null = null;
+
+  const resetState = () => {
+    loadingCount = 0;
+    toastID = null;
+    error = null;
+  };
+
+  const _setError = (err: Error) => {
+    error = err;
+  };
+
+  const startLoading = () => {
+    loadingCount++;
+    if (toastID === null) {
+      toastID = toast.info('Loading datasets...', {
+        timeout: false,
+        closeButton: false,
+        closeOnClick: false,
+      });
+    }
+  };
+
+  const stopLoading = () => {
+    loadingCount--;
+    if (loadingCount === 0 && toastID !== null) {
+      if (error) {
+        toast.dismiss(toastID);
+        messageStore.addError('Some files failed to load', error);
+      } else {
+        toast.update(toastID, {
+          content: 'Datasets loaded!',
+          options: {
+            type: TYPE.SUCCESS,
+            timeout: 3000,
+            closeButton: 'button',
+            closeOnClick: true,
+          },
+        });
+      }
+      resetState();
+    }
+  };
+
+  /**
+   * Notifies of loading status until all function calls return.
+   * @param fn function to call
+   * @returns whatever fn returns.
+   */
+  const runAsLoading = async (fn: (setError: typeof _setError) => void) => {
+    startLoading();
+    try {
+      return await fn(_setError);
+    } finally {
+      stopLoading();
+    }
+  };
+
+  return {
+    runAsLoading,
+  };
+}

package/src/composables/useCameraOrientation.ts

@@ -0,0 +1,34 @@
+import { computed, Ref, unref } from '@vue/composition-api';
+import { MaybeRef } from '@vueuse/core';
+import { mat3 } from 'gl-matrix';
+import { ImageMetadata } from '../store/datasets-images';
+import { LPSAxisDir } from '../types/lps';
+import { getLPSDirections } from '../utils/lps';
+
+/**
+ *
+ * @param {Ref<LPSAxisDir>} viewDirection an LPS view look-direction
+ * @param {Ref<LPSAxisDir>} viewUp an LPS view up-direction
+ * @param {Ref<ImageMetadata>} imageMetadataRef image metadata
+ */
+export function useCameraOrientation(
+  viewDirection: MaybeRef<LPSAxisDir>,
+  viewUp: MaybeRef<LPSAxisDir>,
+  imageMetadataRef: Ref<ImageMetadata>
+) {
+  const orientationMatrix = computed(
+    () => imageMetadataRef.value.orientation as mat3
+  );
+  const lpsDirections = computed(() =>
+    getLPSDirections(orientationMatrix.value)
+  );
+  const cameraDirVec = computed(
+    () => lpsDirections.value[unref(viewDirection)]
+  );
+  const cameraUpVec = computed(() => lpsDirections.value[unref(viewUp)]);
+
+  return {
+    cameraDirVec,
+    cameraUpVec,
+  };
+}