@3cr/viewer-browser 0.0.200 → 0.0.246

package/src/components/shared/UpdateSnackbar.vue

@@ -0,0 +1,72 @@
+<template>
+  <v-snackbar
+    v-model="updateFound"
+    :timeout="-1"
+    color="transparent"
+    location="bottom end"
+    rounded="lg"
+    class="bg-transparent"
+    min-width="240"
+    elevation="0"
+    variant="elevated"
+  >
+    <v-alert v-model="updateFound" :color="`#303474`" prominent rounded="lg" icon="browser_updated">
+      <span class="text-subtitle-2">
+        We have detected an update for you! <br />Please click update as soon as possible.
+      </span>
+      <template #append>
+        <v-btn v-if="!updateInstalled" :loading="true" disabled>Installing</v-btn>
+        <v-btn
+          v-if="updateInstalled"
+          data-testid="update"
+          color="#2596be"
+          variant="flat"
+          size="large"
+          :loading="updateLoading"
+          @click="completeRegistration"
+          >Update</v-btn
+        >
+      </template>
+    </v-alert>
+  </v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { ServiceWorkerService } from '@/services/service-worker.service';
+
+let registration: ServiceWorkerRegistration | undefined = undefined;
+
+const updateFound = ref<boolean>(false);
+const updateInstalled = ref<boolean>(false);
+const updateLoading = ref<boolean>(false);
+
+onMounted(async () => {
+  registration = await ServiceWorkerService.Instantiate().getRegistration();
+  if (registration) {
+    setupCheck(registration);
+  }
+});
+
+function setupCheck(registration: ServiceWorkerRegistration) {
+  registration.addEventListener('updatefound', () => {
+    updateFound.value = true;
+    if (registration.installing) {
+      registration.installing.addEventListener('statechange', () => {
+        if (registration.waiting) {
+          updateInstalled.value = true;
+          console.log('[app]Service Worker update available');
+        }
+      });
+    }
+  });
+  setInterval(() => {
+    registration.update();
+  }, 1000);
+}
+
+function completeRegistration() {
+  updateLoading.value = true;
+  registration?.waiting?.postMessage('SKIP_WAITING');
+}
+</script>

package/src/components/{selectors → shared}/ValueSelector.vue

@@ -9,7 +9,7 @@
       <v-col cols="4">
         <v-text-field
           :model-value="sliderValue"
-          @update:modelValue="sliderValue = toNumber($event)"
+          @update:modelValue="sliderValue = parseInt($event)"
           class="mt-0 pt-0"
           hide-details
           variant="outlined"
