@3cr/viewer-browser 0.0.62 → 0.0.86

package/src/components/modal/MftpWebGL3DRModal.vue

@@ -329,7 +329,7 @@
               />
               <v-card-actions class="py-3">
                 <v-select
-                  :value="getCurrentGreyscalePreset()"
+                  :value="currentGreyscalePreset"
                   :items="initialScanState.GreyscalePresets"
                   label="Greyscale Preset"
                   item-text="Name"
@@ -491,8 +491,12 @@
                         color="transparent"
                         :icon="true"
                         @click="
-                          viewSelection('vs_05');
-                          viewSelection('vs_06');
+                          payloadHandler.viewSelection(
+                            ViewSelectionActions.vs06
+                          );
+                          payloadHandler.viewSelection(
+                            ViewSelectionActions.vs05
+                          );
                         "
                         ><v-icon color="white">home</v-icon></v-btn
                       >
@@ -590,7 +594,7 @@
                             <v-btn
                               color="primary"
                               @click="
-                                rotateByDeg(
+                                payloadHandler.rotateByDeg(
                                   getCurrentActiveView(layout),
                                   rotationDeg
                                 )
@@ -667,38 +671,55 @@ import VerticalSliderSelector from "@/components/sliders/VerticalSliderSelector.
 import { generateDivStyleForLayout } from "@/helpers/layoutOverlayStyle";
 
 import {
-  inflateInitialScanState,
-  inflateScanState,
-} from "@/helpers/modelHelper";
-import {
-  SlidersActions,
-  PresetsActions,
-  ScanMovementActions,
-  ScanOrientationActions,
   FileManagementActions,
   FrontEndInterfaces,
-  AnchorPoint,
-  ColourPresetData,
-  CurrentScanState,
-  InitialScanState,
   PositionData,
+  PresetsActions,
+  ScanMovementActions,
   ScanView,
-  InteractivityActions,
-  NotificationsActions,
-  NotificationPayload,
+  SlidersActions,
+  ViewSelectionActions,
 } from "@3cr/types-ts";
+import { defineEmits, nextTick, ref, unref, watch, WatchSource } from "vue";
 
-import { toNumber } from "@/helpers/utils";
-import { computed, ref, unref, watch, defineEmits, nextTick } from "vue";
 import {
-  defaultOptions,
+  checkIsDemo,
+  demoType,
+  executeDemoOption,
+  isDemo,
+  m_demo,
+  m_demoPatient,
+} from "@/demo/options";
+import { handleNotification } from "@/notifications/notification";
+import DemoPatientModal from "@/demo/DemoPatientModal.vue";
+import DemoModal from "@/demo/DemoModal.vue";
+import { LoadViewerPayload } from "@/models/LoadViewerPayload";
+import {
+  defaultLoadViewerOptions,
   LoadViewerOptions,
-  LoadViewerPayload,
-} from "../../../index";
-
-import { useNotification } from "@kyvg/vue3-notification";
-
-const { notify } = useNotification();
+} from "@/models/LoadViewerOptions";
+import { PayloadHandler, sendPayload } from "@/dataLayer/payloadHandler";
+import {
+  cMinMax,
+  cSlider,
+  currentColourPreset,
+  currentGreyscalePreset,
+  huMinMax,
+  initialScanState,
+  isLayout1x3,
+  isLayout2x2,
+  scanState,
+  setInitialScanStateFromPayload,
+  setScanStateFromPayload,
+  sMinMax,
+  sSlider,
+  thresholdSlider,
+  tMinMax,
+  transactionStarted,
+  tSlider,
+  windowSlider,
+} from "@/dataLayer/scanState";
+import { getIconForPreset } from "@/dataLayer/iconData";
 
 const emit = defineEmits<{
   instanceLoaded: [void];
@@ -718,92 +739,15 @@ const props = withDefaults(defineProps<Props>(), {
       Key: "OWjSMiL/ewUV1V6fGybhKcTyiysTPsIMp2DjdVoOUGI=",
     },
   }),
-  options: () => defaultOptions,
+  options: () => defaultLoadViewerOptions,
 });
