@3cr/viewer-browser 0.0.53 → 0.0.57

package/src/components/modal/MftpWebGL3DRModal.vue

@@ -1,22 +1,34 @@
+<!-- /* c8 ignore start */ -->
 <template>
+  <DemoModal v-model:modal="m_demo" />
   <v-dialog
+    id="cr-viewer"
     class="pa-0 ma-0 overflow-y-auto overflow-x-hidden"
     :modelValue="value"
     style="max-height: unset"
     :scrollable="false"
     fullscreen
     persistent
-    @click:outside.prevent.stop="alterValue(false)"
     @input="alterValue"
   >
-    <v-dialog v-model="m_closeDialog">
+    <v-dialog
+      v-model:model-value="m_closeDialog"
+      id="close-dialog-prompt"
+      data-test="closemodal"
+    >
       <v-card class="pa-1 ma-auto position-relative" max-width="450">
         <v-card-title>Close Viewer?</v-card-title>
-        <v-card-text>Are you sure you want to close the Online Viewer?</v-card-text>
+        <v-card-text
+          >Are you sure you want to close the Online Viewer?</v-card-text
+        >
         <v-card-actions>
-          <v-btn variant="text" color="red" @click="m_closeDialog = false"> Cancel </v-btn>
+          <v-btn variant="text" color="red" @click="m_closeDialog = false">
+            Cancel
+          </v-btn>
           <v-spacer />
-          <v-btn color="primary" @click="closeModal"> Close without saving </v-btn>
+          <v-btn color="primary" @click="closeModal">
+            Close without saving
+          </v-btn>
           <v-btn color="primary" @click="closeModal"> Save Session </v-btn>
         </v-card-actions>
       </v-card>
@@ -27,7 +39,12 @@
       height="100vh"
     >
       <v-toolbar dense height="48">
-        <v-menu :close-on-content-click="false" :close-on-click="true" open-on-hover offset-y>
+        <v-menu
+          :close-on-content-click="false"
+          :close-on-click="true"
+          open-on-hover
+          offset-y
+        >
           <template #activator="{ props, isActive }">
             <v-btn
               v-bind="props"
@@ -38,61 +55,80 @@
               <template #prepend>
                 <v-icon>description</v-icon>
               </template>
-               File
+              File
             </v-btn>
           </template>
           <v-card class="">
             <v-list>
-                <v-list-item disabled>
-                  <template v-slot:prepend>
-                    <v-icon> upload </v-icon>
-                  </template>
-                  <v-list-item-title
-                    >Load New DICOM Series&nbsp;<v-chip x-small color="success">Coming Soon</v-chip></v-list-item-title
-                  >
-                </v-list-item>
-<!--                <v-list-item @click="downloadDcm">-->
-<!--                  <v-list-item-icon><v-icon> download </v-icon></v-list-item-icon>-->
-<!--                  <v-list-item-title>Download DICOM Series</v-list-item-title>-->
-<!--                </v-list-item>-->
-                <v-list-item disabled>
-                  <template v-slot:prepend>
-                    <v-icon> sync </v-icon>
-                  </template>
-                  <v-list-item-title
-                    >Load Saved Session&nbsp;<v-chip x-small color="success">Coming Soon</v-chip></v-list-item-title
-                  >
-                </v-list-item>
-                <v-list-item disabled>
-                  <template v-slot:prepend>
-                    <v-icon> share </v-icon>
-                  </template>
-                  <v-list-item-title>Share&nbsp;<v-chip x-small color="success">Coming Soon</v-chip></v-list-item-title>
-                </v-list-item>
-                <v-list-item @click="alterValue(false)">
-                  <template v-slot:prepend>
-                    <v-icon> close </v-icon>
-                  </template>
-                  <v-list-item-title>Close Viewer</v-list-item-title>
-                </v-list-item>
+              <v-list-item @click="executeOption('OnLoadNewDicomSeries')">
+                <template v-slot:prepend>
+                  <v-icon> upload </v-icon>
+                </template>
+                <v-list-item-title>Load New DICOM Series</v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="executeOption('OnDownloadDicomSeries')">
+                <template v-slot:prepend>
+                  <v-icon> download </v-icon>
+                </template>
+                <v-list-item-title>Download DICOM Series</v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="executeOption('OnLoadSavedSession')">
+                <template v-slot:prepend>
+                  <v-icon> sync </v-icon>
+                </template>
+                <v-list-item-title> Load Saved Session </v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="executeOption('OnShare')">
+                <template v-slot:prepend>
+                  <v-icon> share </v-icon>
+                </template>
+                <v-list-item-title>Share</v-list-item-title>
+              </v-list-item>
+              <v-list-item
+                @click="
+                  executeOption('OnClosePopup');
+                  alterValue(false);
+                "
+              >
+                <template v-slot:prepend>
+                  <v-icon> close </v-icon>
+                </template>
+                <v-list-item-title>Close Viewer</v-list-item-title>
+              </v-list-item>
             </v-list>
           </v-card>
         </v-menu>
-        <v-menu :close-on-content-click="false" :close-on-click="true" open-on-hover offset-y>
+        <v-menu
+          :close-on-content-click="false"
+          :close-on-click="true"
+          open-on-hover
+          offset-y
+        >
           <template #activator="{ props, isActive }">
             <v-btn
               variant="flat"
