@3cr/viewer-browser 0.0.248 → 0.0.292

package/src/components/demo/licence/DemoLicenceSendToPartyModal.vue

@@ -1,178 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import {openUrl, PRICING_URL} from "@/components/demo/options";
-
-export interface Props {
-  modal: boolean;
-}
-
-const emit = defineEmits<{
-  "update:modal": [value: boolean];
-}>();
-
-const props = withDefaults(defineProps<Props>(), {
-  modal: false,
-});
-
-const step2 = ref<boolean>(false);
-const user = ref<string>("");
-const users = ref<Array<string>>([]);
-const modalState = computed({
-  get() {
-    return props.modal;
-  },
-  set(value) {
-    emit("update:modal", value);
-  },
-});
-
-function add() {
-  if (user.value && !users.value.includes(user.value) && isValid()) {
-    users.value.push(user.value);
-  }
-}
-
-function isValid() {
-  return /^(([^<>()[\]\\.,;:\s@']+(\.[^<>()\\[\]\\.,;:\s@']+)*)|('.+'))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
-    user.value
-  );
-}
-</script>
-
-<template>
-  <v-dialog v-model:model-value="modalState">
-    <v-card
-      class="pa-1 ma-auto position-relative motif-background card-bg-border"
-      theme="dark"
-      max-width="680"
-      min-width="450"
-    >
-      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">
-        Send Scan to a 3rd Party
-      </v-card-title>
-      <v-card-text>
-        <v-text-field
-          class="text-justify"
-          id="share-email-field-item"
-          ref="shareEmail"
-          v-model="user"
-          label="Send to Email"
-          variant="outlined"
-          density="compact"
-          :rules="[
-            (v) =>
-              /^(([^<>()[\]\\.,;:\s@']+(\.[^<>()\\[\]\\.,;:\s@']+)*)|('.+'))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
-                v
-              ) || `Email must be valid`,
-          ]"
-          clearable
-          @keyup.enter="add"
-        >
-          <template #append-inner>
-            <v-btn
-              v-show="isValid()"
-              id="check-mark"
-              icon
-              class="check-background mt-n01 bg-transparent"
-              size="sm"
-              small
-              elevation="0"
-              :ripple="false"
-              ><v-icon color="success">check</v-icon></v-btn
-            >
-          </template>
-          <template #append>
-            <v-tooltip top>
-              <template #activator="{ props }">
-                <v-btn
-                  v-bind="props"
-                  icon
-                  class="mt-n1 bg-transparent"
-                  elevation="0"
-                  @click="add"
-                  ><v-icon color="success">add</v-icon></v-btn
-                >
-              </template>
-              Include as Pending below
-            </v-tooltip>
-          </template>
-        </v-text-field>
-      </v-card-text>
-      <v-card-text v-if="users.length > 0">
-        Pending 3rd Parties
-        <v-alert
-          v-for="userItem in users"
-          class="my-1"
-          style="font-size: 60%"
-          close-label="Close Alert"
-          color="orange-accent-4"
-          density="compact"
-          :title="userItem"
-          variant="tonal"
-          @click:close="users.splice(users.indexOf(userItem), 1)"
-          closable
-        >
-          New User
-        </v-alert>
-      </v-card-text>
-      <v-card-actions>
-        <v-btn data-testid="close" color="red" @click="modalState = false">
-          Continue with Demo
-        </v-btn>
-        <v-spacer />
-        <v-btn
-          data-testid="confirm"
-          variant="flat"
-          color="success"
-          @click="
-            step2 = true;
-            modalState = false;
-          "
-          :disabled="users.length === 0"
-        >
-          Send to 3rd Parties
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-  <v-dialog v-model:model-value="step2">
-    <v-card
-      class="pa-1 ma-auto position-relative motif-background card-bg-border"
-      theme="dark"
-      max-width="680"
-    >
-      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">
-        Scan shared
-      </v-card-title>
-      <v-card-text class="text-justify">
-        Congratulations, you have sent your scan to a 3rd party.
-      </v-card-text>
-      <v-card-text class="text-justify">
-        Note: This is just a demonstration of how you can in the online viewer,
-        so we have not sent it to the users specified.
-      </v-card-text>
-      <v-card-text class="text-justify">
-        If you would like to view your own scan and/or send it to another party,
-        please select below
-      </v-card-text>
-      <v-card-actions>
-        <v-btn data-testid="close" color="red" @click="step2 = false"> Continue with Demo </v-btn>
-        <v-spacer />
-        <v-btn
-          data-testid="confirm"
-          variant="flat"
-          color="success"
-          @click="openUrl(PRICING_URL)"
-        >
-          I want to view my own scan
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
-
-<style scoped>
-.v-alert-title {
-  font-size: 80%;
-}
-</style>

