@3cr/viewer-browser 0.0.62 → 0.0.92

package/src/components/sliders/__tests__/double-slider-selector.spec.ts

@@ -7,11 +7,15 @@ import { flushPromises } from "@vue/test-utils";
 describe("DoubleSliderSelector.vue", () => {
   let wrapper = mountVuetify(DoubleSliderSelector, {
     value: [0, 0],
+    min: 0,
+    max: 100,
   });
 
   beforeEach(() => {
     wrapper = mountVuetify(DoubleSliderSelector, {
       value: [0, 0],
+      min: 0,
+      max: 100,
     });
     vi.useFakeTimers();
   });
@@ -59,6 +63,34 @@ describe("DoubleSliderSelector.vue", () => {
     await slider.setValue([1, 2]);
   });
 
+  it("should set min text lower than min limits", async () => {
+    wrapper.vm.sliderValue = [-10, 0];
+    await flushPromises();
+
+    expect(wrapper.emitted()["update:value"]).toStrictEqual([[[0, 0]]]);
+  });
+
+  it("should set max text lower than min limits", async () => {
+    wrapper.vm.sliderValue = [-100, -10];
+    await flushPromises();
+
+    expect(wrapper.emitted()["update:value"]).toStrictEqual([[[0, 0]]]);
+  });
+
+  it("should set min text higher than max limits", async () => {
+    wrapper.vm.sliderValue = [9000, 9001];
+    await flushPromises();
+
+    expect(wrapper.emitted()["update:value"]).toStrictEqual([[[100, 100]]]);
+  });
+
+  it("should set max text higher than max limits", async () => {
+    wrapper.vm.sliderValue = [50, 9000];
+    await flushPromises();
+
+    expect(wrapper.emitted()["update:value"]).toStrictEqual([[[50, 100]]]);
+  });
+
   it("should set min text", async () => {
     const slider = wrapper.findAllComponents(".v-text-field");
 

package/src/dataLayer/__tests__/payload-handler.spec.ts

@@ -0,0 +1,214 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { emptyPayload, PayloadHandler } from "@/dataLayer/payloadHandler";
+import { Ref, unref, UnwrapRef } from "vue";
+import WebGL3DR from "@/components/WebGL3DR.vue";
+import { spyOn } from "@vitest/spy";
+import {
+  ColourPresetData,
+  FrontEndInterfaces,
+  LayoutActions,
+  PresetsActions,
+  ScanMovementActions,
+  ScanOrientationActions,
+  ScanView,
+  SlidersActions,
+} from "@3cr/types-ts";
+import { toNumber } from "@/helpers/utils";
+import {
+  currentColourPreset,
+  previousLayout,
+  transactionStarted,
+} from "@/dataLayer/scanState";
+
+const sendPayloadFunction = vi.fn();
+const mockWebglInstance = {
+  value: {
+    sendPayload: sendPayloadFunction,
+  },
+} as unknown as Ref<UnwrapRef<typeof WebGL3DR | null>>;
+
+describe("payloadHandler.ts", () => {
+  it("should create instance", () => {
+    expect(new PayloadHandler(mockWebglInstance)).toBeTruthy();
+  });
+
+  describe("payload functions", () => {
+    let instance: PayloadHandler;
+    beforeEach(() => {
+      transactionStarted.value = false;
+      previousLayout.value = LayoutActions.lo01;
+      currentColourPreset.value = {} as ColourPresetData;
+      vi.resetAllMocks();
+      instance = new PayloadHandler(mockWebglInstance);
+      console.log(instance);
+    });
+
+    it("should sendPayload", async () => {
+      expect(sendPayloadFunction).not.toHaveBeenCalled();
+
+      await instance.sendPayload("123", "123", {});
+
+      expect(sendPayloadFunction).toHaveBeenCalledWith(
+        JSON.stringify({
+          Version: "0.0.1",
+          Interface: "123",
+          Action: "123",
+          Message: JSON.stringify({}),
+        })
+      );
+    });
+
+    it("should rotateByDeg", async () => {
+      const view = ScanView.Coronal;
+      const deg = 100;
+      const spy = spyOn(instance, "sendPayload");
+      expect(spy).not.toHaveBeenCalled();
+
+      await instance.rotateByDeg(view, deg);
+
+      expect(spy).toHaveBeenCalledWith(
+        FrontEndInterfaces.scan_orientation,
+        ScanOrientationActions.so01,
+        {
+          Version: "0.0.1",
+          View: view,
+          Angle: deg,
+        }
+      );
+    });
+
+    it("should sliderHandler", async () => {
+      const action = SlidersActions.sl08;
+      const value = 100;
+      const spy = spyOn(instance, "sendPayload");
+      expect(spy).not.toHaveBeenCalled();
+
+      await instance.sliderHandler(action, value);
+
+      expect(spy).toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
+        Version: "0.0.1",
+        Value: toNumber(value),
+      });
+    });
+
+    it("should not sliderHandler transactionStarted", async () => {
+      transactionStarted.value = true;
+      const action = SlidersActions.sl08;
+      const value = 100;
+      const spy = spyOn(instance, "sendPayload");
+      expect(spy).not.toHaveBeenCalled();
+
+      await instance.sliderHandler(action, value);
+
+      expect(spy).not.toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
+        Version: "0.0.1",
+        Value: toNumber(value),
+      });
+    });
+
+    it("should scanMovementHandler", async () => {
+      const action = ScanMovementActions.sm05;
+      const value = 100;
+      const spy = spyOn(instance, "sendPayload");
+      expect(spy).not.toHaveBeenCalled();
+
+      await instance.scanMovementHandler(action, value);
+
+      expect(spy).toHaveBeenCalledWith(
+        FrontEndInterfaces.scan_movement,
+        action,
+        {
+          Version: "0.0.1",
+          Value: toNumber(value),
+        }
+      );
+    });
+
+    it("should not scanMovementHandler transactionStarted", async () => {
+      transactionStarted.value = true;
+      const action = ScanMovementActions.sm05;
+      const value = 100;
+      const spy = spyOn(instance, "sendPayload");
+      expect(spy).not.toHaveBeenCalled();
+
+      await instance.scanMovementHandler(action, value);
+
+      expect(spy).not.toHaveBeenCalledWith(
+        FrontEndInterfaces.scan_movement,
+        action,
+        {
+          Version: "0.0.1",
+          Value: toNumber(value),
+        }
+      );
+    });
+
+    it("should layouts", async () => {
+      const action = LayoutActions.lo01;
+      const spy = spyOn(instance, "sendPayload");
+      expect(spy).not.toHaveBeenCalled();
+
+      await instance.layouts(action);
+
+      expect(spy).toHaveBeenCalledWith(
+        FrontEndInterfaces.layout,
+        action,
+        emptyPayload
+      );
+    });
+
+    it("should set prevLayout", async () => {
+      const action = LayoutActions.lo02;
+      const spy = spyOn(instance, "sendPayload");
+      expect(spy).not.toHaveBeenCalled();
+      expect(unref(previousLayout)).not.toBe(LayoutActions.lo02);
+
+      await instance.layouts(action);
+
+      expect(unref(previousLayout)).toBe(LayoutActions.lo02);
+      expect(spy).toHaveBeenCalledWith(
+        FrontEndInterfaces.layout,
+        action,
+        emptyPayload
+      );
+    });
+
+    it("should set setPreset", async () => {
+      const action = PresetsActions.pr01;
+      const data = {
+        asd: "123",
+      };
+      const spy = spyOn(instance, "sendPayload");
+      expect(spy).not.toHaveBeenCalled();
+      expect(unref(currentColourPreset)).not.toBe(data);
+
+      await instance.setPreset(action, data);
+
+      expect(unref(currentColourPreset)).not.toBe(data);
+      expect(spy).toHaveBeenCalledWith(
+        FrontEndInterfaces.presets,
+        action,
+        data
+      );
+    });
+
+    it("should set setPreset change colour", async () => {
+      const action = PresetsActions.pr02;
+      const data = {
+        asd: "123",
+      };
+      const spy = spyOn(instance, "sendPayload");
+      expect(spy).not.toHaveBeenCalled();
+      expect(unref(currentColourPreset)).not.toBe(data);
+
+      await instance.setPreset(action, data);
+
+      expect(unref(currentColourPreset)).toStrictEqual(data);
+      expect(spy).toHaveBeenCalledWith(
+        FrontEndInterfaces.presets,
+        action,
+        data
+      );
+    });
+  });
+});