-              v-bind="props" :color="isActive ? 'secondary' : 'primary'">
+              v-bind="props"
+              :color="isActive ? 'secondary' : 'primary'"
+            >
               <template #prepend>
                 <v-icon>settings</v-icon>
               </template>
-               Settings
+              Settings
             </v-btn>
           </template>
-          <v-card min-width="400" class=" pa-4">
-            <SliderSelector v-model:value="scanState.Display.Brightness" label="Adjust Brightness" />
-            <SliderSelector v-model:value="scanState.Display.Contrast" label="Adjust Contrast" />
-            <SliderSelector v-model:value="scanState.Display.Opacity" label="Adjust Opacity" />
+          <v-card min-width="400" class="pa-4">
+            <SliderSelector
+              v-model:value="scanState.Display.Brightness"
+              label="Adjust Brightness"
+            />
+            <SliderSelector
+              v-model:value="scanState.Display.Contrast"
+              label="Adjust Contrast"
+            />
+            <SliderSelector
+              v-model:value="scanState.Display.Opacity"
+              label="Adjust Opacity"
+            />
             <v-divider class="my-4" />
             <SliderSelector
               v-model:value="scanState.InteractionSettings.PanSensivitity"
@@ -113,7 +149,9 @@
               label="Rotate Sensitivity"
             />
             <SliderSelector
-              v-model:value="scanState.InteractionSettings.CameraRotateSensitivity"
+              v-model:value="
+                scanState.InteractionSettings.CameraRotateSensitivity
+              "
               :min="0"
               :max="100"
               label="Camera Rotate Sensitivity"
@@ -122,7 +160,9 @@
         </v-menu>
 
         <v-spacer />
-        <div class="font-weight-bold">Not for Diagnostic Use</div>
+        <div class="font-weight-bold">
+          <span v-if="isDemo">[DEMO]&nbsp;</span>Not for Diagnostic Use
+        </div>
         <v-spacer />
         <v-btn
           class="ma-1 mr-0 pa-1"
@@ -140,7 +180,9 @@
           @click="layouts('lo_03')"
           ><v-icon style="rotate: -90deg">view_comfy</v-icon></v-btn
         >
-        <v-btn class="" variant="flat" color="red" @click="alterValue(false)">Close Viewer</v-btn>
+        <v-btn class="" variant="flat" color="red" @click="alterValue(false)"
+          >Close Viewer</v-btn
+        >
       </v-toolbar>
       <v-navigation-drawer
         v-model="drawer"
@@ -154,7 +196,11 @@
         width="300"
       >
         <template v-slot:prepend>
-          <div class="d-flex align-center pb-1" :class="drawerCollapsed ? 'py-2' : 'pa-2'" @click="snap">
+          <div
+            class="d-flex align-center pb-1"
+            :class="drawerCollapsed ? 'py-2' : 'pa-2'"
+            @click="snap"
+          >
             <img
               v-if="!drawerCollapsed"
               src="../../assets/images/dark/3dicom-logo.svg"
@@ -197,14 +243,24 @@
                     <div
                       :class="[drawerCollapsed && 'mx-auto']"
                       class="mx-2"
-
-                      :style="drawerCollapsed && 'margin-left: 10px !important; margin-right: 10px !important;'">
-                      <v-icon :large="drawerCollapsed" :size="drawerCollapsed ? 32 : 24" :color="item.color">
-                        {{ item.icon || 'radio_button_checked' }}
+                      :style="
+                        drawerCollapsed &&
+                        'margin-left: 10px !important; margin-right: 10px !important;'
+                      "
+                    >
+                      <v-icon
+                        :large="drawerCollapsed"
+                        :size="drawerCollapsed ? 32 : 24"
+                        :color="item.color"
+                      >
+                        {{ item.icon || "radio_button_checked" }}
                       </v-icon>
                     </div>
                   </template>
-                  <v-list-item-title v-if="!drawerCollapsed" class="text-white font-weight-medium ml-3">
+                  <v-list-item-title
+                    v-if="!drawerCollapsed"
+                    class="text-white font-weight-medium ml-3"
+                  >
                     {{ item.text }}
                   </v-list-item-title>
                 </v-list-item>
@@ -225,9 +281,16 @@
                   drawerCollapsed = false;
                 "
               >
-                  <v-icon size="36" color="white" style="margin-left: 8px !important; margin-right: 10px !important;">
-                    {{ item.icon || 'radio_button_checked' }}
-                  </v-icon>
+                <v-icon
+                  size="36"
+                  color="white"
+                  style="
+                    margin-left: 8px !important;
+                    margin-right: 10px !important;
+                  "
+                >
+                  {{ item.icon || "radio_button_checked" }}
+                </v-icon>
               </v-list-item>
             </template>
             {{ item.tooltip }}
@@ -239,24 +302,35 @@
           style="max-height: 95vh"
           theme="dark"
           accordion
-          class="mt-1  transparent pr-0 mr-0"
+          class="mt-1 transparent pr-0 mr-0"
         >
           <v-expansion-panel class="transparent px-0">
