@3cr/viewer-browser 0.0.248 → 0.0.293

package/src/components/modal/actions/__tests__/Rotate2dAction.spec.ts

@@ -1,21 +1,28 @@
 import { ScanView } from '@3cr/types-ts';
 import { DOMWrapper, mount } from '@vue/test-utils';
-import { Viewer3crService } from '@/services/viewer-3cr.service';
 import Rotate2dAction from '@/components/modal/actions/Rotate2dAction.vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { VTextField } from 'vuetify/components';
 
 describe('Rotate2dAction tests', () => {
+  const viewer3cr = useViewer3cr();
+
   it('should apply rotation', async () => {
     const props = { view: ScanView.Sagittal };
-    const spy = vi.spyOn(Viewer3crService.prototype, 'rotateByDeg').mockResolvedValue();
+    const spy = vi.spyOn(viewer3cr, 'rotateByDeg').mockResolvedValue();
     const wrapper = mount(Rotate2dAction, { props });
-    const button = wrapper.findComponent('[data-testid="button"]');
+    const button = wrapper.findComponentByTestId('button');
     await button.trigger('click');
 
     const menu = new DOMWrapper(document.querySelector('[data-testid="menu"]'));
-    const textField = menu.findComponent('[data-testid="rotation"]');
+    const textField = menu.findComponentByTestId('rotate');
     await textField.setValue(10);
-    const rotate = menu.findComponent('[data-testid="rotate"]');
+    const rotate = menu.findComponentByTestId('rotate');
     await rotate.trigger('click');
-    expect(spy).toHaveBeenCalledWith(props.view, 10);
+    const text = menu.findComponent(VTextField);
+    await text.setValue(123);
+    expect(spy).toHaveBeenCalledWith({
+      message: { Version: '0.0.0', View: ScanView.Sagittal, Angle: 0 }
+    });
   });
 });

package/src/components/modal/actions/__tests__/Slice3dAction.spec.ts

