@3cr/viewer-browser 0.0.200 → 0.0.246

package/src/components/modal/MftpWebGL3DRModal.vue

@@ -1,420 +1,240 @@
 <template>
-  <DemoLicenceInfoModal v-model:modal="m_demo" :is-modal-open="value" />
-  <DemoLicenceShareToMobileModal v-model:modal="m_demoLicenceShareToMobile" />
-  <DemoLicenceSendToPartyModal v-model:modal="m_demoLicenceSendToParty" />
-  <DemoLicenceEnableCloudStorageModal v-model:modal="m_demoLicenseEnableCloudStorage" />
-  <DemoPatientInfoModal v-model:modal="m_demoPatient" :is-modal-open="value" />
-  <DemoPatientShareToMobileModal v-model:modal="m_demoPatientShareToMobile" />
-  <DemoPatientSendToPartyModal v-model:modal="m_demoPatientSendToParty" />
-  <DemoPatientEnableCloudStorageModal v-model:modal="m_demoPatientEnableCloudStorage" />
-  <CloseViewerModal v-model:modal="m_closeDialog" :options="opts" @close="value = false"/>
-  <v-dialog
-    data-vuetify
-    :model-value="value"
-    :no-click-animation="true"
-    fullscreen
-    persistent
-  >
-    <v-card
-      id="invoice-table-modal"
-      class="pa-0 ma-0 position-relative motif-background overflow-y-hidden rounded-0"
-      height="100vh"
-    >
-      <v-app-bar density="compact">
-        <v-menu :close-on-content-click="false">
-          <template #activator="{ props, isActive }">
-            <v-btn
-              v-bind="props"
-              class="mr-2"
-              :color="isActive ? 'secondary' : 'primary'"
-              prepend-icon="description"
-              variant="flat"
-            >
-              File
-            </v-btn>
-          </template>
-          <v-list>
-            <v-list-item
-              v-if="showOption('OnLoadNewDicomSeries')"
-              @click="executeOption('OnLoadNewDicomSeries')"
-              prepend-icon="upload"
-            >
-              <v-list-item-title>Load New DICOM Series</v-list-item-title>
-            </v-list-item>
-            <v-list-item
-              v-if="showOption('OnDownloadDicomSeries')"
-              @click="executeOption('OnDownloadDicomSeries')"
-              prepend-icon="download"
-            >
-              <v-list-item-title>Download DICOM Series</v-list-item-title>
-            </v-list-item>
-            <v-list-item
-              v-if="showOption('OnLoadSavedSession')"
-              @click="executeOption('OnLoadSavedSession')"
-              prepend-icon="sync"
-            >
-              <v-list-item-title> Load Saved Session </v-list-item-title>
-            </v-list-item>
-            <v-list-item
-              v-if="showOption('OnSendTo3rdParty')"
-              @click="executeOption('OnSendTo3rdParty')"
-              prepend-icon="send"
-            >
-              <v-list-item-title>Send to 3rd Party</v-list-item-title>
-            </v-list-item>
-            <v-list-item
-              v-if="showOption('OnShareToMobile')"
-              @click="executeOption('OnShareToMobile')"
-              prepend-icon="share"
-            >
-              <v-list-item-title>Share to Mobile / VR</v-list-item-title>
-            </v-list-item>
-
-            <v-list-item
-              @click="
-                  executeOption('OnClosePopup');
-                  alterValue(false);
-                "
-              prepend-icon="close"
-            >
-              <v-list-item-title>Close Viewer</v-list-item-title>
-            </v-list-item>
-          </v-list>
-        </v-menu>
-        <v-menu
-          v-model:model-value="introJsOpenMenu"
-          :persistent="introJsDisableMenu"
-          :no-click-animation="introJsDisableMenu"
-          :close-on-content-click="false"
+  <v-app>
+    <v-app-bar density="compact">
+      <file-menu v-if="showFileMenu" @close="m_closeDialog = true" />
+      <settings-menu
+        v-model="introJsMenu"
+        v-if="showSettingsMenu"
+        :activator-props="{ disabled: introJsMenuDisabled }"
+        :persistent="introJsMenuDisabled"
+        :no-click-animation="introJsMenuDisabled"
+      />
+      <auto-annotate-btn v-if="showAiMenu" class="mr-2 transparent" />
+      <v-spacer />
+      <div class="font-weight-bold">
+        <span class="text-capitalize">{{ viewerTitle }}</span>
+      </div>
+      <v-spacer />
+      <v-btn
+        v-if="show2x2Layout"
+        class="ma-1 mr-0 pa-1"
+        data-testid="layout-2x2"
+        height="36"
+        style="min-width: 36px !important"
+        :color="isLayout2x2 ? 'primary' : 'default'"
+        @click="viewer3cr.layouts(LayoutActions.lo02)"
+      >
+        <v-icon>grid_view</v-icon>
+        <v-tooltip location="bottom" activator="parent"> Change Layout to 2:2 </v-tooltip>
+      </v-btn>
+      <v-btn
+        v-if="show1x3Layout"
+        class="ma-1 mr-1 pa-1"
+        data-testid="layout-1x3"
+        height="36"
+        style="min-width: 36px !important"
+        :color="isLayout1x3 ? 'primary' : 'default'"
+        @click="viewer3cr.layouts(LayoutActions.lo03)"
+      >
+        <v-icon style="rotate: -90deg">view_comfy</v-icon>
+        <v-tooltip location="bottom" activator="parent"> Change Layout to 1:3 </v-tooltip>
+      </v-btn>
+      <v-btn variant="flat" color="red" @click="m_closeDialog = true">Close Viewer</v-btn>
+    </v-app-bar>
+    <ViewerNavigationDrawer v-model:drawer="drawer" @update:expanded="expanded = $event" />
+    <v-main class="motif-background">
+      <LoadingSpinner v-if="scanLoading" text="Rendering your scan in 3D" />
+      <WebGL3DR
+        v-show="!scanLoading"
+        ref="webGl3dr"
+        @instance_loaded="load"
+        @dblclick="viewer3cr.viewSelection(ViewSelectionActions.vs05)"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave"
+      >
+        <div
+          v-for="layout in scanState.Layout.PositionData"
+          :key="getCurrentView(layout)"
+          :style="generateDivStyleForLayout(layout, webGl3dr!.canvas)"
         >