package/src/dataLayer/iconData.ts

@@ -0,0 +1,11 @@
+export function getIconForPreset(presetName: string): string | undefined {
+  if (presetName === "Bone") return "fa:fas fa-bone";
+  if (presetName === "Brain") return "fa:fas fa-brain";
+  if (presetName === "Liver") return "custom:liver_icon";
+  if (presetName === "Lungs") return "fa:fas fa-lungs";
+  if (presetName === "Muscle") return "custom:muscle_icon";
+  if (presetName === "Temporal Bones") return "custom:temporal_bones_icon";
+  if (presetName === "Soft Tissue") return "custom:torso_icon";
+  if (presetName === "Skin") return "custom:skin_icon";
+  return undefined;
+}

package/src/dataLayer/payloadHandler.ts

@@ -0,0 +1,126 @@
+import { Ref, unref, UnwrapRef } from "vue";
+import WebGL3DR from "@/components/WebGL3DR.vue";
+import {
+  FrontEndInterfaces,
+  InteractivityActions,
+  LayoutActions,
+  PresetsActions,
+  ScanMovementActions,
+  ScanOrientationActions,
+  ScanView,
+  SlidersActions,
+  ViewSelectionActions,
+} from "@3cr/types-ts";
+import {
+  currentColourPreset,
+  previousLayout,
+  transactionStarted,
+} from "@/dataLayer/scanState";
+import { toNumber } from "@/helpers/utils";
+
+export const emptyPayload = { Version: "1.1.0" };
+
+export class PayloadHandler {
+  private readonly instance: Ref<UnwrapRef<typeof WebGL3DR | null>>;
+  constructor(protected webglInstance: Ref<UnwrapRef<typeof WebGL3DR | null>>) {
+    this.instance = webglInstance;
+  }
+
+  async sendPayload(interfaceType: string, actionType: string, message: any) {
+    await this.instance.value?.sendPayload(
+      JSON.stringify({
+        Version: "0.0.1",
+        Interface: interfaceType,
+        Action: actionType,
+        Message: JSON.stringify(message),
+      })
+    );
+  }
+  async rotateByDeg(view: ScanView, deg: number) {
+    await this.sendPayload(
+      FrontEndInterfaces.scan_orientation,
+      ScanOrientationActions.so01,
+      {
+        Version: "0.0.1",
+        View: view,
+        Angle: deg,
+      }
+    );
+  }
+  async viewSelection(action: ViewSelectionActions) {
+    await this.sendPayload(
+      FrontEndInterfaces.view_selection,
+      action,
+      emptyPayload
+    );
+  }
+
+  async sliderHandler(action: SlidersActions, value: number) {
+    if (unref(transactionStarted)) return;
+    await this.slider(action, value);
+  }
+
+  async scanMovementHandler(action: ScanMovementActions, value: number) {
+    if (unref(transactionStarted)) return;
+    await this.scanMovement(action, value);
+  }
+  async layouts(action: LayoutActions) {
+    if (action !== LayoutActions.lo01) previousLayout.value = action;
+    await this.sendPayload(FrontEndInterfaces.layout, action, emptyPayload);
+  }
+
+  async setPreset(action: PresetsActions, preset: any) {
+    await this.sendPayload(FrontEndInterfaces.presets, action, preset);
+    if (action === PresetsActions.pr02) {
+      currentColourPreset.value = preset;
+    }
+  }
+
+  async hoverOverCanvas(isHovering: boolean) {
+    await this.sendPayload(
+      FrontEndInterfaces.interactivity,
+      InteractivityActions.in01,
+      {
+        Version: "0.0.1",
+        Value: isHovering,
+      }
+    );
+    await this.sendPayload(
+      FrontEndInterfaces.interactivity,
+      InteractivityActions.in02,
+      {
+        Version: "0.0.1",
+        Value: isHovering,
+      }
+    );
+  }
+
+  private async scanMovement(action: ScanMovementActions, value: number) {
+    await this.sendPayload(FrontEndInterfaces.scan_movement, action, {
+      Version: "0.0.1",
+      Value: toNumber(value),
+    });
+  }
+  private async slider(action: SlidersActions, value: number) {
+    await this.sendPayload(FrontEndInterfaces.sliders, action, {
+      Version: "0.0.1",
+      Value: toNumber(value),
+    });
+  }
+}
+
+export async function sendPayload(
+  instance: Ref<UnwrapRef<typeof WebGL3DR | null>>,
+  interfaceType: string,
+  actionType: string,
+  message: any
+) {
+  await unref(instance)?.sendPayload(
+    JSON.stringify({
+      Version: "0.0.1",
+      Interface: interfaceType,
+      Action: actionType,
+      Message: JSON.stringify(message),
+    })
+  );
+}