package/src/components/demo/licence/DemoLicenceShareToMobileModal.vue

@@ -1,102 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import {openUrl, PRICING_URL} from "@/components/demo/options";
-
-export interface Props {
-  modal: boolean;
-}
-
-const emit = defineEmits<{
-  "update:modal": [value: boolean];
-}>();
-
-const props = withDefaults(defineProps<Props>(), {
-  modal: false,
-});
-
-const step2 = ref<boolean>(false);
-const modalState = computed({
-  get() {
-    return props.modal;
-  },
-  set(value) {
-    emit("update:modal", value);
-  },
-});
-</script>
-
-<template>
-  <v-dialog v-model:model-value="modalState">
-    <v-card
-      class="pa-1 ma-auto position-relative motif-background card-bg-border"
-      theme="dark"
-      max-width="680"
-    >
-      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">
-        Download 3Dicom Mobile
-      </v-card-title>
-      <v-card-text class="text-justify">
-        <img
-          src="../../../assets/images/apple-qr.svg"
-          alt="logo-home"
-          width="47%"
-          class="mr-auto rounded-lg"
-        />
-        <img
-          src="../../../assets/images/android-qr.svg"
-          alt="logo-home"
-          width="47%"
-          class="ml-auto rounded-lg float-right"
-        />
-      </v-card-text>
-      <v-card-actions>
-        <v-btn data-testid="close-1" color="red" @click="modalState = false">
-          Continue with Demo
-        </v-btn>
-        <v-spacer />
-        <v-btn
-          data-testid="confirm-1"
-          variant="flat"
-          color="success"
-          @click="
-            step2 = true;
-            modalState = false;
-          "
-        >
-          I have 3DICOM mobile installed
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-  <v-dialog v-model:model-value="step2">
-    <v-card
-      class="pa-1 ma-auto position-relative motif-background card-bg-border"
-      theme="dark"
-      max-width="680"
-    >
-      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">
-        Load your scan
-      </v-card-title>
-      <v-card-text class="text-justify">
-        Once you have logged in and can see your dashboard, select your scan and
-        open it to visualise your X-Ray (XR), Ultrasound (US), Computed
-        Tomography (CT), Magnetic Resonance Imaging (MRI), and Positron Emitting
-        Tomography (PET) scans.
-      </v-card-text>
-      <v-card-actions>
-        <v-btn data-testid="close-2" color="red" @click="step2 = false"> Continue with Demo </v-btn>
-        <v-spacer />
-        <v-btn
-          data-testid="confirm-2"
-          variant="flat"
-          color="success"
-          @click="openUrl(PRICING_URL)"
-        >
-          I want to view my own scan
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
-
-<style scoped></style>

package/src/components/demo/licence/__tests__/DemoLicenceSendToPartyModal.spec.ts

