@3cr/viewer-browser 0.0.196 → 0.0.220

package/src/components/demo/options.ts

@@ -1,15 +1,20 @@
-import { computed, ref, unref, watch } from "vue";
-import { LoadViewerOptions } from "@/models/LoadViewerOptions";
-import { LoadViewerPayload } from "@/models/LoadViewerPayload";
+import { computed, ref, watch } from 'vue';
+import { LoadViewerOptions } from '@/models/loadViewerOptions';
+import { LoadViewerPayload } from '@/models/loadViewerPayload';
 
 export const PRICING_URL = 'https://3dicomviewer.com/pricing';
+
 export const SUPPORT_URL = 'https://3dicomviewer.com/contact-3dicom';
 
 export function checkIsDemo(payload: LoadViewerPayload) {
-  isDemo.value =
-    payload.Url ===
-    "https://webgl-3dr.singular.health/test_scans/01440d4e-8b04-4b90-bb2c-698535ce16d6/CHEST.3vxl";
+  isDemo.value = payload.Url.startsWith('https://webgl-3dr.singular.health/demo');
 }
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { mockDemoViewerStlDecimator } from '@/composables/useViewerOptions';
+
+const viewer3cr = useViewer3cr();
+
+const BASE_STATE_URL = 'https://webgl-3dr.singular.health/demo';
 
 export const isDemo = ref<boolean>(false);
 export const m_demo = ref<boolean>(false);
@@ -20,49 +25,45 @@ export const m_demoPatient = ref<boolean>(false);
 export const m_demoPatientShareToMobile = ref<boolean>(false);
 export const m_demoPatientSendToParty = ref<boolean>(false);
 export const m_demoPatientEnableCloudStorage = ref<boolean>(false);
-export const demoPatientTitle = ref<string>("");
+export const demoPatientTitle = ref<string>('');
 export const demoPatientSubtitles = ref<Array<string>>([]);