-          <template #activator="{ props, isActive }">
-            <v-btn
-              v-bind="props"
-              :color="isActive ? 'secondary' : 'primary'"
-              :disabled="introJsDisableMenu"
-              prepend-icon="settings"
-              variant="flat"
-            >
-              Settings
-            </v-btn>
-          </template>
-          <v-card id="settings-card" width="350" class="pa-4">
-            <ValueSelector
-              v-model:value="scanState.Display.Brightness"
-              label="Adjust Brightness"
-              prepend="percent"
-            />
-            <ValueSelector
-              v-model:value="scanState.Display.Contrast"
-              label="Adjust Contrast"
-              prepend="percent"
-            />
-            <ValueSelector
-              v-model:value="scanState.Display.Opacity"
-              label="Adjust Opacity"
-              prepend="percent"
-            />
-            <v-divider class="my-4" />
-            <ValueSelector
-              v-model:value="scanState.InteractionSettings.PanSensivitity"
-              :min="0"
-              :max="100"
-              label="Pan Sensitivity"
-              prepend="percent"
-            />
-            <ValueSelector
-              v-model:value="scanState.InteractionSettings.ZoomSensitivity"
-              :min="0"
-              :max="100"
-              label="Zoom Sensitivity"
-              prepend="percent"
-            />
-            <ValueSelector
-              v-model:value="scanState.InteractionSettings.RotateSensitivity"
-              :min="0"
-              :max="100"
-              label="Rotate Sensitivity"
-              prepend="percent"
-            />
-            <ValueSelector
-              v-model:value="
-                scanState.InteractionSettings.CameraRotateSensitivity
-              "
-              :min="0"
-              :max="100"
-              label="Camera Rotate Sensitivity"
-              prepend="percent"
-            />
-            <v-divider class="my-4" />
-            <NavigationCubeAction />
-          </v-card>
-        </v-menu>
-        <v-spacer />
-        <div class="font-weight-bold">
-          <span v-if="isDemo" class="text-capitalize">
-            3DICOM {{ demoType }} DEMO&nbsp;|
-          </span>
-          <span v-else class="text-capitalize">
-            3DICOM Patient Viewer&nbsp;|
-          </span>
-          Not for Diagnostic Use
+          <ViewerScanView class="w-100 h-100" :view="getCurrentView(layout)" />
         </div>