@@ -8,7 +8,7 @@ describe('Slice3dAction tests', () => {
   it('should open slice menu', async () => {
     const props = { view: ScanView.Volume };
     const wrapper = mount(Slice3dAction, { props });
-    const button = wrapper.findComponent('[data-testid="button"]');
+    const button = wrapper.findComponentByTestId('button');
     await button.trigger('click');
     const menu = new DOMWrapper(document.querySelector('[data-testid="menu"]'));
     expect(menu.exists()).toBeTruthy();

package/src/components/modal/actions/__tests__/ZoomAction.spec.ts

@@ -1,32 +1,46 @@
-import { ScanView } from '@3cr/types-ts';
-import { Viewer3crService } from '@/services/viewer-3cr.service';
+import { MovementData, ScanView } from '@3cr/types-ts';
 import { DOMWrapper, mount } from '@vue/test-utils';
 import ZoomAction from '@/components/modal/actions/ZoomAction.vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
 
 describe('ZoomAction tests', () => {
+  const viewer3cr = useViewer3cr();
   const props = { view: ScanView.Sagittal, percentage: 25 };
-  const zoomInSpy = vi.spyOn(Viewer3crService.prototype, 'zoomIn');
-  const zoomOutSpy = vi.spyOn(Viewer3crService.prototype, 'zoomOut');
+
+  const zoomInSpy = vi.spyOn(viewer3cr, 'zoomIn');
+  const zoomOutSpy = vi.spyOn(viewer3cr, 'zoomOut');
 
   it('should zoom in', async () => {
     const wrapper = mount(ZoomAction, { props });
-    const button = wrapper.findComponent('[data-testid="button"]');
+    const button = wrapper.findComponentByTestId('button');
     await button.trigger('click');
 
     const menu = new DOMWrapper(document.querySelector('[data-testid="menu"]'));
-    const zoomIn = menu.findComponent('[data-testid="zoom-in"]');
+    const zoomIn = menu.findComponentByTestId('zoom-in');
     await zoomIn.trigger('click');
-    expect(zoomInSpy).toHaveBeenCalledWith(props.view, props.percentage);
+    const message: MovementData = {
+      Version: '0.0.0',
+      View: props.view,
+      Movement: props.percentage
+    };
+    expect(zoomInSpy).toHaveBeenCalledWith({ message });
   });
 
   it('should zoom out', async () => {
+    // variable declaration
     const wrapper = mount(ZoomAction, { props });
-    const button = wrapper.findComponent('[data-testid="button"]');
+    const button = wrapper.findComponentByTestId('button');
     await button.trigger('click');
-
     const menu = new DOMWrapper(document.querySelector('[data-testid="menu"]'));
-    const zoomOut = menu.findComponent('[data-testid="zoom-out"]');
+    const zoomOut = menu.findComponentByTestId('zoom-out');
+    //execution 2
     await zoomOut.trigger('click');
-    expect(zoomOutSpy).toHaveBeenCalledWith(props.view, props.percentage);
+    //check in of values
+    const message: MovementData = {
+      Version: '0.0.0',
+      View: props.view,
+      Movement: props.percentage
+    };
+    expect(zoomOutSpy).toHaveBeenCalledWith({ message });
   });
 });

package/src/components/modal/app-bars/ViewerActionBar.vue

@@ -0,0 +1,224 @@
+<template>
+  <v-app-bar class="px-2 rounded-ts" flat height="56">
+    <div class="d-flex ga-2 w-100">
+      <auto-annotate-menu v-if="showAutoAnnotate" />
+      <v-btn-toggle v-if="showLayout" :model-value="layout" border density="comfortable">
+        <v-tooltip location="bottom" open-delay="1000">
+          <template #activator="{ props }">
+            <v-btn
+              v-bind="props"
+              color="primary"
+              data-testid="layout-2x2"
+              icon="grid_view"
+              @click="viewer3cr.layouts(LayoutActions.lo02)"
+            />
+          </template>
+          <span>{{ t('labels.layout2x2') }}</span>
+        </v-tooltip>
+        <v-tooltip location="bottom" open-delay="1000">
+          <template #activator="{ props }">
+            <v-btn
+              v-bind="props"
+              color="primary"
+              data-testid="layout-1x3"
+              icon="view_sidebar"
+              @click="viewer3cr.layouts(LayoutActions.lo03)"
+            />
+          </template>
+          <span>{{ t('labels.layout1x3') }}</span>
+        </v-tooltip>
+      </v-btn-toggle>
+      <v-spacer />
+      <v-btn
+        v-if="showLoadScan"
+        class="px-2"
+        data-testid="load-btn"
+        color="primary"
+        :prepend-icon="isOpen ? undefined : 'add_circle'"
+        :icon="isOpen"
+        :size="isOpen ? '40' : 'default'"
+        @click="loadScan"
+      >
+        <span v-if="!isOpen" class="minsk-900">{{ t('labels.loadSeries') }}</span>
+        <v-icon v-if="isOpen" icon="add_circle" />
+        <v-tooltip v-if="isOpen" activator="parent" location="bottom" open-delay="1000">
+          <span>{{ t('labels.loadSeries') }}</span>
+        </v-tooltip>
+      </v-btn>
+      <v-btn
+        v-if="showCloudStorage"
+        class="px-2"
+        color="primary"
+        data-testid="cloud-btn"
+        :prepend-icon="isOpen ? undefined : 'backup'"
+        :icon="isOpen"
+        :size="isOpen ? '40' : 'default'"
+        @click="cloudStorage"
+      >
+        <span v-if="!isOpen" class="minsk-900">{{ t('labels.addToStorage') }}</span>
+        <v-icon v-if="isOpen" icon="backup" />
+        <v-tooltip v-if="isOpen" activator="parent" location="bottom" open-delay="1000">
+          <span>{{ t('labels.addToStorage') }}</span>
+        </v-tooltip>
+      </v-btn>
+      <v-btn
+        v-if="showDownloadScan"
+        class="px-2"
+        color="primary"
+        data-testid="download-btn"
+        :prepend-icon="isOpen ? undefined : 'download'"
+        :icon="isOpen"
+        :size="isOpen ? '40' : 'default'"
+        @click="downloadScan"
+      >
+        <span v-if="!isOpen" class="minsk-900">{{ t('labels.download') }}</span>
+        <v-icon v-if="isOpen" icon="download" />
+        <v-tooltip v-if="isOpen" activator="parent" location="bottom" open-delay="1000">
+          <span>{{ t('labels.download') }}</span>
+        </v-tooltip>
+      </v-btn>
+      <v-btn
+        v-if="showReset"
+        class="px-2"
+        color="primary"
+        data-testid="reset-btn"
+        :prepend-icon="isOpen ? undefined : 'autorenew'"
+        :icon="isOpen"
+        :size="isOpen ? '40' : 'default'"
+        @click="reset"
+      >
+        <span v-if="!isOpen" class="minsk-900">{{ t('labels.reset') }}</span>
+        <v-icon v-if="isOpen" icon="autorenew" />
+        <v-tooltip v-if="isOpen" activator="parent" location="bottom" open-delay="1000">
+          <span>{{ t('labels.reset') }}</span>
+        </v-tooltip>
+      </v-btn>
+      <v-spacer />
+      <v-btn
+        v-if="showShare"
+        color="primary"
+        data-testid="share-btn"
+        prepend-icon="share"
+        variant="outlined"
+        @click="m_share = true"
+      >
+        <span class="minsk-900">{{ t('labels.share') }}</span>
+      </v-btn>
+      <v-btn
+        v-if="showSaveSession"
+        class="save"
+        color="minsk_900"
+        data-testid="save-btn"
+        :loading="state === SaveState.SAVING"
+        variant="flat"
+        @click="save"
+      >
+        <v-icon class="minsk-200" icon="cloud_upload" start />
+        <span>{{ t('labels.save') }}</span>
+      </v-btn>
+      <share-modal v-model="m_share" />
+    </div>
+  </v-app-bar>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useViewerStore } from '@/stores/viewer.store';
+import { storeToRefs } from 'pinia';
+import { LayoutActions, ViewSelectionActions } from '@3cr/types-ts';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { currentColourPreset, initialScanState, scanState } from '@/models/scanState';
+import { useDrawerStore } from '@/stores/drawer.store';
+import { useSaveStore } from '@/stores/save.store';
+import { useDataOverlayStore } from '@/stores/data-overlay.store';
+import { useMcadStore } from '@/stores/mcad.store';
+import { useI18n } from 'vue-i18n';
+import { isLayout1x3, isLayout2x2 } from '@/models/scanState';
+import { SaveState } from '@3cr/viewer-types-ts';
+
+const { t } = useI18n();
+const viewer3cr = useViewer3cr();
+const { state: dataOverlays } = storeToRefs(useDataOverlayStore());
+const { isOpen } = storeToRefs(useDrawerStore());
+const { state: mcads } = storeToRefs(useMcadStore());
+const { state } = storeToRefs(useSaveStore());
+const { options } = storeToRefs(useViewerStore());
+
+const m_share = ref<boolean>(false);
+
+const layout = computed(() => {
+  if (isLayout2x2.value) {
+    return 0;
+  } else if (isLayout1x3.value) {
+    return 1;
+  } else {
+    return undefined;
+  }
+});
+
+const showAutoAnnotate = computed(() => {
+  return !!options.value.getAIModels && !!options.value.onRunAIModel;
+});
+
+const showLoadScan = computed(() => {
+  return !!options.value.onLoadScan;
+});
+
+const showCloudStorage = computed(() => {
+  return !!options.value.onCloudStorage;
+});
+
+const showDownloadScan = computed(() => {
+  return !!options.value.onDownloadScan;
+});
+
+const showShare = computed(() => {
+  return !!options.value.onShareScan;
+});
+
+const showSaveSession = computed(() => {
+  return !!options.value.onSaveSession;
+});
+
+const showReset = computed(() => {
+  return !options.value.disableReset;
+});
+
+const showLayout = computed(() => {
+  return !options.value.disableLayouts;
+});
+
+async function loadScan(): Promise<void> {
+  if (options.value.onLoadScan) {
+    await options.value.onLoadScan();
+  }
+}
+
+async function cloudStorage(): Promise<void> {
+  if (options.value.onCloudStorage) {
+    // TODO: implement
+    await options.value.onCloudStorage([]);
+  }
+}
+
+async function downloadScan(): Promise<void> {
+  if (options.value.onDownloadScan) {
+    await options.value.onDownloadScan();
+  }
+}
+
+async function reset(): Promise<void> {
+  currentColourPreset.value = initialScanState.value.ColourPresets[0];
+  await viewer3cr.viewSelection(ViewSelectionActions.vs05);
+  await viewer3cr.viewSelection(ViewSelectionActions.vs06);
+}
+
+async function save(): Promise<void> {
+  const scan = scanState.value;
+  const dataOverlay = dataOverlays.value.DataOverlay;
+  const mcad = mcads.value.Models;
+  await options.value.onSaveSession!(scan, dataOverlay, mcad, (newState: SaveState) => {
+    state.value = newState;
+  });
+}
+</script>

package/src/components/modal/app-bars/ViewerAppBar.vue

@@ -0,0 +1,126 @@
+<template>
+  <v-app-bar class="px-2" color="background" flat density="comfortable">
+    <div class="title-box">
+      <v-icon class="shark-400" size="large" icon="folder" />
+      <div class="file-name text-base-medium">
+        {{ options.fileName }}
+      </div>
+      <div class="title-box">
+        <v-hover v-slot="{ props, isHovering }">
+          <v-icon v-bind="props" class="save-icon shark-400" :class="[state]" :icon="icon" size="small" />
+          <v-slide-x-transition>
+            <div class="save-text text-sm-regular" :class="[state]" v-if="isHovering || showText">{{ text }}</div>
+          </v-slide-x-transition>
+        </v-hover>
+      </div>
+    </div>
+    <v-spacer />
+    <v-btn v-if="showUpgrade" color="green-darken-1" prepend-icon="diamond" variant="tonal" @click="upgrade">
+      <span>{{ t('labels.upgrade') }}</span>
+    </v-btn>
+    <!--   /* v8 ignore start -- @Preserve */ -->
+    <v-tooltip location="bottom" open-delay="1000">
+      <template #activator="{ props }">
+        <v-btn
+          v-bind="props"
+          v-if="showNotificationDropdown"
+          color="subtext"
+          data-testid="notifications"
+          icon="notifications"
+          size="40"
+          variant="text"
+          @click="options.onNotificationDropdown!(0, 0)"
+        />
+      </template>
+      <span>{{ t('labels.notifications') }}</span>
+    </v-tooltip>
+    <!--   /* v8 ignore stop -- @Preserve */ -->
+    <settings-menu />
+    <avatar-dropdown-menu @close="emit('close')" />
+  </v-app-bar>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { useViewerStore } from '@/stores/viewer.store';
+import { computed } from 'vue';
+import { useSaveStore } from '@/stores/save.store';
+import { useI18n } from 'vue-i18n';
+
+type Emits = {
+  close: [void];
+};
+
+const emit = defineEmits<Emits>();
+
+const { t } = useI18n();
+const { options } = storeToRefs(useViewerStore());
+const { text, icon, showText, state } = storeToRefs(useSaveStore());
+
+const showNotificationDropdown = computed(() => {
+  return !!options.value.onNotificationDropdown;
+});
+
+const showUpgrade = computed(() => {
+  return !!options.value.onUpgrade;
+});
+
+async function upgrade(): Promise<void> {
+  if (options.value.onUpgrade) {
+    await options.value.onUpgrade();
+  }
+}
+</script>
+
+<style lang="scss">
+.title-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.file-name {
+  display: -webkit-box;
+  max-width: 352px;
+  -webkit-box-orient: vertical;
+  line-clamp: 1;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  color: #5e5e6b;
+  text-overflow: ellipsis;
+}
+
+.save-icon {
+  transition: transform 1s;
+  &.UNSAVED {
+    color: rgb(var(--v-theme-lightning_600)) !important;
+  }
+  &.ERROR {
+    color: rgb(var(--v-theme-amaranth_600)) !important;
+  }
+  &.SAVING {
+    animation: activate 1s infinite ease-in-out;
+  }
+}
+
+.save-text {
+  color: #5e5e6b;
+
+  &.UNSAVED {
+    color: rgb(var(--v-theme-lightning_700)) !important;
+  }
+
+  &.ERROR {
+    color: rgb(var(--v-theme-amaranth_900)) !important;
+  }
+}
+
+@keyframes activate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(180deg);
+  }
+}
+</style>

package/src/components/modal/app-bars/__tests__/ViewerActionBar.spec.ts

@@ -0,0 +1,176 @@
+import { LayoutActions } from '@3cr/types-ts';
+import { flushPromises, mount } from '@vue/test-utils';
+import { VBtn } from 'vuetify/components';
+import ViewerActionBar from '@/components/modal/app-bars/ViewerActionBar.vue';
+import { defineComponent } from 'vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { useDrawerStore } from '@/stores/drawer.store';
+import { createPinia, setActivePinia, storeToRefs } from 'pinia';
+import { createTestingPinia } from '@pinia/testing';
+import { useViewerStore } from '@/stores/viewer.store';
+import ShareModal from '@/components/modal/modal/ShareModal.vue';
+import { useDemoStore } from '@/stores/demo.store';
+import { SaveState } from '@3cr/viewer-types-ts';
+import { useSaveStore } from '@/stores/save.store';
+import { MockImportOriginal } from '@test/MockImportOriginal';
+
+const app = defineComponent({
+  template: '<v-app><ViewerActionBar></ViewerActionBar></v-app>',
+  components: { ViewerActionBar }
+});
+vi.mock('@/models/scanState', async (importOriginal: MockImportOriginal<typeof import('@/models/scanState')>) => {
+  return {
+    ...(await importOriginal()),
+    isLayout2x2: {
+      value: false
+    },
+    isLayout1x3: {
+      value: false
+    }
+  };
+});
+describe('Viewer3cr tests', () => {
+  const viewer3cr = useViewer3cr();
+
+  let wrapper = mount(app, { plugins: [createTestingPinia({ createSpy: vi.fn })] });
+  setActivePinia(createPinia());
+
+  beforeEach(() => {
+    wrapper = mount(app);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    wrapper.unmount();
+  });
+
+  it('inflates', () => {
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should set 2x2 view', async () => {
+    vi.spyOn(viewer3cr, 'layouts').mockImplementation(vi.fn());
+    await flushPromises();
+    await wrapper.findComponentByTestId<VBtn>('layout-2x2').trigger('click');
+    expect(viewer3cr.layouts).toHaveBeenCalledWith(LayoutActions.lo02);
+  });
+
+  it('should show open scan', async () => {
+    const { options } = storeToRefs(useViewerStore());
+
+    options.value.disableLayouts = false;
+    const { isOpen } = storeToRefs(useDrawerStore());
+    vi.spyOn(isOpen, 'value', 'get').mockReturnValue(true);
+    vi.spyOn(viewer3cr, 'layouts').mockImplementation(vi.fn());
+    await flushPromises();
+    await wrapper.findComponentByTestId<VBtn>('layout-2x2').trigger('click');
+    expect(viewer3cr.layouts).toHaveBeenCalledWith(LayoutActions.lo02);
+  });
+
+  it('should show all as open', async () => {
+    const { options } = storeToRefs(useViewerStore());
+
+    options.value.disableLayouts = true;
+    options.value.disableReset = true;
+    const { isOpen } = storeToRefs(useDrawerStore());
+    vi.spyOn(isOpen, 'value', 'get').mockReturnValue(true);
+    await flushPromises();
+    expect(wrapper.findComponent(ShareModal).exists()).toBe(true);
+  });
+
+  it('should show all as open', async () => {
+    const { options } = storeToRefs(useViewerStore());
+    const { state } = storeToRefs(useSaveStore());
+    state.value = SaveState.SAVING;
+    options.value = useDemoStore().demoPatientOptions;
+    const { isOpen } = storeToRefs(useDrawerStore());
+    vi.spyOn(isOpen, 'value', 'get').mockReturnValue(true);
+    await flushPromises();
+    await wrapper.findComponentByTestId<VBtn>('share-btn').trigger('click');
+    expect(wrapper.findComponent(ShareModal).exists()).toBe(true);
+  });
+
+  it('should show all as closed', async () => {
+    const { options } = storeToRefs(useViewerStore());
+
+    options.value = useDemoStore().demoPatientOptions;
+    const { isOpen } = storeToRefs(useDrawerStore());
+    vi.spyOn(isOpen, 'value', 'get').mockReturnValue(false);
+    await flushPromises();
+    await wrapper.findComponentByTestId<VBtn>('share-btn').trigger('click');
+    expect(wrapper.findComponent(ShareModal).exists()).toBe(true);
+    await wrapper.findComponent(ShareModal).setValue(false);
+    expect(wrapper.findComponent(ShareModal).vm.modelValue).toBe(false);
+  });
+
+  it('should set 1x3 view', async () => {
+    vi.spyOn(viewer3cr, 'layouts').mockImplementation(vi.fn());
+    await flushPromises();
+    await wrapper.findComponentByTestId('layout-1x3').trigger('click');
+    expect(viewer3cr.layouts).toHaveBeenCalledWith(LayoutActions.lo03);
+  });
+
+  it('should download scan', async () => {
+    const testingFn = vi.fn();
+    const { options } = storeToRefs(useViewerStore());
+
+    options.value.onDownloadScan = testingFn;
+    const { isOpen } = storeToRefs(useDrawerStore());
+    vi.spyOn(isOpen, 'value', 'get').mockReturnValue(false);
+    await flushPromises();
+    await wrapper.findComponentByTestId<VBtn>('download-btn').trigger('click');
+
+    expect(testingFn).toHaveBeenCalled();
+  });
+
+  it('should load scan', async () => {
+    const testingFn = vi.fn();
+    const { options } = storeToRefs(useViewerStore());
+
+    options.value.onLoadScan = testingFn;
+    const { isOpen } = storeToRefs(useDrawerStore());
+    vi.spyOn(isOpen, 'value', 'get').mockReturnValue(false);
+    await flushPromises();
+    await wrapper.findComponentByTestId<VBtn>('load-btn').trigger('click');
+
+    expect(testingFn).toHaveBeenCalled();
+  });
+
+  it('should cloud scan', async () => {
+    const testingFn = vi.fn();
+    const { options } = storeToRefs(useViewerStore());
+
+    options.value.onCloudStorage = testingFn;
+    const { isOpen } = storeToRefs(useDrawerStore());
+    vi.spyOn(isOpen, 'value', 'get').mockReturnValue(false);
+    await flushPromises();
+    await wrapper.findComponentByTestId<VBtn>('cloud-btn').trigger('click');
+
+    expect(testingFn).toHaveBeenCalled();
+  });
+
+  it('should reset scan', async () => {
+    const resetSpy = vi.spyOn(viewer3cr, 'viewSelection').mockResolvedValue();
+    const { isOpen } = storeToRefs(useDrawerStore());
+    vi.spyOn(isOpen, 'value', 'get').mockReturnValue(false);
+    await flushPromises();
+    await wrapper.findComponentByTestId<VBtn>('reset-btn').trigger('click');
+
+    expect(resetSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it('should save scan', async () => {
+    const testingFn = vi.fn().mockImplementation((_s: any, _d: any, _m: any, ssFn: any) => {
+      ssFn(SaveState.SAVED_CLOUD);
+    });
+    const { options } = storeToRefs(useViewerStore());
+
+    options.value.onSaveSession = testingFn;
+    const { isOpen } = storeToRefs(useDrawerStore());
+    vi.spyOn(isOpen, 'value', 'get').mockReturnValue(false);
+    await flushPromises();
+    await wrapper.findComponentByTestId<VBtn>('save-btn').trigger('click');
+
+    expect(testingFn).toHaveBeenCalled();
+  });
+});