@3cr/viewer-browser 0.0.220 → 0.0.247

package/src/components/modal/MftpWebGL3DRModal.vue

@@ -1,78 +1,69 @@
 <template>
-  <v-dialog :model-value="value" :no-click-animation="true" fullscreen persistent>
-    <v-card class="pa-0 ma-0 position-relative motif-background overflow-y-hidden rounded-0" height="100vh">
-      <v-app-bar density="compact">
-        <file-menu @close="alterValue(false)" />
-        <settings-menu
-          v-model="introJsMenu"
-          :activator-props="{ disabled: introJsMenuDisabled }"
-          :persistent="introJsMenuDisabled"
-          :no-click-animation="introJsMenuDisabled"
-        />
-        <auto-annotate-btn class="mr-2 transparent" />
-        <v-spacer />
-        <div class="font-weight-bold">
-          <span v-if="isDemo" class="text-capitalize">3DICOM {{ demoType }} DEMO |</span>
-          <span v-else class="text-capitalize">3DICOM Patient Viewer |</span>
-          Not for Diagnostic Use
-        </div>
-        <v-spacer />
-        <v-btn
-          class="ma-1 mr-0 pa-1"
-          data-testid="layout-2x2"
-          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"
-          data-testid="layout-1x3"
-          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" @update:expanded="expanded = $event" />
-      <v-main>
-        <WebGL3DR
-          v-show="value && !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)"
-          >
-            <ViewerScanView class="w-100 h-100" :view="getCurrentView(layout)" />
-          </div>
-        </WebGL3DR>
-        <data-overlay-modal-manager />
-      </v-main>
+  <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" />
-    </v-card>
-  </v-dialog>
-  <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" @close="value = false" />
+      <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)"
+        >
+          <ViewerScanView class="w-100 h-100" :view="getCurrentView(layout)" />
+        </div>
+      </WebGL3DR>
+      <data-overlay-modal />
+    </v-main>
+    <CloseViewerModal v-model:modal="m_closeDialog" />
+  </v-app>
 </template>
 
 <script setup lang="ts">
@@ -81,27 +72,15 @@ import {
   DataOverlaysActions,
   FileManagementActions,
   FrontEndInterfaces,
+  GraphicType,
   LayoutActions,
   McadActions,
   NotificationsActions,
   ScanStateActions,
   ViewSelectionActions
 } from '@3cr/types-ts';
-import { nextTick, onBeforeUnmount, onMounted, ref, watch } 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 { 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';
@@ -127,6 +106,7 @@ 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;
@@ -145,7 +125,6 @@ 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);
@@ -153,18 +132,41 @@ const m_closeDialog = ref<boolean>(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 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 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.options,
-  (value: LoadViewerOptions) => {
-    opts.value = isDemo.value ? demoOptions.value : value;
+  props,
+  (props) => {
+    checkIsDemo(props.payload);
+    opts.value = isDemo.value ? demoOptions.value : props.options;
   },
   { immediate: true }
 );
 
-watch(isDemo, (demo: boolean) => {
-  opts.value = demo ? demoOptions.value : props.options;
-});
-
 /* istanbul ignore next -- @preserve */
 watch(
   () => intro.value.getCurrentStep(),
@@ -173,7 +175,9 @@ watch(
     introJsMenu.value = lock;
     introJsMenuDisabled.value = lock;
     setTimeout(() => {
-      intro.value.refresh(true);
+      if (intro.value.isActive()) {
+        intro.value.refresh(true);
+      }
     }, 400);
   }
 );
@@ -185,18 +189,37 @@ onMounted(() => {
   });
 
   viewer3cr.addActionHandler(FileManagementActions.fm02, async (message: string) => {
+    // Set up the scan state
     setInitialScanStateFromPayload(message);
+    transactionStarted.value = false;
+    scanLoading.value = false;
+    drawer.value = true;
+    await nextTick();
     if (opts.value.OnScanLoaded) {
       await opts.value.OnScanLoaded(scanState.value);
     }
 
-    await nextTick();
-    transactionStarted.value = false;
-    scanLoading.value = false;
-    drawer.value = true;
+    // Set up the navigation cube
     observer.value = useNavigationCubeObserver(webGl3dr.value!.canvas);
+    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();
-    await intro.value.start();
+
+    // 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(
@@ -259,16 +282,6 @@ onBeforeUnmount(() => {
   }
 });
 
-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('3crs')) {
@@ -287,6 +300,12 @@ async function load(): Promise<void> {
   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);
 }
@@ -301,18 +320,12 @@ async function loadDemoData(): Promise<void> {
     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.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,
-  m_closeDialog,
-  value
-});
+defineExpose({ loadSession, load, close, m_closeDialog });
 </script>
 
 <style>