-const isDemo = ref<boolean>(false);
-let m_demo = ref<boolean>(false);
-let m_demoPatient = ref<boolean>(false);
-
-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;
-  },
-};
-
-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;
-  },
-};
 
-const demoType = computed(() => {
-  const urlParams = new URLSearchParams(window.location.search);
-  return urlParams.get("demoType") || "licence";
-});
+const web_gl = ref<typeof WebGL3DR | null>(null);
+const payloadHandler = new PayloadHandler(web_gl);
 
 function executeOption(key: keyof LoadViewerOptions) {
   if (unref(isDemo)) {
-    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();
-      }
-    }
+    executeDemoOption(key);
   } else {
     const functionToExecute = unref(props.options)[key];
     if (functionToExecute !== undefined) {
@@ -819,9 +763,6 @@ const drawer = ref<boolean>(true);
 const drawerCollapsed = ref<boolean>(true);
 const scanLoading = ref<boolean>(true);
 const instanceLoaded = ref<boolean>(true);
-const scanState = ref<CurrentScanState>(inflateScanState());
-const initialScanState = ref<InitialScanState>(inflateInitialScanState());
-const currentColourPreset = ref<ColourPresetData | undefined>(undefined);
 const openPanels = ref<number>(0);
 const previousLayout = ref<string>("lo_02");
 const footerItems = ref([
@@ -830,9 +771,8 @@ const footerItems = ref([
     icon: "refresh",
     color: "red",
     click: async () => {
-      console.log("Reset Scan");
-      await viewSelection("vs_05");
-      await viewSelection("vs_06");
+      await payloadHandler.viewSelection(ViewSelectionActions.vs05);
+      await payloadHandler.viewSelection(ViewSelectionActions.vs06);
     },
   },
   {
@@ -862,238 +802,69 @@ const miniMenu = ref([
     tooltip:
       "Tissue Density - Change the view of density within the scan, allowing you to see through a certain density of particles",
   },
-  // { icon: 'display_settings', text: 'Display', tooltip: 'Display - Alter the view of the current scan' },
 ]);
 
-const huMinMax = ref({
-  min: -999999,
-  max: 999999,
-});
-
-const tMinMax = ref({
-  min: 0,
-  max: 999999,
-});
-const sMinMax = ref({
-  min: 0,
-  max: 999999,
-});
-const cMinMax = ref({
-  min: 0,
-  max: 999999,
-});
 const rotationDeg = ref<number>(0);
-const scanStateIncoming = ref<string>("");
-const transactionStarted = ref<boolean>(false);
 const stateOverlay = ref<boolean>(false);
 const m_closeDialog = ref<boolean>(false);
 
-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];
-  },
-});
-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];
-  },
-});
-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];
-  },
-});
-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];
-  },
-});
+type WatchSlidersType = { [key in SlidersActions]: WatchSource<number> };
+const watchSliders: WatchSlidersType = {
+  [SlidersActions.sl01]: () => scanState.value.Display.Brightness,
+  [SlidersActions.sl02]: () => scanState.value.Display.Contrast,
+  [SlidersActions.sl03]: () => scanState.value.Display.Opacity,
+  [SlidersActions.sl04]: () => scanState.value.Display.WindowLower,
+  [SlidersActions.sl05]: () => scanState.value.Display.WindowUpper,
+  [SlidersActions.sl06]: () => scanState.value.Display.ThresholdLower,
+  [SlidersActions.sl07]: () => scanState.value.Display.ThresholdUpper,
+  [SlidersActions.sl08]: () => scanState.value.Slice.TransverseLower,
+  [SlidersActions.sl09]: () => scanState.value.Orientations.Transverse.Slice,
+  [SlidersActions.sl10]: () => scanState.value.Slice.TransverseUpper,
+  [SlidersActions.sl11]: () => scanState.value.Slice.SagittalLower,
+  [SlidersActions.sl12]: () => scanState.value.Orientations.Sagittal.Slice,
+  [SlidersActions.sl13]: () => scanState.value.Slice.SagittalUpper,
+  [SlidersActions.sl14]: () => scanState.value.Slice.CoronalLower,
+  [SlidersActions.sl15]: () => scanState.value.Orientations.Coronal.Slice,
+  [SlidersActions.sl16]: () => scanState.value.Slice.CoronalUpper,
+};
 
