@3cr/viewer-browser 0.0.200 → 0.0.220

package/src/components/{modal/__tests__/ViewerDisplaySettings.spec.ts → views/__tests__/DisplaySettings.spec.ts}

@@ -1,40 +1,44 @@
-import { describe, expect, it } from "vitest";
-import { mountVuetify } from "~/helper";
-import { inflateInitialScanState, inflateScanState } from "@/helpers/modelHelper";
-import { currentColourPreset, currentGreyscalePreset, setInitialScanStateFromPayload, setScanState, thresholdSlider, windowSlider } from "@/dataLayer/scanState";
-import { ColourPresetData } from "@3cr/types-ts";
-import { VTextField } from "vuetify/components";
-import ViewerDisplaySettings from "@/components/modal/ViewerDisplaySettings.vue";
-import DoubleSliderSelector from "@/components/sliders/DoubleSliderSelector.vue";
+import { inflateInitialScanState, inflateScanState } from '@/functions/modelHelper';
+import {
+  currentColourPreset,
+  currentGreyscalePreset,
+  setInitialScanStateFromPayload,
+  setScanState,
+  thresholdSlider,
+  windowSlider
+} from '@/models/scanState';
+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 DoubleSliderSelector from '@/components/shared/DoubleSliderSelector.vue';
 
 describe('ViewerDisplaySettings tests', () => {
   it('should mount', () => {
-    const wrapper = mountVuetify(ViewerDisplaySettings);
+    const wrapper = mount(ViewerDisplaySettings);
     expect(wrapper).toBeTruthy();
   });
 
   describe('sliders', async () => {
-    const wrapper = mountVuetify(ViewerDisplaySettings);
+    const wrapper = mount(ViewerDisplaySettings);
     const sliders = wrapper.findAllComponents(DoubleSliderSelector);
 
     it('should test window slider', async () => {
-      const textFields = sliders[0].findAllComponents(VTextField);
-      await textFields[0].setValue(20);
-      await textFields[1].setValue(40);
+      const slider = sliders[0].findComponent(VRangeSlider);
+      await slider.setValue([20, 40]);
       expect(windowSlider.value).toStrictEqual([20, 40]);
     });
 
     it('should test threshold slider', async () => {
-      const textFields = sliders[1].findAllComponents(VTextField);
-      await textFields[0].setValue(50);
-      await textFields[1].setValue(80);
+      const slider = sliders[1].findComponent(VRangeSlider);
+      await slider.setValue([50, 80]);
       expect(thresholdSlider.value).toStrictEqual([50, 80]);
     });
   });
 
   it('should set greyscale preset', async () => {
     const initial = inflateInitialScanState();
-    initial.GreyscalePresets = [{ Name: "testing", Lower: 30, Upper: 60, Version: "1.0.0" }];
+    initial.GreyscalePresets = [{ Name: 'testing', Lower: 30, Upper: 60, Version: '1.0.0' }];
     setInitialScanStateFromPayload(JSON.stringify(initial));
 
     const scanState = inflateScanState();
@@ -42,7 +46,7 @@ describe('ViewerDisplaySettings tests', () => {
     scanState.Display.WindowUpper = 60;
     setScanState(JSON.stringify(scanState));
 
-    const wrapper = mountVuetify(ViewerDisplaySettings);
+    const wrapper = mount(ViewerDisplaySettings);
     const greyscale = wrapper.findComponent('[data-testid="greyscale"]');
     await greyscale.setValue(initial.GreyscalePresets[0]);
     expect(currentGreyscalePreset.value).toStrictEqual(initial.GreyscalePresets[0]);
@@ -50,10 +54,10 @@ describe('ViewerDisplaySettings tests', () => {
 
   it('should set colour preset', async () => {
     const initial = inflateInitialScanState();
-    initial.ColourPresets = [{ Name: "testing" } as ColourPresetData];
+    initial.ColourPresets = [{ Name: 'testing' } as ColourPresetData];
     setInitialScanStateFromPayload(JSON.stringify(initial));
 
-    const wrapper = mountVuetify(ViewerDisplaySettings);
+    const wrapper = mount(ViewerDisplaySettings);
     const colour = wrapper.findComponent('[data-testid="colour"]');
     await colour.setValue(initial.ColourPresets[0]);
     expect(currentColourPreset.value).toStrictEqual(initial.ColourPresets[0]);

package/src/components/views/__tests__/MarkupTreeView.spec.ts

@@ -0,0 +1,41 @@
+import { mount } from '@vue/test-utils';
+import MarkupTreeView from '@/components/views/MarkupTreeView.vue';
+import { DataOverlayDataFaker } from '@test/fakers/data-overlay-data.faker';
+import { DataOverlayType } from '@3cr/types-ts';
+import VisibilityBtn from '@/components/views/shared/VisibilityBtn.vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import ObjectLabel from '@/components/views/shared/ObjectLabel.vue';
+
+const items = [
+  DataOverlayDataFaker.length(),
+  DataOverlayDataFaker.polygon(),
+  DataOverlayDataFaker.angle(),
+  { ...DataOverlayDataFaker.angle(), DataType: DataOverlayType._ErrorEntity }
+];
+
+describe('MarkupTreeView tests', () => {
+  it('should mount', () => {
+    const props = { items };
+    const wrapper = mount(MarkupTreeView, { props });
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should toggle visibility', async () => {
+    const viewer3cr = useViewer3cr();
+    const spy = vi.spyOn(viewer3cr, 'setMarkupVisibility').mockImplementation(vi.fn());
+    const props = { items };
+    const wrapper = mount(MarkupTreeView, { props });
+    await wrapper.findComponent(VisibilityBtn).trigger('click');
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should focus slices', async () => {
+    const viewer3cr = useViewer3cr();
+    const spy = vi.spyOn(viewer3cr, 'sliderHandler').mockImplementation(vi.fn());
+    const props = { items };
+    const wrapper = mount(MarkupTreeView, { props });
+    await wrapper.findComponent(ObjectLabel).trigger('click');
+    await wrapper.findComponent(ObjectLabel).trigger('click');
+    expect(spy).toHaveBeenCalledTimes(3);
+  });
+});

package/src/components/views/__tests__/McadObjectTreeView.spec.ts

@@ -0,0 +1,47 @@
+import { mount } from '@vue/test-utils';
+import { faker } from '@faker-js/faker';
+import { DataOverlayMcadFaker } from '@test/fakers/data-overlay-mcad.faker';
+import McadObjectTreeView from '@/components/views/McadObjectTreeView.vue';
+import VisibilityBtn from '@/components/views/shared/VisibilityBtn.vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import Opacity from '@/components/views/shared/Opacity.vue';
+import { useViewerOptions } from '@/composables/useViewerOptions';
+import { VListItem, VMenu } from 'vuetify/components';
+
+describe('McadObjectTreeView tests', () => {
+  const items = faker.helpers.multiple(DataOverlayMcadFaker.random, { count: 3 });
+
+  it('should mount', () => {
+    const props = { items };
+    const wrapper = mount(McadObjectTreeView, { props });
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should toggle visibility', async () => {
+    const viewer3cr = useViewer3cr();
+    const spy = vi.spyOn(viewer3cr, 'setMcadObjectVisibility').mockImplementation(vi.fn());
+    const props = { items };
+    const wrapper = mount(McadObjectTreeView, { props });
+    await wrapper.findComponent(VisibilityBtn).trigger('click');
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should update opacity', async () => {
+    const viewer3cr = useViewer3cr();
+    const spy = vi.spyOn(viewer3cr, 'setMcadObjectColour').mockImplementation(vi.fn());
+    const props = { items };
+    const wrapper = mount(McadObjectTreeView, { props });
+    await wrapper.findComponent(Opacity).setValue(NaN);
+    await wrapper.findComponent(Opacity).setValue(50);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should download mcad', async () => {
+    const options = useViewerOptions();
+    options.value.OnDownloadMcad = vi.fn();
+    const props = { items };
+    const wrapper = mount(McadObjectTreeView, { props });
+    await wrapper.findComponentByTestId<VMenu>('menu').trigger('click');
+    await wrapper.findComponentByTestId<VListItem>('download').trigger('click');
+  });
+});

package/src/components/views/modals/DataOverlayModal.vue

@@ -0,0 +1,89 @@
+<template>
+  <v-menu
+    v-model="modalState"
+    min-width="100"
+    max-width="400"
+    persistent
+    :no-click-animation="true"
+    :target="item.target"
+  >
+    <v-card density="compact">
+      <v-card-title>{{ item.title }}</v-card-title>
+      <v-list density="compact" :lines="false">
+        <v-list-item v-for="data of item.data">
+          <template #prepend>
+            <v-icon class="mr-n4" :icon="data.icon" />
+          </template>
+          <v-list-item-title>{{ data.title }}</v-list-item-title>
+
+          <v-list-item-subtitle v-if="data.subtitle">{{ data.subtitle }}</v-list-item-subtitle>
+
+          <v-list-item-subtitle v-if="data.actions && data.actions.length > 0">
+            <template v-for="action in data.actions">
+              <a @click.stop class="text-small" :href="action.url" target="_blank">
+                {{ action.description }}
+              </a>
+              <br />
+            </template>
+          </v-list-item-subtitle>
+        </v-list-item>
+      </v-list>
+    </v-card>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+import { DataOverlayInfo } from '@/types/data-overlay-info';
+import { computed } from 'vue';
+
+interface Props {
+  modal?: boolean;
+  item: DataOverlayInfo;
+}
+
+type Emits = {
+  'update:modal': [boolean];
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  modal: false
+});
+
+const emit = defineEmits<Emits>();
+
+const modalState = computed({
+  get(): boolean {
+    return props.modal;
+  },
+  set(value: boolean): void {
+    emit('update:modal', value);
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.v-card {
+  background: rgba(var(--v-theme-surface), 0.5) !important;
+  backdrop-filter: blur(48px);
+}
+
+.v-card-title {
+  background: none;
+  font-size: 14px;
+  padding-bottom: 0;
+}
+
+.v-list {
+  background: none;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.v-list-item-title {
+  font-size: 13px;
+}
+
+.v-list-item-subtitle {
+  font-size: 12px;
+}
+</style>

package/src/components/views/modals/DataOverlayModalManager.vue

@@ -0,0 +1,104 @@
+<template>
+  <template v-for="[item, modal] of modals" :key="item">
+    <data-overlay-modal :modal="modal" :item="item" />
+  </template>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { Interactiontype } from '@3cr/types-ts';
+import { DataOverlayInfo } from '@/types/data-overlay-info';
+import { DataOverlay } from '@/types/data-overlay';
+import { useMouse } from '@/composables/useMouse';
+import { useAnnotations } from '@/composables/useAnnotations';
+import { useMarkups } from '@/composables/useMarkups';
+import { useMcadObjects } from '@/composables/useMcadObjects';
+import { useEventListener } from '@/composables/useEventListener';
+import { GptService } from '@/services/gpt.service';
+import { GptResponsePayload } from '@/types/gpt-response-payload';
+
+useEventListener(document, 'mousedown', onMouseDown);
+const { x, y } = useMouse(document);
+const { annotationEvent } = useAnnotations();
+const { markupEvent } = useMarkups();
+const { mcadObjectEvent } = useMcadObjects();
+
+const modals = ref<Map<DataOverlayInfo, boolean>>(new Map<DataOverlayInfo, boolean>());
+const smartDescriptions = ref<Record<string, GptResponsePayload>>({});
+
+watch(
+  annotationEvent,
+  async (event) => {
+    if (event?.Interaction === Interactiontype.POINTER_UP) {
+      await generateSmartDescriptions(event.DataOverlay);
+      const item = mapToDataOverlayModal(event.DataOverlay);
+      modals.value.set(item, true);
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  markupEvent,
+  async (event) => {
+    if (event?.Interaction === Interactiontype.POINTER_UP) {
+      await generateSmartDescriptions(event.DataOverlay);
+      const item = mapToDataOverlayModal(event.DataOverlay);
+      modals.value.set(item, true);
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  mcadObjectEvent,
+  async (event) => {
+    if (event?.Interaction === Interactiontype.POINTER_UP) {
+      await generateSmartDescriptions(event.Mcad as any);
+      const item = mapToDataOverlayModal(event.Mcad as any);
+      modals.value.set(item, true);
+    }
+  },
+  { immediate: true }
+);
+
+function onMouseDown(): void {
+  for (const [key, value] of modals.value.entries()) {
+    if (value) {
+      modals.value.set(key, false);
+      setTimeout(() => modals.value.delete(key), 500); // wait for animation
+    }
+  }
+}
+
+async function generateSmartDescriptions(overlay: DataOverlay): Promise<void> {
+  const key = overlay.Title;
+  if (!(key in smartDescriptions.value)) {
+    const response = await GptService.Instantiate().GenerateAnnotations(key);
+    smartDescriptions.value[key] = response.data;
+  }
+}
+
+function mapToDataOverlayModal(overlay: DataOverlay): DataOverlayInfo {
+  return {
+    id: overlay.Id,
+    title: overlay.Title,
+    target: [x.value, y.value],
+    data: [
+      {
+        icon: overlay.Description ? 'description' : 'psychology',
+        title: overlay.Description ? 'Description' : 'Smart Description',
+        subtitle: overlay.Description || smartDescriptions.value[overlay.Title].GptResponse
+      },
+      {
+        icon: 'help',
+        title: 'Resources',
+        actions: overlay.CallToAction?.Actions.map((action) => ({
+          url: action.ActionData.Url,
+          description: action.ActionData.Description
+        }))
+      }
+    ]
+  };
+}
+</script>

package/src/components/views/modals/__tests__/DataOverlayModal.spec.ts

@@ -0,0 +1,33 @@
+import DataOverlayModal from '@/components/views/modals/DataOverlayModal.vue';
+import { DataOverlayInfoFaker } from '@test/fakers/data-overlay-info.faker';
+import { mount } from '@vue/test-utils';
+import { VCard, VMenu } from 'vuetify/components';
+
+describe('DataOverlayInfo tests', () => {
+  it('should mount', () => {
+    const item = DataOverlayInfoFaker.random();
+    const props = { item, modal: true };
+    const wrapper = mount(DataOverlayModal, { props });
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should open and close menu', async () => {
+    const item = DataOverlayInfoFaker.random();
+    const props = { item, modal: true };
+    const wrapper = mount(DataOverlayModal, { props });
+    const menu = wrapper.findComponent(VMenu);
+    await menu.setValue(false);
+    await wrapper.setProps({ modal: false });
+    expect(wrapper.findComponent(VCard).isVisible()).toBeFalsy();
+  });
+
+  it('should open link', async () => {
+    const item = DataOverlayInfoFaker.random(1);
+    const props = { item, modal: true };
+    const wrapper = mount(DataOverlayModal, { props });
+    const card = wrapper.findComponent(VCard);
+    const anchor = card.find('a');
+    await anchor.trigger('click');
+    expect(anchor.attributes('href')).toBe(item.data[0].actions![0].url);
+  });
+});

package/src/components/views/modals/__tests__/DataOverlayModalManager.spec.ts

@@ -0,0 +1,93 @@
+import { GptService } from '@/services/gpt.service';
+import { DOMWrapper, flushPromises, mount } from '@vue/test-utils';
+import { useAnnotations } from '@/composables/useAnnotations';
+import { DataOverlayInteractionFaker } from '@test/fakers/data-overlay-interaction.faker';
+import { Interactiontype } from '@3cr/types-ts';
+import { useMarkups } from '@/composables/useMarkups';
+import { McadObjectInteractionFaker } from '@test/fakers/mcad-object-interaction.faker';
+import { useMcadObjects } from '@/composables/useMcadObjects';
+import { VCard } from 'vuetify/components';
+import { GptResponsePayload } from '@/types/gpt-response-payload';
+import DataOverlayModalManager from '@/components/views/modals/DataOverlayModalManager.vue';
+import DataOverlayModal from '@/components/views/modals/DataOverlayModal.vue';
+
+const gpt: GptResponsePayload = {
+  GptResponse: 'Example',
+  FollowupQuestions: []
+};
+
+describe('DataOverlayModalManager tests', () => {
+  beforeEach(() => {
+    vi.spyOn(GptService.prototype, 'GenerateAnnotations').mockResolvedValue({ data: gpt } as any);
+  });
+
+  it('should mount', () => {
+    const wrapper = mount(DataOverlayModalManager);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should display annotation on pointer up', async () => {
+    const event = DataOverlayInteractionFaker.annotation(Interactiontype.POINTER_UP);
+    const { annotationEvent } = useAnnotations();
+    vi.spyOn(annotationEvent, 'value', 'get').mockReturnValue(event);
+
+    const wrapper = mount(DataOverlayModalManager);
+    await flushPromises();
+    expect(wrapper.findComponent(DataOverlayModal).exists()).toBeTruthy();
+  });
+
+  it('should display markup on pointer up', async () => {
+    const event = DataOverlayInteractionFaker.polygon(Interactiontype.POINTER_UP);
+    const { markupEvent } = useMarkups();
+    vi.spyOn(markupEvent, 'value', 'get').mockReturnValue(event);
+
+    const wrapper = mount(DataOverlayModalManager);
+    await flushPromises();
+    expect(wrapper.findComponent(DataOverlayModal).exists()).toBeTruthy();
+  });
+
+  it('should display mcad on pointer up', async () => {
+    const event = McadObjectInteractionFaker.random(Interactiontype.POINTER_UP);
+    const { mcadObjectEvent } = useMcadObjects();
+    vi.spyOn(mcadObjectEvent, 'value', 'get').mockReturnValue(event);
+
+    const wrapper = mount(DataOverlayModalManager);
+    await flushPromises();
+    expect(wrapper.findComponent(DataOverlayModal).exists()).toBeTruthy();
+  });
+
+  it('should generate smart description if none provided', async () => {
+    const event = DataOverlayInteractionFaker.annotation(Interactiontype.POINTER_UP);
+    event.DataOverlay.Description = '';
+    const { annotationEvent } = useAnnotations();
+    vi.spyOn(annotationEvent, 'value', 'get').mockReturnValue(event);
+
+    const wrapper = mount(DataOverlayModalManager);
+    await flushPromises();
+    expect(wrapper.findComponent(VCard).text()).toContain('Smart Description');
+  });
+
+  describe('timed tests', () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    it('should dismiss modal on mousedown', async () => {
+      const event = DataOverlayInteractionFaker.annotation(Interactiontype.POINTER_UP);
+      const { annotationEvent } = useAnnotations();
+      vi.spyOn(annotationEvent, 'value', 'get').mockReturnValue(event);
+
+      const wrapper = mount(DataOverlayModalManager);
+      await flushPromises();
+
+      await new DOMWrapper(document).trigger('mousedown');
+      vi.advanceTimersByTime(500);
+      await flushPromises();
+      expect(wrapper.findComponent(DataOverlayModal).exists()).toBeFalsy();
+    });
+  });
+});

package/src/components/views/shared/MaskIcon.vue

@@ -0,0 +1,44 @@
+<template>
+  <div :style="maskStyles">
+    <div :style="backgroundStyles" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  data: string;
+  color: string;
+  size?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 12
+});
+
+const sizePx = computed(() => {
+  return `${props.size}px`;
+});
+
+const maskStyles = computed(() => {
+  const src = `data:image/png;base64, ${props.data}`;
+  const px = sizePx.value;
+  return {
+    'display': 'inline-block',
+    'mask-size': `${px} ${px}`,
+    'mask-image': `url('${src}')`,
+    'width': px,
+    'height': px,
+  };
+})
+
+const backgroundStyles = computed(() => {
+  const px = sizePx.value;
+  return {
+    'background-color': props.color,
+    'width': px,
+    'height': px,
+  };
+})
+</script>

package/src/components/views/shared/ObjectColor.vue

@@ -0,0 +1,31 @@
+<template>
+  <div :style="styles" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  color: string;
+  size?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 12
+});
+
+const sizePx = computed(() => {
+  return `${props.size}px`;
+});
+
+const styles = computed(() => {
+  const px = sizePx.value;
+  return {
+    'display': 'inline-block',
+    'background-color': props.color,
+    'border': '1px #333333 solid',
+    'width': px,
+    'height': px,
+  };
+});
+</script>

package/src/components/views/shared/ObjectLabel.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <slot name="prepend">
+      <v-icon
+        class="mr-2 material-icons-filled"
+        size="16"
+        :icon="icon"
+        :color="color"
+      />
+    </slot>
+    <span class="label text-truncate">{{ label }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  icon?: string;
+  color?: string;
+  label: string;
+}
+
+defineProps<Props>();
+</script>
+
+<style scoped lang="css">
+.label {
+  font-size: 12px;
+  vertical-align: text-top;
+}
+</style>

package/src/components/views/shared/Opacity.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-text-field
+    v-model:model-value="value"
+    density="compact"
+    hide-details
+    max="100"
+    max-width="64px"
+    min="0"
+    suffix="%"
+    type="number"
+    variant="outlined"
+    @input="onInputOpacity"
+  />
+</template>
+
+<script setup lang="ts">
+import { clamp } from '@/functions/clamp';
+import { computed, ref } from 'vue';
+
+interface Props {
+  modelValue?: number;
+}
+
+type Emits = {
+  'update:modelValue': [number];
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0
+});
+
+const emit = defineEmits<Emits>();
+
+const value_ = ref<number>(props.modelValue);
+
+const value = computed({
+  get(): number {
+    return value_.value;
+  },
+  set(val: number): void {
+    value_.value = clamp(val, 0, 100);
+    emit('update:modelValue', value_.value);
+  }
+});
+
+function onInputOpacity(event: InputEvent): void {
+  const input = event.target as HTMLInputElement;
+  const value = input.value ? parseInt(input.value) : 0;
+  input.value = clamp(value, parseInt(input.min), parseInt(input.max)).toString();
+}
+</script>
+
+<style scoped lang="css">
+:deep(.v-text-field__suffix) {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.8);
+  padding: 4px 8px 4px 2px;
+  min-height: 0;
+}
+
+:deep(.v-field__input) {
+  font-size: 12px;
+  padding: 4px 0 4px 8px;
+  min-height: 0;
+}
+</style>