@3cr/viewer-browser 0.0.200 → 0.0.220

package/src/components/views/AnnotationTreeView.vue

@@ -0,0 +1,234 @@
+<template>
+  <v-treeview
+    class="py-0 annotation-treeview"
+    :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">
+        <template #prepend>
+          <mask-icon class="mr-2" :data="item.icon!" :color="getColor(item)" />
+        </template>
+      </object-label>
+    </template>
+    <template #item="{ props }">
+      <v-row no-gutters class="px-6 py-2">
+        <v-col cols="4">
+          <b>{{ props.key }}</b>
+        </v-col>
+        <v-col>
+          <span v-html="props.value"></span>
+          <template v-for="action in props.actions">
+            <v-chip
+              v-if="action.isBtn"
+              size="small"
+              label
+              variant="tonal"
+              class="action text-wrap mb-2"
+              @click="selectAction(action)"
+            >
+              {{ action.description }}
+            </v-chip>
+            <a v-else :href="action.url">{{ action.description }}</a>
+            <br />
+          </template>
+        </v-col>
+      </v-row>
+    </template>
+  </v-treeview>
+  <AskAI
+    v-model:modal="m_askAi"
+    :title="title"
+    :question-key="questionKey"
+    :question-text="questionText"
+    @askFollowup="askFollowUpQuestion"
+  >
+  </AskAI>
+  <div class="px-4 py-2 text-caption" style="font-size: 9px !important; line-height: 12px !important">
+    * 3Dicom's Annotiva AI is powered by AI Large Language Models (LLMs) which generate general health information for
+    improved patient comprehension.
+    <br /><br />It is NOT for diagnostic usage.
+  </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref, watch } from 'vue';
+import { SlidersActions } from '@3cr/types-ts';
+import { initialScanState } from '@/models/scanState';
+import { GptService } from '@/services/gpt.service';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { rgbaNormalizedToCss } from '@/functions/rgbaToCss';
+import { AnnotationTreeViewItem } from '@/components/views/types/annotation-tree-view-item';
+import { AnnotationTreeViewItemChildAction } from '@/components/views/types/annotation-tree-view-item-child-action';
+import { AnnotationTreeViewItemChild } from '@/components/views/types/annotation-tree-view-item-child';
+import { DataOverlayAnnotation } from '@/types/data-overlay-annotation';
+import { DataOverlayData } from '@/types/data-overlay-data';
+import { GptResponsePayload } from '@/types/gpt-response-payload';
+import { GptQuestion } from '@/types/gpt-question';
+
+interface Props {
+  items: DataOverlayData<DataOverlayAnnotation>[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => []
+});
+
+const viewer3cr = useViewer3cr();
+const data = ref<AnnotationTreeViewItem[]>([]);
+const aiData = ref<Record<string, GptResponsePayload>>({});
+const m_askAi = ref<boolean>(false);
+const questionKey = ref<number>(0);
+const questionText = ref<string>('');
+const title = ref<string>('');
+
+function setTreeViewData(annotations: DataOverlayData<DataOverlayAnnotation>[]): void {
+  data.value = annotations.map((annotation) => mapToTreeViewItem(annotation));
+}
+
+watch(
+  () => props.items,
+  async (items) => {
+    await generateAiData(items);
+    setTreeViewData(items);
+  },
+  { immediate: true }
+);
+
+async function selectAction(action: AnnotationTreeViewItemChildAction): Promise<void> {
+  questionKey.value = Number(action.url);
+  questionText.value = action.description;
+  title.value = action.title;
+  m_askAi.value = true;
+}
+
+async function askFollowUpQuestion(question: GptQuestion): Promise<void> {
+  m_askAi.value = false;
+  await nextTick();
+  questionKey.value = question.ApiPreFilledRequestKey;
+  questionText.value = question.Question;
+  m_askAi.value = true;
+}
+
+async function toggleVisibility(annotation: AnnotationTreeViewItem): Promise<void> {
+  const value = { Id: annotation.id, Visibility: !annotation.isVisible };
+  await viewer3cr.toggle2dAnnotation(value);
+  await viewer3cr.toggle3dAnnotation(value);
+}
+
+function getColor(annotation: AnnotationTreeViewItem): string {
+  const { r, g, b, a } = annotation.colour;
+  return rgbaNormalizedToCss(r + 0.2, g + 0.2, b + 0.2, a - 0.2);
+}
+
+function mapToTreeViewItem(data: DataOverlayData<DataOverlayAnnotation>): AnnotationTreeViewItem {
+  return {
+    id: data.Data.Id,
+    title: data.Data.Title,
+    icon: data.Data.Icon2d,
+    isVisible: !!data.Data.Visibility2d && !!data.Data.Visibility3d,
+    colour: {
+      r: data.Data.Colour2d.R,
+      g: data.Data.Colour2d.G,
+      b: data.Data.Colour2d.B,
+      a: data.Data.Colour2d.A
+    },
+    position: {
+      x: data.Data.Position.X,
+      y: data.Data.Position.Y,
+      z: data.Data.Position.Z
+    },
+    children: mapToTreeViewItemChild(data)
+  };
+}
+
+function mapToTreeViewItemChild(data: DataOverlayData<DataOverlayAnnotation>): AnnotationTreeViewItemChild[] {
+  return [
+    {
+      props: {
+        key: data.Data.Description ? 'Description' : 'Smart Description',
+        value: data.Data.Description || aiData.value[data.Data.Title]?.GptResponse || '',
+        actions: []
+      }
+    },
+    {
+      props: {
+        key: 'Resources',
+        value: '',
+        actions:
+          data.Data.CallToAction?.Actions.map((action) => ({
+            title: '',
+            description: action.ActionData.Description,
+            url: action.ActionData.Url,
+            isBtn: false
+          })) ?? []
+      }
+    },
+    {
+      props: {
+        key: 'Annotiva AI',
+        value: '',
+        actions:
+          aiData.value[data.Data.Title]?.FollowupQuestions.map((question) => ({
+            title: data.Data.Title,
+            description: question.Question,
+            url: question.ApiPreFilledRequestKey.toString(),
+            isBtn: true
+          })) ?? []
+      }
+    }
+  ];
+}
+
+async function generateAiData(data: DataOverlayData<DataOverlayAnnotation>[]): Promise<void> {
+  await Promise.all(
+    data.map(async (d) => {
+      const key = d.Data.Title;
+      if (!(key in aiData.value)) {
+        aiData.value[key] = await GptService.Instantiate()
+          .GenerateAnnotations(key)
+          .then((data) => data.data)
+          .catch(() => ({ GptResponse: 'failed to execute', FollowupQuestions: [] }));
+      }
+    })
+  );
+}
+
+async function focusSlices(value: { id: unknown; value: boolean }): Promise<void> {
+  const item = data.value.find((annotation) => annotation.id === value.id);
+  if (value.value && item) {
+    const sagittal = Math.round(item.position.x / (initialScanState.value.XSpacing || 1));
+    const transverse = Math.round(item.position.y / (initialScanState.value.YSpacing || 1));
+    const coronal = Math.round(item.position.z / (initialScanState.value.ZSpacing || 1));
+
+    await viewer3cr.sliderHandler(SlidersActions.sl12, sagittal);
+    await viewer3cr.sliderHandler(SlidersActions.sl09, coronal);
+    await viewer3cr.sliderHandler(SlidersActions.sl15, transverse);
+  }
+}
+</script>
+
+<style lang="scss">
+.annotation-treeview {
+  font-size: 12px;
+
+  .v-list-group ~ .v-list-group {
+    border-top: thin solid rgb(100%, 100%, 100%, var(--v-border-opacity));
+  }
+
+  .v-chip.action {
+    text-wrap: wrap;
+    word-wrap: break-word;
+    min-height: 42px;
+    line-height: 14px !important;
+    height: unset;
+    padding: 4px 8px;
+  }
+}
+</style>