@@ -23,9 +23,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import { toNumber } from "@/helpers/utils";
-import { clamp } from "@/dataLayer/clamp";
+import { computed } from 'vue';
+import { clamp } from '@/functions/clamp';
 
 export interface Props {
   value: number;
@@ -40,15 +39,15 @@ export interface Props {
 const props = withDefaults(defineProps<Props>(), {
   value: 0,
   loading: false,
-  label: "Test",
+  label: 'Test',
   min: -99999,
   max: 99999,
   step: 1,
-  prepend: "",
+  prepend: ''
 });
 
 const emit = defineEmits<{
-  "update:value": [number];
+  'update:value': [number];
 }>();
 
 const sliderValue = computed({
@@ -57,8 +56,8 @@ const sliderValue = computed({
   },
   set(value: number) {
     const val = clamp(value, props.min, props.max);
-    emit("update:value", val);
-  },
+    emit('update:value', val);
+  }
 });
 
 defineExpose({ sliderValue });
@@ -69,9 +68,7 @@ defineExpose({ sliderValue });
   .v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)
   > .v-input__control
   > .v-input__slot,
-.single-slider-selector
-  .v-text-field.v-text-field--enclosed
-  .v-text-field__details {
+.single-slider-selector .v-text-field.v-text-field--enclosed .v-text-field__details {
   padding: 0px 8px !important;
 }
 

package/src/components/shared/__tests__/DoubleSliderSelector.spec.ts

@@ -0,0 +1,83 @@
+import { flushPromises, mount, VueWrapper } from '@vue/test-utils';
+import { VRangeSlider, VTextField } from 'vuetify/components';
+import DoubleSliderSelector from '@/components/shared/DoubleSliderSelector.vue';
+
+class DoubleSliderSelectorHarness<T> {
+  constructor(private readonly _wrapper: VueWrapper<T>) {}
+
+  get wrapper(): VueWrapper<T> {
+    return this._wrapper;
+  }
+
+  lower() {
+    return this.wrapper.findComponent<VTextField>('[data-testid="lower"]');
+  }
+
+  upper() {
+    return this.wrapper.findComponent<VTextField>('[data-testid="upper"]');
+  }
+
+  // slider() {
+  //   return this.wrapper.findComponent<VRangeSlider>('[data-testid="slider"]');
+  // }
+}
+
+describe('DoubleSliderSelector tests', () => {
+  it('should timeout the thumb', async () => {
+    vi.useFakeTimers();
+    const props = { min: 0, max: 100 };
+    const wrapper = mount(DoubleSliderSelector, { props });
+    const harness = new DoubleSliderSelectorHarness(wrapper);
+    await harness.wrapper.setProps({ modelValue: [1, 1] });
+    const slider = harness.wrapper.findComponent(VRangeSlider);
+    vi.advanceTimersByTime(999);
+    expect(slider.props().thumbLabel).toEqual('always');
+    vi.advanceTimersByTime(1);
+    await flushPromises();
+    expect(slider.props().thumbLabel).toEqual(false);
+  });
+
+  it('should clamp lower only to min', async () => {
+    const props = { min: 0, max: 100 };
+    const wrapper = mount(DoubleSliderSelector, { props });
+    const harness = new DoubleSliderSelectorHarness(wrapper);
+    await harness.lower().setValue(-100);
+    await harness.lower().trigger('blur');
+    await harness.upper().setValue(50);
+    await harness.upper().trigger('blur');
+    expect(wrapper.emitted('update:modelValue')).toEqual([[[0, 0]], [[0, 50]]]);
+  });
+
+  it('should clamp upper only to max', async () => {
+    const props = { min: 0, max: 100 };
+    const wrapper = mount(DoubleSliderSelector, { props });
+    const harness = new DoubleSliderSelectorHarness(wrapper);
+    await harness.upper().setValue(200);
+    await harness.upper().trigger('blur');
+    await harness.lower().setValue(50);
+    await harness.lower().trigger('blur');
+    expect(wrapper.emitted('update:modelValue')).toEqual([[[0, 100]], [[50, 100]]]);
+  });
+
+  it('should clamp lower and upper to min', async () => {
+    const props = { min: 0, max: 100 };
+    const wrapper = mount(DoubleSliderSelector, { props });
+    const harness = new DoubleSliderSelectorHarness(wrapper);
+    await harness.lower().setValue(-100);
+    await harness.lower().trigger('blur');
+    await harness.upper().setValue(-10);
+    await harness.upper().trigger('blur');
+    expect(wrapper.emitted('update:modelValue')).toEqual([[[0, 0]], [[0, 0]]]);
+  });
+
+  it('should clamp lower and upper to max', async () => {
+    const props = { min: 0, max: 100 };
+    const wrapper = mount(DoubleSliderSelector, { props });
+    const harness = new DoubleSliderSelectorHarness(wrapper);
+    await harness.upper().setValue(9001);
+    await harness.upper().trigger('blur');
+    await harness.lower().setValue(9000);
+    await harness.lower().trigger('blur');
+    expect(wrapper.emitted('update:modelValue')).toEqual([[[0, 100]], [[100, 100]]]);
+  });
+});

package/src/components/shared/__tests__/LoadingSpinner.spec.ts

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

package/src/components/shared/__tests__/UpdateSnackbar.spec.ts

@@ -0,0 +1,116 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { VAlert, VBtn, VSnackbar } from 'vuetify/components';
+import UpdateSnackbar from '../UpdateSnackbar.vue';
+
+const registration: any = {
+  addEventListener: vi.fn().mockImplementation((e, callback) => {
+    callback();
+  }),
+  installing: {
+    addEventListener: vi.fn().mockImplementation((e, callback) => {
+      callback();
+    })
+  },
+  waiting: {
+    postMessage: vi.fn()
+  },
+  update: vi.fn()
+};
+
+const navigator: any = {
+  serviceWorker: {
+    getRegistration() {
+      return registration;
+    }
+  }
+};
+
+const navigatorWithoutInstalling: any = {
+  serviceWorker: {
+    getRegistration() {
+      return {
+        addEventListener: vi.fn().mockImplementation((e, callback) => {
+          callback();
+        })
+      };
+    }
+  }
+};
+
+const navigatorWithoutWaiting: any = {
+  serviceWorker: {
+    getRegistration() {
+      return {
+        addEventListener: vi.fn().mockImplementation((e, callback) => {
+          callback();
+        }),
+        installing: {
+          addEventListener: vi.fn().mockImplementation((e, callback) => {
+            callback();
+          })
+        }
+      };
+    }
+  }
+};
+
+describe('UpdateSnackbar tests', () => {
+  it('should mount', () => {
+    const wrapper = mount(UpdateSnackbar);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should set v-alert state', async () => {
+    vi.spyOn(global, 'navigator', 'get').mockReturnValue(navigator);
+    const wrapper = mount(UpdateSnackbar);
+    await flushPromises();
+    await wrapper.findComponent(VAlert).setValue(false);
+    expect(wrapper.findComponent(VAlert).text()).toBe('');
+  });
+
+  it('should set v-snackbar state', async () => {
+    vi.spyOn(global, 'navigator', 'get').mockReturnValue(navigator);
+    const wrapper = mount(UpdateSnackbar);
+    await flushPromises();
+    await wrapper.findComponent(VSnackbar).setValue(false);
+    expect(wrapper.findComponent(VSnackbar).text()).toBe('');
+  });
+
+  it('should check for updates if navigator present', () => {
+    vi.spyOn(global, 'navigator', 'get').mockReturnValue(navigator);
+    const wrapper = mount(UpdateSnackbar);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should check for updates on interval', async () => {
+    vi.useFakeTimers();
+    vi.spyOn(global, 'navigator', 'get').mockReturnValue(navigator);
+    mount(UpdateSnackbar);
+    await flushPromises();
+    vi.advanceTimersByTime(1000);
+    expect(navigator.serviceWorker.getRegistration().update).toHaveBeenCalled();
+    vi.useRealTimers();
+  });
+
+  it('should show installing when update found', async () => {
+    vi.spyOn(global, 'navigator', 'get').mockReturnValue(navigatorWithoutInstalling);
+    const wrapper = mount(UpdateSnackbar);
+    await flushPromises();
+    expect(wrapper.findComponent(VBtn).text()).toBe('Installing');
+  });
+
+  it('should ignore update if waiting not found', async () => {
+    vi.spyOn(global, 'navigator', 'get').mockReturnValue(navigatorWithoutWaiting);
+    const wrapper = mount(UpdateSnackbar);
+    await flushPromises();
+    expect(wrapper.findComponent(VBtn).text()).toBe('Installing');
+  });
+
+  it('should apply update on user confirmation', async () => {
+    vi.spyOn(global, 'navigator', 'get').mockReturnValue(navigator);
+    const wrapper = mount(UpdateSnackbar);
+    await flushPromises();
+    await wrapper.findComponentByTestId('update').trigger('click');
+    expect(navigator.serviceWorker.getRegistration().waiting.postMessage).toHaveBeenCalledWith('SKIP_WAITING');
+  });
+});

package/src/components/shared/__tests__/ValueSelector.spec.ts

@@ -0,0 +1,39 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import ValueSelector from '@/components/shared/ValueSelector.vue';
+
+describe('ValueSelector.vue', () => {
+  const props = { value: 1, min: 0, max: 100 };
+  let wrapper = mount(ValueSelector, { props });
+
+  beforeEach(() => {
+    const props = { value: 0, min: 0, max: 100 };
+    wrapper = mount(ValueSelector, { props });
+  });
+
+  it('should inflate component', () => {
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should change from props', async () => {
+    await wrapper.setProps({ value: 1 });
+    await flushPromises();
+    expect(wrapper.vm.value).toStrictEqual(1);
+  });
+
+  it('should set text lower than min limits', async () => {
+    wrapper.vm.sliderValue = -100;
+    await flushPromises();
+    expect(wrapper.emitted('update:value')).toStrictEqual([[0]]);
+  });
+
+  it('should set text higher than max limits', async () => {
+    wrapper.vm.sliderValue = 9000;
+    await flushPromises();
+    expect(wrapper.emitted('update:value')).toStrictEqual([[100]]);
+  });
+
+  it('should set text', async () => {
+    const slider = wrapper.findAllComponents('.v-text-field');
+    await slider[0].setValue(10);
+  });
+});

package/src/components/shared/__tests__/VerticalSliderSelector.spec.ts

@@ -0,0 +1,50 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { VSlider } from 'vuetify/components';
+import VerticalSliderSelector from '@/components/shared/VerticalSliderSelector.vue';
+
+describe('VerticalSliderSelector.vue', () => {
+  const props = { value: 0 };
+  let wrapper = mount(VerticalSliderSelector, { props });
+
+  beforeEach(() => {
+    wrapper = mount(VerticalSliderSelector, { props });
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('should inflate component', () => {
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should change from props', async () => {
+    await wrapper.setProps({
+      value: 1
+    });
+    await flushPromises();
+    expect(wrapper.vm.value).toStrictEqual(1);
+  });
+
+  it('should timeout the thumb', async () => {
+    await wrapper.setProps({ value: 1 });
+    const slider = wrapper.findComponent(VSlider);
+    await flushPromises();
+    expect(wrapper.vm.value).toStrictEqual(1);
+
+    await wrapper.setProps({ value: 1 });
+    vi.advanceTimersByTime(999);
+    expect(slider.vm.thumbLabel).toBe('always');
+
+    vi.advanceTimersByTime(1);
+    await flushPromises();
+    expect(wrapper.vm.value).toStrictEqual(1);
+    expect(slider.vm.thumbLabel).toBe(false);
+  });
+
+  it('should set slider value', async () => {
+    const slider = wrapper.findComponent('.v-slider');
+    await slider.setValue(1);
+  });
+});

package/src/components/views/AnnotationTreeView.vue

@@ -0,0 +1,236 @@
+<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
+    .sort((a, b) => a.Data.Title.localeCompare(b.Data.Title))
+    .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>