-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];
-  },
-});
-const web_gl = ref<typeof WebGL3DR | null>(null);
+for (const slider of Object.keys(watchSliders)) {
+  watch(
+    watchSliders[slider as keyof WatchSlidersType],
+    async (value: number) => {
+      await payloadHandler.sliderHandler(slider as SlidersActions, value);
+    }
+  );
+}
 
-watch(
-  () => scanState.value.Display.Brightness,
-  async (value: number) => {
-    await sliderHandler(SlidersActions.sl01, value);
-  }
-);
-watch(
-  () => scanState.value.Display.Contrast,
-  async (value: number) => {
-    await sliderHandler(SlidersActions.sl02, value);
-  }
-);
-watch(
-  () => scanState.value.Display.Opacity,
-  async (value: number) => {
-    await sliderHandler(SlidersActions.sl03, value);
-  }
-);
-watch(
-  () => scanState.value.Display.WindowLower,
-  async (value: number) => {
-    await sliderHandler(SlidersActions.sl04, value);
-  }
-);
-watch(
-  () => scanState.value.Display.WindowUpper,
-  async (value: number) => {
-    await sliderHandler(SlidersActions.sl05, value);
-  }
-);
-watch(
-  () => scanState.value.Display.ThresholdLower,
-  async (value: number) => {
-    await sliderHandler(SlidersActions.sl06, value);
-  }
-);
-watch(
-  () => scanState.value.Display.ThresholdUpper,
-  async (value: number) => {
-    await sliderHandler(SlidersActions.sl07, value);
-  }
-);
-watch(
-  () => scanState.value.Slice.TransverseLower,
-  async (value: number) => {
-    await sliderHandler(SlidersActions.sl08, value);
-  }
-);
-watch(
-  () => scanState.value.Orientations.Transverse.Slice,
-  async (value: number) => {
-    await sliderHandler(SlidersActions.sl09, value);
-  }
-);
-watch(
-  () => scanState.value.Slice.TransverseUpper,
-  async (value: number) => {
-    await sliderHandler(SlidersActions.sl10, value);
-  }
-);
-watch(
-  () => scanState.value.Slice.SagittalLower,
-  async (value: number) => {
-    await sliderHandler(SlidersActions.sl11, value);
-  }
-);
-watch(
-  () => scanState.value.Orientations.Sagittal.Slice,
-  async (value: number) => {
-    await sliderHandler(SlidersActions.sl12, value);
-  }
-);
-watch(
-  () => scanState.value.Slice.SagittalUpper,
-  async (value: number) => {
-    await sliderHandler(SlidersActions.sl13, value);
-  }
-);
-watch(
-  () => scanState.value.Slice.CoronalLower,
-  async (value: number) => {
-    await sliderHandler(SlidersActions.sl14, value);
-  }
-);
-watch(
-  () => scanState.value.Orientations.Coronal.Slice,
-  async (value: number) => {
-    await sliderHandler(SlidersActions.sl15, value);
-  }
-);
-watch(
-  () => scanState.value.Slice.CoronalUpper,
-  async (value: number) => {
-    await sliderHandler(SlidersActions.sl16, value);
-  }
-);
-watch(
-  () => scanState.value.InteractionSettings.PanSensivitity,
-  async (value: number) => {
-    await scanMovementHandler(ScanMovementActions.sm05, value);
-  }
-);
-watch(
-  () => scanState.value.InteractionSettings.ZoomSensitivity,
-  async (value: number) => {
-    await scanMovementHandler(ScanMovementActions.sm08, value);
-  }
-);
-watch(
-  () => scanState.value.InteractionSettings.RotateSensitivity,
-  async (value: number) => {
-    await scanMovementHandler(ScanMovementActions.sm10, value);
-  }
-);
-watch(
-  () => scanState.value.InteractionSettings.CameraRotateSensitivity,
-  async (value: number) => {
-    await scanMovementHandler(ScanMovementActions.sm12, value);
-  }
-);
+type WatchScanMovementType = {
+  [key in ScanMovementActions]: WatchSource<number>;
+};
 
