@3cr/viewer-browser 0.0.248 → 0.0.292

package/src/components/modal/menus/__tests__/SettingsMenu.spec.ts

@@ -1,71 +1,177 @@
-import { mount } from '@vue/test-utils';
-import { VCard, VMenu } from 'vuetify/components';
+import { flushPromises, mount } from '@vue/test-utils';
+import { VMenu } from 'vuetify/components';
 import SettingsMenu from '@/components/modal/menus/SettingsMenu.vue';
-import ValueSelector from '@/components/shared/ValueSelector.vue';
-import { scanState } from '@/models/scanState';
+import { reactive } from 'vue';
+import { inflateScanState } from '@/functions/modelHelper';
+import OtaClient from '@crowdin/ota-client';
+import { createTestingPinia } from '@pinia/testing';
+import { createPinia, setActivePinia } from 'pinia';
+import { MockImportOriginal } from '@test/MockImportOriginal';
 
-type ValueSelector = InstanceType<typeof ValueSelector>;
-
-describe('SettingsMenu tests', () => {
-  it('should mount', () => {
-    const wrapper = mount(SettingsMenu);
-    expect(wrapper).toBeTruthy();
-  });
+vi.mock(
+  '@/stores/language.store',
+  async (importOriginal: MockImportOriginal<typeof import('@/stores/language.store')>) => {
+    return {
+      ...(await importOriginal()),
+      useLanguageStore: vi.fn().mockReturnValue({
+        getLanguages: vi
+          .fn()
+          .mockResolvedValue([
+            { language: 'english', editorCode: 'en', crowdinLanguageCode: 'en', code: 'en', countryCode: 'en' }
+          ]),
+        language: 'jpn'
+      })
+    };
+  }
+);
+vi.mock('pinia', async (importOriginal: MockImportOriginal<typeof import('pinia')>) => {
+  return {
+    ...(await importOriginal()),
+    storeToRefs: vi.fn().mockReturnValue({
+      language: { value: 'jpn' },
+      loading: { value: false }
+    })
+  };
+});
 
-  it('should open and close', async () => {
-    const props = { modelValue: true };
-    const wrapper = mount(SettingsMenu, { props });
-    await wrapper.findComponent(VMenu).setValue(false);
-    await wrapper.setProps({ modelValue: false });
-    expect(wrapper.findComponent(VCard).isVisible()).toBeFalsy();
-  });
+describe('SettingsMenu', () => {
+  setActivePinia(createPinia());
+  vi.spyOn(OtaClient.prototype, 'listLanguages').mockResolvedValue([]);
 
-  it('should set brightness', async () => {
-    const props = { modelValue: true };
-    const wrapper = mount(SettingsMenu, { props });
-    await wrapper.findComponentByTestId<ValueSelector>('brightness').setValue(1, 'value');
-    expect(scanState.value.Display.Brightness).toBe(1);
+  it('should open menu when ModelValue is true', async () => {
+    const wrapper = mount(SettingsMenu, {
+      plugins: [createTestingPinia({ createSpy: vi.fn })]
+    });
+    const menu = wrapper.findComponent(VMenu);
+    await menu.setValue(true);
+    expect(menu.isVisible()).toBe(true);
   });
+  it('should update brightness modelValue', async () => {
+    vi.spyOn(OtaClient.prototype, 'listLanguages').mockResolvedValue([]);
+    const scanState = reactive(inflateScanState());
+    const wrapper = mount(SettingsMenu, {
+      plugins: [createTestingPinia({ createSpy: vi.fn })],
+      global: {
+        mocks: {
+          scanState
+        }
+      }
+    });
+    const menu = wrapper.findComponent(VMenu);
+    await menu.setValue(true);
+    await flushPromises();
+    const brightnessField = wrapper.findComponentByTestId('brightness');
+    await flushPromises();
+    await brightnessField.setValue(75);
 
-  it('should set contrast', async () => {
-    const props = { modelValue: true };
-    const wrapper = mount(SettingsMenu, { props });
-    await wrapper.findComponentByTestId<ValueSelector>('contrast').setValue(2, 'value');
-    expect(scanState.value.Display.Contrast).toBe(2);
+    scanState.Display.Brightness = 75;
+    expect(scanState.Display.Brightness).toBe(75);
+    const contrastField = wrapper.findComponentByTestId('contrast');
+    await flushPromises();
+    await contrastField.setValue(75);
+    scanState.Display.Contrast = 75;
+    expect(scanState.Display.Contrast).toBe(75);
+    const opacityField = wrapper.findComponentByTestId('opacity');
+    await flushPromises();
+    await opacityField.setValue(75);
+    scanState.Display.Opacity = 75;
+    expect(scanState.Display.Opacity).toBe(75);
   });
+  it('should update interactionSettings modelValue', async () => {
+    vi.spyOn(OtaClient.prototype, 'listLanguages').mockResolvedValue([]);
+    const scanState = reactive(inflateScanState());
+    const wrapper = mount(SettingsMenu, {
+      plugins: [createTestingPinia({ createSpy: vi.fn })],
+      global: {
+        mocks: {
+          scanState
+        }
+      }
+    });
+    const menu = wrapper.findComponent(VMenu);
+    await menu.setValue(true);
+    await flushPromises();
+    const panSensitivity = wrapper.findComponentByTestId('pan');
+    await flushPromises();
+    await panSensitivity.setValue(75);
+    scanState.InteractionSettings.PanSensivitity = 75;
+    expect(scanState.InteractionSettings.PanSensivitity).toBe(75);
 
-  it('should set opacity', async () => {
-    const props = { modelValue: true };
-    const wrapper = mount(SettingsMenu, { props });
-    await wrapper.findComponentByTestId<ValueSelector>('opacity').setValue(3, 'value');
-    expect(scanState.value.Display.Opacity).toBe(3);
-  });
+    const zoomSensitivity = wrapper.findComponentByTestId('zoom');
+    await flushPromises();
+    await zoomSensitivity.setValue(75);
+    scanState.InteractionSettings.ZoomSensitivity = 75;
+    expect(scanState.InteractionSettings.ZoomSensitivity).toBe(75);
 
-  it('should set pan sensitivity', async () => {
-    const props = { modelValue: true };
-    const wrapper = mount(SettingsMenu, { props });
-    await wrapper.findComponentByTestId<ValueSelector>('pan').setValue(4, 'value');
-    expect(scanState.value.InteractionSettings.PanSensivitity).toBe(4);
-  });
+    const rotateSensitivity = wrapper.findComponentByTestId('rotate');
+    await flushPromises();
+    await rotateSensitivity.setValue(75);
+    scanState.InteractionSettings.RotateSensitivity = 75;
+    expect(scanState.InteractionSettings.RotateSensitivity).toBe(75);
 
-  it('should set zoom sensitivity', async () => {
-    const props = { modelValue: true };
-    const wrapper = mount(SettingsMenu, { props });
-    await wrapper.findComponentByTestId<ValueSelector>('zoom').setValue(5, 'value');
-    expect(scanState.value.InteractionSettings.ZoomSensitivity).toBe(5);
+    const cameraRotateSensitivity = wrapper.findComponentByTestId('cameraRotate');
+    await flushPromises();
+    await cameraRotateSensitivity.setValue(75);
+    scanState.InteractionSettings.CameraRotateSensitivity = 75;
+    expect(scanState.InteractionSettings.CameraRotateSensitivity).toBe(75);
   });
-
-  it('should set rotate sensitivity', async () => {
-    const props = { modelValue: true };
-    const wrapper = mount(SettingsMenu, { props });
-    await wrapper.findComponentByTestId<ValueSelector>('rotate').setValue(6, 'value');
-    expect(scanState.value.InteractionSettings.RotateSensitivity).toBe(6);
+  it('should change modelValue for switch', async () => {
+    vi.spyOn(OtaClient.prototype, 'listLanguages').mockResolvedValue([]);
+    const scanState = reactive(inflateScanState());
+    const wrapper = mount(SettingsMenu, {
+      plugins: [createTestingPinia({ createSpy: vi.fn })],
+      global: {
+        mocks: {
+          scanState
+        }
+      }
+    });
+    const menu = wrapper.findComponent(VMenu);
+    await menu.setValue(true);
+    await flushPromises();
+    const vSwitch = wrapper.findComponentByTestId('switch');
+    expect(wrapper.vm.isVisible).toBe(true);
+    wrapper.vm.isVisible = false;
+    vSwitch.setValue(false);
+    expect(wrapper.vm.isVisible).toBe(false);
   });
-
-  it('should set camera rotate sensitivity', async () => {
-    const props = { modelValue: true };
-    const wrapper = mount(SettingsMenu, { props });
-    await wrapper.findComponentByTestId<ValueSelector>('camera').setValue(7, 'value');
-    expect(scanState.value.InteractionSettings.CameraRotateSensitivity).toBe(7);
+  it('should change modelValue for stlResolution', async () => {
+    vi.spyOn(OtaClient.prototype, 'listLanguages').mockResolvedValue([]);
+    const scanState = reactive(inflateScanState());
+    const wrapper = mount(SettingsMenu, {
+      plugins: [createTestingPinia({ createSpy: vi.fn })],
+      global: {
+        mocks: {
+          scanState
+        }
+      }
+    });
+    const menu = wrapper.findComponent(VMenu);
+    await menu.setValue(true);
+    await flushPromises();
+    const resolution = wrapper.findComponentByTestId('resolution');
+    await flushPromises();
+    await resolution.setValue(15);
+    wrapper.vm.stlResolution = 15;
+    expect(wrapper.vm.stlResolution).toBe(15);
   });
+  // it('should set language correctly', async () => {
+  //   vi.spyOn(OtaClient.prototype, 'listLanguages').mockResolvedValue([]);
+  //   const scanState = reactive(inflateScanState());
+  //   const wrapper = mount(SettingsMenu, {
+  //     plugins: [createTestingPinia({ createSpy: vi.fn })],
+  //     global: {
+  //       mocks: {
+  //         scanState
+  //       }
+  //     }
+  //   });
+  //   const menu = wrapper.findComponent(VMenu);
+  //   await menu.setValue(true);
+  //   await flushPromises();
+  //   const selectedLanguage = wrapper.findComponentByTestId('language');
+  //   await selectedLanguage.setValue('english');
+  //   await flushPromises();
+  //   expect(selectedLanguage.vm.modelValue).toBe({});
+  // });
 });

package/src/components/modal/modal/AboutModal.vue

@@ -0,0 +1,61 @@
+<template>
+  <v-dialog width="800">
+    <v-card>
+      <v-card-text>
+        <v-row no-gutters>
+          <v-col class="my-auto">
+            <v-img data-testid="demo-img" :src="logo" height="64" />
+          </v-col>
+          <v-col class="ma-auto text-center text-xs-regular">
+            <p>{{ t('texts.viewerAbout') }}</p>
+            <br />
+            <p>{{ t('texts.aiDisclaimer') }}</p>
+            <br />
+            <p>{{ t('texts.diagnosticDisclaimer') }}</p>
+          </v-col>
+        </v-row>
+        <div class="py-4">
+          <v-divider />
+        </div>
+        <v-row no-gutters>
+          <v-col>{{ t('labels.version') }}</v-col>
+          <v-col class="text-overline text-end">{{ version }}</v-col>
+        </v-row>
+        <v-row no-gutters>
+          <v-col>{{ t('labels.demoType') }}</v-col>
+          <v-col data-testid="demo-text" class="text-overline text-end">{{ demo }}</v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { useViewerStore } from '@/stores/viewer.store';
+import { useTheme } from 'vuetify';
+import { useDemoStore } from '@/stores/demo.store';
+import lightLogo from '@/assets/logos/singular-health/black/black.svg';
+import darkLogo from '@/assets/logos/singular-health/white/white.svg';
+import { DemoType } from '@3cr/viewer-types-ts';
+
+const theme = useTheme();
+const { t } = useI18n();
+const { demoType } = storeToRefs(useDemoStore());
+const { version } = storeToRefs(useViewerStore());
+
+const demo = computed(() => {
+  switch (demoType.value) {
+    case DemoType.Licence:
+      return t('enums.demoType.licence');
+    case DemoType.Patient:
+      return t('enums.demoType.patient');
+  }
+});
+
+const logo = computed(() => {
+  return theme.current.value.dark ? darkLogo : lightLogo;
+});
+</script>

package/src/components/modal/modal/AiModelList.vue

@@ -0,0 +1,70 @@
+<template>
+  <v-list v-model:selected="selected" color="primary" :items="aiModels" select-strategy="leaf" selectable>
+    <template v-for="aiModel in aiModels" :key="aiModel.key">
+      <v-list-item data-testid="item" :value="aiModel.key">
+        <template #prepend>
+          <v-img class="rounded bg-shark-200" :src="aiModel.image" :alt="aiModel.key" width="80" height="112" />
+        </template>
+        <template #append="{ isSelected }">
+          <v-btn
+            data-testid="btn"
+            variant="outlined"
+            class="circle-btn"
+            size="24"
+            :style="{
+              backgroundColor: isSelected ? '#6875EC' : 'transparent',
+              color: isSelected ? 'white' : 'transparent'
+            }"
+            :icon="isSelected ? 'check_small' : 'circle'"
+          />
+        </template>
+        <div class="d-flex flex-column h-100 justify-space-between px-4">
+          <div>
+            <v-list-item-title>{{ aiModel.title }}</v-list-item-title>
+            <v-list-item-subtitle>{{ aiModel.description }}</v-list-item-subtitle>
+          </div>
+          <div>
+            <v-list-item-subtitle>{{ aiModel.subtitle }}</v-list-item-subtitle>
+            <v-divider color="minsk_900" class="my-1" />
+            <div class="d-flex align-center">
+              <v-icon color="minsk_500" class="mr-1" icon="toll" />
+              <v-list-item-subtitle>Credits: {{ aiModel.cost }}</v-list-item-subtitle>
+              <v-spacer />
+              <a :href="aiModel.url" target="_blank" class="text-xs-medium text-minsk_500 ml-auto">Learn more</a>
+            </div>
+          </div>
+        </div>
+      </v-list-item>
+    </template>
+  </v-list>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useViewerStore } from '@/stores/viewer.store';
+import { AIModel } from '@3cr/viewer-types-ts';
+
+const { options } = storeToRefs(useViewerStore());
+
+const selected = defineModel<string[]>('selected', { default: [] });
+
+const aiModels = ref<AIModel[]>();
+
+onMounted(async () => {
+  await fetchAIModels();
+});
+
+async function fetchAIModels(): Promise<void> {
+  if (options.value.getAIModels) {
+    aiModels.value = await options.value.getAIModels();
+  }
+}
+defineExpose({ fetchAIModels, aiModels, selected });
+</script>
+
+<style scoped lang="scss">
+:deep(.v-list-item__content) {
+  height: 100%;
+}
+</style>

package/src/components/modal/{AskAI.vue → modal/AskAiModal.vue}

@@ -1,31 +1,20 @@
 <template>
-  <v-dialog v-model="modalState" max-width="800" theme="light">
+  <v-dialog v-model="modalState" max-width="800">
     <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>
+        <span>{{ gptQuestion.Question }}</span>
       </v-card-title>
-      <!--      <v-card-subtitle> From ChatGPT: </v-card-subtitle>-->
       <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/images/dark/magic-wand.svg" class="animated" max-width="42" />
+          <span class="mr-4" style="font-size: 18px" v-html="smartResponses?.GptResponse"></span>
         </div>
       </div>
-
-      <!--      <v-card-text v-html="smartResponses?.GptResponse"> </v-card-text>-->
       <div class="prompt bordered-gradient-box" v-else>
         <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>
-      </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">
-        Still Curious?
+        <span>{{ t('texts.stillCurious') }}</span>
       </v-card-title>
       <v-card-text class="py-0">
         <v-chip-group column v-model="item">
@@ -51,35 +40,38 @@
 <script setup lang="ts">
 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';
+
+import { useI18n } from 'vue-i18n';
+import { GptQuestion, GptResponsePayload } from '@3cr/viewer-types-ts';
 
 interface Props {
-  modal?: boolean;
-  questionText: string;
+  modelValue?: boolean;
   title: string;
-  questionKey: number;
+  gptQuestion: GptQuestion;
 }
 
 type Emits = {
-  'update:modal': [value: boolean];
+  'update:modelValue': [value: boolean];
   askFollowup: [value: GptQuestion];
 };
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false
+});
 
 const emit = defineEmits<Emits>();
 
-const item = ref<number>();
+const { t } = useI18n();
 
+const item = ref<number>();
 const smartResponses = ref<GptResponsePayload>();
 
 const modalState = computed({
   get(): boolean {
-    return props.modal;
+    return props.modelValue;
   },
   set(value: boolean): void {
-    emit('update:modal', value);
+    emit('update:modelValue', value);
   }
 });
 
@@ -94,12 +86,11 @@ watch(
 );
 
 async function getSmartResponses(): Promise<void> {
+  const key = props.gptQuestion.ApiPreFilledRequestKey;
   smartResponses.value = await GptService.Instantiate()
-    .GenerateAnnotations(props.title, props.questionKey)
+    .GenerateAnnotations(props.title, key)
     .then((data) => data.data);
-  item.value = smartResponses.value?.FollowupQuestions.findIndex(
-    (question) => question.ApiPreFilledRequestKey === props.questionKey
-  );
+  item.value = smartResponses.value?.FollowupQuestions.findIndex((question) => question.ApiPreFilledRequestKey === key);
 }
 
 function askFollowUpQuestion(question: GptQuestion): void {
@@ -107,7 +98,7 @@ function askFollowUpQuestion(question: GptQuestion): void {
 }
 </script>
 
-<style>
+<style scoped lang="scss">
 .loading {
   font-size: 30px;
 }
@@ -145,7 +136,6 @@ function askFollowUpQuestion(question: GptQuestion): void {
   margin-right: 20px;
   padding: 20px;
   text-align: center;
-  color: black;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -161,12 +151,14 @@ function askFollowUpQuestion(question: GptQuestion): void {
   border-radius: 16px;
   padding: 3px;
   background: linear-gradient(to right, #6fb3f2, #4e51f5);
-
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
   -webkit-mask:
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
-  mask-composite: exclude;
 }
 
 .prompt span {

package/src/components/modal/modal/AutoAnnotateModal.vue

@@ -0,0 +1,136 @@
+<template>
+  <v-dialog v-model="modelValue" persistent>
+    <v-card max-width="450" class="mx-auto" style="overflow-y: hidden">
+      <v-card-title class="text-h4">
+        <span>{{ t('labels.annotivaAi') }}: {{ t('labels.autoAnnotate') }}</span>
+      </v-card-title>
+      <div class="prompt">
+        <div style="font-size: 6px; top: 30px; left: 40px">
+          <div class="cog" style="--cog-colour: #5a93ed"></div>
+          <div
+            class="cog anti-clockwise"
+            style="--cog-colour: #2955da; margin-top: 2.25em; margin-left: -3.375em"
+          ></div>
+          <div class="cog" style="--cog-colour: #bad3f8; margin-top: 5.625em; margin-left: -1.125em"></div>
+        </div>
+        <v-card-text class="ml-10 text-h5">
+          {{ text }}
+        </v-card-text>
+      </div>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t, tm } = useI18n();
+
+const text = ref<string>('');
+
+const modelValue = defineModel<boolean>({ default: false });
+
+const loaderTexts = computed(() => tm('texts.autoAnnotateLoading') as string[]);
+
+watch(modelValue, (isOpen) => {
+  if (isOpen) {
+    text.value = getRandomLoaderText();
+  }
+});
+
+function getRandomLoaderText(): string {
+  const randomIndex = Math.floor(Math.random() * loaderTexts.value.length);
+  return loaderTexts.value[randomIndex];
+}
+</script>
+
+<style scoped lang="scss">
+.prompt {
+  margin-left: 20px;
+  margin-right: 20px;
+  padding: 20px;
+  text-align: center;
+  color: black;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  position: relative;
+}
+
+.prompt::before {
+  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-composite: xor;
+
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+}
+
+div.cog {
+  border-radius: 0.25em;
+  border: solid 0.55em var(--cog-colour, #eee);
+  display: inline-block;
+  padding: 1.125em;
+  position: absolute;
+  top: inherit;
+  left: inherit;
+  -webkit-animation: rotate var(--cog-speed, 3s) linear infinite;
+  -moz-animation: rotate var(--cog-speed, 3s) linear infinite;
+  animation: rotate var(--cog-speed, 3s) linear infinite;
+}
+
+div.cog.anti-clockwise {
+  -webkit-animation-direction: reverse;
+  -moz-animation-direction: reverse;
+  animation-direction: reverse;
+}
+
+div.cog::before {
+  border: solid 0.55em var(--cog-colour, #eee);
+  padding: 1.125em;
+  position: absolute;
+  content: '';
+  transform: translate(-1.675em, -1.675em) rotate(45deg);
+  border-radius: 0.25em;
+}
+
+div.cog::after {
+  content: '';
+  position: absolute;
+  border: solid 1em var(--cog-colour, #eee);
+  padding: 0.375em;
+  border-radius: 1.8125em;
+  transform: translate(-1.375em, -1.375em);
+  filter: brightness(87.5%);
+}
+
+@-moz-keyframes rotate {
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+</style>