@3cr/viewer-browser 0.0.200 → 0.0.246

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

@@ -0,0 +1,71 @@
+<template>
+  <v-card density="compact">
+    <v-card-title>{{ dataOverlay.Title }}</v-card-title>
+    <v-list density="compact" :lines="false">
+      <v-list-item v-if="hasDescription" prepend-icon="description">
+        <v-list-item-title>Description</v-list-item-title>
+        <v-list-item-subtitle>{{ dataOverlay.Description }}</v-list-item-subtitle>
+      </v-list-item>
+      <v-list-item v-else prepend-icon="psychology">
+        <v-list-item-title>Smart Description</v-list-item-title>
+        <v-list-item-subtitle v-if="hasSmartDescription">
+          {{ smartDescriptions[dataOverlay.Title].GptResponse }}
+        </v-list-item-subtitle>
+        <v-list-item-subtitle v-else>
+          <v-progress-linear class="mt-2" indeterminate />
+        </v-list-item-subtitle>
+      </v-list-item>
+      <v-list-item prepend-icon="info">
+        <v-list-item-title>Resources</v-list-item-title>
+        <v-list-item-subtitle v-if="hasActions">
+          <template v-for="action in dataOverlay.CallToAction!.Actions">
+            <a @click.stop class="text-small" :href="action.ActionData.Url" target="_blank">
+              {{ action.ActionData.Description }}
+            </a>
+            <br />
+          </template>
+        </v-list-item-subtitle>
+        <v-list-item-subtitle v-else class="font-italic">No resources provided</v-list-item-subtitle>
+      </v-list-item>
+    </v-list>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { DataOverlay } from '@/types/data-overlay';
+import { computed, ref, watch } from 'vue';
+import { GptResponsePayload } from '@/types/gpt-response-payload';
+import { GptService } from '@/services/gpt.service';
+
+interface Props {
+  dataOverlay: DataOverlay;
+}
+
+const props = defineProps<Props>();
+
+const smartDescriptions = ref<Record<string, GptResponsePayload>>({});
+
+const hasDescription = computed(() => !!props.dataOverlay.Description);
+
+const hasSmartDescription = computed(() => props.dataOverlay.Title in smartDescriptions.value);
+
+const hasActions = computed(() => {
+  return props.dataOverlay.CallToAction?.Actions && props.dataOverlay.CallToAction.Actions.length > 0;
+});
+
+watch(
+  () => props.dataOverlay,
+  async (value: DataOverlay) => {
+    await generateSmartDescriptions(value);
+  },
+  { immediate: true }
+);
+
+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;
+  }
+}
+</script>

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

@@ -0,0 +1,60 @@
+<template>
+  <v-card density="compact">
+    <v-card-title>{{ markup.Title }}</v-card-title>
+    <v-list density="compact" :lines="false">
+      <v-list-item prepend-icon="analytics">
+        <v-list-item-title>Data</v-list-item-title>
+        <v-list-item-subtitle>
+          <template v-if="'SegmentLengths' in markup">
+            <v-row no-gutters v-for="(segment, idx) in markup.SegmentLengths">
+              <v-col style="width: 200px">Segment {{ idx + 1 }}</v-col>
+              <v-col class="text-mono">{{ segment }}{{ markup.Units }}</v-col>
+            </v-row>
+            <v-row no-gutters>
+              <v-col style="width: 200px">Total Length</v-col>
+              <v-col class="text-mono">{{ markup.TotalLength }}{{ markup.Units }}</v-col>
+            </v-row>
+          </template>
+          <template v-if="'Area' in markup">
+            <v-row no-gutters>
+              <v-col style="width: 200px">Area</v-col>
+              <v-col class="text-mono">{{ markup.Area }}</v-col>
+            </v-row>
+            <v-row no-gutters>
+              <v-col style="width: 200px">Perimeter</v-col>
+              <v-col class="text-mono">{{ markup.Perimeter }}</v-col>
+            </v-row>
+            <v-row no-gutters>
+              <v-col style="width: 200px">Average HU</v-col>
+              <v-col class="text-mono">{{ markup.AverageHU }}</v-col>
+            </v-row>
+            <v-row no-gutters>
+              <v-col style="width: 200px">Lowest HU</v-col>
+              <v-col class="text-mono">{{ markup.LowestHU }}</v-col>
+            </v-row>
+            <v-row no-gutters>
+              <v-col style="width: 200px">Highest HU</v-col>
+              <v-col class="text-mono">{{ markup.HighestHU }}</v-col>
+            </v-row>
+          </template>
+          <template v-if="'SegmentAngles' in markup">
+            <v-row no-gutters v-for="(angle, idx) in markup.SegmentAngles">
+              <v-col style="width: 200px">Angle {{ idx + 1 }}</v-col>
+              <v-col class="text-mono">{{ angle.Acute }}{{ markup.Units }}</v-col>
+            </v-row>
+          </template>
+        </v-list-item-subtitle>
+      </v-list-item>
+    </v-list>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { DataOverlayMarkup } from '@/types/data-overlay-markup';
+
+interface Props {
+  markup: DataOverlayMarkup;
+}
+
+defineProps<Props>();
+</script>

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

