@3cr/viewer-browser 0.0.248 → 0.0.292

package/src/components/navigation/annotation/__tests__/AnnotationTools.spec.ts

@@ -0,0 +1,116 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import AnnotationTools from '@/components/navigation/annotation/AnnotationTools.vue';
+
+import AnnotationDeleteSnackbar from '@/components/navigation/annotation/AnnotationDeleteSnackbar.vue';
+import AnnotationCreateModal from '@/components/navigation/annotation/AnnotationCreateModal.vue';
+import { storeToRefs } from 'pinia';
+import { useViewerStore } from '@/stores/viewer.store';
+import { DataOverlayAnnotationFaker } from '@test/fakers/data-overlay-annotation.faker';
+import { VIcon, VSnackbar } from 'vuetify/components';
+
+describe('AnnotationTools tests', () => {
+  it('should mount', async () => {
+    const wrapper = mount(AnnotationTools, { drawer: true });
+    await flushPromises();
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should AnnotationCreateModal', async () => {
+    const dataOverlayAnnotation = DataOverlayAnnotationFaker.random();
+    const { annotationCreateId } = storeToRefs(useViewerStore());
+
+    annotationCreateId.value = dataOverlayAnnotation.Id;
+    const wrapper = mount(AnnotationTools, {
+      props: {
+        items: [dataOverlayAnnotation]
+      }
+    });
+
+    const snack = wrapper.findComponent(AnnotationCreateModal);
+    await snack.setValue(true);
+
+    expect(snack.isVisible()).toBe(true);
+    await snack.setValue(false);
+  });
+
+  it('should create snackbar', async () => {
+    const wrapper = mount(AnnotationTools, { drawer: true });
+
+    const snack = wrapper.findAllComponents(VSnackbar);
+    await snack[0].setValue(true);
+
+    expect(snack[0].isVisible()).toBe(true);
+  });
+
+  it('should close create snackbar', async () => {
+    const wrapper = mount(AnnotationTools, { drawer: true });
+
+    const [snack] = wrapper.findAllComponents(VSnackbar);
+    await snack.setValue(true);
+
+    expect(snack.isVisible()).toBe(true);
+
+    const [_icon, icon] = snack.findAllComponents(VIcon);
+
+    await icon.trigger('click');
+
+    await flushPromises();
+    expect(snack.vm.modelValue).toBe(false);
+  });
+
+  it('should move snackbar', async () => {
+    const wrapper = mount(AnnotationTools, { drawer: true });
+
+    const snack = wrapper.findAllComponents(VSnackbar);
+    await snack[1].setValue(true);
+
+    expect(snack[1].isVisible()).toBe(true);
+  });
+
+  it('should close move snackbar', async () => {
+    const wrapper = mount(AnnotationTools, { drawer: true });
+
+    const [_, snack] = wrapper.findAllComponents(VSnackbar);
+    await snack.setValue(true);
+
+    expect(snack.isVisible()).toBe(true);
+
+    const [_icon, icon] = snack.findAllComponents(VIcon);
+
+    await icon.trigger('click');
+
+    await flushPromises();
+    expect(snack.vm.modelValue).toBe(false);
+  });
+
+  it('should AnnotationDeleteSnackbar', async () => {
+    const wrapper = mount(AnnotationTools, { drawer: true });
+
+    const snack = wrapper.findComponent(AnnotationDeleteSnackbar);
+    await snack.setValue(true);
+
+    expect(snack.isVisible()).toBe(true);
+  });
+
+  it('should create', async () => {
+    const { measurementToDelete } = storeToRefs(useViewerStore());
+    measurementToDelete.value = {} as any;
+    const wrapper = mount(AnnotationTools, { drawer: true });
+    const snack = wrapper.findAllComponents(VSnackbar);
+
+    wrapper.vm.create();
+
+    expect(snack[0].isVisible()).toBe(true);
+  });
+
+  it('should move', async () => {
+    const { measurementToDelete } = storeToRefs(useViewerStore());
+    measurementToDelete.value = {} as any;
+    const wrapper = mount(AnnotationTools, { drawer: true });
+    const snack = wrapper.findAllComponents(VSnackbar);
+
+    wrapper.vm.move();
+
+    expect(snack[1].isVisible()).toBe(true);
+  });
+});