-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;
-}
-async function rotateByDeg(view: ScanView, deg: number) {
-  await sendPayload(
-    FrontEndInterfaces.scan_orientation,
-    ScanOrientationActions.so01,
-    {
-      Version: "0.0.1",
-      View: view,
-      Angle: deg,
+//@ts-ignore
+const watchScanMovement: WatchScanMovementType = {
+  [ScanMovementActions.sm05]: () =>
+    scanState.value.InteractionSettings.PanSensivitity,
+  [ScanMovementActions.sm08]: () =>
+    scanState.value.InteractionSettings.ZoomSensitivity,
+  [ScanMovementActions.sm10]: () =>
+    scanState.value.InteractionSettings.RotateSensitivity,
+  [ScanMovementActions.sm12]: () =>
+    scanState.value.InteractionSettings.CameraRotateSensitivity,
+};
+
+for (const scanMovement of Object.keys(watchScanMovement)) {
+  watch(
+    watchScanMovement[scanMovement as keyof typeof watchScanMovement],
+    async (value: number) => {
+      await payloadHandler.scanMovementHandler(
+        scanMovement as ScanMovementActions,
+        value
+      );
     }
   );
 }
+
 function getCurrentActiveView(position: PositionData): ScanView {
   return unref(scanState).Layout.PositionData.length !== 1
     ? position.DefaultView
@@ -1109,16 +880,16 @@ function getViewName(index: number) {
 }
 async function fullscreenLayout(view: ScanView) {
   await layouts("lo_01");
-  await viewSelection(`vs_0${view + 1}`);
-}
-async function scanMovementHandler(action: string, value: number) {
-  if (unref(transactionStarted)) return;
-  await scanMovement(action, value);
-}
-async function sliderHandler(action: string, value: number) {
-  if (unref(transactionStarted)) return;
-  await slider(action, value);
+  await payloadHandler.viewSelection(`vs_0${view + 1}` as ViewSelectionActions);
 }
+// async function scanMovementHandler(action: string, value: number) {
+//   if (unref(transactionStarted)) return;
+//   await scanMovement(action, value);
+// }
+// async function sliderHandler(action: string, value: number) {
+//   if (unref(transactionStarted)) return;
+//   await slider(action, value);
+// }
 
 function closeModal() {
   m_closeDialog.value = false;
@@ -1130,181 +901,52 @@ function alterValue(val: boolean) {
     m_closeDialog.value = true;
     return;
   } else {
-    isDemo.value =
-      props.payload.Url ===
-      "https://webgl-3dr.singular.health/test_scans/01440d4e-8b04-4b90-bb2c-698535ce16d6/CHEST.3vxl";
+    checkIsDemo(props.payload);
   }
 
   value.value = val;
 }
-async function sendPayload(
-  interfaceType: string,
-  actionType: string,
-  message: any
-) {
-  await unref(web_gl)?.sendPayload(
-    JSON.stringify({
-      Version: "0.0.1",
-      Interface: interfaceType,
-      Action: actionType,
-      Message: JSON.stringify(message),
-    })
-  );
-}
 async function load() {
   instanceLoaded.value = true;
   scanLoading.value = true;
-  await sendPayload("file_management", "fm_01", props.payload);
-}
-async function viewSelection(action: string) {
-  await sendPayload(FrontEndInterfaces.view_selection, action, emptyPayload);
+  await sendPayload(web_gl, "file_management", "fm_01", props.payload);
 }
+
 async function layouts(action: string) {
   if (action !== "lo_01") previousLayout.value = action;
-  await sendPayload(FrontEndInterfaces.layout, action, emptyPayload);
+  await sendPayload(web_gl, FrontEndInterfaces.layout, action, emptyPayload);
 }
 async function snap() {
   emit("snap");
 }
 
 async function setPreset(action: PresetsActions, preset: any) {
-  await sendPayload("presets", action, preset);
+  await sendPayload(web_gl, "presets", action, preset);
   if (action === PresetsActions.pr02) {
     currentColourPreset.value = preset;
   }
 }
-async function slider(action: string, value: number) {
-  await sendPayload("sliders", action, {
-    Version: "0.0.1",
-    Value: toNumber(value),
-  });
-}
-async function scanMovement(action: string, value: number) {
-  await sendPayload(FrontEndInterfaces.scan_movement, action, {
-    Version: "0.0.1",
-    Value: toNumber(value),
-  });
-}
+
 async function hoverOverCanvas(isHovering: boolean) {
-  await sendPayload("interactivity", "in_01", {
+  await sendPayload(web_gl, "interactivity", "in_01", {
     Version: "0.0.1",
     Value: isHovering,
   });
-  await sendPayload("interactivity", "in_02", {
+  await sendPayload(web_gl, "interactivity", "in_02", {
     Version: "0.0.1",
     Value: isHovering,
   });
 }
-async function i_scanState(_: string, message: string) {
-  transactionStarted.value = true;
-  scanStateIncoming.value = JSON.stringify(JSON.parse(message), null, 2);
-
-  setScanState(message);
-  await nextTick();
-  transactionStarted.value = false;
-}
 async function i_fileManagement(action: string, message: string) {
-  if (action !== FileManagementActions.fm02) return;
-  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];
-
-  await nextTick();
-  transactionStarted.value = false;
-  scanLoading.value = false;
-  drawerCollapsed.value = false;
-  await hoverOverCanvas(false);
-}
-
-async function i_notifications(action: string, message: string) {
-  const notification = JSON.parse(message) as NotificationPayload;
+  if (action === FileManagementActions.fm02) {
+    await setInitialScanStateFromPayload(action, message);
 
-  switch (notification.Action) {
-    case InteractivityActions.in01:
-    case InteractivityActions.in02:
-    case InteractivityActions.in03:
-    case InteractivityActions.in04:
-      return;
-    default:
+    await nextTick();
+    transactionStarted.value = false;
+    scanLoading.value = false;
+    drawerCollapsed.value = false;
+    await hoverOverCanvas(false);
   }
-  if (notification.Action.startsWith("sl")) return;
-
-  let type = "success";
-  switch (action) {
-    // Muting no01
-    case NotificationsActions.no01:
-      type = "success";
-      return;
-
-    case NotificationsActions.no02:
-      type = "warn";
-      break;
-
-    case NotificationsActions.no03:
-      type = "error";
-      break;
-
-    // Muting no04
-    case NotificationsActions.no04:
-      type = "info";
-      return;
-  }
-
-  notify({
-    title: notification.Code,
-    text: notification.Action,
-    type,
-  });
-}
-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
-  );
-});
-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
-  );
-});
-
-function getCurrentGreyscalePreset() {
-  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;
-}
-function setScanState(message: string) {
-  scanState.value = JSON.parse(message) as CurrentScanState;
 }
 
 function handleOnPayload(
@@ -1313,13 +955,13 @@ function handleOnPayload(
   message: string
 ) {
   if (interfaceSet === FrontEndInterfaces.scan_state) {
-    i_scanState(actionSet, message);
+    setScanStateFromPayload(actionSet, message);
   }
   if (interfaceSet === FrontEndInterfaces.file_management) {
     i_fileManagement(actionSet, message);
   }
   if (interfaceSet === FrontEndInterfaces.notifications) {
-    i_notifications(actionSet, message);
+    handleNotification(actionSet, message);
   }
 }
 
@@ -1327,7 +969,6 @@ defineExpose({
   alterValue,
   load,
   handleOnPayload,
-  setScanState,
   sendPayload,
   getIconForPreset,
   cSlider,
@@ -1335,16 +976,13 @@ defineExpose({
   tSlider,
   thresholdSlider,
   windowSlider,
-  isLayout2x2,
-  isLayout1x3,
   m_closeDialog,
-  getCurrentGreyscalePreset,
   closeModal,
   snap,
   scanState,
   initialScanState,
   footerItems,
-  rotateByDeg,
+  // rotateByDeg,
   getCurrentActiveView,
   getViewName,
   fullscreenLayout,