@3cr/viewer-browser 0.0.248 → 0.0.293

package/src/components/views/MarkupTreeView.vue

@@ -1,201 +0,0 @@
-<template>
-  <v-treeview
-    class="py-0"
-    :items="data"
-    item-value="id"
-    density="compact"
-    open-strategy="single"
-    @click:open="focusSlices"
-  >
-    <template #prepend="{ item }">
-      <visibility-btn :is-visible="item.isVisible" @click.stop="toggleVisibility(item)" />
-    </template>
-    <template #title="{ item }">
-      <object-label :label="item.title" :icon="item.icon" :color="item.colour" />
-    </template>
-    <template #item="{ props }">
-      <v-list-item class="info" density="compact">
-        <v-row no-gutters>
-          <v-col class="key">
-            <b>{{ props.key }}</b>
-          </v-col>
-          <v-col class="value">
-            <span class="text-mono" v-html="props.value"></span>
-          </v-col>
-        </v-row>
-      </v-list-item>
-    </template>
-  </v-treeview>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from 'vue';
-import { DataOverlayType, SlidersActions } from '@3cr/types-ts';
-import { useViewer3cr } from '@/composables/useViewer3cr';
-import { initialScanState } from '@/models/scanState';
-import { MarkupTreeViewItem } from '@/components/views/types/markup-tree-view-item';
-import { DataOverlayLength } from '@/types/data-overlay-length';
-import { DataOverlayPolygon } from '@/types/data-overlay-polygon';
-import { DataOverlayAngle } from '@/types/data-overlay-angle';
-import { MarkupTreeViewItemChild } from '@/components/views/types/markup-tree-view-item-child';
-import { DataOverlayData } from '@/types/data-overlay-data';
-import { DataOverlayMarkup } from '@/types/data-overlay-markup';
-
-interface Props {
-  items: DataOverlayData<DataOverlayMarkup>[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  items: () => []
-});
-
-const viewer3cr = useViewer3cr();
-const data = ref<MarkupTreeViewItem[]>([]);
-
-watch(
-  () => props.items,
-  (items) => {
-    setTreeViewData(items);
-  },
-  { immediate: true }
-);
-
-function setTreeViewData(markups: DataOverlayData<DataOverlayMarkup>[]): void {
-  data.value = markups
-    .sort((a, b) => a.Data.Title.localeCompare(b.Data.Title))
-    .map((markup) => mapToTreeViewItem(markup));
-}
-
-function getMarkupColour(data: DataOverlayData<DataOverlayMarkup>): string {
-  switch (data.DataType) {
-    case DataOverlayType.Length:
-      return 'green';
-    case DataOverlayType.Polygon:
-      return 'red';
-    case DataOverlayType.Angle:
-      return 'blue';
-    default:
-      return 'white';
-  }
-}
-
-function getMarkupIcon(data: DataOverlayData<DataOverlayMarkup>): string {
-  switch (data.DataType) {
-    case DataOverlayType.Length:
-      return 'straighten';
-    case DataOverlayType.Polygon:
-      return 'pentagon';
-    case DataOverlayType.Angle:
-      return 'circle';
-    default:
-      return 'question_mark';
-  }
-}
-
-function getMarkupTooltip(data: DataOverlayData<DataOverlayMarkup>): string {
-  switch (data.DataType) {
-    case DataOverlayType.Length:
-      return 'Length';
-    case DataOverlayType.Polygon:
-      return 'Polygon';
-    case DataOverlayType.Angle:
-      return 'Angle';
-    default:
-      return '';
-  }
-}
-
-function getMarkupInfo(data: DataOverlayData<DataOverlayMarkup>): MarkupTreeViewItemChild[] {
-  switch (data.DataType) {
-    case DataOverlayType.Length:
-      return getLengthInfo(data.Data as DataOverlayLength);
-    case DataOverlayType.Polygon:
-      return getPolygonInfo(data.Data as DataOverlayPolygon);
-    case DataOverlayType.Angle:
-      return getAngleInfo(data.Data as DataOverlayAngle);
-    default:
-      return [];
-  }
-}
-
-function getLengthInfo(markup: DataOverlayLength): MarkupTreeViewItemChild[] {
-  return [
-    ...markup.SegmentLengths.map((seg, idx) => ({
-      props: { key: `Segment ${idx + 1}`, value: `${seg}${markup.Units}` }
-    })),
-    { props: { key: 'Total Length', value: `${markup.TotalLength}${markup.Units}` } }
-  ];
-}
-
-function getPolygonInfo(markup: DataOverlayPolygon): MarkupTreeViewItemChild[] {
-  return [
-    { props: { key: 'Area', value: `${markup.Area}` } },
-    { props: { key: 'Perimeter', value: `${markup.Perimeter}` } },
-    { props: { key: 'Average HU', value: `${markup.AverageHU}` } },
-    { props: { key: 'Lowest HU', value: `${markup.LowestHU}` } },
-    { props: { key: 'Highest HU', value: `${markup.HighestHU}` } }
-  ];
-}
-
-function getAngleInfo(markup: DataOverlayAngle): MarkupTreeViewItemChild[] {
-  return markup.SegmentAngles.map((seg, idx) => {
-    return { props: { key: `Segment ${idx + 1}`, value: `${seg.Acute}${markup.Units}` } };
-  });
-}
-
-async function toggleVisibility(item: MarkupTreeViewItem): Promise<void> {
-  await viewer3cr.setMarkupVisibility(item.id, !item.isVisible);
-}
-
-function mapToTreeViewItem(data: DataOverlayData<DataOverlayMarkup>): MarkupTreeViewItem {
-  return {
-    id: data.Data.Id,
-    title: data.Data.Title,
-    description: data.Data.Description,
-    isVisible: !!data.Data.Visibility2d && !!data.Data.Visibility3d,
-    tooltip: getMarkupTooltip(data),
-    colour: getMarkupColour(data),
-    icon: getMarkupIcon(data),
-    position: {
-      x: data.Data.Points[0].X,
-      y: data.Data.Points[0].Y,
-      z: data.Data.Points[0].Z
-    },
-    children: getMarkupInfo(data)
-  };
-}
-
-async function focusSlices(value: { id: unknown; value: boolean }): Promise<void> {
-  const item = data.value.find((markup) => markup.id === value.id);
-  if (value.value && item) {
-    const { x, y, z } = item.position;
-    const { XSpacing, YSpacing, ZSpacing } = initialScanState.value;
-    await viewer3cr.sliderHandler(SlidersActions.sl09, z / (ZSpacing || 1));
-    await viewer3cr.sliderHandler(SlidersActions.sl12, x / (XSpacing || 1));
-    await viewer3cr.sliderHandler(SlidersActions.sl15, y / (YSpacing || 1));
-  }
-}
-</script>
-
-<style scoped>
-.info {
-  min-height: 20px;
-}
-
-.key,
-.value {
-  font-size: 12px;
-}
-
-.key {
-  text-align: left;
-}
-
-.value {
-  text-align: right;
-}
-
-:deep(.v-list-group ~ .v-list-group) {
-  border-top: thin solid rgb(100%, 100%, 100%, var(--v-border-opacity));
-}
-</style>