-            <ExpansionHeaderMiniMenu :mini-menu="miniMenu[0]" />
-            <v-expansion-panel-text class="px-0" >
+            <v-expansion-panel-title class="font-weight-bold transparent">
+              <span
+                ><v-icon small>{{ miniMenu[0].icon }}</v-icon
+                >&nbsp;&nbsp;{{ miniMenu[0].text }}</span
+              >
+              <v-spacer />
+            </v-expansion-panel-title>
+            <v-expansion-panel-text class="px-0">
               <DoubleSliderSelector
                 v-model:value="windowSlider"
                 label="Skin to Bone"
                 :min="huMinMax.min"
                 :max="huMinMax.max"
               />
-              <DoubleSliderSelector v-model:value="thresholdSlider" label="Fine Adjustment" v-bind="huMinMax" />
+              <DoubleSliderSelector
+                v-model:value="thresholdSlider"
+                label="Fine Adjustment"
+                v-bind="huMinMax"
+              />
               <v-card-actions class="py-3">
                 <v-select
                   :value="getCurrentGreyscalePreset()"
                   :items="initialScanState.GreyscalePresets"
                   label="Greyscale Preset"
                   item-text="Name"
+                  theme="light"
                   density="compact"
                   variant="outlined"
                   persistent-placeholder
@@ -266,7 +340,7 @@
                     closeOnContentClick: true,
                   }"
                   placeholder="Select a Density Preset"
-                  @change="setPreset(PresetActions.pr01, $event)"
+                  @change="setPreset(PresetsActions.pr01, $event)"
                 >
                   <template #item="{ props, item }">
                     <v-list-item
@@ -274,22 +348,27 @@
                       ripple
                       :title="item.raw.Name"
                       lines="three"
-
                       @mousedown.prevent
-                      @click="setPreset(PresetActions.pr01, item.raw)"
+                      @click="setPreset(PresetsActions.pr01, item.raw)"
                     >
                       <template v-slot:prepend>
-                        <v-icon :icon="getIconForPreset(item.raw.Name)"></v-icon>
+                        <v-icon
+                          :icon="getIconForPreset(item.raw.Name)"
+                        ></v-icon>
                       </template>
                       <template v-slot:subtitle>
-                        Skin Density: <span class="text-mono">{{ item.raw.Lower }}</span>
+                        Skin Density:
+                        <span class="text-mono">{{ item.raw.Lower }}</span>
                         <v-spacer />
-                        Bone Density: <span class="text-mono">{{ item.raw.Upper }}</span>
+                        Bone Density:
+                        <span class="text-mono">{{ item.raw.Upper }}</span>
                       </template>
                     </v-list-item>
                   </template>
                   <template v-slot:selection="{ item }">
-                    <span v-if="item.raw === undefined || !item.raw.Name">None</span>
+                    <span v-if="item.raw === undefined || !item.raw.Name"
+                      >None</span
+                    >
                     <span v-else>{{ item.raw.Name }}</span>
                   </template>
                 </v-select>
@@ -308,12 +387,11 @@
                   }"
                   placeholder="Select a Colour Preset"
                   return-object
-                  @update:modelValue="setPreset(PresetActions.pr02, $event)"
+                  @update:modelValue="setPreset(PresetsActions.pr02, $event)"
                 ></v-select>
               </v-card-actions>
             </v-expansion-panel-text>
           </v-expansion-panel>
-
         </v-expansion-panels>
       </v-navigation-drawer>
 
@@ -333,15 +411,21 @@
         :style="drawerCollapsed ? 'left: 68px' : 'left: 300px'"
         @click="drawerCollapsed = !drawerCollapsed"
       >
-        <v-icon>{{ drawerCollapsed ? 'chevron_right' : 'chevron_left' }}</v-icon>
+        <v-icon>{{
+          drawerCollapsed ? "chevron_right" : "chevron_left"
+        }}</v-icon>
       </v-btn>
 
-      <div class="position-relative pa-0" :style="drawerCollapsed ? 'margin-left: 68px' : 'margin-left: 300px'">
+      <div
+        class="position-relative pa-0"
+        :style="drawerCollapsed ? 'margin-left: 68px' : 'margin-left: 300px'"
+      >
         <WebGL3DR
           v-show="instanceLoaded && !scanLoading"
           :class="!(instanceLoaded && !scanLoading) && 'no-pointer-events'"
           v-if="value"
           ref="web_gl"
+          id="webgl-container"
           @on_payload="handleOnPayload"
           @instance_loaded="load"
           @hover="hoverOverCanvas"
@@ -352,140 +436,195 @@
             :key="layout.Anchor"
             :style="{
               ...generateDivStyleForLayout(layout),
-              cursor: getCurrentActiveView(layout) === ScanView.Volume ? 'grab !important' : 'default',
+              cursor:
+                getCurrentActiveView(layout) === ScanView.Volume
+                  ? 'grab !important'
+                  : 'default',
             }"
+            :data-box-internal="layout.DefaultView"
           >
             <v-hover>
               <template v-slot:default="{ isHovering, props }">