@@ -1,36 +0,0 @@
-import { VDialog, VTextField } from 'vuetify/components';
-import { mount } from '@vue/test-utils';
-import DemoLicenceSendToPartyModal from '@/components/demo/licence/DemoLicenceSendToPartyModal.vue';
-
-describe('DemoLicenceSendToPartyModal tests', () => {
-  it('should mount', () => {
-    const props = { modal: true };
-    const wrapper = mount(DemoLicenceSendToPartyModal, { props });
-    expect(wrapper).toBeTruthy();
-  });
-
-  it('should enter email', async () => {
-    const props = { modal: true };
-    const wrapper = mount(DemoLicenceSendToPartyModal, { props });
-    const input = wrapper.getComponent(VTextField);
-    await input.setValue('example@singular.health');
-    await input.trigger('keyup.enter');
-    const confirm = wrapper.findComponent('[data-testid="confirm"]');
-    await confirm.trigger('click');
-  });
-
-  it('should close modal', async () => {
-    const props = { modal: true };
-    const wrapper = mount(DemoLicenceSendToPartyModal, { props });
-    const close = wrapper.findComponent('[data-testid="close"]');
-    await close.trigger('click');
-    expect(wrapper.emitted('update:modal')).toBeTruthy();
-  });
-
-  it('should open via input', async () => {
-    const props = { modal: false };
-    const wrapper = mount(DemoLicenceSendToPartyModal, { props });
-    const dialog = wrapper.findComponent(VDialog);
-    await dialog.setValue(true);
-  });
-});

package/src/components/demo/licence/__tests__/DemoLicenceShareToMobileModal.spec.ts

@@ -1,52 +0,0 @@
-import { PRICING_URL } from '../../options';
-import { mount } from '@vue/test-utils';
-import { VDialog } from 'vuetify/components';
-import DemoLicenceShareToMobileModal from '@/components/demo/licence/DemoLicenceShareToMobileModal.vue';
-
-describe('DemoLicenceShareToMobileModal tests', () => {
-  it('should mount', () => {
-    const props = { modal: true };
-    const wrapper = mount(DemoLicenceShareToMobileModal, { props });
-    expect(wrapper).toBeTruthy();
-  });
-
-  it('should close modal', async () => {
-    const props = { modal: true };
-    const wrapper = mount(DemoLicenceShareToMobileModal, { props });
-    const close = wrapper.findComponent('[data-testid="close-1"]');
-    await close.trigger('click');
-    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 = mount(DemoLicenceShareToMobileModal, { props });
-    const confirm1 = wrapper.findComponent('[data-testid="confirm-1"]');
-    await confirm1.trigger('click');
-    expect(wrapper.emitted('update:modal')).toBeTruthy();
-    const confirm2 = wrapper.findComponent('[data-testid="confirm-2"]');
-    await confirm2.trigger('click');
-    expect(spy).toHaveBeenCalledWith(PRICING_URL, '_self');
-    vi.restoreAllMocks();
-  });
-
-  it('should go to next step and close', async () => {
-    const props = { modal: true };
-    const wrapper = mount(DemoLicenceShareToMobileModal, { props });
-    const confirm1 = wrapper.findComponent('[data-testid="confirm-1"]');
-    await confirm1.trigger('click');
-    expect(wrapper.emitted('update:modal')).toBeTruthy();
-    const close2 = wrapper.findComponent('[data-testid="close-2"]');
-    await close2.trigger('click');
-    expect(wrapper.text()).toBe('');
-  });
-
-  it('should open via input', async () => {
-    const props = { modal: false };
-    const wrapper = mount(DemoLicenceShareToMobileModal, { props });
-    const dialog = wrapper.findComponent(VDialog);
-    await dialog.setValue(true);
-  });
-});

package/src/components/demo/options.ts

