@3cr/viewer-browser 0.0.62 → 0.0.92

package/src/components/modal/MftpWebGL3DRModal.vue

@@ -172,7 +172,7 @@
           height="36"
           style="min-width: 36px !important"
           :color="isLayout2x2 ? 'secondary' : 'primary'"
-          @click="layouts('lo_02')"
+          @click="payloadHandler.layouts(LayoutActions.lo02)"
           ><v-icon>grid_view</v-icon></v-btn
         >
         <v-btn
@@ -180,7 +180,7 @@
           height="36"
           style="min-width: 36px !important"
           :color="isLayout1x3 ? 'secondary' : 'primary'"
-          @click="layouts('lo_03')"
+          @click="payloadHandler.layouts(LayoutActions.lo03)"
           ><v-icon style="rotate: -90deg">view_comfy</v-icon></v-btn
         >
         <v-btn class="" variant="flat" color="red" @click="alterValue(false)"
@@ -202,7 +202,6 @@
           <div
             class="d-flex align-center pb-1"
             :class="drawerCollapsed ? 'py-2' : 'pa-2'"
-            @click="snap"
           >
             <img
               v-if="!drawerCollapsed"
@@ -224,7 +223,6 @@
           <div
             class="text-center mx-auto pa-0 text-white sub-type"
             :style="drawerCollapsed ? 'font-size: 100%' : 'font-size: 140%'"
-            @click="snap"
           >
             Online Viewer
           </div>
@@ -329,7 +327,7 @@
               />
               <v-card-actions class="py-3">
                 <v-select
-                  :value="getCurrentGreyscalePreset()"
+                  :value="currentGreyscalePreset"
                   :items="initialScanState.GreyscalePresets"
                   label="Greyscale Preset"
                   item-text="Name"
@@ -343,7 +341,9 @@
                     closeOnContentClick: true,
                   }"
                   placeholder="Select a Density Preset"
-                  @change="setPreset(PresetsActions.pr01, $event)"
+                  @change="
+                    payloadHandler.setPreset(PresetsActions.pr01, $event)
+                  "
                 >
                   <template #item="{ props, item }">
                     <v-list-item
@@ -352,7 +352,9 @@
                       :title="item.raw.Name"
                       lines="three"
                       @mousedown.prevent
-                      @click="setPreset(PresetsActions.pr01, item.raw)"
+                      @click="
+                        payloadHandler.setPreset(PresetsActions.pr01, item.raw)
+                      "
                     >
                       <template v-slot:prepend>
                         <v-icon
@@ -390,7 +392,9 @@
                   }"
                   placeholder="Select a Colour Preset"
                   return-object
-                  @update:modelValue="setPreset(PresetsActions.pr02, $event)"
+                  @update:modelValue="
+                    payloadHandler.setPreset(PresetsActions.pr02, $event)
+                  "
                 ></v-select>
               </v-card-actions>
             </v-expansion-panel-text>
@@ -431,7 +435,7 @@
           id="webgl-container"
           @on_payload="handleOnPayload"
           @instance_loaded="load"
-          @hover="hoverOverCanvas"
+          @hover="payloadHandler.hoverOverCanvas($event)"
         >
           <div
             class="bordered-event-window"
@@ -471,7 +475,7 @@
                     <div v-if="scanState.Layout.PositionData.length === 1">
                       <v-btn
                         color="transparent"
-                        @click="layouts(previousLayout)"
+                        @click="payloadHandler.layouts(previousLayout)"
                         :icon="true"
                       >
                         <v-icon color="white">fullscreen_exit</v-icon>
@@ -491,8 +495,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 +598,7 @@
                             <v-btn
                               color="primary"
                               @click="
-                                rotateByDeg(
+                                payloadHandler.rotateByDeg(
                                   getCurrentActiveView(layout),
                                   rotationDeg
                                 )
@@ -667,49 +675,67 @@ 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,
+  LayoutActions,
+  NotificationsActions,
   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();
-
-const emit = defineEmits<{
-  instanceLoaded: [void];
-  snap: [void];
-}>();
+} from "@/models/LoadViewerOptions";
+import { PayloadHandler, sendPayload } from "@/dataLayer/payloadHandler";
+import {
+  cMinMax,
+  cSlider,
+  currentColourPreset,
+  currentGreyscalePreset,
+  huMinMax,
+  initialScanState,
+  isLayout1x3,
+  isLayout2x2,
+  previousLayout,
+  scanState,
+  setInitialScanStateFromPayload,
+  setScanStateFromPayload,
+  sMinMax,
+  sSlider,
+  thresholdSlider,
+  tMinMax,
+  transactionStarted,
+  tSlider,
+  windowSlider,
+} from "@/dataLayer/scanState";
+import { getIconForPreset } from "@/dataLayer/iconData";
 
 export interface Props {
   payload?: LoadViewerPayload;
   options?: LoadViewerOptions;
 }
 
