@3cr/viewer-browser 0.0.200 → 0.0.246

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) {

package/src/components/modal/AskAI.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model:model-value="modalState" max-width="800" theme="light">
+  <v-dialog v-model="modalState" max-width="800" theme="light">
     <v-card class="prompt-box pa-2 py-4" rounded="xl">
       <v-card-title class="text-body-1 d-flex align-center text-wrap mx-3 mb-4">
         <span>{{ questionText }}</span>
@@ -8,16 +8,8 @@
       <div class="bordered-gradient-box" v-if="smartResponses">
         <div class="prompt" style="font-size: 28px">
           <!--          &#129668;-->
-          <v-img
-            src="@/assets/magic_wand.svg"
-            class="animated"
-            max-width="42"
-          />
-          &nbsp;&nbsp;&nbsp;<span
-            style="font-size: 18px"
-            v-html="smartResponses?.GptResponse"
-          >
-          </span>
+          <v-img src="@/assets/magic_wand.svg" class="animated" max-width="42" />
+          &nbsp;&nbsp;&nbsp;<span style="font-size: 18px" v-html="smartResponses?.GptResponse"> </span>
         </div>
       </div>
 
@@ -26,19 +18,13 @@
         <div class="loading"></div>
       </div>
       <v-card-text class="py-0">
-        <span
-          class="text-caption"
-          style="font-size: 10px !important; line-height: 10px !important"
-          >* 3Dicom's Annotiva AI is powered by AI Large Language Models (LLMs)
-          which generate general health information for improved patient
-          comprehension. <br />It is NOT for diagnostic usage.
+        <span class="text-caption" style="font-size: 10px !important; line-height: 10px !important"
+          >* 3Dicom's Annotiva AI is powered by AI Large Language Models (LLMs) which generate general health
+          information for improved patient comprehension. <br />It is NOT for diagnostic usage.
         </span>
       </v-card-text>
 
-      <v-card-title
-        v-if="smartResponses"
-        class="text-body-1 d-flex align-center text-wrap mx-3 mt-6 mb-0"
-      >
+      <v-card-title v-if="smartResponses" class="text-body-1 d-flex align-center text-wrap mx-3 mt-6 mb-0">
         Still Curious?
       </v-card-title>
       <v-card-text class="py-0">
@@ -49,11 +35,7 @@
               text-wrap: wrap;
               word-wrap: break-word;
               min-height: 36px;
-              background: linear-gradient(
-                to right,
-                rgba(38, 55, 245, 0.85),
-                rgba(145, 78, 245, 0.85)
-              );
+              background: linear-gradient(to right, rgba(38, 55, 245, 0.85), rgba(145, 78, 245, 0.85));
             "
             class="text-wrap mb-1 px-4 v-chip--selected text-white"
             @click="askFollowUpQuestion(action)"
@@ -67,13 +49,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
-import {
-  GptQuestion,
-  GptResponsePayload,
-  GptService,
-} from "@/services/gpt/gpt.service";
-const smartResponses = ref<GptResponsePayload | null>(null);
+import { computed, ref, watch } from 'vue';
+import { GptService } from '@/services/gpt.service';
+import { GptQuestion } from '@/types/gpt-question';
+import { GptResponsePayload } from '@/types/gpt-response-payload';
+
 interface Props {
   modal?: boolean;
   questionText: string;
@@ -82,7 +62,7 @@ interface Props {
 }
 
 type Emits = {
-  "update:modal": [value: boolean];
+  'update:modal': [value: boolean];
   askFollowup: [value: GptQuestion];
 };
 
@@ -90,21 +70,23 @@ const props = defineProps<Props>();
 
 const emit = defineEmits<Emits>();
 
-const item = ref();
+const item = ref<number>();
+
+const smartResponses = ref<GptResponsePayload>();
+
 const modalState = computed({
   get(): boolean {
     return props.modal;
   },
   set(value: boolean): void {
-    emit("update:modal", value);
-  },
+    emit('update:modal', value);
+  }
 });
 
 watch(
   modalState,
   async (val: boolean) => {
     if (val) {
-      smartResponses.value = null;
       await getSmartResponses();
     }
   },
@@ -120,23 +102,25 @@ async function getSmartResponses(): Promise<void> {
   );
 }
 
-async function askFollowUpQuestion(question: GptQuestion): Promise<void> {
-  emit("askFollowup", question);
+function askFollowUpQuestion(question: GptQuestion): void {
+  emit('askFollowup', question);
 }
 </script>
+
 <style>
 .loading {
   font-size: 30px;
 }
+
 .loading:after {
   overflow: hidden;
   display: inline-block;
   vertical-align: bottom;
   -webkit-animation: ellipsis steps(4, end) 900ms infinite;
   animation: ellipsis steps(4, end) 900ms infinite;
-  content: "\2026";
+  content: '\2026';
   /* ascii code for the ellipsis character */
-  width: 0px;
+  width: 0;
 }
 
 @keyframes ellipsis {
@@ -171,14 +155,16 @@ async function askFollowUpQuestion(question: GptQuestion): Promise<void> {
 }
 
 .prompt::before {
-  content: "";
+  content: '';
   position: absolute;
   inset: 0;
   border-radius: 16px;
   padding: 3px;
   background: linear-gradient(to right, #6fb3f2, #4e51f5);
 
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
 }
@@ -212,10 +198,12 @@ async function askFollowUpQuestion(question: GptQuestion): Promise<void> {
 .record-button:active {
   background: #3b3edf;
 }
+
 .animated {
   animation: pulse 2s infinite;
   transition: all 2s ease-in-out;
 }
+
 @keyframes pulse {
   0% {
     transform: scale(1);
@@ -224,13 +212,9 @@ async function askFollowUpQuestion(question: GptQuestion): Promise<void> {
     transform: scale(1.2);
   }
 }
+
 .btn-grad {
-  background-image: linear-gradient(
-    to right,
-    #2b5876 0%,
-    #4e4376 51%,
-    #2b5876 100%
-  );
+  background-image: linear-gradient(to right, #2b5876 0%, #4e4376 51%, #2b5876 100%);
   margin: 10px;
   padding: 15px 45px;
   text-align: center;
@@ -242,6 +226,7 @@ async function askFollowUpQuestion(question: GptQuestion): Promise<void> {
   border-radius: 10px;
   display: block;
 }
+
 .btn-grad:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;

package/src/components/modal/CloseViewerModal.vue

@@ -1,66 +1,35 @@
 <template>
-  <v-dialog data-testid="dialog" v-model:model-value="modalState">
-    <v-card
-      class="pa-1 ma-auto position-relative motif-background"
-      width="600"
-      theme="dark"
-    >
+  <v-dialog data-testid="dialog" v-model="modalState">
+    <v-card class="pa-1 ma-auto position-relative motif-background" width="600" theme="dark">
       <v-card-title class="text-center">Close Viewer?</v-card-title>
-      <v-card-text class="text-center mb-2">
-        Are you sure you want to close the Online Viewer?
-      </v-card-text>
+      <v-card-text class="text-center mb-2"> Are you sure you want to close the Online Viewer? </v-card-text>
       <v-card-actions>
-        <v-btn
-          variant="flat"
-          color="secondary"
-          @click="modalState = false"
-        >
-          Cancel
-        </v-btn>
+        <v-btn data-testid="cancel" variant="text" @click="modalState = false"> Cancel </v-btn>
         <v-spacer />
-        <v-btn
-          data-testid="close"
-          color="red"
-          variant="flat"
-          @click="closeModal"
-          v-if="showOption('OnSaveSession')"
-        >
+        <v-btn v-if="options?.OnSaveSession" data-testid="close" color="red" variant="flat" @click="closeModal">
           Close without saving
         </v-btn>
-        <v-btn
-          data-testid="save"
-          color="primary"
-          variant="flat"
-          @click="closeModalSave"
-          v-if="showOption('OnSaveSession')"
-        >
+        <v-btn v-if="options?.OnSaveSession" data-testid="save" color="primary" variant="flat" @click="closeModalSave">
           Save Session
         </v-btn>
-        <v-btn
-          data-testid="close"
-          color="flat"
-          variant="tonal"
-          @click="closeModal" v-else>
-          Close Viewer
-        </v-btn>
+        <v-btn data-testid="close" color="flat" variant="tonal" @click="closeModal" v-else> Close Viewer </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
 
 <script setup lang="ts">
-import {computed} from "vue";
-import {LoadViewerOptions} from "@/models/LoadViewerOptions";
-import {dataOverlayState, scanState} from "@/dataLayer/scanState";
+import { computed } from 'vue';
+import { dataOverlayState, mcadObjectState, scanState } from '@/models/scanState';
+import { useViewerOptions } from '@/composables/useViewerOptions';
 
 interface Props {
-  options: LoadViewerOptions,
   modal?: boolean;
 }
 
 type Emits = {
   'update:modal': [boolean];
-  'close': [void];
+  close: [void];
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -69,6 +38,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
+const options = useViewerOptions();
+
 const modalState = computed({
   get(): boolean {
     return props.modal;
@@ -79,26 +50,20 @@ const modalState = computed({
 });
 
 async function closeModal(): Promise<void> {
-  await executeOption('OnExitViewer');
+  if (options.value.OnExitViewer) {
+    await options.value.OnExitViewer();
+  }
   modalState.value = false;
   emit('close');
 }
 
 async function closeModalSave(): Promise<void> {
-  const scnState = scanState.value;
-  const dtaOverlayState = dataOverlayState.value.DataOverlay;
-  await executeOption('OnSaveSession', scnState, dtaOverlayState, null);
-  await closeModal();
-}
-
-function showOption(key: keyof LoadViewerOptions): boolean {
-  return props.options[key] !== undefined;
-}
-
-async function executeOption(key: keyof LoadViewerOptions, ...args: any[]): Promise<void> {
-  const functionToExecute = props.options[key];
-  if (functionToExecute !== undefined) {
-    await functionToExecute(...args);
+  if (options.value.OnSaveSession) {
+    const scan = scanState.value;
+    const dataOverlay = dataOverlayState.value.DataOverlay;
+    const mcad = mcadObjectState.value.Models;
+    options.value.OnSaveSession(scan, dataOverlay, mcad);
   }
+  await closeModal();
 }
 </script>