@3cr/viewer-browser 0.0.62 → 0.0.86

package/src/components/modal/__tests__/mftp-webgl-3dr-modal.spec.ts

@@ -14,12 +14,20 @@ import {
   PositionData,
   PresetsActions,
   ScanMovementActions,
-  ScanOrientationActions,
   ScanStateActions,
   ScanView,
   SlidersActions,
 } from "@3cr/types-ts";
 import { flushPromises } from "@vue/test-utils";
+import { PayloadHandler } from "@/dataLayer/payloadHandler";
+import { spyOn } from "@vitest/spy";
+import {
+  currentGreyscalePreset,
+  isLayout1x3,
+  isLayout2x2,
+  setScanState,
+} from "@/dataLayer/scanState";
+import { unref } from "vue";
 
 vi.mock("@3cr/sdk-browser", async (importOriginal) => {
   const mod = (await importOriginal()) as object;
@@ -35,13 +43,17 @@ vi.mock("@kyvg/vue3-notification", async (importOriginal) => {
   const mod = (await importOriginal()) as object;
   return {
     ...mod,
-    useNotification: {
+    useNotification: vi.fn().mockReturnValue({
       notify: vi.fn(),
-    },
+    }),
   };
 });
 
 describe("MftpWebGL3DRModal.vue", () => {
+  let spy = spyOn(PayloadHandler.prototype, "sendPayload").mockImplementation(
+    (interfaceType: string, actionType: string, message: any) =>
+      Promise.resolve()
+  );
   let wrapper = shallowMountVuetify(
     MftpWebGL3DRModal,
     {}
@@ -49,6 +61,11 @@ describe("MftpWebGL3DRModal.vue", () => {
   );
 
   beforeEach(() => {
+    spy = spyOn(PayloadHandler.prototype, "sendPayload").mockImplementation(
+      (interfaceType: string, actionType: string, message: any) =>
+        Promise.resolve()
+    );
+
     wrapper = shallowMountVuetify(
       MftpWebGL3DRModal,
       {}
@@ -364,9 +381,10 @@ describe("MftpWebGL3DRModal.vue", () => {
       { Anchor: AnchorPoint.BOTTOM_RIGHT } as PositionData,
     ];
 
-    wrapper.vm.setScanState(JSON.stringify(scanState));
+    setScanState(JSON.stringify(scanState));
 
-    expect(wrapper.vm.isLayout2x2).toBeTruthy();
+    expect(unref(isLayout2x2)).toBeTruthy();
+    expect(unref(isLayout1x3)).toBeFalsy();
   });
 
   it("should isLayout1x3", async () => {
@@ -378,9 +396,10 @@ describe("MftpWebGL3DRModal.vue", () => {
       { Anchor: AnchorPoint.BOTTOM_RIGHT } as PositionData,
     ];
 
-    wrapper.vm.setScanState(JSON.stringify(scanState));
+    setScanState(JSON.stringify(scanState));
 
-    expect(wrapper.vm.isLayout1x3).toBeTruthy();
+    expect(unref(isLayout1x3)).toBeTruthy();
+    expect(unref(isLayout2x2)).toBeFalsy();
   });
 
   it("should snap", async () => {
@@ -407,9 +426,9 @@ describe("MftpWebGL3DRModal.vue", () => {
     scanState.Display.WindowLower = 30;
     scanState.Display.WindowUpper = 60;
 
-    wrapper.vm.setScanState(JSON.stringify(scanState));
+    setScanState(JSON.stringify(scanState));
     await flushPromises();
-    expect(wrapper.vm.getCurrentGreyscalePreset()).toBe("testing");
+    expect(unref(currentGreyscalePreset)).toBe("testing");
   });
 
   it("should getCurrentGreyscalePreset", async () => {
@@ -432,9 +451,9 @@ describe("MftpWebGL3DRModal.vue", () => {
     scanState.Display.WindowLower = 40;
     scanState.Display.WindowUpper = 50;
 
-    wrapper.vm.setScanState(JSON.stringify(scanState));
+    setScanState(JSON.stringify(scanState));
     await flushPromises();
-    expect(wrapper.vm.getCurrentGreyscalePreset()).toBe("testing");
+    expect(unref(currentGreyscalePreset)).toBe("testing");
   });
 
   it("should getCurrentGreyscalePreset", async () => {
@@ -457,66 +476,42 @@ describe("MftpWebGL3DRModal.vue", () => {
     scanState.Display.WindowLower = 45;
     scanState.Display.WindowUpper = 46;
 
-    wrapper.vm.setScanState(JSON.stringify(scanState));
+    setScanState(JSON.stringify(scanState));
     await flushPromises();
-    expect(wrapper.vm.getCurrentGreyscalePreset()).toBe(undefined);
-  });
-
-  it("should rotateByDeg", async () => {
-    const view = ScanView.Coronal;
-    const deg = 10;
-
-    vi.spyOn(wrapper.vm, "sendPayload").mockImplementation(
-      (it: string, a: string, m: any) => {
-        expect(it).toBe(FrontEndInterfaces.scan_orientation);
-        expect(a).toBe(ScanOrientationActions.so01);
-        expect(m).toStrictEqual({
-          Version: "0.0.1",
-          View: view,
-          Angle: deg,
-        });
-        return Promise.resolve();
-      }
-    );
-
-    await wrapper.vm.rotateByDeg(view, deg);
+    expect(unref(currentGreyscalePreset)).toBe(undefined);
   });
 
   it("should fullscreenLayout", async () => {
     const view = ScanView.Coronal;
-
-    vi.spyOn(wrapper.vm, "sendPayload")
-      .mockImplementationOnce((it: string, a: string, m: any) => {
-        expect(it).toBe(FrontEndInterfaces.layout);
-        expect(a).toBe("lo_01");
-        expect(m).toStrictEqual({
-          Version: "0.0.1",
-        });
-        return Promise.resolve();
-      })
-      .mockImplementationOnce((it: string, a: string, m: any) => {
-        expect(it).toBe(FrontEndInterfaces.view_selection);
-        expect(a).toBe(`vs_0${view + 1}`);
-        expect(m).toStrictEqual({
-          Version: "0.0.1",
-        });
-        return Promise.resolve();
-      });
-
     await wrapper.vm.fullscreenLayout(view);
+    // expect(spy).toHaveBeenNthCalledWith(
+    //   1,
+    //   FrontEndInterfaces.view_selection,
+    //   `vs_0${view + 1}`,
+    //   {
+    //     Version: "1.1.0",
+    //   }
+    // );
+    expect(spy).toHaveBeenCalledWith(
+      FrontEndInterfaces.view_selection,
+      `vs_0${view + 1}`,
+      {
+        Version: "1.1.0",
+      }
+    );
   });
 
   it("should layouts", async () => {
-    vi.spyOn(wrapper.vm, "sendPayload").mockImplementationOnce(
-      (it: string, a: string, m: any) => {
-        expect(it).toBe(FrontEndInterfaces.layout);
-        expect(a).toBe("lo_02");
-        expect(m).toStrictEqual({
-          Version: "0.0.1",
-        });
-        return Promise.resolve();
-      }
-    );
+    // vi.spyOn(wrapper.vm, "sendPayload").mockImplementationOnce(
+    //   (it: string, a: string, m: any) => {
+    //     expect(it).toBe(FrontEndInterfaces.layout);
+    //     expect(a).toBe("lo_02");
+    //     expect(m).toStrictEqual({
+    //       Version: "0.0.1",
+    //     });
+    //     return Promise.resolve();
+    //   }
+    // );
 
     await wrapper.vm.layouts("lo_02");
   });
@@ -525,14 +520,14 @@ describe("MftpWebGL3DRModal.vue", () => {
     const action = PresetsActions.pr01;
     const preset = {};
 
-    vi.spyOn(wrapper.vm, "sendPayload").mockImplementationOnce(
-      (it: string, a: string, m: any) => {
-        expect(it).toBe(FrontEndInterfaces.presets);
-        expect(a).toBe(action);
-        expect(m).toStrictEqual(preset);
-        return Promise.resolve();
-      }
-    );
+    // vi.spyOn(wrapper.vm, "sendPayload").mockImplementationOnce(
+    //   (it: string, a: string, m: any) => {
+    //     expect(it).toBe(FrontEndInterfaces.presets);
+    //     expect(a).toBe(action);
+    //     expect(m).toStrictEqual(preset);
+    //     return Promise.resolve();
+    //   }
+    // );
 
     await wrapper.vm.setPreset(action, preset);
   });
@@ -541,20 +536,20 @@ describe("MftpWebGL3DRModal.vue", () => {
     const action = PresetsActions.pr02;
     const preset = {};
 
-    vi.spyOn(wrapper.vm, "sendPayload").mockImplementationOnce(
-      (it: string, a: string, m: any) => {
-        expect(it).toBe(FrontEndInterfaces.presets);
-        expect(a).toBe(action);
-        expect(m).toStrictEqual(preset);
-        return Promise.resolve();
-      }
-    );
+    // vi.spyOn(wrapper.vm, "sendPayload").mockImplementationOnce(
+    //   (it: string, a: string, m: any) => {
+    //     expect(it).toBe(FrontEndInterfaces.presets);
+    //     expect(a).toBe(action);
+    //     expect(m).toStrictEqual(preset);
+    //     return Promise.resolve();
+    //   }
+    // );
 
     await wrapper.vm.setPreset(action, preset);
   });
 
   it("should getCurrentGreyscalePreset", async () => {
-    expect(wrapper.vm.getCurrentGreyscalePreset()).toBe(undefined);
+    expect(unref(currentGreyscalePreset)).toBe(undefined);
   });
 
   it("should getViewName 3D Volume", async () => {
@@ -610,7 +605,7 @@ describe("MftpWebGL3DRModal.vue", () => {
         Version: "1.0.0",
       },
     ];
-    await wrapper.vm.setScanState(JSON.stringify(initalState));
+    await setScanState(JSON.stringify(initalState));
 
     expect(
       wrapper.vm.getCurrentActiveView({
@@ -655,7 +650,7 @@ async function testWatcherForDisplay(
     Version: "0.0.1",
     Value: (scanState.Display as any)[key],
   });
-  wrapper.vm.setScanState(JSON.stringify(scanState));
+  setScanState(JSON.stringify(scanState));
 
   await flushPromises();
 }
@@ -672,7 +667,7 @@ async function testWatcherForSlice(
     Version: "0.0.1",
     Value: (scanState.Slice as any)[key],
   });
-  wrapper.vm.setScanState(JSON.stringify(scanState));
+  setScanState(JSON.stringify(scanState));
 
   await flushPromises();
 }
@@ -689,7 +684,7 @@ async function testWatcherForOrientation(
     Version: "0.0.1",
     Value: (scanState.Orientations as any)[key].Slice,
   });
-  wrapper.vm.setScanState(JSON.stringify(scanState));
+  setScanState(JSON.stringify(scanState));
 
   await flushPromises();
 }
@@ -706,7 +701,7 @@ async function testWatcherForInteractionSettings(
     Version: "0.0.1",
     Value: (scanState.InteractionSettings as any)[key],
   });
-  wrapper.vm.setScanState(JSON.stringify(scanState));
+  setScanState(JSON.stringify(scanState));
 
   await flushPromises();
 }

package/src/components/selectors/ValueSelector.vue

@@ -35,6 +35,10 @@ const sliderValue = computed({
     emit("update:value", Math.floor(val));
   },
 });
+
+defineExpose({
+  sliderValue,
+});
 </script>
 
 <template>

package/src/components/selectors/__tests__/value-selector.spec.ts

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

package/src/components/sliders/DoubleSliderSelector.vue

@@ -35,10 +35,12 @@ const sliderValue = computed({
   },
   set(value: Array<number>) {
     let val = value;
-    if (value[0] > props.max) val[0] = props.max;
-    if (value[1] > props.max) val[1] = props.max;
-    if (value[0] < props.min) val[0] = props.min;
-    if (value[1] < props.min) val[1] = props.min;
+    if (val[0] > props.max) val[0] = props.max;
+    if (val[1] > props.max) val[1] = props.max;
+    if (val[0] < props.min) val[0] = props.min;
+    if (val[1] < props.min) val[1] = props.min;
+    console.log(val);
+    console.log(props);
     const normalised = [Math.floor(val[0]), Math.floor(val[1])];
     emit("update:value", normalised);
   },
@@ -57,6 +59,10 @@ watch(
   },
   { deep: true }
 );
+
+defineExpose({
+  sliderValue,
+});
 </script>
 
 <template>

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,98 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { PayloadHandler } from "@/dataLayer/payloadHandler";
+import { Ref, UnwrapRef } from "vue";
+import WebGL3DR from "@/components/WebGL3DR.vue";
+import { spyOn } from "@vitest/spy";
+import {
+  FrontEndInterfaces,
+  ScanOrientationActions,
+  ScanView,
+  SlidersActions,
+} from "@3cr/types-ts";
+import { toNumber } from "@/helpers/utils";
+import { 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(() => {
+      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),
+      });
+    });
+  });
+});

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,89 @@
+import { Ref, unref, UnwrapRef } from "vue";
+import WebGL3DR from "@/components/WebGL3DR.vue";
+import {
+  FrontEndInterfaces,
+  ScanMovementActions,
+  ScanOrientationActions,
+  ScanView,
+  SlidersActions,
+  ViewSelectionActions,
+} from "@3cr/types-ts";
+import { transactionStarted } from "@/dataLayer/scanState";
+import { toNumber } from "@/helpers/utils";
+
+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);
+  }
+
+  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),
+    })
+  );
+}