+const emit = defineEmits<{
+  instanceLoaded: [void];
+}>();
 const props = withDefaults(defineProps<Props>(), {
   payload: () => ({
     Url: "https://webgl-3dr.singular.health/test_scans/8bdddee1-e581-485d-827d-6aa12eef2fc8/Head+Axial+Axial.3vxl",
@@ -718,121 +744,25 @@ 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";
-});
-
-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();
-      }
-    }
-  } else {
-    const functionToExecute = unref(props.options)[key];
-    if (functionToExecute !== undefined) {
-      functionToExecute();
-    }
-  }
-}
-
-const emptyPayload = { Version: "1.1.0" };
 
+const web_gl = ref<typeof WebGL3DR | null>(null);
+const payloadHandler = new PayloadHandler(web_gl);
 const value = ref<boolean>(false);
 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([
   {
     text: "Reset Scan",
     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);
     },
   },
   {
@@ -854,7 +784,6 @@ const footerItems = ref([
     click: async () => executeOption("OnScreenshot"),
   },
 ]);
-
 const miniMenu = ref([
   {
     icon: "display_settings",
@@ -862,238 +791,79 @@ 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];
-  },
-});
-
-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);
-
-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);
+function executeOption(key: keyof LoadViewerOptions) {
+  if (unref(isDemo)) {
+    executeDemoOption(key);
+  } else {
+    const functionToExecute = unref(props.options)[key];
+    if (functionToExecute !== undefined) {
+      functionToExecute();
+    }
   }
-);
+}
 
-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;
+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,
+};
+
+for (const slider of Object.keys(watchSliders)) {
+  watch(
+    watchSliders[slider as keyof WatchSlidersType],
+    async (value: number) => {
+      await payloadHandler.sliderHandler(slider as SlidersActions, value);
+    }
+  );
 }
-async function rotateByDeg(view: ScanView, deg: number) {
-  await sendPayload(
-    FrontEndInterfaces.scan_orientation,
-    ScanOrientationActions.so01,
-    {
-      Version: "0.0.1",
-      View: view,
-      Angle: deg,
+
+type WatchScanMovementType = {
+  [key in ScanMovementActions]: WatchSource<number>;
+};
+
+//@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
@@ -1108,16 +878,8 @@ function getViewName(index: number) {
     })[index];
 }
 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.layouts(LayoutActions.lo01);
+  await payloadHandler.viewSelection(`vs_0${view + 1}` as ViewSelectionActions);
 }
 
 function closeModal() {
@@ -1130,181 +892,27 @@ 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);
-}
-async function layouts(action: string) {
-  if (action !== "lo_01") previousLayout.value = action;
-  await sendPayload(FrontEndInterfaces.layout, action, emptyPayload);
-}
-async function snap() {
-  emit("snap");
-}
-
-async function setPreset(action: PresetsActions, preset: any) {
-  await sendPayload("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),
-  });
+  await sendPayload(web_gl, "file_management", "fm_01", props.payload);
 }
-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", {
-    Version: "0.0.1",
-    Value: isHovering,
-  });
-  await sendPayload("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;
-
-  switch (notification.Action) {
-    case InteractivityActions.in01:
-    case InteractivityActions.in02:
-    case InteractivityActions.in03:
-    case InteractivityActions.in04:
-      return;
-    default:
-  }
-  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;
+  if (action === FileManagementActions.fm02) {
+    await setInitialScanStateFromPayload(action, message);
+
+    await nextTick();
+    transactionStarted.value = false;
+    scanLoading.value = false;
+    drawerCollapsed.value = false;
+    await payloadHandler.hoverOverCanvas(false);
   }
-
-  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 +921,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 as NotificationsActions, message);
   }
 }
 
@@ -1327,29 +935,18 @@ defineExpose({
   alterValue,
   load,
   handleOnPayload,
-  setScanState,
   sendPayload,
   getIconForPreset,
-  cSlider,
-  sSlider,
-  tSlider,
   thresholdSlider,
   windowSlider,
-  isLayout2x2,
-  isLayout1x3,
   m_closeDialog,
-  getCurrentGreyscalePreset,
   closeModal,
-  snap,
   scanState,
   initialScanState,
   footerItems,
-  rotateByDeg,
   getCurrentActiveView,
   getViewName,
   fullscreenLayout,
-  layouts,
-  setPreset,
   value,
   transactionStarted,
 });