@@ -0,0 +1,88 @@
+<template>
+  <v-menu v-model="menu" max-width="500" persistent :no-click-animation="true" :target="menuTarget">
+    <template v-if="selected">
+      <data-overlay-markup-modal v-if="isMarkup" :markup="selected as DataOverlayMarkup" />
+      <data-overlay-general-modal v-else :data-overlay="selected" />
+    </template>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useEventListener } from '@/composables/useEventListener';
+import { DataOverlay } from '@/types/data-overlay';
+import { DataOverlayMarkup } from '@/types/data-overlay-markup';
+import { isDataOverlayLength } from '@/functions/guards/isDataOverlayLength';
+import { isDataOverlayPolygon } from '@/functions/guards/isDataOverlayPolygon';
+import { isDataOverlayAngle } from '@/functions/guards/isDataOverlayAngle';
+import { useDataOverlayTool } from '@/tools/data-overlay.tool';
+
+useEventListener(document, 'mousemove', onMouseMove);
+useEventListener(document, 'mousedown', onMouseDown);
+
+const dataOverlayTool = useDataOverlayTool();
+const menu = ref<boolean>(false);
+const currentTarget = ref<[number, number]>([0, 0]);
+const menuTarget = ref<[number, number]>([0, 0]);
+
+const selected = computed(() => dataOverlayTool.selected.value);
+
+const isMarkup = computed(() => {
+  const val = selected.value;
+  return val && (isDataOverlayLength(val) || isDataOverlayPolygon(val) || isDataOverlayAngle(val));
+});
+
+onMounted(() => {
+  dataOverlayTool.activate();
+});
+
+onUnmounted(() => {
+  dataOverlayTool.deactivate();
+});
+
+watch(
+  selected,
+  async (value: DataOverlay | null) => {
+    if (value !== null) {
+      menuTarget.value = currentTarget.value;
+      menu.value = true;
+    }
+  },
+  { immediate: true }
+);
+
+function onMouseMove(event: MouseEvent): void {
+  currentTarget.value = [event.x, event.y];
+}
+
+function onMouseDown(): void {
+  menu.value = false;
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.v-card) {
+  background: rgba(var(--v-theme-surface), 0.5) !important;
+  backdrop-filter: blur(24px);
+}
+
+:deep(.v-card-title) {
+  background: none;
+  font-size: 14px;
+  padding-bottom: 0;
+}
+
+:deep(.v-list) {
+  background: none;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+:deep(.v-list-item-title) {
+  font-size: 13px;
+}
+
+:deep(.v-list-item-subtitle) {
+  font-size: 12px;
+}
+</style>

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,65 @@
+<template>
+  <v-text-field
+    v-model:model-value="value"
+    density="compact"
+    hide-details
+    max="100"
+    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>

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

@@ -0,0 +1,25 @@
+<template>
+  <v-btn size="x-small" :icon="icon" variant="text" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  isVisible: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isVisible: true
+});
+
+const icon = computed(() => {
+  return props.isVisible ? 'visibility' : 'visibility_off';
+});
+</script>
+
+<style scoped lang="css">
+:deep(.v-icon) {
+  font-size: 20px;
+}
+</style>