-              <div style="width: 100%; height: 100%" v-bind="props">
-                <div class="buttons-in-view" v-show="isHovering" >
-
-                  <div v-if="scanState.Layout.PositionData.length !== 1">
-                    <v-btn
-                      color="transparent"
-                      @click="fullscreenLayout(layout.DefaultView)"
-                      :icon="true"
+                <div style="width: 100%; height: 100%" v-bind="props">
+                  <div class="buttons-in-view" v-show="isHovering">
+                    <div v-if="scanState.Layout.PositionData.length !== 1">
+                      <v-btn
+                        color="transparent"
+                        @click="fullscreenLayout(layout.DefaultView)"
+                        :icon="true"
+                      >
+                        <v-icon color="white">fullscreen</v-icon>
+                      </v-btn>
+                      <v-tooltip
+                        target="cursor"
+                        location="top"
+                        activator="parent"
+                      >
+                        Make
+                        {{ getViewName(getCurrentActiveView(layout)) }}
+                        fullscreen
+                      </v-tooltip>
+                    </div>
+                    <div v-if="scanState.Layout.PositionData.length === 1">
+                      <v-btn
+                        color="transparent"
+                        @click="layouts(previousLayout)"
+                        :icon="true"
+                      >
+                        <v-icon color="white">fullscreen_exit</v-icon>
+                      </v-btn>
+                      <v-tooltip
+                        target="cursor"
+                        location="top"
+                        activator="parent"
+                      >
+                        Exit Fullscreen View
+                      </v-tooltip>
+                    </div>
+                    <div
+                      v-if="getCurrentActiveView(layout) === ScanView.Volume"
                     >
-                      <v-icon color="white">fullscreen</v-icon>
-
-                    </v-btn>
-                    <v-tooltip target="cursor" location="top" activator="parent">
-                      Make {{ getViewName(getCurrentActiveView(layout)) }} fullscreen
-                    </v-tooltip>
-                  </div>
-                  <div v-if="scanState.Layout.PositionData.length === 1">
-                    <v-btn
-                      color="transparent"
-                      @click="layouts(previousLayout)"
-                      :icon="true"
+                      <v-btn
+                        color="transparent"
+                        :icon="true"
+                        @click="
+                          viewSelection('vs_05');
+                          viewSelection('vs_06');
+                        "
+                        ><v-icon color="white">home</v-icon></v-btn
+                      >
+                      <v-tooltip
+                        target="cursor"
+                        location="top"
+                        activator="parent"
+                      >
+                        Reset volume to default view
+                      </v-tooltip>
+                    </div>
+                    <div
+                      v-if="getCurrentActiveView(layout) === ScanView.Volume"
                     >
-                      <v-icon color="white">fullscreen_exit</v-icon>
-                    </v-btn>
-                    <v-tooltip target="cursor" location="top" activator="parent">
-                      Exit Fullscreen View
-                    </v-tooltip>
-                  </div>
-                  <div v-if="getCurrentActiveView(layout) === ScanView.Volume">
-                    <v-btn
-                      color="transparent"
-                      :icon="true"
-                      @click="
-                        viewSelection('vs_05');
-                        viewSelection('vs_06');
-                      "
-                      ><v-icon color="white">home</v-icon></v-btn
+                      <v-menu
+                        :close-on-content-click="false"
+                        :close-on-click="true"
+                      >
+                        <template v-slot:activator="{ props }">
+                          <div v-bind="{ ...props }">
+                            <v-btn color="transparent" :icon="true">
+                              <v-icon color="white">cut</v-icon>
+                            </v-btn>
+                            <v-tooltip
+                              target="cursor"
+                              location="top"
+                              activator="parent"
+                            >
+                              Slice the 3D Volume
+                            </v-tooltip>
+                          </div>
+                        </template>
+                        <v-card min-width="400" class="pb-2">
+                          <v-card-title>Slice into the 3D Volume</v-card-title>
+                          <DoubleSliderSelector
+                            v-model="tSlider"
+                            label="Transverse"
+                            v-bind="tMinMax"
+                          />
+                          <DoubleSliderSelector
+                            v-model="sSlider"
+                            label="Sagittal"
+                            v-bind="sMinMax"
+                          />
+                          <DoubleSliderSelector
+                            v-model="cSlider"
+                            label="Coronal"
+                            v-bind="cMinMax"
+                          />
+                        </v-card>
+                      </v-menu>
+                    </div>
+                    <div
+                      v-if="getCurrentActiveView(layout) !== ScanView.Volume"
                     >
-                    <v-tooltip target="cursor" location="top" activator="parent">
-                      Reset volume to default view
-                    </v-tooltip>
-                  </div>
-                  <div v-if="getCurrentActiveView(layout) === ScanView.Volume">
-                    <v-menu :close-on-content-click="false" :close-on-click="true">
-                      <template v-slot:activator="{ props }">
-                        <div                            v-bind="{ ...props }"
-                        >
-                          <v-btn
-                            color="transparent"
-                            :icon="true"
-                          >
-                            <v-icon color="white">cut</v-icon>
-                          </v-btn>
-                          <v-tooltip target="cursor" location="top" activator="parent">
-                            Slice the 3D Volume
+                      <v-menu
+                        :close-on-content-click="false"
+                        :close-on-click="true"
+                        offset-overflow
+                        top
+                      >
+                        <template v-slot:activator="{ props }">
+                          <v-tooltip top>
+                            <template #activator="{ props: ttprops }">
+                              <v-btn
+                                v-bind="{ ...props, ...ttprops }"
+                                icon
+                                class="icon transparent"
+                              >
+                                <v-icon color="white">360</v-icon>
+                              </v-btn>
+                            </template>
+                            Rotate
+                            {{ getViewName(getCurrentActiveView(layout)) }} by
+                            an angle
                           </v-tooltip>