-        <v-spacer />
-        <v-btn
-          class="ma-1 mr-0 pa-1"
-          height="36"
-          style="min-width: 36px !important"
-          :color="isLayout2x2 ? 'secondary' : 'primary'"
-          @click="viewer3cr.layouts(LayoutActions.lo02)"
-          ><v-icon>grid_view</v-icon>
-          <v-tooltip location="bottom" activator="parent">
-            Change Layout to 2:2
-          </v-tooltip>
-        </v-btn>
-        <v-btn
-          class="ma-1 mr-1 pa-1"
-          height="36"
-          style="min-width: 36px !important"
-          :color="isLayout1x3 ? 'secondary' : 'primary'"
-          @click="viewer3cr.layouts(LayoutActions.lo03)"
-          ><v-icon style="rotate: -90deg">view_comfy</v-icon>
-          <v-tooltip location="bottom" activator="parent">
-            Change Layout to 1:3
-          </v-tooltip></v-btn
-        >
-        <v-btn variant="flat" color="red" @click="alterValue(false)">
-          Close Viewer
-        </v-btn>
-      </v-app-bar>
-      <ViewerNavigationDrawer v-model:drawer="drawer" :options="opts" @update:expanded="expanded = $event" />
-      <v-main>
-        <WebGL3DR
-          v-show="value && instanceLoaded && !scanLoading"
-          ref="webGl3dr"
-          @instance_loaded="load"
-          @dblclick="viewer3cr.viewSelection(ViewSelectionActions.vs05)"
-          @mouseenter="onMouseEnter"
-          @mouseleave="onMouseLeave"
-        >
-          <div
-            v-for="(layout, index) in scanState.Layout.PositionData"
-            :key="getCurrentView(layout)"
-            :id="`view-${getCurrentView(layout)}`"
-            :ref="(el) => (elements[index] = el)"
-            class="bordered-event-window"
-            :style="generateDivStyleForLayout(layout, webGl3dr!.canvas)"
-          >
-            <v-hover>
-              <template #default="{ isHovering, props }">
-                <v-row v-bind="props" class="flex-nowrap h-100" no-gutters>
-                  <v-col style="min-width: 0">
-                    <v-row class="flex-column h-100" no-gutters>
-                      <v-col class="flex-grow-0">
-                        <div class="d-flex pa-2 pl-3 align-center">
-                          <span style="color: white">{{ getViewName(getCurrentView(layout)) }}</span>
-                          <v-tooltip v-if="isHorizontalFlip(getCurrentView(layout))" location="bottom">
-                            <template #activator="{ props }">
-                              <v-icon
-                                v-bind="props"
-                                icon="swap_horiz"
-                                color="blue-darken-1"
-                                class="ml-2"
-                              />
-                            </template>
-                            <span>This view has been flipped horizontally</span>
-                          </v-tooltip>
-                          <v-tooltip v-if="isVerticalFlip(getCurrentView(layout))" location="bottom">
-                            <template #activator="{ props }">
-                              <v-icon
-                                v-bind="props"
-                                icon="swap_vert"
-                                color="blue-darken-1"
-                                class="ml-2"
-                              />
-                            </template>
-                            <span>This view has been flipped vertically</span>
-                          </v-tooltip>
-                        </div>
-                      </v-col>
-                      <v-spacer />
-                      <v-col class="flex-grow-0">
-                        <Transition>
-                          <div v-show="isHovering || modals[getCurrentView(layout)]">
-                            <ViewerActionRail
-                              :view="getCurrentView(layout)"
-                              :element="elements[index]"
-                              @modal="onActionModal"
-                            />
-                          </div>
-                        </Transition>
-                      </v-col>
-                    </v-row>
-                  </v-col>
-                  <v-col class="flex-grow-0">
-                    <VerticalSliderSelector
-                      class="h-100 my-0 pa-2 pr-3"
-                      v-if="getCurrentView(layout) === ScanView.Transverse"
-                      v-model:value="scanState.Orientations.Transverse.Slice"
-                      v-bind="tMinMax"
-                    />
-                    <VerticalSliderSelector
-                      class="h-100 my-0 pa-2 pr-3"
-                      v-if="getCurrentView(layout) === ScanView.Coronal"
-                      v-model:value="scanState.Orientations.Coronal.Slice"
-                      v-bind="cMinMax"
-                    />
-                    <VerticalSliderSelector
-                      class="h-100 my-0 pa-2 pr-3"
-                      v-if="getCurrentView(layout) === ScanView.Sagittal"
-                      v-model:value="scanState.Orientations.Sagittal.Slice"
-                      v-bind="sMinMax"
-                    />
-                  </v-col>
-                </v-row>
-              </template>
-            </v-hover>
-          </div>
-        </WebGL3DR>
-        <ViewerAnnotationModal />
-      </v-main>
-      <LoadingSpinner v-if="!instanceLoaded" />
-      <LoadingSpinner v-if="scanLoading" text="Rendering your scan in 3D" />
-    </v-card>
-  </v-dialog>
+      </WebGL3DR>
+      <data-overlay-modal />
+    </v-main>
+    <CloseViewerModal v-model:modal="m_closeDialog" />
+  </v-app>
 </template>
 
