@3cr/viewer-browser 0.0.200 → 0.0.246

package/src/components/modal/ViewerNavigationDrawerHeader.vue

@@ -1,57 +1,21 @@
 <template>
   <div
-    v-if="!isDemo || demoType === 'patient'"
+    v-if="!isDemo || demoType === DemoType.Patient"
     class="d-flex align-center pb-1"
     :class="!drawer ? 'py-2' : 'pa-2'"
   >
-    <v-img
-      v-if="drawer"
-      src="../../assets/images/dark/3dicom-logo.svg"
-      height="64"
-      alt="logo"
-      style="opacity: 0.9"
-    />
-    <v-img
-      v-else
-      src="../../assets/images/dark/3DICOM.png"
-      height="48"
-      alt="logo"
-      style="opacity: 0.9"
-    />
+    <v-img v-if="drawer" src="@/assets/logos/3dicom/white.svg" height="64" alt="logo" />
+    <v-img v-else src="@/assets/logos/3dicom/white-mini.svg" height="48" alt="logo" />
   </div>
-  <div
-    v-else
-    class="d-flex align-center pb-1"
-    :class="!drawer ? 'py-2' : 'pa-2'"
-  >
-    <!-- TODO: Image probably needs to be cropped (1500 x 1500) -->
-    <v-img
-      v-if="drawer"
-      src="../../assets/images/dark/demo-logo.svg"
-      width="100%"
-      height="64"
-      :cover="true"
-      alt="logo"
-      style="opacity: 0.9"
-    />
-    <v-img
-      v-else
-      src="../../assets/images/dark/demo-icon-small.png"
-      height="48"
-      alt="logo"
-      style="opacity: 0.9"
-    />
-  </div>
-  <div
-    class="text-center mx-auto text-white sub-type"
-    :style="!drawer ? 'font-size: 100%' : 'font-size: 140%'"
-  >
-    Online Viewer
+  <div v-else class="d-flex align-center pb-1" :class="!drawer ? 'py-2' : 'pa-2'">
+    <v-img v-if="drawer" src="@/assets/images/dark/demo-logo.svg" width="100%" height="64" :cover="true" alt="logo" />
+    <v-img v-else src="@/assets/images/dark/demo-icon-small.png" height="48" alt="logo" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { demoType, isDemo } from "@/components/demo/options";
+import { demoType, isDemo } from '@/components/demo/options';
+import { DemoType } from '@/types/demo-type';
 
 interface Props {
   drawer?: boolean;
@@ -61,3 +25,9 @@ withDefaults(defineProps<Props>(), {
   drawer: false
 });
 </script>
+
+<style scoped lang="scss">
+.v-img {
+  opacity: 0.9;
+}
+</style>

package/src/components/modal/ViewerScanView.vue

@@ -0,0 +1,114 @@
+<template>
+  <div :id="`view-${view}`" class="scan-view" ref="container">
+    <v-hover>
+      <template #default="{ isHovering, props }">
+        <v-row v-bind="props" class="flex-nowrap h-100" no-gutters>
+          <v-col style="min-width: 0">
+            <v-row class="flex-column h-100" no-gutters>
+              <v-col class="flex-grow-0">
+                <div class="d-flex pa-2 pl-3 align-center">
+                  <span class="text-white">{{ viewName }}</span>
+                  <v-tooltip v-if="horizontalFlip" location="bottom">
+                    <template #activator="{ props }">
+                      <v-icon v-bind="props" icon="swap_horiz" color="blue-darken-1" class="ml-2" />
+                    </template>
+                    <span>This view has been flipped horizontally</span>
+                  </v-tooltip>
+                  <v-tooltip v-if="verticalFlip" location="bottom">
+                    <template #activator="{ props }">
+                      <v-icon v-bind="props" icon="swap_vert" color="blue-darken-1" class="ml-2" />
+                    </template>
+                    <span>This view has been flipped vertically</span>
+                  </v-tooltip>
+                </div>
+              </v-col>
+              <v-spacer />
+              <v-col class="flex-grow-0">
+                <Transition>
+                  <div v-show="isHovering || active">
+                    <ViewerActionRail :view="view" :element="container!" @modal="onActionModal" />
+                  </div>
+                </Transition>
+              </v-col>
+            </v-row>
+          </v-col>
+          <v-col class="flex-grow-0">
+            <VerticalSliderSelector
+              class="h-100 my-0 pa-2 pr-3"
+              v-if="view === ScanView.Transverse"
+              v-model:value="scanState.Orientations.Transverse.Slice"
+              v-bind="tMinMax"
+            />
+            <VerticalSliderSelector
+              class="h-100 my-0 pa-2 pr-3"
+              v-if="view === ScanView.Coronal"
+              v-model:value="scanState.Orientations.Coronal.Slice"
+              v-bind="cMinMax"
+            />
+            <VerticalSliderSelector
+              class="h-100 my-0 pa-2 pr-3"
+              v-if="view === ScanView.Sagittal"
+              v-model:value="scanState.Orientations.Sagittal.Slice"
+              v-bind="sMinMax"
+            />
+          </v-col>
+        </v-row>
+      </template>
+    </v-hover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  getViewName,
+  isHorizontalFlip,
+  isVerticalFlip,
+  cMinMax,
+  scanState,
+  sMinMax,
+  tMinMax
+} from '@/models/scanState';
+import { ScanView } from '@3cr/types-ts';
+import { computed, ref } from 'vue';
+
+interface Props {
+  view: ScanView;
+}
+
+const props = defineProps<Props>();
+
+const active = ref<boolean>(false);
+const container = ref<HTMLDivElement>();
+const viewName = computed(() => getViewName(props.view));
+const horizontalFlip = computed(() => isHorizontalFlip(props.view));
+const verticalFlip = computed(() => isVerticalFlip(props.view));
+
+function onActionModal(value: boolean): void {
+  active.value = value;
+}
+</script>
+
+<style scoped lang="scss">
+#view-0 {
+  cursor: grab;
+}
+
+.scan-view {
+  border: 1px rgba(128, 128, 128, 0.56) solid;
+  transition: border 0.5s;
+}
+
+.scan-view:hover {
+  border: 1px dashed rgb(0, 152, 253);
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/modal/WebGL3DR.vue

@@ -0,0 +1,91 @@
+<template>
+  <div id="webgl-container">
+    <canvas id="canvas" ref="canvas" width="100%" height="100%" tabindex="-1"></canvas>
+    <div id="overlay" ref="overlay">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { useViewerOptions } from '@/composables/useViewerOptions';
+
+const viewer3cr = useViewer3cr();
+const options = useViewerOptions();
+const canvas = ref<HTMLCanvasElement>();
+const overlay = ref<HTMLDivElement>();
+
+const emit = defineEmits<{
+  instance_loaded: [void];
+}>();
+
+onMounted(async () => {
+  if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
+    // Mobile device style: fill the whole browser client area with the game canvas:
+    const meta = document.createElement('meta');
+    meta.name = 'viewport';
+    meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
+    document.head.appendChild(meta);
+  }
+
+  if (navigator.storage && navigator.storage.estimate) {
+    const quota = await navigator.storage.estimate();
+    const percentageUsed = (quota.usage! / quota.quota!) * 100;
+    console.log(`You've used ${percentageUsed}% of the available storage.`);
+    const remaining = quota.quota! - quota.usage!;
+    console.log(`You can write up to ${remaining} more bytes.`);
+  }
+
+  overlay.value!.addEventListener('wheel', (e: WheelEvent) => {
+    e.preventDefault();
+    canvas.value!.dispatchEvent(new WheelEvent(e.type, e));
+  });
+
+  injectEventListener('click');
+  injectEventListener('dblclick');
+  injectEventListener('auxclick');
+  injectEventListener('mousedown');
+  injectEventListener('mousemove');
+  injectEventListener('mouseup');
+  injectEventListener('mouseout');
+  injectEventListener('mouseover');
+  injectEventListener('mouseenter');
+  injectEventListener('mouseleave');
+  injectEventListener('contextmenu');
+
+  await viewer3cr.register(canvas.value!);
+
+  if (options.value.OnViewerLoaded) {
+    await options.value.OnViewerLoaded(viewer3cr);
+  }
+
+  emit('instance_loaded');
+});
+
+function injectEventListener(type: keyof HTMLElementEventMap): void {
+  overlay.value!.addEventListener(type, (e: Event) => {
+    e.preventDefault();
+    canvas.value!.dispatchEvent(new MouseEvent(type, e));
+  });
+}
+
+defineExpose({ canvas, overlay });
+</script>
+
+<style scoped lang="scss">
+#webgl-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+#canvas,
+#overlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>

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