@@ -1,170 +0,0 @@
-import { computed, ref } from 'vue';
-import { LoadViewerOptions } from '@/models/loadViewerOptions';
-import { LoadViewerPayload } from '@/models/loadViewerPayload';
-import { useViewer3cr } from '@/composables/useViewer3cr';
-import { mockDemoViewerStlDecimator } from '@/composables/useViewerOptions';
-import { DemoType } from '@/types/demo-type';
-
-export const PRICING_URL = 'https://3dicomviewer.com/pricing';
-
-export const SUPPORT_URL = 'https://3dicomviewer.com/contact-3dicom';
-
-const BASE_STATE_URL = 'https://webgl-3dr.singular.health/demo';
-
-const viewer3cr = useViewer3cr();
-export const isDemo = ref<boolean>(false);
-export const show = ref<boolean>(true);
-export const m_demoLicence = ref<boolean>(false);
-export const m_demoLicenceShareToMobile = ref<boolean>(false);
-export const m_demoLicenceSendToParty = ref<boolean>(false);
-export const m_demoLicenseEnableCloudStorage = ref<boolean>(false);
-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 demoPatientSubtitles = ref<Array<string>>([]);
-export const demoLicenceTitle = ref<string>('');
-export const demoLicenceSubtitles = ref<Array<string>>([]);
-
-export const demoLicenceOptions: LoadViewerOptions = {
-  OnClosePopup: undefined,
-  OnExitViewer: () => {
-    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'
-    ];
-    m_demoLicence.value = true;
-    show.value = false;
-  },
-  OnLoadNewDicomSeries: () => {
-    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.'
-    ];
-
-    m_demoLicence.value = true;
-  },
-  OnDownloadDicomSeries: () => {
-    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.'
-    ];
-    m_demoLicence.value = true;
-  },
-  OnLoadSavedSession: () => {
-    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.'
-    ];
-    m_demoLicence.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.'];
-    m_demoLicence.value = true;
-  },
-  OnSendTo3rdParty: () => {
-    m_demoLicenceSendToParty.value = true;
-  },
-  OnShareToMobile: () => {
-    m_demoLicenceShareToMobile.value = true;
-  },
-  OnEnableCloudStorage: () => {
-    m_demoLicenseEnableCloudStorage.value = true;
-  },
-  OnAutoAnnotate: async () => {
-    mockDemoViewerStlDecimator();
-    await viewer3cr.loadMcadObjects({ Url: `${BASE_STATE_URL}/state/TotalSegmentator_1722837421466.3crms` });
-  },
-  OnShare: undefined,
-  OnScreenshot: undefined,
-  OnErrorClose: undefined
-};
-
-export const demoPatientOptions: LoadViewerOptions = {
-  OnClosePopup: undefined,
-  OnExitViewer: () => {
-    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'
-    ];
-    m_demoPatient.value = true;
-    show.value = false;
-  },
-  OnLoadNewDicomSeries: () => {
-    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.'
-    ];
-    m_demoPatient.value = true;
-  },
-  OnDownloadDicomSeries: () => {
-    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.'
-    ];
-    m_demoPatient.value = true;
-  },
-  OnLoadSavedSession: () => {
-    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.'
-    ];
-    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.'];
-    m_demoPatient.value = true;
-  },
-  OnSendTo3rdParty: () => {
-    m_demoPatientSendToParty.value = true;
-  },
-  OnShareToMobile: () => {
-    m_demoPatientShareToMobile.value = true;
-  },
-  OnEnableCloudStorage: () => {
-    m_demoPatientEnableCloudStorage.value = true;
-  },
-  OnAutoAnnotate: demoLicenceOptions.OnAutoAnnotate,
-  OnShare: undefined,
-  OnScreenshot: undefined,
-  OnErrorClose: undefined
-};
-
-export function checkIsDemo(payload: LoadViewerPayload) {
-  isDemo.value = payload.Url.startsWith('https://webgl-3dr.singular.health/demo');
-}
-
-export const demoType = computed(() => {
-  const urlParams = new URLSearchParams(window.location.search);
-  if (urlParams.has('demoType')) {
-    const demoType = urlParams.get('demoType')!.toLowerCase();
-    switch (demoType) {
-      case 'patient':
-        return DemoType.Patient;
-      case 'licence':
-        return DemoType.Licence;
-    }
-  }
-  return DemoType.Patient;
-});
-
-export const demoOptions = computed(() => {
-  switch (demoType.value) {
-    case DemoType.Patient:
-      return demoPatientOptions;
-    case DemoType.Licence:
-      return demoLicenceOptions;
-    default:
-      throw new Error('Unknown demo type');
-  }
-});
-
-export function openUrl(url: string, target: string = '_self') {
-  window.open(url, target);
-}