package/src/components/modal/ViewerActionRail.vue

@@ -38,7 +38,6 @@ import Rotate2dAction from '@/components/modal/actions/Rotate2dAction.vue';
 import Slice3dAction from '@/components/modal/actions/Slice3dAction.vue';
 import ZoomAction from '@/components/modal/actions/ZoomAction.vue';
 import { useViewer3cr } from '@/composables/useViewer3cr';
-import HideViewAction from '@/components/modal/actions/HideViewAction.vue';
 
 interface Props {
   view: ScanView;
@@ -95,11 +94,6 @@ const actions = computed<ActionItem[]>(() => [
     width: 48,
     condition: true
   },
-  {
-    component: HideViewAction,
-    width: 48,
-    condition: true
-  },
   {
     component: ZoomAction,
     width: 48,

package/src/components/modal/ViewerNavigationDrawerContent.vue

@@ -68,19 +68,21 @@ const expanded = ref<number | undefined>(0);
 
 const items = computed<SettingsItem[]>(() => [
   {
-    icon: 'display_settings',
-    text: 'Display Settings',
-    tooltip: 'Change the range of visible anatomy in the scan by only showing areas with certain density of tissue',
+    icon: options.value.DisplaySettings?.Icon ?? 'display_settings',
+    text: options.value.DisplaySettings?.Title ?? 'Display Settings',
+    tooltip:
+      options.value.DisplaySettings?.Tooltip ??
+      'Change the range of visible anatomy in the scan by only showing areas with certain density of tissue',
     component: ViewerDisplaySettings,
-    visible: true,
+    visible: showDisplaySettings.value,
     props: {
       class: 'pa-4'
     }
   },
   {
-    icon: 'draw',
-    text: 'Annotations',
-    tooltip: 'Display annotations on your scans',
+    icon: options.value.Annotations?.Icon ?? 'draw',
+    text: options.value.Annotations?.Title ?? 'Annotations',
+    tooltip: options.value.Annotations?.Tooltip ?? 'Display annotations on your scans',
     component: AnnotationTreeView,
     visible: !!showAnnotations.value,
     props: {
@@ -88,9 +90,9 @@ const items = computed<SettingsItem[]>(() => [
     }
   },
   {
-    icon: 'design_services',
-    text: 'Markups',
-    tooltip: 'Display markups on your scans',
+    icon: options.value.Markups?.Icon ?? 'design_services',
+    text: options.value.Markups?.Title ?? 'Markups',
+    tooltip: options.value.Markups?.Tooltip ?? 'Display markups on your scans',
     component: Markups,
     visible: !!showMarkups.value,
     props: {
@@ -98,9 +100,9 @@ const items = computed<SettingsItem[]>(() => [
     }
   },
   {
-    icon: 'deployed_code',
-    text: 'MCAD',
-    tooltip: 'Display MCAD objects on your scans',
+    icon: options.value.Mcad?.Icon ?? 'deployed_code',
+    text: options.value.Mcad?.Title ?? 'MCAD',
+    tooltip: options.value.Mcad?.Tooltip ?? 'Display MCAD objects on your scans',
     component: McadObjects,
     visible: !!showMcadObjects.value,
     props: {
@@ -109,16 +111,23 @@ const items = computed<SettingsItem[]>(() => [
   }
 ]);
 
+const showDisplaySettings = computed(() => {
+  return options.value.DisplaySettings?.Show !== false;
+});
+
 const showAnnotations = computed(() => {
-  return options.value.OnLoadSavedSession && hasAnnotations.value;
+  const opts = options.value;
+  return opts.Annotations?.Show !== false && opts.OnLoadSavedSession && hasAnnotations.value;
 });
 
 const showMarkups = computed(() => {
-  return options.value.OnLoadSavedSession && hasMarkups.value;
+  const opts = options.value;
+  return opts.Markups?.Show !== false && opts.OnLoadSavedSession && hasMarkups.value;
 });
 
 const showMcadObjects = computed(() => {
-  return options.value.OnLoadSavedSession && hasMcadObjects.value;
+  const opts = options.value;
+  return opts.Mcad?.Show !== false && opts.OnLoadSavedSession && hasMcadObjects.value;
 });
 
 watch(

package/src/components/modal/ViewerNavigationDrawerFooter.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="pa-1 d-flex flex-wrap justify-space-between" :class="drawer ? 'flex-row' : 'flex-col'">
       <template v-for="(item, index) of footerItems" :key="index">
-        <div v-if="item.visible()" class="ma-auto" :data-testid="`footer-${index}`">
+        <div v-if="item.visible" class="ma-auto" :data-testid="`footer-${index}`">
           <v-tooltip :location="drawer ? 'top' : 'right'">
             <template #activator="{ props }">
               <v-btn v-bind="props" variant="text" size="36" :icon="true" :disabled="disabled" @click="item.click()">
@@ -22,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed } from 'vue';
 import { currentColourPreset, initialScanState } from '@/models/scanState';
 import { ViewSelectionActions } from '@3cr/types-ts';
 import { useViewer3cr } from '@/composables/useViewer3cr';
@@ -37,7 +37,7 @@ interface Props {
 interface FooterItem {
   text: string;
   iconProps: Record<string, any>;
-  visible: () => boolean;
+  visible: boolean;
   click: () => void | Promise<void>;
 }
 
@@ -49,11 +49,34 @@ withDefaults(defineProps<Props>(), {
 const viewer3cr = useViewer3cr();
 const version3cr = useVersion3cr();
 const options = useViewerOptions();
-const footerItems = ref<FooterItem[]>([
+
+const showReset = computed(() => options.value.ShowResetScan !== false);
+
+const showEnableCloudStorage = computed(() => {
+  const opts = options.value;
+  return opts.ShowEnableCloudStorage !== false && !!opts.OnEnableCloudStorage;
+});
+
+const showSendTo3rdParty = computed(() => {
+  const opts = options.value;
+  return opts.ShowSendTo3rdParty !== false && !!opts.OnSendTo3rdParty;
+});
+
+const showShareToMobile = computed(() => {
+  const opts = options.value;
+  return opts.ShowShareToMobile !== false && !!opts.OnShareToMobile;
+});
+
+const showScreenshot = computed(() => {
+  const opts = options.value;
+  return opts.ShowScreenshot !== false && !!opts.OnScreenshot;
+});
+
+const footerItems = computed<FooterItem[]>(() => [
   {
     text: 'Reset Scan',
     iconProps: { icon: 'refresh', color: 'red' },
-    visible: () => true,
+    visible: showReset.value,
     click: async () => {
       currentColourPreset.value = initialScanState.value.ColourPresets[0];
       await viewer3cr.viewSelection(ViewSelectionActions.vs05);
@@ -63,7 +86,7 @@ const footerItems = ref<FooterItem[]>([
   {
     text: 'Enable Cloud Storage',
     iconProps: { icon: 'cloud', color: 'blue' },
-    visible: () => !!options.value.OnEnableCloudStorage,
+    visible: showEnableCloudStorage.value,
     click: async () => {
       await options.value.OnEnableCloudStorage!();
     }
@@ -71,7 +94,7 @@ const footerItems = ref<FooterItem[]>([
   {
     text: 'Send to 3rd Party',
     iconProps: { icon: 'send', color: 'green' },
-    visible: () => !!options.value.OnSendTo3rdParty,
+    visible: showSendTo3rdParty.value,
     click: async () => {
       await options.value.OnSendTo3rdParty!();
     }
@@ -79,7 +102,7 @@ const footerItems = ref<FooterItem[]>([
   {
     text: 'Share to Mobile / VR',
     iconProps: { icon: 'share', color: 'yellow' },
-    visible: () => !!options.value.OnShareToMobile,
+    visible: showShareToMobile.value,
     click: async () => {
       await options.value.OnShareToMobile!();
     }
@@ -87,7 +110,7 @@ const footerItems = ref<FooterItem[]>([
   {
     text: 'Screenshot View',
     iconProps: { icon: 'screenshot_region', color: 'green' },
-    visible: () => !!options.value.OnScreenshot,
+    visible: showScreenshot.value,
     click: async () => {
       await options.value.OnScreenshot!();
     }

package/src/components/modal/ViewerNavigationDrawerHeader.vue

@@ -1,5 +1,9 @@
 <template>
-  <div v-if="!isDemo || demoType === 'patient'" class="d-flex align-center pb-1" :class="!drawer ? 'py-2' : 'pa-2'">
+  <div
+    v-if="!isDemo || demoType === DemoType.Patient"
+    class="d-flex align-center pb-1"
+    :class="!drawer ? 'py-2' : 'pa-2'"
+  >
     <v-img v-if="drawer" src="@/assets/logos/3dicom/white.svg" height="64" alt="logo" />
     <v-img v-else src="@/assets/logos/3dicom/white-mini.svg" height="48" alt="logo" />
   </div>
@@ -11,6 +15,7 @@
 
 <script setup lang="ts">
 import { demoType, isDemo } from '@/components/demo/options';
+import { DemoType } from '@/types/demo-type';
 
 interface Props {
   drawer?: boolean;

package/src/components/modal/WebGL3DR.vue

@@ -10,8 +10,10 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { useViewer3cr } from '@/composables/useViewer3cr';
+import { useViewerOptions } from '@/composables/useViewerOptions';
 
 const viewer3cr = useViewer3cr();
+const options = useViewerOptions();
 const canvas = ref<HTMLCanvasElement>();
 const overlay = ref<HTMLDivElement>();
 
@@ -54,6 +56,11 @@ onMounted(async () => {
   injectEventListener('contextmenu');
 
   await viewer3cr.register(canvas.value!);
+
+  if (options.value.OnViewerLoaded) {
+    await options.value.OnViewerLoaded(viewer3cr);
+  }
+
   emit('instance_loaded');
 });
 

package/src/components/modal/__tests__/ViewerNavigationDrawerHeader.spec.ts

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils';
 import { demoType } from '@/components/demo/options';
 import { nextTick } from 'vue';
 import ViewerNavigationDrawerHeader from '@/components/modal/ViewerNavigationDrawerHeader.vue';
+import { DemoType } from '@/types/demo-type';
 
 describe('ViewerNavigationDrawerHeader tests', () => {
   it('should mount', () => {
@@ -22,7 +23,7 @@ describe('ViewerNavigationDrawerHeader tests', () => {
   });
 
   it('should show collapsed patient logo', async () => {
-    vi.spyOn(demoType, 'value', 'get').mockReturnValue('patient');
+    vi.spyOn(demoType, 'value', 'get').mockReturnValue(DemoType.Patient);
     const props = { drawer: false };
     const wrapper = mount(ViewerNavigationDrawerHeader, { props });
     await nextTick();
@@ -30,7 +31,7 @@ describe('ViewerNavigationDrawerHeader tests', () => {
   });
 
   it('should show expanded patient logo', async () => {
-    vi.spyOn(demoType, 'value', 'get').mockReturnValue('patient');
+    vi.spyOn(demoType, 'value', 'get').mockReturnValue(DemoType.Patient);
     const props = { drawer: true };
     const wrapper = mount(ViewerNavigationDrawerHeader, { props });
     await nextTick();