package/src/components/views/McadObjectTreeView.vue

@@ -1,129 +0,0 @@
-<template>
-  <div>
-    <mcad-global-actions :items="items" />
-    <v-treeview class="py-0" :items="data" item-value="id" density="compact" open-strategy="single">
-      <template #prepend="{ item }">
-        <visibility-btn :is-visible="item.isVisible" @click.stop="toggleVisibility(item)" />
-      </template>
-      <template #title="{ item }">
-        <div class="d-flex align-center">
-          <object-label class="mr-1" :label="item.title">
-            <template #prepend>
-              <object-color class="ml-1 mr-2" :color="getColor(item)" />
-            </template>
-          </object-label>
-          <v-spacer />
-          <opacity
-            :model-value="getOpacity(item)"
-            max-width="72px"
-            @update:model-value="onOpacityUpdate(item, $event)"
-            @mousedown.stop
-            @click.stop
-          />
-        </div>
-      </template>
-      <template #append="{ item }">
-        <v-menu v-if="showMenu">
-          <template #activator="{ props }">
-            <v-btn v-bind="props" data-testid="menu" size="32" variant="text" icon="more_vert" />
-          </template>
-          <v-list>
-            <v-list-item data-testid="download" prepend-icon="download" @click="downloadMcad(item.key)">
-              <v-list-item-title>Download</v-list-item-title>
-            </v-list-item>
-          </v-list>
-        </v-menu>
-      </template>
-    </v-treeview>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import { useViewer3cr } from '@/composables/useViewer3cr';
-import { clamp } from '@/functions/clamp';
-import { rgbaNormalizedToCss } from '@/functions/rgbaToCss';
-import { useViewerOptions } from '@/composables/useViewerOptions';
-import { McadObjectTreeViewItem } from '@/components/views/types/mcad-object-tree-view-item';
-import { DataOverlayMcad } from '@/types/data-overlay-mcad';
-
-interface Props {
-  items: DataOverlayMcad[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  items: () => []
-});
-
-const viewer3cr = useViewer3cr();
-const options = useViewerOptions();
-const data = ref<McadObjectTreeViewItem[]>([]);
-
-const showMenu = computed(() => {
-  return !!options.value.OnDownloadMcad;
-});
-
-watch(
-  () => props.items,
-  (items) => {
-    setTreeViewData(items);
-  },
-  { immediate: true }
-);
-
-function setTreeViewData(mcadObjects: DataOverlayMcad[]): void {
-  data.value = mcadObjects
-    .sort((a, b) => a.Title.localeCompare(b.Title))
-    .map((mcadObject) => mapToTreeViewItem(mcadObject));
-}
-
-async function downloadMcad(id: string): Promise<void> {
-  if (options.value.OnDownloadMcad) {
-    await options.value.OnDownloadMcad(id);
-  }
-}
-
-function getColor(item: McadObjectTreeViewItem): string {
-  const { r, g, b } = item.colour;
-  return rgbaNormalizedToCss(r, g, b, 1);
-}
-
-function getOpacity(item: McadObjectTreeViewItem): number {
-  return Math.round(item.colour.a * 100);
-}
-
-function mapToTreeViewItem(data: DataOverlayMcad): McadObjectTreeViewItem {
-  return {
-    id: data.Id,
-    key: data.Key,
-    title: data.Title,
-    description: data.Description,
-    isVisible: data.Visibility,
-    colour: {
-      r: data.Colour.R,
-      g: data.Colour.G,
-      b: data.Colour.B,
-      a: data.Colour.A
-    }
-  };
-}
-
-async function onOpacityUpdate(item: McadObjectTreeViewItem, value: number): Promise<void> {
-  if (value) {
-    const a = clamp(value, 0, 100) / 100;
-    const { r, g, b } = item.colour;
-    await viewer3cr.setMcadObjectColour({ Id: item.id, Colour: { Version: '1.2.0', R: r, G: g, B: b, A: a } });
-  }
-}
-
-async function toggleVisibility(item: McadObjectTreeViewItem): Promise<void> {
-  const visibility = !item.isVisible;
-  await viewer3cr.setMcadObjectVisibility({ Id: item.id, Visibility: visibility });
-}
-</script>
-
-<style scoped>
-:deep(.v-list-group ~ .v-list-group) {
-  border-top: thin solid rgb(100%, 100%, 100%, var(--v-border-opacity));
-}
-</style>

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