package/src/components/views/shared/__tests__/MaskIcon.spec.ts

@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils';
+import MaskIcon from '@/components/views/shared/MaskIcon.vue';
+
+describe('MaskIcon tests', () => {
+  it('should mount', () => {
+    const props = { data: '0', color: 'white' };
+    const wrapper = mount(MaskIcon, { props });
+    expect(wrapper).toBeTruthy();
+  });
+});

package/src/components/views/shared/__tests__/ObjectColor.spec.ts

@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils';
+import ObjectColor from '@/components/views/shared/ObjectColor.vue';
+
+describe('ObjectColor tests', () => {
+  it('should mount', () => {
+    const props = { color: 'red' };
+    const wrapper = mount(ObjectColor, { props });
+    expect(wrapper).toBeTruthy();
+  });
+});

package/src/components/views/shared/__tests__/ObjectLabel.spec.ts

@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils';
+import ObjectLabel from '@/components/views/shared/ObjectLabel.vue';
+
+describe('ObjectLabel tests', () => {
+  it('should mount', () => {
+    const props = { label: 'test' };
+    const wrapper = mount(ObjectLabel, { props });
+    expect(wrapper).toBeTruthy();
+  });
+});

package/src/components/views/shared/__tests__/Opacity.spec.ts

@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils';
+import Opacity from '@/components/views/shared/Opacity.vue';
+import { VTextField } from 'vuetify/components';
+
+describe('Opacity tests', () => {
+  it('should mount', () => {
+    const props = { modelValue: 50 };
+    const wrapper = mount(Opacity, { props });
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should set value', async () => {
+    const wrapper = mount(Opacity);
+    await wrapper.findComponent(VTextField).setValue('100');
+    expect(wrapper.emitted('update:modelValue')).toEqual([[100]]);
+  });
+
+  it('should set native value', async () => {
+    const wrapper = mount(Opacity);
+    await wrapper.find('input').setValue('');
+    await wrapper.find('input').setValue('100');
+    expect(wrapper.emitted('update:modelValue')).toEqual([[0], [100]]);
+  });
+});

package/src/components/views/shared/__tests__/VisibilityBtn.spec.ts

@@ -0,0 +1,11 @@
+import { mount } from '@vue/test-utils';
+import VisibilityBtn from '@/components/views/shared/VisibilityBtn.vue';
+
+describe('VisibilityBtn tests', () => {
+  it('should mount', async () => {
+    const props = { isVisible: true };
+    const wrapper = mount(VisibilityBtn, { props });
+    await wrapper.setProps({ isVisible: false });
+    expect(wrapper).toBeTruthy();
+  });
+});

package/src/components/views/types/annotation-tree-view-item-child-action.ts

@@ -0,0 +1,6 @@
+export interface AnnotationTreeViewItemChildAction {
+  title: string;
+  description: string;
+  url: string;
+  isBtn: boolean;
+}

package/src/components/views/types/annotation-tree-view-item-child.ts

@@ -0,0 +1,9 @@
+import { AnnotationTreeViewItemChildAction } from '@/components/views/types/annotation-tree-view-item-child-action';
+
+export interface AnnotationTreeViewItemChild {
+  props: {
+    key: string;
+    value: string;
+    actions: AnnotationTreeViewItemChildAction[];
+  };
+}

package/src/components/views/types/annotation-tree-view-item.ts

@@ -0,0 +1,13 @@
+import { Vector3 } from '@/types/vector3';
+import { Colour } from '@/types/colour';
+import { AnnotationTreeViewItemChild } from '@/components/views/types/annotation-tree-view-item-child';
+
+export interface AnnotationTreeViewItem {
+  id: string;
+  title: string;
+  isVisible: boolean;
+  icon: string;
+  position: Vector3;
+  colour: Colour;
+  children: AnnotationTreeViewItemChild[];
+}