package/src/components/{modal/ViewerDisplaySettings.vue → views/DisplaySettings.vue}

@@ -3,20 +3,16 @@
     <v-row no-gutters>
       <v-col>
         <DoubleSliderSelector
-          id="skin-to-bone"
-          v-model:value="windowSlider"
           v-bind="huMinMax"
+          v-model:model-value="windowSlider"
+          id="skin-to-bone"
           label="Skin to Bone"
         />
       </v-col>
     </v-row>
     <v-row no-gutters>
       <v-col>
-        <DoubleSliderSelector
-          v-model:value="thresholdSlider"
-          v-bind="huMinMax"
-          label="Fine Adjustment"
-        />
+        <DoubleSliderSelector v-bind="huMinMax" v-model:model-value="thresholdSlider" label="Fine Adjustment" />
       </v-col>
     </v-row>
     <v-row no-gutters>
@@ -37,11 +33,7 @@
           @update:model-value="onGreyscalePresetChange"
         >
           <template #item="{ props, item }">
-            <v-list-item
-              v-bind="props"
-              :title="item.raw.Name"
-              lines="three"
-            >
+            <v-list-item v-bind="props" :title="item.raw.Name" lines="three">
               <template v-slot:subtitle>
                 Skin Density:
                 <span class="text-mono">{{ item.raw.Lower }}</span>
@@ -86,9 +78,9 @@ import {
   initialScanState,
   thresholdSlider,
   windowSlider
-} from "@/dataLayer/scanState";
-import { ColourPresetData, GreyscalePresetData, PresetsActions } from "@3cr/types-ts";
-import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+} from '@/models/scanState';
+import { ColourPresetData, GreyscalePresetData, PresetsActions } from '@3cr/types-ts';
+import { useViewer3cr } from '@/composables/useViewer3cr';
 
 const viewer3cr = useViewer3cr();
 

package/src/components/views/MarkupTreeView.vue

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

@@ -0,0 +1,119 @@
+<template>
+  <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 pr-2">
+        <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)"
+          @update:model-value="onOpacityUpdate(item, $event)"
+          @mousedown.stop
+          @click.stop
+        />
+      </div>
+    </template>
+    <template #append="{ item }">
+      <v-menu>
+        <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>
+</template>
+
+<script setup lang="ts">
+import { 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[]>([]);
+
+watch(
+  () => props.items,
+  (items) => {
+    setTreeViewData(items);
+  },
+  { immediate: true }
+);
+
+function setTreeViewData(mcadObjects: DataOverlayMcad[]): void {
+  data.value = mcadObjects.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, a } = item.colour;
+  return rgbaNormalizedToCss(r + 0.2, g + 0.2, b + 0.2, a - 0.2);
+}
+
+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

@@ -0,0 +1,62 @@
+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();
+  });
+});