@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils';
+import ActionRail from '@/components/modal/ActionRail.vue';
+
+describe('ActionRail tests', () => {
+  it('should mount', () => {
+    const wrapper = mount(ActionRail);
+    expect(wrapper).toBeTruthy();
+    wrapper.unmount();
+  });
+});

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

@@ -0,0 +1,33 @@
+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';
+
+const items = GptResponseFaker.random();
+
+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 });
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should close modal', async () => {
+    const props = { title: 'Test', questionKey: 1, questionText: 'test', modal: true };
+    const wrapper = mount(AskAI, { 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 });
+    await flushPromises();
+    await wrapper.findComponent(VChip).trigger('click');
+    expect(wrapper.emitted('askFollowup')).toEqual([[items.FollowupQuestions[0]]]);
+  });
+});

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

@@ -1,14 +1,16 @@
-import { describe, expect, it, vi } from "vitest";
-import { DOMWrapper, flushPromises } from "@vue/test-utils";
-import { mountVuetify } from "~/helper";
-import { defaultLoadViewerOptions } from "@/models/LoadViewerOptions";
-import CloseViewerModal from "@/components/modal/CloseViewerModal.vue";
+import { DOMWrapper, flushPromises, mount } from '@vue/test-utils';
+import { defaultLoadViewerOptions } from '@/models/loadViewerOptions';
+import CloseViewerModal from '@/components/modal/CloseViewerModal.vue';
 
 class CloseViewerModalHarness {
   dialog(): DOMWrapper<Element> {
     return new DOMWrapper(document.querySelector('[data-testid="dialog"]'));
   }
 
+  cancel() {
+    return this.dialog().findComponent('[data-testid="cancel"]');
+  }
+
   close() {
     return this.dialog().findComponent('[data-testid="close"]');
   }
@@ -21,33 +23,41 @@ class CloseViewerModalHarness {
 describe('CloseViewerModal tests', () => {
   const harness = new CloseViewerModalHarness();
 
-  it("should open modal", () => {
+  it('should open modal', () => {
     const props = { modal: true, options: defaultLoadViewerOptions };
-    const wrapper = mountVuetify(CloseViewerModal, props);
+    const wrapper = mount(CloseViewerModal, { props });
     expect(wrapper.exists()).toBeTruthy();
   });
 
   it('should close modal', async () => {
     const props = { modal: true, options: defaultLoadViewerOptions };
-    const wrapper = mountVuetify(CloseViewerModal, props);
+    const wrapper = mount(CloseViewerModal, { props });
     expect(wrapper.exists()).toBeTruthy();
     await wrapper.setProps({ modal: false });
-    // expect(wrapper.isVisible()).toBeFalsy();
+    expect(wrapper.text()).toBeFalsy();
+  });
+
+  it('should cancel modal', async () => {
+    const props = { modal: true, options: defaultLoadViewerOptions };
+    const wrapper = mount(CloseViewerModal, { props });
+    expect(wrapper.exists()).toBeTruthy();
+    await harness.cancel().trigger('click');
+    expect(wrapper.text()).toBeFalsy();
   });
 
   it('should close modal without saving', async () => {
     const props = { modal: true, options: defaultLoadViewerOptions };
-    const wrapper = mountVuetify(CloseViewerModal, props);
+    const wrapper = mount(CloseViewerModal, { props });
     const onExitViewerSpy = vi.spyOn(defaultLoadViewerOptions, 'OnExitViewer');
     expect(wrapper.exists()).toBeTruthy();
     await harness.close().trigger('click');
     expect(onExitViewerSpy).toHaveBeenCalled();
-    // expect(wrapper.isVisible()).toBeFalsy();
+    expect(wrapper.text()).toBeFalsy();
   });
 
   it('should close modal and save session', async () => {
     const props = { modal: true, options: defaultLoadViewerOptions };
-    const wrapper = mountVuetify(CloseViewerModal, props);
+    const wrapper = mount(CloseViewerModal, { props });
     const onExitViewerSpy = vi.spyOn(defaultLoadViewerOptions, 'OnExitViewer');
     const onSaveSessionSpy = vi.spyOn(defaultLoadViewerOptions, 'OnSaveSession');
     expect(wrapper.exists()).toBeTruthy();
@@ -55,6 +65,6 @@ describe('CloseViewerModal tests', () => {
     await flushPromises();
     expect(onExitViewerSpy).toHaveBeenCalled();
     expect(onSaveSessionSpy).toHaveBeenCalled();
-    // expect(wrapper.isVisible()).toBeFalsy();
-  })
+    expect(wrapper.text()).toBeFalsy();
+  });
 });