package/src/components/views/types/markup-tree-view-item-child.ts

@@ -0,0 +1,6 @@
+export interface MarkupTreeViewItemChild {
+  props: {
+    key: string;
+    value: string;
+  };
+}

package/src/components/views/types/markup-tree-view-item.ts

@@ -0,0 +1,14 @@
+import { Vector3 } from '@/types/vector3';
+import { MarkupTreeViewItemChild } from '@/components/views/types/markup-tree-view-item-child';
+
+export interface MarkupTreeViewItem {
+  id: string;
+  title: string;
+  description: string;
+  isVisible: boolean;
+  tooltip: string;
+  colour: string;
+  icon: string;
+  position: Vector3;
+  children: MarkupTreeViewItemChild[];
+}

package/src/components/views/types/mcad-object-tree-view-item.ts

@@ -0,0 +1,13 @@
+export interface McadObjectTreeViewItem {
+  id: string;
+  key: string;
+  title: string;
+  description: string;
+  isVisible: boolean;
+  colour: {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+  };
+}

package/src/composables/__tests__/useAnnotations.spec.ts

@@ -0,0 +1,35 @@
+import { useAnnotations } from '@/composables/useAnnotations';
+import { dataOverlayEvent, dataOverlayState } from '@/models/scanState';
+import { DataOverlayDataFaker } from '@test/fakers/data-overlay-data.faker';
+import { Interactiontype } from '@3cr/types-ts';
+import { inflateInitialDataOverlayState } from '@/functions/modelHelper';
+
+describe('useAnnotations tests', () => {
+  it('should have no annotations', () => {
+    const { annotations, hasAnnotations } = useAnnotations();
+    expect(annotations.value.length).toBe(0);
+    expect(hasAnnotations.value).toBeFalsy();
+  });
+
+  it('should have annotations', () => {
+    const dataOverlay = inflateInitialDataOverlayState();
+    dataOverlay.DataOverlay.DataOverlay.push(DataOverlayDataFaker.annotationRaw());
+    dataOverlayState.value = dataOverlay;
+
+    const { annotations } = useAnnotations();
+    expect(annotations.value.length).toBe(1);
+    expect(typeof annotations.value[0].Data).not.toBe('string');
+  });
+
+  it('should have null event', () => {
+    const { annotationEvent } = useAnnotations();
+    expect(annotationEvent.value).toBeNull();
+  });
+
+  it('should have non-null event', () => {
+    dataOverlayEvent.value = DataOverlayDataFaker.annotationEventRaw(Interactiontype.HOVER_START);
+    const { annotationEvent } = useAnnotations();
+    expect(annotationEvent.value).not.toBeNull();
+    expect(typeof annotationEvent.value?.DataOverlay).not.toBe('string');
+  });
+});

package/src/composables/__tests__/useEventListener.spec.ts

@@ -0,0 +1,32 @@
+import { defineComponent, ref, PropType, nextTick } from 'vue';
+import { useEventListener } from '@/composables/useEventListener';
+import { mount } from '@vue/test-utils';
+
+describe('useEventListener tests', () => {
+  it('should attach event listener', async () => {
+    const component = defineComponent({
+      template: '<div></div>',
+      props: {
+        callback: {
+          type: Function as PropType<(e: Event) => void>,
+          required: true
+        }
+      },
+      setup(props, context) {
+        const target = ref<EventTarget>(document);
+        useEventListener(target, 'click', props.callback);
+        const swap = () => (target.value = document.body);
+        context.expose({ swap });
+      }
+    });
+
+    const props = { callback: vi.fn() };
+    const wrapper = mount(component, { props });
+    document.dispatchEvent(new MouseEvent('click'));
+    (wrapper.vm as any).swap();
+    await nextTick();
+    document.body.dispatchEvent(new MouseEvent('click'));
+    expect(props.callback).toHaveBeenCalledTimes(2);
+    wrapper.unmount();
+  });
+});