-                        </div>
-                      </template>
-                      <v-card min-width="400" class="pb-2">
-                        <v-card-title>Slice into the 3D Volume</v-card-title>
-                        <DoubleSliderSelector v-model="tSlider" label="Transverse" v-bind="tMinMax" />
-                        <DoubleSliderSelector v-model="sSlider" label="Sagittal" v-bind="sMinMax" />
-                        <DoubleSliderSelector v-model="cSlider" label="Coronal" v-bind="cMinMax" />
-                      </v-card>
-                    </v-menu>
-                  </div>
-                  <div v-if="getCurrentActiveView(layout) !== ScanView.Volume">
-                    <v-menu :close-on-content-click="false" :close-on-click="true" offset-overflow top>
-                      <template v-slot:activator="{ props }">
-                        <v-tooltip top>
-                          <template #activator="{ props: ttprops}">
+                        </template>
+                        <v-card min-width="200" width="200" class="pb-2">
+                          <v-card-subtitle
+                            >Rotate
+                            {{ getViewName(getCurrentActiveView(layout)) }} by
+                            an angle</v-card-subtitle
+                          >
+                          <v-card-text class="py-0">
+                            <v-text-field
+                              hide-details
+                              outlined
+                              v-model="rotationDeg"
+                              type="number"
+                              suffix="deg"
+                            ></v-text-field>
+                          </v-card-text>
+                          <v-card-actions>
+                            <v-spacer />
                             <v-btn
-                              v-bind="{ ...props, ...ttprops }"
-                              icon
-                              class="icon transparent"
+                              color="primary"
+                              @click="
+                                rotateByDeg(
+                                  getCurrentActiveView(layout),
+                                  rotationDeg
+                                )
+                              "
+                              >Rotate</v-btn
                             >
-                              <v-icon color="white">360</v-icon>
-                            </v-btn>
-                          </template>
-                          Rotate {{ getViewName(getCurrentActiveView(layout)) }} by an angle
-                        </v-tooltip>
-                      </template>
-                      <v-card min-width="200" width="200" class="pb-2">
-                        <v-card-subtitle
-                          >Rotate {{ getViewName(getCurrentActiveView(layout)) }} by an angle</v-card-subtitle
-                        >
-                        <v-card-text class="py-0">
-                          <v-text-field
-                            hide-details
-                            outlined
-                            v-model="rotationDeg"
-                            type="number"
-                            suffix="deg"
-                          ></v-text-field>
-                        </v-card-text>
-                        <v-card-actions>
-                          <v-spacer />
-                          <v-btn color="primary" @click="rotateByDeg(getCurrentActiveView(layout), rotationDeg)"
-                            >Rotate</v-btn
-                          >
-                        </v-card-actions>
-                      </v-card>
-                    </v-menu>
+                          </v-card-actions>
+                        </v-card>
+                      </v-menu>
+                    </div>
+                  </div>
+                  <div class="slider-in-view" v-if="isHovering">
+                    <VerticalSliderSelector
+                      v-if="
+                        getCurrentActiveView(layout) === ScanView.Transverse
+                      "
+                      v-model:value="scanState.Orientations.Transverse.Slice"
+                      v-bind="tMinMax"
+                    />
+                    <VerticalSliderSelector
+                      v-if="getCurrentActiveView(layout) === ScanView.Coronal"
+                      v-model:value="scanState.Orientations.Coronal.Slice"
+                      v-bind="cMinMax"
+                    />
+                    <VerticalSliderSelector
+                      v-if="getCurrentActiveView(layout) === ScanView.Sagittal"
+                      v-model:value="scanState.Orientations.Sagittal.Slice"
+                      v-bind="sMinMax"
+                    />
                   </div>
-                </div>
-                <div class="slider-in-view" v-if="isHovering">
-                  <VerticalSliderSelector
-                    v-if="getCurrentActiveView(layout) === ScanView.Transverse"
-                    v-model:value="scanState.Orientations.Transverse.Slice"
-                    v-bind="tMinMax"
-                  />
-                  <VerticalSliderSelector
-                    v-if="getCurrentActiveView(layout) === ScanView.Coronal"
-                    v-model:value="scanState.Orientations.Coronal.Slice"
-                    v-bind="cMinMax"
-                  />
-                  <VerticalSliderSelector
-                    v-if="getCurrentActiveView(layout) === ScanView.Sagittal"
-                    v-model:value="scanState.Orientations.Sagittal.Slice"
-                    v-bind="sMinMax"
-                  />
-                </div>
 
-                <div class="top-lhc" v-if="isHovering">
-                  <div class="white--text">
-                    {{ getViewName(getCurrentActiveView(layout)) }}
+                  <div class="top-lhc" v-if="isHovering">
+                    <div class="white--text">
+                      {{ getViewName(getCurrentActiveView(layout)) }}
+                    </div>
                   </div>
                 </div>
-              </div>
               </template>
             </v-hover>
           </div>
@@ -493,10 +632,16 @@
       </div>
 
       <LoadingSpinner v-if="!instanceLoaded" />
-      <LoadingSpinner v-if="scanLoading" text="Rendering your scan in <span class='sub-type'>3DICOM</span>" />
+      <LoadingSpinner v-if="scanLoading" text="Rendering your scan in 3D" />
       <v-textarea
         v-if="stateOverlay"