package/src/components/navigation/display/DisplayPanel.vue

@@ -0,0 +1,156 @@
+<template>
+  <v-card color="background" density="compact" flat tile>
+    <DrawerTitle :title="t('labels.display')" />
+    <v-card-text class="px-2">
+      <v-row class="flex-column" no-gutters>
+        <v-row id="density" no-gutters>
+          <v-col>
+            <DoubleSliderSelector v-bind="huMinMax" v-model="windowSlider" :label="t('labels.density')" />
+          </v-col>
+        </v-row>
+        <v-row no-gutters class="pt-4 pb-6">
+          <v-col>
+            <DoubleSliderSelector v-bind="huMinMax" v-model="thresholdSlider" :label="t('labels.fineAdjustment')" />
+          </v-col>
+        </v-row>
+        <v-divider class="pb-6" />
+        <v-row no-gutters>
+          <v-col>
+            <sh-select
+              data-testid="greyscale"
+              :model-value="currentGreyscalePreset"
+              :items="initialScanState.GreyscalePresets"
+              :label="t('fields.density.label')"
+              :clearable="false"
+              density="compact"
+              variant="outlined"
+              persistent-placeholder
+              hide-details
+              return-object
+              :placeholder="t('fields.density.placeholder')"
+              @update:model-value="onGreyscalePresetChange"
+            >
+              <template #item="{ props, item }">
+                <v-list-item v-bind="props" :title="getGreyscaleI18n(item.raw.Name)" lines="three">
+                  <template #subtitle>
+                    <span>{{ t('labels.lowDensity') + ': ' }}</span>
+                    <span class="text-mono">{{ item.raw.Lower }} </span>
+                    <v-spacer />
+                    <span>{{ t('labels.highDensity') + ': ' }}</span>
+                    <span class="text-mono">{{ item.raw.Upper }}</span>
+                  </template>
+                </v-list-item>
+              </template>
+              <template #selection="{ item }">
+                <span>{{ getGreyscaleI18n(item.raw.Name) }}</span>
+              </template>
+            </sh-select>
+          </v-col>
+        </v-row>
+        <v-row class="pt-6" no-gutters>
+          <v-col>
+            <sh-select
+              data-testid="colour"
+              :model-value="currentColourPreset"
+              :items="initialScanState.ColourPresets"
+              :label="t('fields.colour.label')"
+              variant="outlined"
+              density="compact"
+              hide-details
+              :placeholder="t('fields.colour.placeholder')"
+              return-object
+              @update:model-value="onColourPresetChange"
+            >
+              <template #item="{ props, item }">
+                <v-list-item v-bind="props" :title="getColourI18n(item.raw.Name)" />
+              </template>
+              <template #selection="{ item }">
+                <span>{{ getColourI18n(item.raw.Name) }}</span>
+              </template>
+            </sh-select>
+          </v-col>
+        </v-row>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import {
+  currentColourPreset,
+  currentGreyscalePreset,
+  huMinMax,
+  initialScanState,
+  thresholdSlider,
+  windowSlider
+} from '@/models/scanState';
+import { ColourPresetData, GreyscalePresetData, PresetsActions } from '@3cr/types-ts';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { useI18n } from 'vue-i18n';
+import { computed } from 'vue';
+
+const { t } = useI18n();
+const viewer3cr = useViewer3cr();
+
+const greyscaleI18n = computed(
+  () =>
+    new Map<string, string>([
+      ['Bone', t('labels.bone')],
+      ['Brain', t('labels.brain')],
+      ['Liver', t('labels.liver')],
+      ['Lungs', t('labels.lungs')],
+      ['Muscle', t('labels.muscle')],
+      ['Skin', t('labels.skin')],
+      ['Soft Tissue', t('labels.softTissue')],
+      ['Temporal Bones', t('labels.temporalBones')]
+    ])
+);
+
+const colourI18n = computed(
+  () =>
+    new Map<string, string>([
+      ['None', t('labels.none')],
+      ['B&W', t('labels.blackAndWhite')],
+      ['CT Colour', t('labels.ctColour')],
+      ['Rainbow', t('labels.rainbow')],
+      ['Inverse', t('labels.inverse')]
+    ])
+);
+
+function getGreyscaleI18n(name: string): string {
+  return greyscaleI18n.value.get(name) ?? name;
+}
+
+function getColourI18n(name: string): string {
+  return colourI18n.value.get(name) ?? name;
+}
+
+async function onGreyscalePresetChange(preset: GreyscalePresetData): Promise<void> {
+  await viewer3cr.setPreset(PresetsActions.pr01, preset);
+}
+
+async function onColourPresetChange(preset: ColourPresetData | null): Promise<void> {
+  if (preset !== null) {
+    await viewer3cr.setPreset(PresetsActions.pr02, preset);
+  } else {
+    const defaultPreset = initialScanState.value.ColourPresets.find((x) => x.Name === 'None');
+    if (defaultPreset) {
+      await viewer3cr.setPreset(PresetsActions.pr02, defaultPreset);
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.text-caption) {
+  font-weight: 600;
+}
+
+:deep(.v-card-title) {
+  font-weight: 600;
+}
+
+:deep(.v-field-label) {
+  padding-bottom: 20px;
+}
+</style>

package/src/components/{views/__tests__/DisplaySettings.spec.ts → navigation/display/__tests__/DisplayPanel.spec.ts}

@@ -10,7 +10,7 @@ import {
 import { ColourPresetData } from '@3cr/types-ts';
 import { VRangeSlider } from 'vuetify/components';
 import { mount } from '@vue/test-utils';
-import ViewerDisplaySettings from '@/components/views/DisplaySettings.vue';
+import ViewerDisplaySettings from '@/components/navigation/display/DisplayPanel.vue';
 import DoubleSliderSelector from '@/components/shared/DoubleSliderSelector.vue';
 
 describe('ViewerDisplaySettings tests', () => {
@@ -47,7 +47,7 @@ describe('ViewerDisplaySettings tests', () => {
     setScanState(JSON.stringify(scanState));
 
     const wrapper = mount(ViewerDisplaySettings);
-    const greyscale = wrapper.findComponent('[data-testid="greyscale"]');
+    const greyscale = wrapper.findComponentByTestId('greyscale');
     await greyscale.setValue(initial.GreyscalePresets[0]);
     expect(currentGreyscalePreset.value).toStrictEqual(initial.GreyscalePresets[0]);
   });
@@ -58,8 +58,19 @@ describe('ViewerDisplaySettings tests', () => {
     setInitialScanStateFromPayload(JSON.stringify(initial));
 
     const wrapper = mount(ViewerDisplaySettings);
-    const colour = wrapper.findComponent('[data-testid="colour"]');
+    const colour = wrapper.findComponentByTestId('colour');
     await colour.setValue(initial.ColourPresets[0]);
     expect(currentColourPreset.value).toStrictEqual(initial.ColourPresets[0]);
   });
+
+  it('should set colour preset from null', async () => {
+    const initial = inflateInitialScanState();
+    initial.ColourPresets = [{ Name: 'None' } as ColourPresetData];
+    setInitialScanStateFromPayload(JSON.stringify(initial));
+
+    const wrapper = mount(ViewerDisplaySettings);
+    const colour = wrapper.findComponentByTestId('colour');
+    await colour.setValue(null);
+    expect(currentColourPreset.value).toStrictEqual(initial.ColourPresets[0]);
+  });
 });

package/src/components/navigation/history/HistoryModal.vue

@@ -0,0 +1,140 @@
+<template>
+  <v-dialog v-model="modelValue" content-class="history-content" :scrim="false">
+    <v-sheet class="d-flex flex-column h-100" elevation="0">
+      <v-toolbar class="px-4" color="transparent">
+        <span class="text-h6">{{ t('labels.recentDicomImages') }}</span>
+        <v-spacer />
+        <v-btn color="primary" prepend-icon="auto_awesome" variant="text">
+          <span>{{ t('labels.generate') }}</span>
+        </v-btn>
+        <v-btn color="primary" prepend-icon="cloud_upload" variant="text">
+          <span>{{ t('labels.addToStorage') }}</span>
+        </v-btn>
+        <v-btn color="primary" prepend-icon="filter_list" variant="text">
+          <span>{{ t('labels.filter') }}</span>
+        </v-btn>
+        <v-btn color="primary" prepend-icon="delete" variant="text">
+          <span>{{ t('labels.delete') }}</span>
+        </v-btn>
+      </v-toolbar>
+      <v-data-table class="flex-grow-1" height="0" :headers="headers" :items="items" show-select sticky width="100%">
+        <template #[`item.fileName`]="{ item }">
+          <div class="pa-2 d-flex ga-2 align-center">
+            <v-img :src="item.thumbnail" inline alt="thumbnail" width="64" height="64" />
+            <span class="text-body-1">{{ item.fileName }}</span>
+          </div>
+        </template>
+        <template #[`item.lastUpdated`]="{ item }">
+          <div class="d-flex flex-column">
+            <span class="text-body-1">{{ item.updatedBy }}</span>
+            <span class="text-body-2 font-weight-thin">
+              {{ formatDistance(item.updatedAt, new Date(), { addSuffix: true }) }}
+            </span>
+          </div>
+        </template>
+        <template #[`item.quality`]="{ item }">
+          <v-rating
+            v-model="item.quality"
+            active-color="yellow"
+            empty-icon="filled:star_rate"
+            color="grey"
+            density="compact"
+            readonly
+          />
+        </template>
+        <template #[`item.sharedWith`]="{ item }">
+          <div class="d-flex">
+            <template v-for="(user, idx) in item.sharedWith" :key="user.email">
+              <v-tooltip location="bottom" open-delay="1000">
+                <template #activator="{ props }">
+                  <v-avatar
+                    v-bind="props"
+                    :style="`position: relative; right: ${idx * 16}px`"
+                    variant="elevated"
+                    :image="user.avatar"
+                  />
+                </template>
+                <span>{{ user.email }}</span>
+              </v-tooltip>
+            </template>
+          </div>
+        </template>
+        <template #[`item.role`]="{ item }">
+          <share-menu v-model="item.role" :btn-props="{ disabled: true }" />
+        </template>
+        <template #[`item.actions`]>
+          <div class="d-flex ga-2">
+            <v-btn density="comfortable" icon="ios_share" variant="text" />
+            <v-btn density="comfortable" icon="delete" variant="text" />
+            <v-btn density="comfortable" icon="more_vert" variant="text" />
+          </div>
+        </template>
+      </v-data-table>
+    </v-sheet>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { formatDistance } from 'date-fns';
+import { faker } from '@faker-js/faker';
+import { useI18n } from 'vue-i18n';
+import { SharePermission } from '@3cr/viewer-types-ts';
+
+interface HistoryItem {
+  id: string;
+  fileName: string;
+  thumbnail: string;
+  updatedBy: string;
+  updatedAt: Date;
+  quality: number;
+  sharedWith: {
+    email: string;
+    avatar: string;
+  }[];
+  role: SharePermission;
+}
+
+const { t } = useI18n();
+
+const modelValue = defineModel<boolean>({ default: false });
+
+const items = ref<HistoryItem[]>(
+  faker.helpers.multiple(
+    () => ({
+      id: faker.string.uuid(),
+      fileName: faker.system.commonFileName('dcm'),
+      thumbnail: faker.image.urlLoremFlickr({ width: 64, height: 64 }),
+      quality: faker.number.int({ min: 1, max: 5 }),
+      updatedAt: faker.date.past(),
+      updatedBy: faker.person.fullName(),
+      sharedWith: faker.helpers.multiple(
+        () => ({
+          email: faker.internet.email(),
+          avatar: faker.image.avatarGitHub()
+        }),
+        { count: 5 }
+      ),
+      role: faker.helpers.enumValue(SharePermission)
+    }),
+    { count: 100 }
+  )
+);
+
+const headers = computed(() => [
+  { key: 'fileName', title: t('labels.fileName') },
+  { key: 'lastUpdated', title: t('labels.lastUpdated') },
+  { key: 'quality', title: t('labels.quality') },
+  { key: 'sharedWith', title: t('labels.sharedWith') },
+  { key: 'role', title: t('labels.role') },
+  { key: 'actions', title: t('labels.actions'), sortable: false }
+]);
+</script>
+
+<style lang="scss">
+.history-content {
+  width: calc(100vw - 80px) !important;
+  height: calc(100vh - 60px) !important;
+  margin: 60px 0 0 80px !important;
+}
+</style>

package/src/components/navigation/mcad/McadAddObjectBtn.vue

@@ -0,0 +1,41 @@
+<template>
+  <McadDropZone
+    :on-processing-text="t('labels.addObject')"
+    on-hover-text=".stl files supported"
+    @onDropItems="onDropItems"
+    @onClick="onClickItems"
+    :default-text="t('labels.addObject')"
+    height="40px"
+  />
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+import { traverseDirectoryTreeWrapper } from '@/functions/fileReader';
+import { useViewerStore } from '@/stores/viewer.store';
+
+const { t } = useI18n();
+const { options } = storeToRefs(useViewerStore());
+
+async function onDropItems(event: DragEvent) {
+  const files: Array<File> = [];
+  if (event.dataTransfer?.items) {
+    await traverseDirectoryTreeWrapper(event.dataTransfer?.items, (file: File) => {
+      files.push(file);
+      return Promise.resolve();
+    });
+  }
+  await onComplete(files);
+}
+
+async function onClickItems(items: Array<File>) {
+  await onComplete(items);
+}
+
+async function onComplete(items: Array<File>) {
+  if (options.value.onMCADUpload) {
+    await options.value.onMCADUpload(items.filter((x) => x.name.toLowerCase().includes('.stl')));
+  }
+}
+</script>

package/src/components/navigation/mcad/McadDataTable.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="d-flex flex-column h-100 pt-0">
+    <div class="px-0 pb-2 new-style pt-0">
+      <v-text-field
+        v-model="search"
+        density="compact"
+        prepend-inner-icon="search"
+        :placeholder="t('fields.search.placeholder')"
+        variant="outlined"
+        hide-details
+        class="new-style pt-0"
+      >
+        <template #append-inner>
+          <v-btn class="shark-400" icon="close" size="24" variant="text" @click="search = ''" />
+        </template>
+      </v-text-field>
+    </div>
+    <v-sheet class="overflow-auto" elevation="2">
+      <mcad-data-table-items :items="parentMcads" is-primary :search="search" />
+    </v-sheet>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useMcadStore } from '@/stores/mcad.store';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { DataOverlayMcad } from '@3cr/viewer-types-ts';
+
+interface Props {
+  items: DataOverlayMcad[];
+}
+
+withDefaults(defineProps<Props>(), {
+  items: () => []
+});
+
+const { t } = useI18n();
+const { mcads, childKeys } = storeToRefs(useMcadStore());
+
+const parentMcads = computed(() => mcads.value.map((x) => x.Key).filter((x) => !childKeys.value.includes(x)));
+const search = ref<string>('');
+
+defineExpose({
+  search
+});
+</script>
+
+<style scoped lang="scss">
+.v-data-table {
+  height: 100%;
+  width: 100%;
+}
+
+:deep(.overflow) {
+  max-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
+
+<style lang="scss">
+.v-data-table {
+  background-color: var(--v-background-color);
+  height: 100%;
+  .active {
+    background-color: rgb(var(--v-theme-minsk_050)) !important;
+  }
+}
+.drag-drop {
+  cursor: grab !important;
+}
+
+.drag-drop:active {
+  cursor: grabbing !important;
+}
+</style>