package/src/dataLayer/scanState.ts

@@ -0,0 +1,171 @@
+import { computed, nextTick, ref, unref } from "vue";
+import {
+  AnchorPoint,
+  ColourPresetData,
+  CurrentScanState,
+  InitialScanState,
+  LayoutActions,
+} from "@3cr/types-ts";
+import {
+  inflateInitialScanState,
+  inflateScanState,
+} from "@/helpers/modelHelper";
+
+export const currentColourPreset = ref<ColourPresetData | undefined>(undefined);
+
+export const transactionStarted = ref<boolean>(false);
+export const scanStateIncoming = ref<string>("");
+export const scanState = ref<CurrentScanState>(inflateScanState());
+export const initialScanState = ref<InitialScanState>(
+  inflateInitialScanState()
+);
+export const previousLayout = ref<LayoutActions>(LayoutActions.lo02);
+
+export const huMinMax = ref({
+  min: -999999,
+  max: 999999,
+});
+
+export const tMinMax = ref({
+  min: 0,
+  max: 999999,
+});
+export const sMinMax = ref({
+  min: 0,
+  max: 999999,
+});
+export const cMinMax = ref({
+  min: 0,
+  max: 999999,
+});
+
+export const windowSlider = computed({
+  get() {
+    return [
+      unref(scanState).Display.WindowLower,
+      unref(scanState).Display.WindowUpper,
+    ];
+  },
+  set(value: Array<number>) {
+    scanState.value.Display.WindowLower = value[0];
+    scanState.value.Display.WindowUpper = value[1];
+  },
+});
+export const thresholdSlider = computed({
+  get() {
+    return [
+      Math.trunc(unref(scanState).Display.ThresholdLower),
+      Math.trunc(unref(scanState).Display.ThresholdUpper),
+    ];
+  },
+  set(value: Array<number>) {
+    scanState.value.Display.ThresholdLower = value[0];
+    scanState.value.Display.ThresholdUpper = value[1];
+  },
+});
+export const tSlider = computed({
+  get() {
+    return [
+      Math.trunc(unref(scanState).Slice.TransverseLower),
+      Math.trunc(unref(scanState).Slice.TransverseUpper),
+    ];
+  },
+  set(value: Array<number>) {
+    scanState.value.Slice.TransverseLower = value[0];
+    scanState.value.Slice.TransverseLower = value[1];
+  },
+});
+export const sSlider = computed({
+  get() {
+    return [
+      Math.trunc(unref(scanState).Slice.SagittalLower),
+      Math.trunc(unref(scanState).Slice.SagittalUpper),
+    ];
+  },
+  set(value: Array<number>) {
+    scanState.value.Slice.SagittalLower = value[0];
+    scanState.value.Slice.SagittalUpper = value[1];
+  },
+});
+
+export const cSlider = computed({
+  get() {
+    return [
+      Math.trunc(unref(scanState).Slice.CoronalLower),
+      Math.trunc(unref(scanState).Slice.CoronalUpper),
+    ];
+  },
+  set(value: Array<number>) {
+    scanState.value.Slice.CoronalLower = value[0];
+    scanState.value.Slice.CoronalUpper = value[1];
+  },
+});
+
+export const isLayout2x2 = computed(() => {
+  return (
+    unref(scanState).Layout.PositionData.length > 1 &&
+    unref(scanState).Layout.PositionData[0].Anchor === AnchorPoint.TOP_LEFT &&
+    unref(scanState).Layout.PositionData[1].Anchor === AnchorPoint.TOP_RIGHT &&
+    unref(scanState).Layout.PositionData[2].Anchor ===
+      AnchorPoint.BOTTOM_LEFT &&
+    unref(scanState).Layout.PositionData[3].Anchor === AnchorPoint.BOTTOM_RIGHT
+  );
+});
+export const isLayout1x3 = computed(() => {
+  return (
+    unref(scanState).Layout.PositionData.length > 1 &&
+    unref(scanState).Layout.PositionData[0].Anchor === AnchorPoint.CENTER &&
+    unref(scanState).Layout.PositionData[1].Anchor === AnchorPoint.TOP_RIGHT &&
+    unref(scanState).Layout.PositionData[2].Anchor === AnchorPoint.RIGHT &&
+    unref(scanState).Layout.PositionData[3].Anchor === AnchorPoint.BOTTOM_RIGHT
+  );
+});
+
+export const currentGreyscalePreset = computed(() => {
+  for (const preset of unref(initialScanState).GreyscalePresets) {
+    if (
+      (unref(scanState).Display.WindowLower === preset.Lower ||
+        (preset.Lower < unref(initialScanState).HuLower &&
+          unref(scanState).Display.WindowLower ===
+            unref(initialScanState).HuLower)) &&
+      (unref(scanState).Display.WindowUpper === preset.Upper ||
+        (preset.Upper > unref(initialScanState).HuUpper &&
+          unref(scanState).Display.WindowUpper ===
+            unref(initialScanState).HuUpper))
+    ) {
+      return preset.Name;
+    }
+  }
+  return undefined;
+});
+
+export async function setScanStateFromPayload(_: string, message: string) {
+  transactionStarted.value = true;
+  scanStateIncoming.value = JSON.stringify(JSON.parse(message), null, 2);
+
+  setScanState(message);
+  await nextTick();
+  transactionStarted.value = false;
+}
+export async function setInitialScanStateFromPayload(
+  _: string,
+  message: string
+) {
+  transactionStarted.value = true;
+
+  scanStateIncoming.value = JSON.stringify(JSON.parse(message), null, 2);
+  const obj = JSON.parse(unref(scanStateIncoming)) as InitialScanState;
+
+  setScanState(JSON.stringify(obj.DefaultDisplaySettings, null, 2));
+  initialScanState.value = obj;
+  huMinMax.value.max = obj.HuUpper;
+  huMinMax.value.min = obj.HuLower;
+  sMinMax.value.max = obj.XSlices;
+  cMinMax.value.max = obj.YSlices;
+  tMinMax.value.max = obj.ZSlices;
+  currentColourPreset.value = obj.ColourPresets[0];
+}
+
+export function setScanState(message: string) {
+  scanState.value = JSON.parse(message) as CurrentScanState;
+}