package/src/components/demo/patient/DemoPatientEnableCloudStorageModal.vue

@@ -1,64 +0,0 @@
-<template>
-  <v-dialog width="600" v-model:model-value="modalState">
-    <v-card theme="dark" class="motif-background">
-      <v-card-title class="text-center font-weight-bold">
-        Enable Cloud Storage
-      </v-card-title>
-      <v-card-text>
-        <p style="text-align: center;">Enable annual storage for just <b>5 credits</b>.</p>
-        <br />
-        <div>
-          <v-row no-gutters v-for="(benefit, idx) in benefits" :key="idx">
-            <v-col class="d-flex justify-end" cols="2">
-              <v-icon class="mr-2" color="success" icon="check" />
-            </v-col>
-            <v-col>
-              {{ benefit }}
-            </v-col>
-          </v-row>
-        </div>
-      </v-card-text>
-      <v-card-actions>
-        <v-btn data-testid="close" color="red" @click="modalState = false">
-          Continue with Demo
-        </v-btn>
-        <v-spacer />
-        <v-btn data-testid="confirm" variant="flat" color="success" @click="openUrl(PRICING_URL)">
-          Enable Cloud Storage
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { PRICING_URL, openUrl } from '@/components/demo/options';
-
-interface Props {
-  modal?: boolean;
-}
-
-type Emits = {
-  'update:modal': [value: boolean];
-};
-
-const props = defineProps<Props>();
-
-const emit = defineEmits<Emits>();
-
-const benefits = [
-  'Secure storage',
-  'Access your scan from any device',
-  'Keep your medical imaging records at your fingertips'
-];
-
-const modalState = computed({
-  get(): boolean {
-    return props.modal;
-  },
-  set(value: boolean): void {
-    emit('update:modal', value);
-  }
-});
-</script>

package/src/components/demo/patient/DemoPatientInfoModal.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { demoPatientSubtitles, demoPatientTitle, openUrl, PRICING_URL } from '@/components/demo/options';
-
-export interface Props {
-  modal: boolean;
-  isModalOpen?: boolean;
-}
-
-const emit = defineEmits<{
-  'update:modal': [value: boolean];
-}>();
-
-const props = withDefaults(defineProps<Props>(), {
-  modal: false,
-  isModalOpen: true
-});
-
-const modalState = computed({
-  get() {
-    return props.modal;
-  },
-  set(value) {
-    emit('update:modal', value);
-  }
-});
-</script>
-
-<template>
-  <v-dialog v-model:model-value="modalState">
-    <v-card class="pa-1 ma-auto position-relative motif-background card-bg-border" theme="dark" max-width="680">
-      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">{{ demoPatientTitle }}</v-card-title>
-      <v-card-text class="text-justify" v-for="subtitle in demoPatientSubtitles" :key="subtitle"
-        >{{ subtitle }}
-      </v-card-text>
-      <v-card-actions class="mt-4">
-        <v-btn data-testid="close" color="red" @click="modalState = false" :disabled="!isModalOpen">
-          Continue with Demo
-        </v-btn>
-        <v-spacer />
-        <v-btn data-testid="confirm" variant="flat" color="success" @click="openUrl(PRICING_URL)">
-          Purchase 3Dicom Patient
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
-
-<style scoped></style>