-        style="position: absolute; top: 0px; right: -0px; width: 240px; z-index: 10000"
+        style="
+          position: absolute;
+          top: 0px;
+          right: -0px;
+          width: 240px;
+          z-index: 10000;
+        "
         class="text--white"
         color="white"
         dark
@@ -508,66 +653,115 @@
     </v-card>
   </v-dialog>
 </template>
-<script setup lang="ts" >
+<!-- /* c8 ignore stop */ -->
+<script setup lang="ts">
+import LoadingSpinner from "@/components/loading/LoadingSpinner.vue";
+import WebGL3DR from "@/components/WebGL3DR.vue";
+import DoubleSliderSelector from "@/components/sliders/DoubleSliderSelector.vue";
+import SliderSelector from "@/components/selectors/ValueSelector.vue";
+import VerticalSliderSelector from "@/components/sliders/VerticalSliderSelector.vue";
 
-import ExpansionHeaderMiniMenu from '@/components/expansion-panels/ExpansionHeaderMiniMenu.vue';
-import LoadingSpinner from '@/components/loading/LoadingSpinner.vue';
-import WebGL3DR from '@/components/WebGL3DR.vue';
-import DoubleSliderSelector from '@/components/sliders/DoubleSliderSelector.vue';
-import SliderSelector from '@/components/sliders/SliderSelector.vue';
-import VerticalSliderSelector from '@/components/sliders/VerticalSliderSelector.vue';
+import { generateDivStyleForLayout } from "@/helpers/layoutOverlayStyle";
 
-import { generateDivStyleForLayout } from '@/helpers/layoutOverlayStyle';
 import {
-  SliderActions,
-  PresetActions,
+  inflateInitialScanState,
+  inflateScanState,
+} from "@/helpers/modelHelper";
+import {
+  SlidersActions,
+  PresetsActions,
   ScanMovementActions,
   ScanOrientationActions,
   FileManagementActions,
   FrontEndInterfaces,
-} from '@/helpers/models';
-import {
-  inflateInitialScanState,
-  inflateScanState,
-} from '../../helpers/modelHelper';
-import {
   AnchorPoint,
   ColourPresetData,
   CurrentScanState,
   InitialScanState,
   PositionData,
   ScanView,
-} from '@3cr/types-ts';
+  InteractivityActions,
+  NotificationsActions,
+  NotificationPayload,
+} from "@3cr/types-ts";
 
-import { toNumber } from '@/helpers/utils';
-import {computed, ref, unref, watch, defineEmits, nextTick} from "vue";
-import {LoadViewerPayload} from "../../../index";
+import { toNumber } from "@/helpers/utils";
+import { computed, ref, unref, watch, defineEmits, nextTick } from "vue";
+import {
+  defaultOptions,
+  LoadViewerOptions,
+  LoadViewerPayload,
+} from "../../../index";
 
 const emit = defineEmits<{
   instanceLoaded: [void];
+  snap: [void];
 }>();
 
-defineExpose({
-  alterValue,
-  load
-});
-
 export interface Props {
-  payload: LoadViewerPayload;
+  payload?: LoadViewerPayload;
+  options?: LoadViewerOptions;
 }
-const componentKey = ref(0);
 
 const props = withDefaults(defineProps<Props>(), {
   payload: () => ({
-    Url:"https://webgl-3dr.singular.health/test_scans/8bdddee1-e581-485d-827d-6aa12eef2fc8/Head+Axial+Axial.3vxl",
-    DecryptionKey:{
-      Iv:"x856FgjpYDsRhIa3BFj5cg==",
-      Key:"OWjSMiL/ewUV1V6fGybhKcTyiysTPsIMp2DjdVoOUGI="
-    }
-  })
+    Url: "https://webgl-3dr.singular.health/test_scans/8bdddee1-e581-485d-827d-6aa12eef2fc8/Head+Axial+Axial.3vxl",
+    DecryptionKey: {
+      Iv: "x856FgjpYDsRhIa3BFj5cg==",
+      Key: "OWjSMiL/ewUV1V6fGybhKcTyiysTPsIMp2DjdVoOUGI=",
+    },
+  }),
+  options: () => defaultOptions,
 });
+const isDemo = ref<boolean>(false);
+let m_demo = ref<boolean>(false);
+
+const demoOptions: 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;
+  },
+};
+
+function executeOption(key: keyof LoadViewerOptions) {
+  if (unref(isDemo)) {
+    const functionToExecute = demoOptions[key];
+    if (functionToExecute !== undefined) {
+      functionToExecute();
+    }
+  } else {
+    const functionToExecute = unref(props.options)[key];
+    if (functionToExecute !== undefined) {
+      functionToExecute();
+    }
+  }
+}
 
-const emptyPayload = { Version: '1.1.0' };
+const emptyPayload = { Version: "1.1.0" };
 
 const value = ref<boolean>(false);
 const drawer = ref<boolean>(true);