package/src/demo/options.ts

@@ -0,0 +1,93 @@
+import { computed, ref, unref } from "vue";
+import { LoadViewerOptions } from "@/models/LoadViewerOptions";
+import { LoadViewerPayload } from "@/models/LoadViewerPayload";
+
+export function checkIsDemo(payload: LoadViewerPayload) {
+  isDemo.value =
+    payload.Url ===
+    "https://webgl-3dr.singular.health/test_scans/01440d4e-8b04-4b90-bb2c-698535ce16d6/CHEST.3vxl";
+}
+
+export const isDemo = ref<boolean>(false);
+export const m_demo = ref<boolean>(false);
+export const m_demoPatient = ref<boolean>(false);
+export const demoLicenceOptions: LoadViewerOptions = {
+  OnClosePopup: () => Promise.resolve(),
+  OnExitViewer: () => {
+    m_demo.value = true;
+  },
+  OnLoadNewDicomSeries: () => {
+    m_demo.value = true;
+  },
+  OnDownloadDicomSeries: () => {
+    m_demo.value = true;
+  },
+  OnLoadSavedSession: () => {
+    m_demo.value = true;
+  },
+  OnSaveSession: () => {
+    m_demo.value = true;
+  },
+  OnSendTo3rdParty: () => {
+    m_demo.value = true;
+  },
+  OnShareToMobile: () => {
+    m_demo.value = true;
+  },
+  OnShare: () => {
+    m_demo.value = true;
+  },
+  OnScreenshot: () => {
+    m_demo.value = true;
+  },
+};
+
+export const demoPatientOptions: LoadViewerOptions = {
+  OnClosePopup: () => Promise.resolve(),
+  OnExitViewer: () => {
+    m_demoPatient.value = true;
+  },
+  OnLoadNewDicomSeries: () => {
+    m_demoPatient.value = true;
+  },
+  OnDownloadDicomSeries: () => {
+    m_demoPatient.value = true;
+  },
+  OnLoadSavedSession: () => {
+    m_demoPatient.value = true;
+  },
+  OnSaveSession: () => {
+    m_demoPatient.value = true;
+  },
+  OnSendTo3rdParty: () => {
+    m_demoPatient.value = true;
+  },
+  OnShareToMobile: () => {
+    m_demoPatient.value = true;
+  },
+  OnShare: () => {
+    m_demoPatient.value = true;
+  },
+  OnScreenshot: () => {
+    m_demoPatient.value = true;
+  },
+};
+
+export const demoType = computed(() => {
+  const urlParams = new URLSearchParams(window.location.search);
+  return (urlParams.get("demoType") || "licence").toLowerCase();
+});
+
+export function executeDemoOption(key: keyof LoadViewerOptions) {
+  if (unref(demoType) === "licence") {
+    const functionToExecute = demoLicenceOptions[key];
+    if (functionToExecute !== undefined) {
+      functionToExecute();
+    }
+  } else if (unref(demoType) === "patient") {
+    const functionToExecute = demoPatientOptions[key];
+    if (functionToExecute !== undefined) {
+      functionToExecute();
+    }
+  }
+}