-<!-- /* c8 ignore stop */ -->
 <script setup lang="ts">
-import { generateDivStyleForLayout } from "@/helpers/layoutOverlayStyle";
+import { generateDivStyleForLayout } from '@/functions/layoutOverlayStyle';
 import {
-  DataOverlayActions,
+  DataOverlaysActions,
   FileManagementActions,
   FrontEndInterfaces,
+  GraphicType,
   LayoutActions,
+  McadActions,
   NotificationsActions,
-  ScanMovementActions,
   ScanStateActions,
-  ScanView,
-  SlidersActions,
-  ViewSelectionActions,
-} from "@3cr/types-ts";
-import {ComponentInstance, computed, nextTick, onBeforeUnmount, onMounted, ref, unref, watch, WatchSource} from "vue";
-import {
-  checkIsDemo,
-  demoOptions,
-  demoType,
-  isDemo,
-  m_demo,
-  m_demoLicenceSendToParty,
-  m_demoLicenceShareToMobile,
-  m_demoLicenseEnableCloudStorage,
-  m_demoPatient,
-  m_demoPatientEnableCloudStorage,
-  m_demoPatientSendToParty,
-  m_demoPatientShareToMobile,
-} from "@/components/demo/options";
-import { handleNotification } from "@/notifications/notification";
-import { LoadViewerPayload } from "@/models/LoadViewerPayload";
-import {
-  defaultLoadViewerOptions,
-  LoadViewerOptions,
-} from "@/models/LoadViewerOptions";
+  ViewSelectionActions
+} from '@3cr/types-ts';
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { checkIsDemo, demoOptions, demoType, isDemo } from '@/components/demo/options';
+import { handleNotification } from '@/functions/notification';
+import { defaultLoadViewerPayload, LoadViewerPayload } from '@/models/loadViewerPayload';
+import { defaultLoadViewerOptions, LoadViewerOptions } from '@/models/loadViewerOptions';
 import {
-  cMinMax,
   getCurrentView,
-  getViewName,
-  initialScanState,
-  isFullscreen,
-  isHorizontalFlip,
   isLayout1x3,
   isLayout2x2,
-  isVerticalFlip,
-  previousLayout,
   scanState,
-  setActiveAnnotation,
+  setDataOverlayEvent,
   setDataOverlayState,
   setInitialDataOverlayState,
+  setInitialMcadState,
   setInitialScanStateFromPayload,
+  setMcadEvent,
+  setMcadState,
   setScanStateFromPayload,
-  sMinMax,
-  thresholdSlider,
-  tMinMax,
-  transactionStarted,
-  windowSlider,
-} from "@/dataLayer/scanState";
-import introJs from "intro.js";
-import type { IntroJs } from "intro.js/src/intro";
-import "intro.js/introjs.css";
-import WebGL3DR from "@/components/WebGL3DR.vue";
-import { useViewer3cr } from "@/dataLayer/useViewer3cr";
-import { useNavigationCubeObserver } from "@/components/modal/composables/useNavigationCubeObserver";
-
-export interface Props {
+  transactionStarted
+} from '@/models/scanState';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { useNavigationCubeObserver } from '@/composables/useNavigationCubeObserver';
+import { mockDemoViewerStlDecimator, useViewerOptions } from '@/composables/useViewerOptions';
+import { useScanMovement } from '@/composables/useScanMovement';
+import { useScanSliders } from '@/composables/useScanSliders';
+import { useIntroJs } from '@/composables/useIntroJs';
+import WebGL3DR from '@/components/modal/WebGL3DR.vue';
+import { DemoType } from '@/types/demo-type';
+
+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",
-    DecryptionKey: {
-      Iv: "x856FgjpYDsRhIa3BFj5cg==",
-      Key: "OWjSMiL/ewUV1V6fGybhKcTyiysTPsIMp2DjdVoOUGI=",
-    },
-  }),
-  options: () => defaultLoadViewerOptions,
+  payload: () => defaultLoadViewerPayload,
+  options: () => defaultLoadViewerOptions
 });
 
+useScanMovement();
+useScanSliders();
 const viewer3cr = useViewer3cr();