@@ -578,222 +772,295 @@ 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 previousLayout = ref<string>("lo_02");
 const footerItems = ref([
   {
-    text: 'Reset Scan',
-    icon: 'refresh',
-    color: 'red',
+    text: "Reset Scan",
+    icon: "refresh",
+    color: "red",
     click: async () => {
-      console.log('Reset Scan');
-      await viewSelection('vs_05');
-      await viewSelection('vs_06');
+      console.log("Reset Scan");
+      await viewSelection("vs_05");
+      await viewSelection("vs_06");
     },
   },
   {
-    text: 'Send to 3rd Party',
-    icon: 'send',
-    color: 'blue',
-    click: () => alterValue(false),
+    text: "Send to 3rd Party",
+    icon: "send",
+    color: "blue",
+    click: async () => executeOption("OnSendTo3rdParty"),
   },
   {
-    text: 'Share to Mobile / VR',
-    icon: 'share',
-    color: 'yellow',
-    click: () => alterValue(false),
+    text: "Share to Mobile / VR",
+    icon: "share",
+    color: "yellow",
+    click: async () => executeOption("OnShareToMobile"),
   },
   {
-    text: 'Screenshot View',
-    icon: 'screenshot_region',
-    color: 'green',
-    click: () => {
-      snap();
-    },
+    text: "Screenshot View",
+    icon: "screenshot_region",
+    color: "green",
+    click: async () => executeOption("OnScreenshot"),
   },
 ]);
 
 const miniMenu = ref([
   {
-    icon: 'display_settings',
-    text: 'Tissue Density',
+    icon: "display_settings",
+    text: "Tissue Density",
     tooltip:
-      'Tissue Density - Change the view of density within the scan, allowing you to see through a certain density of particles',
+      "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)
-
-watch(currentColourPreset, (val) => {console.log(val)})
+});
+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];
+    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)];
+    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)];
+    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)];
+    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)];
+    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(SliderActions.sl01, value);
-})
-watch(() => scanState.value.Display.Contrast, async (value: number) => {
-  await sliderHandler(SliderActions.sl02, value);
-})
-watch(() => scanState.value.Display.Opacity, async (value: number) => {
-  await sliderHandler(SliderActions.sl03, value);
-})
-watch(() => scanState.value.Display.WindowLower, async (value: number) => {
-  await sliderHandler(SliderActions.sl04, value);
-})
-watch(() => scanState.value.Display.WindowUpper, async (value: number) => {
-  await sliderHandler(SliderActions.sl05, value);
-})
-watch(() => scanState.value.Display.ThresholdLower, async (value: number) => {
-  await sliderHandler(SliderActions.sl06, value);
-})
-watch(() => scanState.value.Display.ThresholdUpper, async (value: number) => {
-  await sliderHandler(SliderActions.sl07, value);
-})
-watch(() => scanState.value.Slice.TransverseLower, async (value: number) => {
-  await sliderHandler(SliderActions.sl08, value);
-})
-watch(() => scanState.value.Orientations.Transverse.Slice, async (value: number) => {
-  await sliderHandler(SliderActions.sl09, value);
-})
-watch(() => scanState.value.Slice.TransverseUpper, async (value: number) => {
-  await sliderHandler(SliderActions.sl10, value);
-})
-watch(() => scanState.value.Slice.SagittalLower, async (value: number) => {
-  await sliderHandler(SliderActions.sl11, value);
-})
-watch(() => scanState.value.Orientations.Sagittal.Slice, async (value: number) => {
-  await sliderHandler(SliderActions.sl12, value);
-})
-watch(() => scanState.value.Slice.SagittalUpper, async (value: number) => {
-  await sliderHandler(SliderActions.sl13, value);
-})
-watch(() => scanState.value.Slice.CoronalLower, async (value: number) => {
-  await sliderHandler(SliderActions.sl14, value);
-})
-watch(() => scanState.value.Orientations.Coronal.Slice, async (value: number) => {
-  await sliderHandler(SliderActions.sl15, value);
-})
-watch(() => scanState.value.Slice.CoronalUpper, async (value: number) => {
-  await sliderHandler(SliderActions.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);
-})
-watch( () => scanState.value.Layout.PositionData, () => {
-  componentKey.value += 1
-})
+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 getIconForPreset(presetName: string): string | undefined {
-  // if (presetName === 'Bone') return 'fa-solid fa-bone';
-  // if (presetName === 'Brain') return 'fa-solid fa-brain';
-  // if (presetName === 'Liver') return '$liver_icon';
-  // if (presetName === 'Lungs') return 'fa-solid fa-lungs';
-  // if (presetName === 'Muscle') return '$muscle_icon';
-  // if (presetName === 'Temporal Bones') return '$temporal_bones_icon';
-  // if (presetName === 'Soft Tissue') return '$torso_icon';
-  // if (presetName === 'Skin') return '$skin_icon';
-  return 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 (FrontEndInterfaces.scan_orientation, ScanOrientationActions.so01, {
-    Version: '0.0.1',
-    View: view,
-    Angle: deg,
-  });
+  await sendPayload(
+    FrontEndInterfaces.scan_orientation,
+    ScanOrientationActions.so01,
+    {
+      Version: "0.0.1",
+      View: view,
+      Angle: deg,
+    }
+  );
 }
 function getCurrentActiveView(position: PositionData): ScanView {
-  return unref(scanState).Layout.PositionData.length !== 1 ? position.DefaultView : unref(scanState).CurrentView;
+  return unref(scanState).Layout.PositionData.length !== 1
+    ? position.DefaultView
+    : unref(scanState).CurrentView;
 }
 function getViewName(index: number) {
   return Object.values(ScanView)
-    .filter((value) => typeof value === 'string')
+    .filter((value) => typeof value === "string")
     .map((x) => {
-      if (x === 'Volume') return '3D Volume';
+      if (x === "Volume") return "3D Volume";
       return x;
     })[index];
 }
 async function fullscreenLayout(view: ScanView) {
-  await layouts('lo_01');
+  await layouts("lo_01");
   await viewSelection(`vs_0${view + 1}`);
 }