package/src/models/Callbacks.ts

@@ -0,0 +1,2 @@
+export type ViewerCallback = () => void;
+export type ViewerAsyncCallback = () => Promise<void>;

package/src/models/LoadViewerOptions.ts

@@ -0,0 +1,27 @@
+import { ViewerAsyncCallback, ViewerCallback } from "@/models/Callbacks";
+
+export interface LoadViewerOptions {
+  OnShare?: ViewerCallback | ViewerAsyncCallback | undefined;
+  OnScreenshot?: ViewerCallback | ViewerAsyncCallback | undefined;
+  OnLoadNewDicomSeries?: ViewerCallback | ViewerAsyncCallback | undefined;
+  OnDownloadDicomSeries?: ViewerCallback | ViewerAsyncCallback | undefined;
+  OnLoadSavedSession?: ViewerCallback | ViewerAsyncCallback | undefined;
+  OnShareToMobile?: ViewerCallback | ViewerAsyncCallback | undefined;
+  OnSendTo3rdParty?: ViewerCallback | ViewerAsyncCallback | undefined;
+  OnSaveSession?: ViewerCallback | ViewerAsyncCallback | undefined;
+  OnClosePopup?: ViewerCallback | ViewerAsyncCallback | undefined;
+  OnExitViewer?: ViewerCallback | ViewerAsyncCallback | undefined;
+}
+
+export const defaultLoadViewerOptions: LoadViewerOptions = {
+  OnClosePopup: () => Promise.resolve(),
+  OnExitViewer: () => Promise.resolve(),
+  OnLoadNewDicomSeries: () => Promise.resolve(),
+  OnDownloadDicomSeries: () => Promise.resolve(),
+  OnLoadSavedSession: () => Promise.resolve(),
+  OnSaveSession: () => Promise.resolve(),
+  OnSendTo3rdParty: () => Promise.resolve(),
+  OnShareToMobile: () => Promise.resolve(),
+  OnShare: () => Promise.resolve(),
+  OnScreenshot: () => Promise.resolve(),
+};

package/src/models/LoadViewerPayload.ts

@@ -0,0 +1,8 @@
+export interface LoadViewerPayload {
+  Url: string;
+  DecryptionKey: MftpDecryptionKey;
+}
+export interface MftpDecryptionKey {
+  Key: string;
+  Iv: string;
+}