+const opts = useViewerOptions();
+const { intro } = useIntroJs();
 const webGl3dr = ref<typeof WebGL3DR>();
 const observer = ref<ResizeObserver>();
-const value = ref<boolean>(false);
 const drawer = ref<boolean>(false);
 const expanded = ref<number | undefined>();
 const scanLoading = ref<boolean>(true);
-const instanceLoaded = ref<boolean>(true);
-const elements = ref<ComponentInstance<any>[]>([]);
 const m_closeDialog = ref<boolean>(false);
-const introJsOpenMenu = ref<boolean>(false);
-const introJsDisableMenu = ref<boolean>(false);
-const modals = ref<Record<ScanView, boolean>>({
-  [ScanView.Volume]: false,
-  [ScanView.Sagittal]: false,
-  [ScanView.Coronal]: false,
-  [ScanView.Transverse]: false,
+const introJsMenu = ref<boolean>(false);
+const introJsMenuDisabled = ref<boolean>(false);
+
+const demo = computed<string>(() => {
+  switch (demoType.value) {
+    case DemoType.Licence:
+      return 'Licence';
+    default:
+      return 'Patient';
+  }
 });
 
-const tier = computed(() => {
-  const value = demoType.value;
-  return value.charAt(0).toUpperCase() + value.substring(1);
-});
+const showFileMenu = computed(() => opts.value.ShowFileMenu !== false);
+
+const showSettingsMenu = computed(() => opts.value.ShowSettingsMenu !== false);
+
+const showAiMenu = computed(() => opts.value.ShowAiMenu !== false);
+
+const show2x2Layout = computed(() => opts.value.Show2x2Layout !== false);
 
-const opts = computed(() => {
-  return unref(isDemo) ? demoOptions.value : props.options;
+const show1x3Layout = computed(() => opts.value.Show1x3Layout !== false);
+
+const viewerTitle = computed(() => {
+  return (
+    opts.value.ViewerTitle ??
+    `3DICOM ${isDemo.value ? `${demo.value} DEMO` : 'Patient Viewer'} | Not for Diagnostic Use`
+  );
 });
 
+watch(
+  props,
+  (props) => {
+    checkIsDemo(props.payload);
+    opts.value = isDemo.value ? demoOptions.value : props.options;
+  },
+  { immediate: true }
+);
+
+/* istanbul ignore next -- @preserve */
+watch(
+  () => intro.value.getCurrentStep(),
+  (step) => {
+    const lock = step === 4;
+    introJsMenu.value = lock;
+    introJsMenuDisabled.value = lock;
+    setTimeout(() => {
+      if (intro.value.isActive()) {
+        intro.value.refresh(true);
+      }
+    }, 400);
+  }
+);
+
+/* istanbul ignore next -- @preserve */
 onMounted(() => {
   viewer3cr.addInterfaceHandler(FrontEndInterfaces.notifications, async (message: string, action: string) => {
     await handleNotification(action as NotificationsActions, message);
   });
 
   viewer3cr.addActionHandler(FileManagementActions.fm02, async (message: string) => {
+    // Set up the scan state
     setInitialScanStateFromPayload(message);
-    await nextTick();
     transactionStarted.value = false;
     scanLoading.value = false;
     drawer.value = true;
-    if (unref(isDemo)) {
-      await viewer3cr.loadDataOverlay("https://webgl-3dr.singular.health/test_scans/sample_annotations.json");
+    await nextTick();
+    if (opts.value.OnScanLoaded) {
+      await opts.value.OnScanLoaded(scanState.value);
     }
+
+    // Set up the navigation cube
     observer.value = useNavigationCubeObserver(webGl3dr.value!.canvas);
-    await startIntro();
+    switch (demoType.value) {
+      case DemoType.Licence:
+        await viewer3cr.setNavCubeGraphics(GraphicType.LETTER);
+        break;
+      default:
+        await viewer3cr.setNavCubeGraphics(GraphicType.BODY_SYMBOL);
+        break;
+    }
+
+    // Load the demo data
+    await loadDemoData();
+
+    // Load the tutorial
+    if (opts.value.ShowTutorial !== false) {
+      await intro.value.start();
+      if (!intro.value.isActive() && opts.value.OnInteractionReady) {
+        await opts.value.OnInteractionReady();
+      }
+    }
   });
 
+  viewer3cr.addActionHandler(
+    FileManagementActions.fm09,
+    async (_1: string, returnChannel: string, returnTo: string) => {
+      if (opts.value.OnResolveUrls) {
+        const keys = JSON.parse(returnChannel) as string[];
+        const urls = await opts.value.OnResolveUrls(keys);
+        await viewer3cr.loadMcadObjects(undefined, urls, returnTo);
+      } else {
+        throw new Error('OnResolveUrls has not been defined in LoadViewerOptions');
+      }
+    }
+  );
+
   viewer3cr.addActionHandler(ScanStateActions.ss01, async (message: string) => {
     await setScanStateFromPayload(message);
   });
@@ -423,16 +243,36 @@ onMounted(() => {
     setDataOverlayState(message);
   });
 
-  viewer3cr.addActionHandler(DataOverlayActions.do01, (message: string) => {
+  viewer3cr.addActionHandler(ScanStateActions.ss03, (message: string) => {
+    setMcadState(message);
+  });
+
+  viewer3cr.addActionHandler(DataOverlaysActions.do01, (message: string) => {
     setInitialDataOverlayState(message);
   });
 
-  viewer3cr.addActionHandler(DataOverlayActions.do02, (message: string) => {
-    setActiveAnnotation(message);
+  viewer3cr.addActionHandler(DataOverlaysActions.do02, (message: string) => {
+    setDataOverlayEvent(message);
+  });
+
+  viewer3cr.addActionHandler(DataOverlaysActions.do07, (message: string) => {
+    setDataOverlayEvent(message);
+  });
+
+  viewer3cr.addActionHandler('mu_17', (message: string) => {
+    setDataOverlayEvent(message);
   });
 
-  viewer3cr.addActionHandler(DataOverlayActions.do07, (message: string) => {
-    setActiveAnnotation(message);
+  viewer3cr.addActionHandler('mu_18', (message: string) => {
+    setDataOverlayEvent(message);
+  });
+
+  viewer3cr.addActionHandler(McadActions.mc01, (message: string) => {
+    setInitialMcadState(message);
+  });
+
+  viewer3cr.addActionHandler(McadActions.mc02, (message: string) => {
+    setMcadEvent(message);
   });
 });
 
@@ -442,106 +282,30 @@ onBeforeUnmount(() => {
   }
 });
 
-function showOption(key: keyof LoadViewerOptions): boolean {
-  return opts.value[key] !== undefined;
-}
-
-async function executeOption(key: keyof LoadViewerOptions) {
-  const functionToExecute = opts.value[key];
-  if (functionToExecute !== undefined) {
-    await functionToExecute();
-  }
-}
-
-function onActionModal(value: boolean, view: ScanView): void {
-  modals.value[view] = value;
-}
-
-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 viewer3cr.sliderHandler(slider as SlidersActions, value);
-    }
-  );
-}
-
-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 viewer3cr.scanMovementHandler(
-        scanMovement as ScanMovementActions,
-        value
-      );
-    }
-  );
-}
-
-function alterValue(val: boolean) {
-  if (!val) {
-    m_closeDialog.value = true;
-    return;
-  } else {
-    checkIsDemo(props.payload);
-  }
-  value.value = val;
-}
-
+/* istanbul ignore next -- @preserve */
 async function loadSession(url: string): Promise<void> {
-  if (url.includes('3crds')) {
-    await viewer3cr.loadDataOverlay(url);
+  if (url.includes('3crs')) {
+    await viewer3cr.loadScanSession({ Url: url });
+  } else if (url.includes('3crds')) {
+    await viewer3cr.setDataOverlaySession({ Url: url });
   } else if (url.includes('3crms')) {
-    await viewer3cr.loadMcad(url);
-  } else if (url.includes('3crs')) {
-    await viewer3cr.loadScanSession(url);
+    await viewer3cr.loadMcadObjects({ Url: url });
   } else {
     throw new Error('Invalid URL type');
   }
 }
 
 async function load(): Promise<void> {
-  instanceLoaded.value = true;
   scanLoading.value = true;
   await viewer3cr.loadScan(props.payload);
 }
 
+async function close(): Promise<void> {
+  if (opts.value.OnExitViewer) {
+    await opts.value.OnExitViewer();
+  }
+}
+
 async function onMouseEnter(): Promise<void> {
   await viewer3cr.hoverOverCanvas(true);
 }
@@ -550,192 +314,23 @@ async function onMouseLeave(): Promise<void> {
   await viewer3cr.hoverOverCanvas(false);
 }
 
-async function startIntro(): Promise<void> {
-  let intro: IntroJs | null = null;
-
-  const sleep = (delay: number) =>
-    new Promise((resolve) => setTimeout(resolve, delay));
-
-  const refreshHandle = watch(scanState, () => {
-    intro?.refresh(true);
-  });
-
-  const expandHandle = watch(expanded, async () => {
-    // For some reason introjs refresh by itself doesn't work here
-    if (intro && intro.currentStep() === 1) {
-      await sleep(400);
-      const skinToBone = document.getElementById('skin-to-bone');
-      const floatingElement = document.querySelector('.introjsFloatingElement') as HTMLElement | null;
-      intro._introItems[1].element = skinToBone ?? floatingElement;
-      intro.refresh(true);
-    }
-  });
-
-  const blurActiveElement = () => {
-    (document.activeElement as HTMLElement).blur();
-  };
-
-  intro = await introJs()
-    .setOptions({
-      exitOnOverlayClick: false,
-      keyboardNavigation: false,
-      dontShowAgain: true,
-      steps: [
-        {
-          title: "Take the Viewer Tour",
-          intro:
-            `Welcome to the ${tier.value} Online DICOM Viewer.` +
-            "<br/><br/>Take the short interative tour to better visualize your medical images in 2D and 3D.",
-          position: "floating",
-        },
-        {
-          title: "Density Slider",
-          intro:
-            "Move the <em>lower density slider</em> to the right to hide softer tissue like skin and view internal organs." +
-            "<br/><br/>For more precise control, change the numbers in the boxes above or use the <em>Fine Adjustment</em> slider below.",
-          element: "#skin-to-bone",
-          position: "right",
-        },
-        {
-          title: "3D Viewing Controls",
-          intro:
-            "With your cursor placed in the 3D view, <b>scroll to zoom</b> & <b>click and drag to rotate</b>." +
-            "<br/><br/>You can also view the 3D view in full screen, reset the view, and cut into the 3D model from each side using the <em>3D slicing tool</em>.",
-          element: `#view-${ScanView.Volume}`,
-        },
-        {
-          title: "2D Viewing Controls",
-          intro:
-            "With your mouse in the 2D views, <b>scroll to navigate through the 2D images</b>, and use <b>Shift + Arrows to Pan and Zoom</b>." +
-            "<br/><br/>Use the icons to <em>Fullscreen</em>, <em>Reset</em>, <em>Rotate</em>, and <em>Flip</em> each individual 2D view.",
-          element: `#view-${ScanView.Sagittal}`,
-        },
-        {
-          title: "Global settings",
-          intro:
-            "Accurately change the <b>brightness</b>, <b>contrast</b>, and <b>opacity</b> to enhance the appearance of your medical images." +
-            "<br/><br/>Adjust the sensitivity of mouse and keyboard inputs to suit your preferences.",
-          element: "#settings-card",
-          position: "right",
-        },
-        {
-          title: "Stay Tuned for Updates",
-          intro:
-            '<img src="https://c.tenor.com/S4Sz_yvlLn4AAAAC/cats-cat.gif" alt="cat" width="260" height="260">' +
-            "<br/>Us working hard on new features",
-          position: "floating",
-        },
-      ],
-    })
-    .onbeforechange(function (
-      el: HTMLElement,
-      step: number,
-      direction: "forward" | "backward"
-    ) {
-      // Focus on volume view if moving to step 2
-      modals.value[ScanView.Volume] = step === 2;
-
-      // Focus on sagittal view if moving to step 3
-      modals.value[ScanView.Sagittal] = step === 3;
-
-      // If the user has enabled full-screen, turn it off for steps 2 and 3
-      if (isFullscreen.value && (step === 2 || step === 3)) {
-        viewer3cr
-          .layouts(previousLayout.value)
-          .then(() => nextTick())
-          .then(() => this.refresh(true))
-          .then(() => direction === "forward" ? this.nextStep() : this.previousStep());
-        return false;
-      }
-
-      // Wait for menu animation before focusing if moving to step 4
-      if (!introJsOpenMenu.value && step === 4) {
-        introJsOpenMenu.value = true;
-        introJsDisableMenu.value = true;
-        sleep(400)
-          .then(() => this.refresh(true))
-          .then(() => direction === "forward" ? this.nextStep() : this.previousStep());
-        return false;
-      } else if (introJsOpenMenu.value && step !== 4) {
-        introJsOpenMenu.value = false;
-        introJsDisableMenu.value = false;
-      }
-
-      // Only show Don't Show Again on last step
-      const introjsDontShowAgain = document.querySelector(".introjs-dontShowAgain") as HTMLElement | null;
-      if (introjsDontShowAgain) {
-        const lastStep = this._options.steps.length - 1;
-        introjsDontShowAgain.style.display = step !== lastStep ? "none" : "block";
-      }
-
-      return true;
-    })
-    .onchange(() => {
-      setTimeout(() => blurActiveElement(), 500);
-    })
-    .onexit(() => {
-      introJsOpenMenu.value = false;
-      introJsDisableMenu.value = false;
-      setTimeout(() => blurActiveElement(), 500);
-      refreshHandle();
-      expandHandle();
-    })
-    .start();
+/* istanbul ignore next -- @preserve */
+async function loadDemoData(): Promise<void> {
+  if (isDemo.value) {
+    const BASE_STATE_URL = 'https://webgl-3dr.singular.health/demo';
+    mockDemoViewerStlDecimator();
+    await viewer3cr.addDataOverlaySession({ Url: `${BASE_STATE_URL}/state/data_overlay.3crds` });
+    await viewer3cr.addDataOverlaySession({ Url: `${BASE_STATE_URL}/state/markups_2.3crds` });
+    // await viewer3cr.loadMcadObjects({ Url: `${BASE_STATE_URL}/state/mcad.3crms` });
+  }
 }
 
-defineExpose({
-  alterValue,
-  loadSession,
-  load,
-  startIntro,
-  thresholdSlider,
-  windowSlider,
-  m_closeDialog,
-  scanState,
-  initialScanState,
-  value,
-  transactionStarted,
-});
+defineExpose({ loadSession, load, close, m_closeDialog });
 </script>
 
 <style>
-#view-0 {
-  cursor: grab;
-}
-
-.bordered-event-window {
-  position: absolute;
-  border: 1px rgba(128, 128, 128, 0.56) solid;
-  transition: border 0.5s;
-}
-
-.bordered-event-window:hover {
-  border: 1px dashed rgb(0, 152, 253);
-}
-
 .motif-background {
   background: url("data:image/svg+xml,%3Csvg width='992' height='560' viewBox='15 7 992 560' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='15' y='1' width='992' height='567' fill='url(%23paint0_linear_504_579)'/%3E%3Cg filter='url(%23filter0_i_504_579)'%3E%3Cpath d='M567.029 291.5C574.21 421.339 748.15 561 825.931 561H12L12.0001 0C153.713 0 580.363 0 580.363 0C684.258 142 560.918 181 567.029 291.5Z' fill='%231B2E43' fill-opacity='0.9'/%3E%3C/g%3E%3Cg filter='url(%23filter1_i_504_579)'%3E%3Cpath d='M435.911 260.5C462.579 433.5 652.034 561 729.815 561H12L12.0001 0C233.678 0 409.954 92.1126 435.911 260.5Z' fill='%231B2E43' fill-opacity='0.9'/%3E%3C/g%3E%3Cg filter='url(%23filter2_i_504_579)'%3E%3Ccircle cx='46' cy='521' r='93' fill='%231B2E43' fill-opacity='0.3'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_i_504_579' x='12' y='0' width='858.931' height='606' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='45' dy='45'/%3E%3CfeGaussianBlur stdDeviation='50'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.653125 0 0 0 0 0.761642 0 0 0 0 0.916667 0 0 0 0.15 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_504_579'/%3E%3C/filter%3E%3Cfilter id='filter1_i_504_579' x='12' y='0' width='762.815' height='606' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='45' dy='45'/%3E%3CfeGaussianBlur stdDeviation='50'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.653125 0 0 0 0 0.761642 0 0 0 0 0.916667 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_504_579'/%3E%3C/filter%3E%3Cfilter id='filter2_i_504_579' x='-47' y='428' width='231' height='231' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='45' dy='45'/%3E%3CfeGaussianBlur stdDeviation='50'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.653125 0 0 0 0 0.761642 0 0 0 0 0.916667 0 0 0 0.15 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_504_579'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_504_579' x1='1251.04' y1='696.83' x2='21.486' y2='-10.2783' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230E141D'/%3E%3Cstop offset='1' stop-color='%2323405E'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A") !important;
   background-size: cover !important;
 }
-
-.introjs-tooltipReferenceLayer {
-  z-index: 2401;
-}
-
-.introjs-overlay, .introjs-helperLayer {
-  pointer-events: none;
-  z-index: 2401;
-}
-
-.introjs-dontShowAgain {
-  display: none;
-}
-
-.v-enter-active, .v-leave-active {
-  transition: opacity 0.5s ease;
-}
-
-.v-enter-from, .v-leave-to {
-  opacity: 0;
-}
 </style>