-// generateDivStyleForLayout,
-  async function scanMovementHandler(action: string, value: number) {
+async function scanMovementHandler(action: string, value: number) {
   if (unref(transactionStarted)) return;
   await scanMovement(action, value);
 }
@@ -805,55 +1072,77 @@ async function sliderHandler(action: string, value: number) {
 function closeModal() {
   m_closeDialog.value = false;
   value.value = false;
+  executeOption("OnExitViewer");
 }
 function alterValue(val: boolean) {
   if (!val) {
     m_closeDialog.value = true;
-    return
+    return;
+  } else {
+    isDemo.value =
+      props.payload.Url ===
+      "https://webgl-3dr.singular.health/test_scans/01440d4e-8b04-4b90-bb2c-698535ce16d6/CHEST.3vxl";
   }
 
   value.value = val;
 }
-async function sendPayload(interfaceType: string, actionType: string, message: any) {
+async function sendPayload(
+  interfaceType: string,
+  actionType: string,
+  message: any
+) {
   await unref(web_gl)?.sendPayload(
     JSON.stringify({
-      Version: '0.0.1',
+      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);
+  await sendPayload("file_management", "fm_01", props.payload);
 }
 async function viewSelection(action: string) {
-  await sendPayload(FrontEndInterfaces.view_selection, action, emptyPayload)
+  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)
+  if (action !== "lo_01") previousLayout.value = action;
+  await sendPayload(FrontEndInterfaces.layout, action, emptyPayload);
 }
 async function snap() {
-  // await unref(web_gl).snap();
+  emit("snap");
 }
-async function setPreset(action: PresetActions, preset: any) {
-  await sendPayload('presets', action, preset)
-  if (action === PresetActions.pr02) {
+
+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("sliders", action, {
+    Version: "0.0.1",
+    Value: toNumber(value),
+  });
 }
 async function scanMovement(action: string, value: number) {
-  await sendPayload('scan_movement', action, { Version: '0.0.1', Value: toNumber(value) })
+  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 })
+  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;
@@ -885,32 +1174,61 @@ async function i_fileManagement(action: string, message: string) {
   drawerCollapsed.value = false;
   await hoverOverCanvas(false);
 }
+
+import { useNotification } from "@kyvg/vue3-notification";
+
+const { notify } = useNotification();
+
 async function i_notifications(action: string, message: string) {
-  // const obj = JSON.parse(message);
-  // console.log(obj);
-  //{\"Version\":\"1.0.0\",\"Interface\":\"interactivity\",\"Action\":\"in_01\",\"Code\":\"0000\",\"Description\":\"\"}"
-
-  // if (obj.Description) {
-  //   if (action === NotificationActions.no01) {
-  //     await NotificationService.Instantiate().notificationSuccess(obj.Description);
-  //   }
-  //   if (action === NotificationActions.no02) {
-  //     await NotificationService.Instantiate().notificationError(obj.Description);
-  //   }
-  //   if (action === NotificationActions.no03) {
-  //     await NotificationService.Instantiate().notificationWarning(obj.Description);
-  //   }
-  // }
+  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;
+  }
+
+  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[2].Anchor ===
+      AnchorPoint.BOTTOM_LEFT &&
     unref(scanState).Layout.PositionData[3].Anchor === AnchorPoint.BOTTOM_RIGHT
-  )
-})
+  );
+});
 const isLayout1x3 = computed(() => {
   return (
     unref(scanState).Layout.PositionData.length > 1 &&
@@ -918,19 +1236,20 @@ const isLayout1x3 = computed(() => {
     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)) &&
+        (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))
+          unref(scanState).Display.WindowUpper ===
+            unref(initialScanState).HuUpper))
     ) {
       return preset.Name;
     }
@@ -941,18 +1260,52 @@ function setScanState(message: string) {
   scanState.value = JSON.parse(message) as CurrentScanState;
 }
 
-function handleOnPayload(interfaceSet: string | FrontEndInterfaces, actionSet: string, message: string) {
-  if (interfaceSet === FrontEndInterfaces.scan_loading || interfaceSet === 'scan_state') {
-    i_scanState(actionSet, message)
+function handleOnPayload(
+  interfaceSet: string | FrontEndInterfaces,
+  actionSet: string,
+  message: string
+) {
+  if (interfaceSet === FrontEndInterfaces.scan_state) {
+    i_scanState(actionSet, message);
   }
   if (interfaceSet === FrontEndInterfaces.file_management) {
-    i_fileManagement(actionSet, message)
+    i_fileManagement(actionSet, message);
   }
-  if (interfaceSet === 'notifications') {
-    i_notifications(actionSet, message)
+  if (interfaceSet === FrontEndInterfaces.notifications) {
+    i_notifications(actionSet, message);
   }
 }
 
+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,
+});
 </script>
 <style>
 .v-dialog:not(.v-dialog--fullscreen) {