-export const demoLicenceTitle = ref<string>("");
+export const demoLicenceTitle = ref<string>('');
 export const demoLicenceSubtitles = ref<Array<string>>([]);
 
 export const demoLicenceOptions: LoadViewerOptions = {
-  OnClosePopup: () => Promise.resolve(),
+  OnClosePopup: () => {},
   OnExitViewer: () => {
-    demoLicenceTitle.value = "Thank you for trying the 3Dicom Licensing Demo.";
+    demoLicenceTitle.value = 'Thank you for trying the 3Dicom Licensing Demo.';
     demoLicenceSubtitles.value = [
-      "Should you have any further questions or enquiries, please get in touch by emailing support@singular.health",
+      'Should you have any further questions or enquiries, please get in touch by emailing support@singular.health'
     ];
     m_demo.value = true;
   },
   OnLoadNewDicomSeries: () => {
-    demoLicenceTitle.value = "Support multiple medical imaging file types";
+    demoLicenceTitle.value = 'Support multiple medical imaging file types';
     demoLicenceSubtitles.value = [
-      "3Dicom’s white-labelled online 2D / 3D DICOM viewer allows the loading of X-Ray (XR), Ultrasound (US), Computed Tomography (CT), Magnetic Resonance Imaging (MRI), and Positron Emitting Tomography (PET) using the global DICOM file format.",
+      '3Dicom’s white-labelled online 2D / 3D DICOM viewer allows the loading of X-Ray (XR), Ultrasound (US), Computed Tomography (CT), Magnetic Resonance Imaging (MRI), and Positron Emitting Tomography (PET) using the global DICOM file format.'
     ];
 
     m_demo.value = true;
   },
   OnDownloadDicomSeries: () => {
-    demoLicenceTitle.value =
-      "Improve interoperability with local download of DICOM series";
+    demoLicenceTitle.value = 'Improve interoperability with local download of DICOM series';
     demoLicenceSubtitles.value = [
-      "Integrate 3Dicom’s white-labelled online 2D/3D viewer into your PACS and/or medical records database to pull DICOM series and allow for local download direct from the viewer. This feature can be hidden upon request.",
+      'Integrate 3Dicom’s white-labelled online 2D/3D viewer into your PACS and/or medical records database to pull DICOM series and allow for local download direct from the viewer. This feature can be hidden upon request.'
     ];
     m_demo.value = true;
   },
   OnLoadSavedSession: () => {
-    demoLicenceTitle.value =
-      "Save previous progress and share particular sessions";
+    demoLicenceTitle.value = 'Save previous progress and share particular sessions';
     demoLicenceSubtitles.value = [
-      "3Dicom’s viewer enables session-saving to record any changes made during the viewing of medical scans including orientation of views, editing of labels, visualisation settings, and density settings. Changes made during sessions preserve the integrity of the DICOM file and are overlaid in future sessions.",
+      '3Dicom’s viewer enables session-saving to record any changes made during the viewing of medical scans including orientation of views, editing of labels, visualisation settings, and density settings. Changes made during sessions preserve the integrity of the DICOM file and are overlaid in future sessions.'
     ];
     m_demo.value = true;
   },
   OnSaveSession: () => {
-    demoLicenceTitle.value = "Thank you for trying the 3Dicom Licensing Demo.";
-    demoLicenceSubtitles.value = [
-      "Each 3Dicom viewer session can be saved with your changes made for future viewing.",
-    ];
+    demoLicenceTitle.value = 'Thank you for trying the 3Dicom Licensing Demo.';
+    demoLicenceSubtitles.value = ['Each 3Dicom viewer session can be saved with your changes made for future viewing.'];
     m_demo.value = true;
   },
   OnSendTo3rdParty: () => {
@@ -74,20 +75,21 @@ export const demoLicenceOptions: LoadViewerOptions = {
   OnEnableCloudStorage: () => {
     m_demoLicenseEnableCloudStorage.value = true;
   },
-  OnShare: () => {
-    //TODO:
-    // m_demo.value = true;
+  OnAutoAnnotate: async () => {
+    mockDemoViewerStlDecimator();
+    await viewer3cr.loadMcadObjects({ Url: `${BASE_STATE_URL}/state/TotalSegmentator_1722837421466.3crms` });
   },
-  OnScreenshot: undefined,
-  OnErrorClose: () => Promise.resolve(),
+  OnShare: () => {},
+  OnScreenshot: () => {},
+  OnErrorClose: () => {}
 };
 
 export const demoPatientOptions: LoadViewerOptions = {
-  OnClosePopup: () => Promise.resolve(),
+  OnClosePopup: () => {},
   OnExitViewer: () => {
-    demoPatientTitle.value = "Thank you for trying the 3Dicom Patient Demo.";
+    demoPatientTitle.value = 'Thank you for trying the 3Dicom Patient Demo.';
     demoPatientSubtitles.value = [
-      "Should you have any further questions or enquiries, please get in touch by emailing support@singular.health",
+      'Should you have any further questions or enquiries, please get in touch by emailing support@singular.health'
     ];
     m_demoPatient.value = true;
     watch(m_demoPatient, () => {
@@ -97,37 +99,32 @@ export const demoPatientOptions: LoadViewerOptions = {
     });
   },
   OnLoadNewDicomSeries: () => {
-    demoPatientTitle.value =
-      "3Dicom Patient supports multiple Medical Imaging Formats";
+    demoPatientTitle.value = '3Dicom Patient supports multiple Medical Imaging Formats';
     demoPatientSubtitles.value = [
-      "3Dicom Patient enables you to load of X-Ray (XR), Ultrasound (US), Computed Tomography (CT), Magnetic Resonance Imaging (MRI), and Positron Emitting Tomography (PET), using the global DICOM file format.",
-      "Purchase 3Dicom Patient to load your own medical images and view in 2D / 3D.",
+      '3Dicom Patient enables you to load of X-Ray (XR), Ultrasound (US), Computed Tomography (CT), Magnetic Resonance Imaging (MRI), and Positron Emitting Tomography (PET), using the global DICOM file format.',
+      'Purchase 3Dicom Patient to load your own medical images and view in 2D / 3D.'
     ];
     m_demoPatient.value = true;
   },
   OnDownloadDicomSeries: () => {
-    demoPatientTitle.value =
-      "3Dicom Patient enables on-demand download of DICOM series";
+    demoPatientTitle.value = '3Dicom Patient enables on-demand download of DICOM series';
     demoPatientSubtitles.value = [
-      "3Dicom Patient enables you to store your medical imaging and related files / reports online or share them temporarily between devices. ",
-      "DICOM files can be downloaded to your device for local storage and providing to 3rd parties via CD/USB.",
-      "Purchase 3Dicom Patient to gain control over your DICOM file storage.",
+      '3Dicom Patient enables you to store your medical imaging and related files / reports online or share them temporarily between devices. ',
+      'DICOM files can be downloaded to your device for local storage and providing to 3rd parties via CD/USB.',
+      'Purchase 3Dicom Patient to gain control over your DICOM file storage.'
     ];
     m_demoPatient.value = true;
   },
   OnLoadSavedSession: () => {
-    demoPatientTitle.value =
-      "3Dicom Patient allows you to load previous Sessions";
+    demoPatientTitle.value = '3Dicom Patient allows you to load previous Sessions';
     demoPatientSubtitles.value = [
-      "3Dicom Patient gives you to option to save any changes made during the viewing of your scan including orientation of views, editing of labels, visualisation settings, and density settings to easily view your scans the same way in the future. Session data can also be shared to 3rd parties so they see your scan the same way that you do.",
+      '3Dicom Patient gives you to option to save any changes made during the viewing of your scan including orientation of views, editing of labels, visualisation settings, and density settings to easily view your scans the same way in the future. Session data can also be shared to 3rd parties so they see your scan the same way that you do.'
     ];
     m_demoPatient.value = true;
   },
   OnSaveSession: () => {
-    demoPatientTitle.value = "Thank you for trying the 3Dicom Patient Demo.";
-    demoPatientSubtitles.value = [
-      "Each 3Dicom viewer session can be saved with your changes made for future viewing.",
-    ];
+    demoPatientTitle.value = 'Thank you for trying the 3Dicom Patient Demo.';
+    demoPatientSubtitles.value = ['Each 3Dicom viewer session can be saved with your changes made for future viewing.'];
     m_demoPatient.value = true;
   },
   OnSendTo3rdParty: () => {
@@ -139,34 +136,32 @@ export const demoPatientOptions: LoadViewerOptions = {
   OnEnableCloudStorage: () => {
     m_demoPatientEnableCloudStorage.value = true;
   },
-  OnShare: () => {
-    //TODO:
-    // m_demoPatient.value = true;
-  },
-  OnScreenshot: undefined,
-  OnErrorClose: () => Promise.resolve(),
+  OnAutoAnnotate: demoLicenceOptions.OnAutoAnnotate,
+  OnShare: () => {},
+  OnScreenshot: () => {},
+  OnErrorClose: () => {}
 };
 
-const optionalTypes = ["licence", "patient"];
+const optionalTypes = ['licence', 'patient'];
 
 export const demoType = computed(() => {
   const urlParams = new URLSearchParams(window.location.search);
-  let type = (urlParams.get("demoType") || "licence").toLowerCase();
+  let type = (urlParams.get('demoType') || 'licence').toLowerCase();
 
-  if (type === "license") type = optionalTypes[0];
+  if (type === 'license') type = optionalTypes[0];
   return optionalTypes.includes(type) ? type : optionalTypes[0];
 });
 
 export const demoOptions = computed(() => {
-  if (unref(demoType) === "licence") {
+  if (demoType.value === 'licence') {
     return demoLicenceOptions;
-  } else if (unref(demoType) === "patient") {
+  } else if (demoType.value === 'patient') {
     return demoPatientOptions;
   } else {
     throw new Error('Unknown demo type');
   }
 });
 
-export function openUrl(url: string, target: string = "_self") {
+export function openUrl(url: string, target: string = '_self') {
   window.open(url, target);
 }

package/src/components/demo/patient/__tests__/DemoPatientEnableCloudStorageModal.spec.ts

@@ -1,28 +1,28 @@
-import { describe, it, expect, vi } from "vitest";
-import { mountVuetify, openAllModals } from "~/helper";
-import DemoPatientEnableCloudStorageModal from "@/components/demo/patient/DemoPatientEnableCloudStorageModal.vue";
-import { PRICING_URL } from "../../options";
+import { PRICING_URL } from '../../options';
+import { mount } from '@vue/test-utils';
+import DemoPatientEnableCloudStorageModal from '@/components/demo/patient/DemoPatientEnableCloudStorageModal.vue';
+import { VDialog } from 'vuetify/components';
 
 describe('DemoPatientEnableCloudStorageModal tests', () => {
   it('should mount', () => {
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoPatientEnableCloudStorageModal, props);
+    const wrapper = mount(DemoPatientEnableCloudStorageModal, { props });
     expect(wrapper).toBeTruthy();
   });
 
   it('should close modal', async () => {
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoPatientEnableCloudStorageModal, props);
+    const wrapper = mount(DemoPatientEnableCloudStorageModal, { props });
     const close = wrapper.findComponent('[data-testid="close"]');
     await close.trigger('click');
-    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+    expect(wrapper.emitted('update:modal')).toBeTruthy();
   });
 
   it('should open pricing url', async () => {
     vi.stubGlobal('open', vi.fn());
     const spy = vi.spyOn(window, 'open');
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoPatientEnableCloudStorageModal, props);
+    const wrapper = mount(DemoPatientEnableCloudStorageModal, { props });
     const button = wrapper.findComponent('[data-testid="confirm"]');
     await button.trigger('click');
     expect(spy).toHaveBeenCalledWith(PRICING_URL, '_self');
@@ -31,7 +31,8 @@ describe('DemoPatientEnableCloudStorageModal tests', () => {
 
   it('should open via input', async () => {
     const props = { modal: false };
-    const wrapper = mountVuetify(DemoPatientEnableCloudStorageModal, props);
-    await openAllModals(wrapper);
+    const wrapper = mount(DemoPatientEnableCloudStorageModal, { props });
+    const dialog = wrapper.findComponent(VDialog);
+    await dialog.setValue(true);
   });
 });

package/src/components/demo/patient/__tests__/DemoPatientInfoModal.spec.ts

@@ -1,28 +1,28 @@
-import { describe, it, expect, vi } from "vitest";
-import { mountVuetify, openAllModals } from "~/helper";
-import { PRICING_URL } from "@/components/demo/options";
-import DemoPatientInfoModal from "@/components/demo/patient/DemoPatientInfoModal.vue";
+import { mount } from '@vue/test-utils';
+import { PRICING_URL } from '@/components/demo/options';
+import { VDialog } from 'vuetify/components';
+import DemoPatientInfoModal from '@/components/demo/patient/DemoPatientInfoModal.vue';
 
 describe('DemoPatientInfoModal tests', () => {
   it('should mount', () => {
     const props = { modal: true, isModalOpen: true };
-    const wrapper = mountVuetify(DemoPatientInfoModal, props);
+    const wrapper = mount(DemoPatientInfoModal, { props });
     expect(wrapper).toBeTruthy();
   });
 
   it('should close modal', async () => {
     const props = { modal: true, isModalOpen: true };
-    const wrapper = mountVuetify(DemoPatientInfoModal, props);
+    const wrapper = mount(DemoPatientInfoModal, { props });
     const close = wrapper.findComponent('[data-testid="close"]');
     await close.trigger('click');
-    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+    expect(wrapper.emitted('update:modal')).toBeTruthy();
   });
 
   it('should open support url', async () => {
     vi.stubGlobal('open', vi.fn());
     const spy = vi.spyOn(window, 'open');
-    const props = { modal: true };
-    const wrapper = mountVuetify(DemoPatientInfoModal, props);
+    const props = { modal: true, isModalOpen: true };
+    const wrapper = mount(DemoPatientInfoModal, { props });
     const button = wrapper.findComponent('[data-testid="confirm"]');
     await button.trigger('click');
     expect(spy).toHaveBeenCalledWith(PRICING_URL, '_self');
@@ -31,7 +31,8 @@ describe('DemoPatientInfoModal tests', () => {
 
   it('should open via input', async () => {
     const props = { modal: false, isModalOpen: true };
-    const wrapper = mountVuetify(DemoPatientInfoModal, props);
-    await openAllModals(wrapper);
+    const wrapper = mount(DemoPatientInfoModal, { props });
+    const dialog = wrapper.findComponent(VDialog);
+    await dialog.setValue(true);
   });
 });

package/src/components/demo/patient/__tests__/DemoPatientSendToPartyModal.spec.ts

@@ -1,26 +1,25 @@
-import { describe, expect, it } from "vitest";
-import { mountVuetify, openAllModals } from "~/helper";
-import { VTextField } from "vuetify/components";
-import DemoPatientSendToPartyModal from "@/components/demo/patient/DemoPatientSendToPartyModal.vue";
+import { mount } from '@vue/test-utils';
+import { VDialog, VTextField } from 'vuetify/components';
+import DemoPatientSendToPartyModal from '@/components/demo/patient/DemoPatientSendToPartyModal.vue';
 
 describe('DemoPatientSendToPartyModal tests', () => {
   it('should mount', () => {
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoPatientSendToPartyModal, props);
+    const wrapper = mount(DemoPatientSendToPartyModal, { props });
     expect(wrapper).toBeTruthy();
   });
 
   it('should close modal', async () => {
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoPatientSendToPartyModal, props);
+    const wrapper = mount(DemoPatientSendToPartyModal, { props });
     const close = wrapper.findComponent('[data-testid="close"]');
     await close.trigger('click');
-    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+    expect(wrapper.emitted('update:modal')).toBeTruthy();
   });
 
   it('should enter email', async () => {
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoPatientSendToPartyModal, props);
+    const wrapper = mount(DemoPatientSendToPartyModal, { props });
     const input = wrapper.getComponent(VTextField);
     await input.setValue('example@singular.health');
     await input.trigger('keyup.enter');
@@ -30,7 +29,8 @@ describe('DemoPatientSendToPartyModal tests', () => {
 
   it('should open via input', async () => {
     const props = { modal: false };
-    const wrapper = mountVuetify(DemoPatientSendToPartyModal, props);
-    await openAllModals(wrapper);
+    const wrapper = mount(DemoPatientSendToPartyModal, { props });
+    const dialog = wrapper.findComponent(VDialog);
+    await dialog.setValue(true);
   });
 });

package/src/components/demo/patient/__tests__/DemoPatientShareToMobileModal.spec.ts

@@ -1,31 +1,31 @@
-import { describe, expect, it, vi } from "vitest";
-import { mountVuetify, openAllModals } from "~/helper";
-import DemoPatientShareToMobileModal from "@/components/demo/patient/DemoPatientShareToMobileModal.vue";
-import { PRICING_URL } from "../../options";
+import { PRICING_URL } from '../../options';
+import { mount } from '@vue/test-utils';
+import { VDialog } from 'vuetify/components';
+import DemoPatientShareToMobileModal from '@/components/demo/patient/DemoPatientShareToMobileModal.vue';
 
 describe('DemoPatientShareToMobileModal tests', () => {
   it('should mount', () => {
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoPatientShareToMobileModal, props);
+    const wrapper = mount(DemoPatientShareToMobileModal, { props });
     expect(wrapper).toBeTruthy();
   });
 
   it('should close modal', async () => {
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoPatientShareToMobileModal, props);
+    const wrapper = mount(DemoPatientShareToMobileModal, { props });
     const close = wrapper.findComponent('[data-testid="close-1"]');
     await close.trigger('click');
-    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+    expect(wrapper.emitted('update:modal')).toBeTruthy();
   });
 
   it('should go to next step and open url', async () => {
     vi.stubGlobal('open', vi.fn());
     const spy = vi.spyOn(window, 'open');
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoPatientShareToMobileModal, props);
+    const wrapper = mount(DemoPatientShareToMobileModal, { props });
     const confirm1 = wrapper.findComponent('[data-testid="confirm-1"]');
     await confirm1.trigger('click');
-    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+    expect(wrapper.emitted('update:modal')).toBeTruthy();
     const confirm2 = wrapper.findComponent('[data-testid="confirm-2"]');
     await confirm2.trigger('click');
     expect(spy).toHaveBeenCalledWith(PRICING_URL, '_self');
@@ -34,10 +34,10 @@ describe('DemoPatientShareToMobileModal tests', () => {
 
   it('should go to next step and close', async () => {
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoPatientShareToMobileModal, props);
+    const wrapper = mount(DemoPatientShareToMobileModal, { props });
     const confirm1 = wrapper.findComponent('[data-testid="confirm-1"]');
     await confirm1.trigger('click');
-    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+    expect(wrapper.emitted('update:modal')).toBeTruthy();
     const close2 = wrapper.findComponent('[data-testid="close-2"]');
     await close2.trigger('click');
     expect(wrapper.text()).toBe('');
@@ -45,7 +45,8 @@ describe('DemoPatientShareToMobileModal tests', () => {
 
   it('should open via input', async () => {
     const props = { modal: false };
-    const wrapper = mountVuetify(DemoPatientShareToMobileModal, props);
-    await openAllModals(wrapper);
+    const wrapper = mount(DemoPatientShareToMobileModal, { props });
+    const dialog = wrapper.findComponent(VDialog);
+    await dialog.setValue(true);
   });
 });

package/src/components/modal/ActionRail.vue

@@ -5,12 +5,12 @@
         <slot name="visible" :action="action" :index="index"></slot>
       </div>
     </template>
-    <v-menu v-if="showMenu" v-bind="menuProps" @update:model-value="emit('menuActive', $event)">
+    <v-menu v-if="showMenu" v-bind="menuProps" v-on="menuOn">
       <template #activator="{ props }">
         <v-btn v-bind="mergeProps(props, menuActivatorProps)" />
       </template>
       <v-list>
-        <template v-for="(action, index) of hidden" >
+        <template v-for="(action, index) of hidden">
           <div class="hidden-item">
             <slot name="hidden" :action="action" :index="index"></slot>
           </div>
@@ -24,31 +24,27 @@
 import { computed, mergeProps, onBeforeUnmount, onMounted, ref } from 'vue';
 
 type Action<T = Record<string, unknown>> = {
-  width: number
+  width: number;
 } & T;
 
 interface Props {
   actions?: Action[];
   menuProps?: Record<string, unknown>;
+  menuOn?: Record<string, unknown>;
   menuActivatorProps?: Record<string, unknown>;
 }
 
-type Emits = {
-  menuActive: [boolean];
-};
-
 const props = withDefaults(defineProps<Props>(), {
   actions: () => [],
   menuProps: () => ({}),
+  menuOn: () => ({}),
   menuActivatorProps: () => ({})
 });
 
-const emit = defineEmits<Emits>();
-
 const rail = ref<HTMLDivElement>();
 const splitIndex = ref<number>(0);
 
-const observer = new ResizeObserver(entries => {
+const observer = new ResizeObserver((entries) => {
   if (entries.length > 0) {
     const railWidth = entries[0].contentRect.width;
     calculateSplitIndex(railWidth);
@@ -78,7 +74,7 @@ onBeforeUnmount(() => {
 });
 
 function calculateSplitIndex(railWidth: number): void {
-  const widths = props.actions.map(action => action.width);
+  const widths = props.actions.map((action) => action.width);
   let sum = 48;
   for (const [idx, width] of widths.entries()) {
     if (sum + width < railWidth) {