@3cr/viewer-browser 0.0.248 → 0.0.293

package/src/components/modal/modal/UploadsDrawer.vue

@@ -0,0 +1,165 @@
+<template>
+  <v-bottom-sheet
+    v-model="modelValue"
+    class="mx-2"
+    :content-class="['uploads-content', { 'uploads-collapsed': !expanded }]"
+    width="400"
+    no-click-animation
+    persistent
+    :scrim="false"
+    data-testid="expandBtn"
+  >
+    <v-sheet class="d-flex flex-column" theme="dark">
+      <v-toolbar class="px-4" color="transparent" density="compact" theme="dark">
+        <span data-testid="uploadingTitle" v-if="isUploading" class="font-weight-bold"
+          >Uploading {{ uploading.length }} items</span
+        >
+        <span v-else class="font-weight-bold">Uploaded {{ completed.length }} items</span>
+        <v-spacer />
+        <v-btn
+          v-if="uploads.length > 0"
+          density="compact"
+          :icon="expanded ? 'keyboard_arrow_down' : 'keyboard_arrow_up'"
+          variant="text"
+          @click="expanded = !expanded"
+        />
+        <v-btn density="compact" icon="close" variant="text" @click="modelValue = false" />
+      </v-toolbar>
+      <v-toolbar data-testid="progressToolbar" v-if="isUploading" class="mx-4 progress px-4" density="compact">
+        <span class="font-weight-medium">
+          {{ estimatedTime > 0 ? `${timeRemaining} remaining` : 'Please wait...' }}
+        </span>
+        <v-spacer />
+        <v-btn data-testid="cancelBtn" density="comfortable" variant="text" @click="cancel">
+          <span>{{ t('labels.cancel') }}</span>
+        </v-btn>
+      </v-toolbar>
+      <v-list class="no-hover" density="compact" bg-color="transparent" max-height="300">
+        <template v-for="upload in uploads" :key="upload.id">
+          <v-list-item>
+            <template #prepend>
+              <v-icon icon="image" />
+            </template>
+            <template #append>
+              <v-progress-circular
+                v-if="upload.status === 'uploading'"
+                :model-value="getProgress(upload)"
+                :indeterminate="upload.progress === undefined"
+                size="24"
+              />
+              <v-icon v-if="upload.status === 'completed'" icon="filled:check_circle" size="24" />
+              <span v-if="upload.status === 'cancelled'" class="font-italic text-subtext">Cancelled</span>
+            </template>
+            <v-list-item-title class="text-white">
+              <span>{{ upload.title }}</span>
+            </v-list-item-title>
+            <v-list-item-subtitle>
+              <span>{{ upload.subtitle }}</span>
+            </v-list-item-subtitle>
+          </v-list-item>
+        </template>
+      </v-list>
+    </v-sheet>
+  </v-bottom-sheet>
+</template>
+
+<script setup lang="ts">
+import { Upload } from '@3cr/viewer-types-ts';
+import { computed, reactive, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { addSeconds, formatDistanceToNowStrict } from 'date-fns';
+import { Progress } from '@/models/progress';
+
+interface Props {
+  uploads?: Upload[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  uploads: () => []
+});
+
+const { t } = useI18n();
+
+const etas = reactive(new Map<string, Progress>());
+
+const modelValue = defineModel<boolean>({ default: false });
+const expanded = defineModel<boolean>('expanded', { default: true });
+
+const uploading = computed(() => props.uploads.filter((upload) => upload.status === 'uploading'));
+const completed = computed(() => props.uploads.filter((upload) => upload.status === 'completed'));
+const isUploading = computed(() => uploading.value.length > 0);
+
+const estimatedTime = computed(() => {
+  const progresses = [...etas.values()];
+  return Math.round(Math.max(...progresses.map((progress) => progress.value), 0));
+});
+
+const timeRemaining = computed(() => {
+  return formatDistanceToNowStrict(addSeconds(Date.now(), estimatedTime.value));
+});
+
+watch(
+  () => props.uploads,
+  (uploads) => {
+    for (const upload of uploads) {
+      if (upload.status === 'uploading' && upload.progress !== undefined) {
+        if (!etas.has(upload.id)) {
+          etas.set(upload.id, new Progress());
+        }
+        const eta = etas.get(upload.id);
+        eta!.next(upload.progress);
+      } else {
+        etas.delete(upload.id);
+      }
+    }
+  },
+  { deep: true }
+);
+
+function getProgress(upload: Upload): number {
+  const value = upload.progress ?? 0;
+  return value * 100;
+}
+/* v8 ignore start -- @preserve */
+function cancel(): void {
+  // TODO: impl
+}
+/* v8 ignore stop -- @preserve */
+
+defineExpose({ getProgress });
+</script>
+
+<style lang="scss">
+@use '@/assets/settings' as settings;
+
+.v-bottom-sheet {
+  .uploads-content {
+    left: unset !important;
+    margin: 0 !important;
+    border-top-left-radius: settings.$border-radius-root !important;
+    border-top-right-radius: settings.$border-radius-root !important;
+  }
+
+  .uploads-collapsed {
+    top: calc(100% - 48px) !important;
+  }
+}
+</style>
+
+<style scoped lang="scss">
+@use '@/assets/palette' as palette;
+@use '@/assets/settings' as settings;
+
+.v-sheet {
+  background: rgba(31, 31, 55, 0.9) !important;
+  backdrop-filter: blur(16px) !important;
+  border-top-left-radius: settings.$border-radius-root !important;
+  border-top-right-radius: settings.$border-radius-root !important;
+}
+
+.v-toolbar.progress {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  border-radius: settings.$border-radius-root !important;
+  width: auto !important;
+}
+</style>

package/src/components/modal/modal/WhatsNewModal.vue

@@ -0,0 +1,45 @@
+<template>
+  <v-dialog v-model="modelValue" max-width="600" scrollable>
+    <template v-for="feature in features" :key="feature.version">
+      <v-card>
+        <v-card-title>
+          <v-toolbar class="align-center" color="transparent" density="compact">
+            <v-list-item prepend-icon="psychology">
+              <v-list-item-title class="font-weight-bold">
+                <span>{{ t('labels.whatsNew') }}</span>
+              </v-list-item-title>
+              <v-list-item-subtitle>
+                <span>v. {{ feature.version }} - {{ format(feature.createdAt, 'do MMM yyyy') }}</span>
+              </v-list-item-subtitle>
+            </v-list-item>
+            <v-spacer />
+            <v-btn icon="close" variant="text" data-testid="close-btn" @click="modelValue = false" />
+          </v-toolbar>
+        </v-card-title>
+        <v-divider />
+        <v-card-text>
+          <span class="text-h5 font-weight-bold">{{ feature.title }}</span>
+          <div v-html="feature.html"></div>
+        </v-card-text>
+      </v-card>
+    </template>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { format } from 'date-fns';
+import { useI18n } from 'vue-i18n';
+import { FeaturesService } from '@/services/features.service';
+import { Feature } from '@/types/feature';
+
+const { t } = useI18n();
+
+const features = ref<Feature[]>([]);
+
+const modelValue = defineModel<boolean>({ default: false });
+
+onMounted(async () => {
+  features.value = await FeaturesService.Instantiate().getLatestFeatures();
+});
+</script>

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

@@ -0,0 +1,60 @@
+import { mount } from '@vue/test-utils';
+import { VDialog } from 'vuetify/components';
+import AboutModal from '@/components/modal/modal/AboutModal.vue';
+import { useDemoStore } from '@/stores/demo.store';
+import { storeToRefs } from 'pinia';
+import { DemoType } from '@3cr/viewer-types-ts';
+import { useTheme } from 'vuetify';
+import { ref } from 'vue';
+
+describe('AboutModal tests', () => {
+  it('should mount', () => {
+    const props = { title: 'Test' };
+    const wrapper = mount(AboutModal, { props });
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should close modal', async () => {
+    const props = { title: 'Test', modelValue: true };
+    const wrapper = mount(AboutModal, { props });
+    const dialog = wrapper.findComponent(VDialog);
+    await dialog.setValue(false);
+    expect(wrapper.findComponent(VDialog).text()).toBeFalsy();
+  });
+
+  it('should close modal', async () => {
+    const { demoType } = storeToRefs(useDemoStore());
+    vi.spyOn(demoType, 'value', 'get').mockReturnValue(DemoType.Licence);
+
+    const props = { title: 'Test', modelValue: true };
+    const wrapper = mount(AboutModal, { props });
+
+    expect(wrapper.findComponentByTestId('demo-text').html()).toContain('enums.demoType.licence');
+  });
+
+  it('should show dark logo', async () => {
+    vi.mocked(useTheme).mockReturnValueOnce({
+      current: ref({
+        dark: true
+      })
+    } as any);
+
+    const props = { title: 'Test', modelValue: true };
+    const wrapper = mount(AboutModal, { props });
+
+    expect(wrapper.findComponentByTestId('demo-img').html()).toContain('assets/logos/singular-health/white/white.svg');
+  });
+
+  it('should show light logo', async () => {
+    vi.mocked(useTheme).mockReturnValueOnce({
+      current: ref({
+        dark: false
+      })
+    } as any);
+
+    const props = { title: 'Test', modelValue: true };
+    const wrapper = mount(AboutModal, { props });
+
+    expect(wrapper.findComponentByTestId('demo-img').html()).toContain('assets/logos/singular-health/black/black.svg');
+  });
+});

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

@@ -0,0 +1,50 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import AiModelList from '@/components/modal/modal/AiModelList.vue';
+import { storeToRefs } from 'pinia';
+import { useViewerStore } from '@/stores/viewer.store';
+import { nextTick } from 'vue';
+import { VList } from 'vuetify/components';
+
+describe('AiModelList.vue - Pre-selected Items', () => {
+  it('should call getAIModels when options.value.getAIModels is defined', async () => {
+    const getAIModelsMock = vi.fn().mockResolvedValue([{ key: 'model1', title: 'Model 1' }]);
+    const { options } = storeToRefs(useViewerStore());
+    options.value.getAIModels = getAIModelsMock;
+    const wrapper = mount(AiModelList);
+    await wrapper.vm.fetchAIModels();
+    expect(getAIModelsMock).toHaveBeenCalled();
+    expect(wrapper.vm.aiModels).toEqual([{ key: 'model1', title: 'Model 1' }]);
+  });
+  it('should update selected items when selected is updated directly', async () => {
+    const aiModels = [
+      { key: 'model1', title: 'Model 1' },
+      { key: 'model2', title: 'Model 2' }
+    ];
+    const wrapper = mount(AiModelList, {
+      props: { aiModels, selected: [] }
+    });
+    await wrapper.setProps({ selected: ['model1'] });
+    expect(wrapper.props('selected')).toEqual(['model1']);
+    const selectedItem = wrapper.find('[data-testid="btn"]');
+    expect(selectedItem.exists()).toBeTruthy;
+    wrapper.vm.selected = ['model1'];
+    expect(wrapper.vm.selected).toEqual(['model1']);
+  });
+  it('should update selected array when an item is selected and deselected', async () => {
+    const aiModels = [
+      { key: 'model1', title: 'Model 1' },
+      { key: 'model2', title: 'Model 2' }
+    ];
+    const wrapper = mount(AiModelList, {
+      props: { aiModels, selected: [] }
+    });
+    expect(wrapper.vm.selected).toEqual([]);
+    const list = wrapper.findComponent(VList);
+    await list.setValue(['model1'], 'selected');
+    await nextTick();
+    expect(wrapper.vm.selected).toEqual(['model1']);
+    await list.setValue([], 'selected');
+    await flushPromises();
+    expect(wrapper.vm.selected).toEqual([]);
+  });
+});

package/src/components/modal/{__tests__ → modal/__tests__}/AskAI.spec.ts

@@ -1,8 +1,9 @@
 import { flushPromises, mount } from '@vue/test-utils';
-import AskAI from '@/components/modal/AskAI.vue';
 import { VChip, VDialog } from 'vuetify/components';
 import { GptService } from '@/services/gpt.service';
 import { GptResponseFaker } from '@test/fakers/gpt-response.faker';
+import AskAiModal from '@/components/modal/modal/AskAiModal.vue';
+import { GptQuestionFaker } from '@test/fakers/gpt-question.faker';
 
 const items = GptResponseFaker.random();
 
@@ -10,22 +11,22 @@ describe('AskAI tests', () => {
   vi.spyOn(GptService.prototype, 'GenerateAnnotations').mockResolvedValue({ data: items } as any);
 
   it('should mount', () => {
-    const props = { title: 'Test', questionKey: 1, questionText: '' };
-    const wrapper = mount(AskAI, { props });
+    const props = { title: 'Test', gptQuestion: GptQuestionFaker.random() };
+    const wrapper = mount(AskAiModal, { props });
     expect(wrapper).toBeTruthy();
   });
 
   it('should close modal', async () => {
-    const props = { title: 'Test', questionKey: 1, questionText: 'test', modal: true };
-    const wrapper = mount(AskAI, { props });
+    const props = { title: 'Test', modelValue: true, gptQuestion: GptQuestionFaker.random() };
+    const wrapper = mount(AskAiModal, { props });
     const dialog = wrapper.findComponent(VDialog);
     await dialog.setValue(false);
     expect(wrapper.findComponent(VDialog).text()).toBeFalsy();
   });
 
   it('should ask follow up question', async () => {
-    const props = { title: 'Test', questionKey: 1, questionText: 'test', modal: true };
-    const wrapper = mount(AskAI, { props });
+    const props = { title: 'Test', modelValue: true, gptQuestion: GptQuestionFaker.random() };
+    const wrapper = mount(AskAiModal, { props });
     await flushPromises();
     await wrapper.findComponent(VChip).trigger('click');
     expect(wrapper.emitted('askFollowup')).toEqual([[items.FollowupQuestions[0]]]);

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

@@ -0,0 +1,29 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { VCard, VDialog } from 'vuetify/components';
+import AutoAnnotateModal from '@/components/modal/modal/AutoAnnotateModal.vue';
+
+describe('AutoAnnotateModal tests', () => {
+  it('should mount', () => {
+    const props = {};
+    const wrapper = mount(AutoAnnotateModal, { props });
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should close modal', async () => {
+    const props = { modelValue: true };
+    const wrapper = mount(AutoAnnotateModal, { props });
+    const dialog = wrapper.findComponent(VDialog);
+    await dialog.setValue(false);
+    expect(wrapper.findComponent(VDialog).text()).toBeFalsy();
+  });
+
+  it('should get random text', async () => {
+    const props = { modelValue: false };
+    const wrapper = mount(AutoAnnotateModal, { props });
+
+    await wrapper.setProps({ modelValue: true });
+    await flushPromises();
+    const card = wrapper.findComponent(VCard);
+    expect(card.html()).toContain('texts.autoAnnotateLoading');
+  });
+});

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

@@ -0,0 +1,60 @@
+import { mount } from '@vue/test-utils';
+import CloseViewerModal from '@/components/modal/modal/CloseViewerModal.vue';
+import { useViewerStore } from '@/stores/viewer.store';
+
+describe('CloseViewerModal tests', () => {
+  it('should open modal', () => {
+    const props = { modal: true, options: {} };
+    const wrapper = mount(CloseViewerModal, { props });
+    expect(wrapper.exists()).toBeTruthy();
+  });
+
+  it('should close modal', async () => {
+    const props = { modal: true, options: {} };
+    const wrapper = mount(CloseViewerModal, { props });
+    expect(wrapper.exists()).toBeTruthy();
+    await wrapper.setProps({ modal: false });
+    expect(wrapper.text()).toBeFalsy();
+  });
+
+  it('should cancel modal', async () => {
+    const props = { modal: true, options: {} };
+    const wrapper = mount(CloseViewerModal, { props });
+    expect(wrapper.exists()).toBeTruthy();
+    await wrapper.findComponentByTestId('cancel').trigger('click');
+    expect(wrapper.text()).toBeFalsy();
+  });
+
+  it('should close modal without saving', async () => {
+    const { options } = useViewerStore();
+    options.onExit = () => {};
+    const props = { modal: true };
+    const wrapper = mount(CloseViewerModal, { props });
+    const onExitViewerSpy = vi.spyOn(options, 'onExit');
+    expect(wrapper.exists()).toBeTruthy();
+    await wrapper.findComponentByTestId('close').trigger('click');
+    await wrapper.vm.$nextTick();
+    expect(onExitViewerSpy).toHaveBeenCalled();
+    expect(wrapper.findComponent({ ref: 'dialog' }).exists()).toBe(false);
+    expect(wrapper.emitted()['update:modal']).toStrictEqual([[false]]);
+  });
+
+  it('should close modal and save session', async () => {
+    const { options } = useViewerStore();
+    options.onExit = vi.fn();
+    options.onSaveSession = vi.fn();
+    const props = { modal: true };
+    const wrapper = mount(CloseViewerModal, { props });
+    const onExitViewerSpy = vi.spyOn(options, 'onExit');
+    const onSaveSessionSpy = vi.spyOn(options, 'onSaveSession');
+    expect(wrapper.exists()).toBeTruthy();
+    const saveButton = wrapper.findComponentByTestId('save');
+    expect(saveButton.exists()).toBeTruthy();
+    await saveButton.trigger('click');
+    await wrapper.vm.$nextTick();
+    expect(onExitViewerSpy).toHaveBeenCalled();
+    expect(onSaveSessionSpy).toHaveBeenCalled();
+    expect(wrapper.findComponent({ ref: 'dialog' }).exists()).toBe(false);
+    expect(wrapper.emitted()['update:modal']).toStrictEqual([[false]]);
+  });
+});

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

@@ -0,0 +1,55 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { DataOverlayPolygonFaker } from '@test/fakers/data-overlay-polygon.faker';
+import { deepClone } from '@vitest/utils';
+import { beforeEach } from '@vitest/runner';
+import DataOverlayGeneralModal from '@/components/modal/modal/DataOverlayGeneralModal.vue';
+import { GptService } from '@/services/gpt.service';
+import { GptResponseFaker } from '@test/fakers/gpt-response.faker';
+const items = GptResponseFaker.random();
+
+describe('DataOverlayGeneralModal tests', () => {
+  let dataOverlay = DataOverlayPolygonFaker.random();
+  vi.spyOn(GptService.prototype, 'GenerateAnnotations').mockResolvedValue({ data: items } as any);
+  beforeEach(() => {
+    dataOverlay = DataOverlayPolygonFaker.random();
+  });
+
+  it('should mount', () => {
+    const wrapper = mount(DataOverlayGeneralModal, { props: { dataOverlay } });
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should have description', async () => {
+    const wrapper = mount(DataOverlayGeneralModal, { props: { dataOverlay } });
+    expect(wrapper).toBeTruthy();
+
+    expect(wrapper.html()).toContain(dataOverlay.Description);
+    expect(wrapper.html()).toContain('labels.description');
+  });
+
+  it('should not have description', async () => {
+    const clone = deepClone(dataOverlay);
+    clone.Description = '';
+    clone.CallToAction = null;
+    const wrapper = mount(DataOverlayGeneralModal, { props: { dataOverlay: clone } });
+    expect(wrapper).toBeTruthy();
+
+    await flushPromises();
+    console.log(wrapper.html());
+
+    expect(wrapper.html()).toContain(items.GptResponse);
+  });
+
+  it('should update title from parent', async () => {
+    const clone = deepClone(dataOverlay);
+    const wrapper = mount(DataOverlayGeneralModal, { props: { dataOverlay } });
+    expect(wrapper).toBeTruthy();
+
+    clone.Title = 'Something New!';
+    expect(wrapper.html()).not.toContain('Something New!');
+
+    await wrapper.setProps({ dataOverlay: clone });
+
+    expect(wrapper.html()).toContain('Something New!');
+  });
+});

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

@@ -0,0 +1,82 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { DataOverlayPolygonFaker } from '@test/fakers/data-overlay-polygon.faker';
+import { VIcon, VTextField } from 'vuetify/components';
+import DataOverlayMeasurementModal from '@/components/modal/modal/DataOverlayMeasurementModal.vue';
+import { deepClone } from '@vitest/utils';
+import { beforeEach } from '@vitest/runner';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+
+describe('DataOverlayInfo tests', () => {
+  let measurement = DataOverlayPolygonFaker.random();
+  beforeEach(() => {
+    measurement = DataOverlayPolygonFaker.random();
+  });
+
+  it('should mount', () => {
+    const wrapper = mount(DataOverlayMeasurementModal, { props: { measurement } });
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should select an item as measurement', async () => {
+    const wrapper = mount(DataOverlayMeasurementModal, { props: { measurement } });
+    expect(wrapper).toBeTruthy();
+
+    expect(wrapper.findComponent(VTextField).exists()).toBe(false);
+
+    await wrapper.setProps({ isEditing: true });
+    await flushPromises();
+    await wrapper.findComponent(VTextField).setValue('123');
+
+    expect(wrapper.findComponent(VTextField).exists()).toBe(true);
+  });
+
+  it('should start editing', async () => {
+    const wrapper = mount(DataOverlayMeasurementModal, { props: { measurement } });
+    expect(wrapper).toBeTruthy();
+
+    expect(wrapper.findComponent(VTextField).exists()).toBe(false);
+
+    await wrapper.findComponent(VIcon).trigger('click');
+    await flushPromises();
+    await wrapper.findComponent(VTextField).setValue('123');
+
+    expect(wrapper.findComponent(VTextField).exists()).toBe(true);
+  });
+
+  it('should finish editing', async () => {
+    const viewer3cr = useViewer3cr();
+    const updateAnnotationTitleSpy = vi.spyOn(viewer3cr, 'updateAnnotationTitle');
+    const wrapper = mount(DataOverlayMeasurementModal, { props: { measurement } });
+    expect(wrapper).toBeTruthy();
+
+    expect(wrapper.findComponent(VTextField).exists()).toBe(false);
+
+    await wrapper.findComponent(VIcon).trigger('click');
+    await flushPromises();
+    await wrapper.findComponent(VTextField).setValue('123');
+
+    expect(wrapper.findComponent(VTextField).exists()).toBe(true);
+
+    await wrapper.findComponent(VTextField).trigger('blur');
+    expect(updateAnnotationTitleSpy).toHaveBeenCalledWith({
+      message: {
+        Version: '0.0.0',
+        Id: expect.any(String),
+        Value: '123'
+      }
+    });
+  });
+
+  it('should update title from parent', async () => {
+    const clone = deepClone(measurement);
+    const wrapper = mount(DataOverlayMeasurementModal, { props: { measurement } });
+    expect(wrapper).toBeTruthy();
+
+    clone.Title = 'Something New!';
+    expect(wrapper.html()).not.toContain('Something New!');
+
+    await wrapper.setProps({ measurement: clone });
+
+    expect(wrapper.html()).toContain('Something New!');
+  });
+});