@@ -1,62 +0,0 @@
-import { flushPromises, mount } from '@vue/test-utils';
-import { faker } from '@faker-js/faker';
-import { DataOverlayDataFaker } from '@test/fakers/data-overlay-data.faker';
-import AnnotationTreeView from '@/components/views/AnnotationTreeView.vue';
-import { GptService } from '@/services/gpt.service';
-import { GptResponseFaker } from '@test/fakers/gpt-response.faker';
-import VisibilityBtn from '@/components/views/shared/VisibilityBtn.vue';
-import { useViewer3cr } from '@/composables/useViewer3cr';
-import ObjectLabel from '@/components/views/shared/ObjectLabel.vue';
-import { VCard, VChip } from 'vuetify/components';
-import AskAI from '@/components/modal/AskAI.vue';
-
-const gpt = GptResponseFaker.random();
-
-describe('AnnotationTreeView tests', () => {
-  vi.spyOn(GptService.prototype, 'GenerateAnnotations').mockResolvedValue({ data: gpt } as any);
-
-  it('should mount', async () => {
-    const items = faker.helpers.multiple(DataOverlayDataFaker.annotation, { count: 3 });
-    const props = { items };
-    const wrapper = mount(AnnotationTreeView, { props });
-    await flushPromises();
-    expect(wrapper).toBeTruthy();
-  });
-
-  it('should toggle visibility', async () => {
-    const viewer3cr = useViewer3cr();
-    const toggle2d = vi.spyOn(viewer3cr, 'toggle2dAnnotation').mockImplementation(vi.fn());
-    const toggle3d = vi.spyOn(viewer3cr, 'toggle3dAnnotation').mockImplementation(vi.fn());
-
-    const items = faker.helpers.multiple(DataOverlayDataFaker.annotation, { count: 3 });
-    const props = { items };
-    const wrapper = mount(AnnotationTreeView, { props });
-    await flushPromises();
-    await wrapper.findComponent(VisibilityBtn).trigger('click');
-
-    expect(toggle2d).toHaveBeenCalled();
-    expect(toggle3d).toHaveBeenCalled();
-  });
-
-  it('should focus slices', async () => {
-    const viewer3cr = useViewer3cr();
-    const sliderHandler = vi.spyOn(viewer3cr, 'sliderHandler').mockImplementation(vi.fn());
-
-    const items = faker.helpers.multiple(DataOverlayDataFaker.annotation, { count: 3 });
-    const props = { items };
-    const wrapper = mount(AnnotationTreeView, { props });
-    await flushPromises();
-    await wrapper.findComponent(ObjectLabel).trigger('click');
-
-    expect(sliderHandler).toHaveBeenCalledTimes(3);
-  });
-
-  it('should select AI action', async () => {
-    const items = faker.helpers.multiple(DataOverlayDataFaker.annotation, { count: 3 });
-    const props = { items };
-    const wrapper = mount(AnnotationTreeView, { props });
-    await flushPromises();
-    await wrapper.findComponent(VChip).trigger('click');
-    expect(wrapper.findComponent(AskAI).findComponent(VCard).exists()).toBeTruthy();
-  });
-});

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

@@ -1,41 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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/DataOverlayGeneralModal.vue

@@ -1,71 +0,0 @@
-<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

@@ -1,60 +0,0 @@
-<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>