@3cr/viewer-browser 0.0.200 → 0.0.246

package/src/components/__tests__/webgl3dr.spec.ts

@@ -1,37 +0,0 @@
-import { expect, describe, it } from "vitest";
-import { registerOnPayloadHandler, createInstance } from "@3cr/sdk-browser";
-import { mountVuetify } from "~/helper";
-import { nextTick } from "vue";
-import WebGL3DR from "../WebGL3DR.vue";
-
-describe('WebGL3DR spec', () => {
-  it("creates instance", async () => {
-    mountVuetify(WebGL3DR);
-    await nextTick();
-    expect(createInstance).toHaveBeenCalled();
-    expect(registerOnPayloadHandler).toHaveBeenCalled();
-  });
-
-  it("should emit wheel event", () => {
-    const wrapper = mountVuetify(WebGL3DR);
-    const overlay = wrapper.find("#overlay");
-    overlay.trigger("wheel");
-    expect(wrapper.emitted()["wheel"]).toBeTruthy();
-  });
-
-  it("should emit mouseover event", () => {
-    const wrapper = mountVuetify(WebGL3DR);
-    const overlay = wrapper.find("#overlay");
-    overlay.trigger("mouseover");
-    expect(wrapper.emitted()["mouseover"]).toBeTruthy();
-  });
-
-  it("should emit mouseout event", () => {
-    const wrapper = mountVuetify(WebGL3DR);
-    const overlay = wrapper.find("#overlay");
-    overlay.trigger("mouseover");
-    overlay.trigger("mouseout");
-    expect(wrapper.emitted()["mouseover"]).toBeTruthy();
-    expect(wrapper.emitted()["mouseout"]).toBeTruthy();
-  });
-});

package/src/components/icons/liver.vue

@@ -1,21 +0,0 @@
-<template>
-  <svg
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    x="0px"
-    y="0px"
-    viewBox="0 0 100 125"
-  >
-    <g>
-      <path
-        d="M58.355,24.95c0,0-1.507,2.912-1.83,7.202c-0.263,3.507,0.686,11.987,1.338,14.719
-		c0.776,3.244,2.289,4.015,5.194,4.081c2.904,0.064,9.256-3.611,10.933-4.511c1.539-0.824,9.579-5.862,18.858-15.958
-		c0.565-0.615,3.947-5.196,0.141-6.338c-2.401-0.721-28.486-2.227-31.397-2.028c-2.912,0.199-15.201-0.224-17.393-0.566
-		c-1.672-0.26-15.038-2.543-26.261,3.018C6.715,30.128,4.773,37.822,4.773,45.939c0,6.012,2.826,9.781,5.405,18.088
-		c2.386,7.685,4.956,13.356,5.994,15.462c0.351,0.71,2.582,2.7,4.718,1.69c2.137-1.009,15.874-17.219,20.704-20.546
-		c4.832-3.325,14.231-5.497,14.323-9.52c0.091-4.022-0.587-20.948-2.675-22.053c-2.088-1.105-0.901-3.289-0.451-3.445
-		C54.538,25.009,58.692,24.486,58.355,24.95z"
-      />
-    </g>
-  </svg>
-</template>

package/src/components/loading/__tests__/loading-spinner.spec.ts

@@ -1,11 +0,0 @@
-import { expect, describe, it } from "vitest";
-import { mountVuetify } from "~/helper";
-import LoadingSpinner from "@/components/loading/LoadingSpinner.vue";
-
-const wrapper = mountVuetify(LoadingSpinner);
-
-describe("LoadingSpinner.vue", () => {
-  it("should inflate component", () => {
-    expect(wrapper).toBeTruthy();
-  });
-});

package/src/components/modal/ViewerAnnotationModal.vue

@@ -1,111 +0,0 @@
-<template>
-  <v-menu
-    v-model="menuState"
-    min-width="0"
-    max-width="300"
-    persistent
-    :no-click-animation="true"
-    :target="target"
-    :offset="[15, 0]"
-  >
-    <v-card>
-      <v-card-title class="text-body-1 d-flex align-center">
-        <span>{{ title }}</span>
-      </v-card-title>
-      <v-card-text>
-        <v-row no-gutters>
-          <v-col cols="4">
-            <b style="font-size: 12px">Description</b>
-          </v-col>
-          <v-col>
-            <span style="font-size: 12px">{{ description }}</span>
-          </v-col>
-        </v-row>
-        <v-row no-gutters v-if="smartResponses">
-          <v-col cols="4">
-            <b style="font-size: 12px">Smart Description</b>
-          </v-col>
-          <v-col>
-            <span v-html="smartResponses.GptResponse" style="font-size: 12px"></span>
-          </v-col>
-        </v-row>
-        <v-row no-gutters>
-          <v-col cols="4">
-            <b style="font-size: 12px">Resources</b>
-          </v-col>
-          <v-col>
-            <template v-for="action in actions">
-              <a style="font-size: 12px" :href="action.ActionData.Url" target="_blank">{{ action.ActionData.Description }}</a>
-              <br />
-            </template>
-          </v-col>
-        </v-row>
-      </v-card-text>
-    </v-card>
-  </v-menu>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import { GptResponsePayload, GptService } from '@/services/gpt/gpt.service';
-import { DataOverlay, DataOverlayEvent, InteractionType } from '@3cr/types-ts';
-import { dataOverlayEvent, scanState } from '@/dataLayer/scanState';
-import { useEventListener } from "@/components/modal/composables/useEventListener";
-
-useEventListener(document, 'click', onClick);
-const annotation = ref<DataOverlay | null>(null);
-const target = ref<[number, number]>([0, 0]);
-const smartResponses = ref<GptResponsePayload | null>(null);
-
-const menuState = computed({
-  get(): boolean {
-    return !!annotation.value;
-  },
-  set(value: boolean): void {
-    if (!value) {
-      annotation.value = null;
-    }
-  },
-});
-
-const title = computed(() => {
-  return annotation.value?.Title ?? '';
-});
-
-const description = computed(() => {
-  return annotation.value?.Description ?? '';
-});
-
-const actions = computed(() => {
-  return annotation.value?.CallToAction?.Actions || [];
-});
-
-watch([
-  () => scanState.value.Orientations.Transverse.Slice,
-  () => scanState.value.Orientations.Sagittal.Slice,
-  () => scanState.value.Orientations.Coronal.Slice,
-], () => {
-  menuState.value = false;
-});
-
-watch(dataOverlayEvent, async (event: DataOverlayEvent | null) => {
-  if (event && event.Interaction === InteractionType.PointerUp) {
-    annotation.value = event.Annotation;
-    await getSmartResponses();
-  }
-});
-
-async function getSmartResponses(): Promise<void> {
-  const response = await GptService.Instantiate().GenerateAnnotations(title.value);
-  smartResponses.value = response.data;
-}
-
-function onClick(event: Event): void {
-  const e = event as MouseEvent;
-  if (dataOverlayEvent.value?.Interaction === InteractionType.PointerDown) {
-    target.value = [e.x, e.y];
-  } else {
-    menuState.value = false;
-  }
-}
-</script>

package/src/components/modal/ViewerAnnotations.vue

@@ -1,289 +0,0 @@
-<template>
-  <v-treeview
-    class="annotation-treeview"
-    :items="data"
-    density="compact"
-    item-value="id"
-    open-strategy="single"
-    @update:opened="focusSlices($event)"
-  >
-    <template #prepend="{ item }">
-      <div v-if="hasChildren(item)">
-        <v-btn
-          size="xx-small"
-          :icon="getVisibilityIcon(item)"
-          variant="text"
-          @click.stop="toggleVisibility(item)"
-        />
-      </div>
-    </template>
-    <template #title="{ item }">
-      <div class="d-flex align-center ml-1">
-        <div :style="getMaskStyles(item)">
-          <div :style="getBackgroundStyles(item)"></div>
-        </div>
-        <b class="mx-2">{{ item.id }}</b>
-        <span class="text-subtitle-2">{{ item.title }}</span>
-      </div>
-    </template>
-    <template #item="{ props }">
-      <v-row no-gutters class="px-6 py-2">
-        <v-col cols="4">
-          <b>{{ findNode(props.value)?.title }}</b>
-        </v-col>
-        <v-col>
-          <span v-html="findNode(props.value)?.description"></span>
-          <template v-for="action in findNode(props.value)?.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="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 { dataOverlayState, initialScanState } from "@/dataLayer/scanState";
-import { nextTick, onMounted, ref } from "vue";
-import { ColourData, SlidersActions, Vector3Data } from "@3cr/types-ts";
-import { GptQuestion, GptService } from "@/services/gpt/gpt.service";
-import { useViewer3cr } from "@/dataLayer/useViewer3cr";
-
-interface Annotation {
-  id: string;
-  index?: number | undefined;
-  title: string;
-  description?: string;
-  icon?: string;
-  position?: Vector3Data;
-  colour?: ColourData;
-  children?: Annotation[];
-  actions?: AnnotationAction[];
-}
-
-interface AnnotationAction {
-  description: string;
-  url: string;
-  title?: string | undefined;
-  isBtn: boolean;
-}
-
-const viewer3cr = useViewer3cr();
-const data = ref<Annotation[]>([]);
-const m_askAi = ref<boolean>(false);
-const questionKey = ref<number>(0);
-const questionText = ref<string>("");
-const title = ref<string>("");
-
-onMounted(async () => {
-  data.value = await generateTreeViewData();
-});
-
-async function selectAction(action: AnnotationAction): 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(item: any): Promise<void> {
-  const visibility = getVisibility(item);
-  await viewer3cr.toggle2dAnnotation(item.id, !visibility);
-  await viewer3cr.toggle3dAnnotation(item.id, !visibility);
-}
-
-function getVisibilityIcon(item: Annotation): string {
-  return getVisibility(item) ? "visibility" : "visibility_off";
-}
-
-function getVisibility(item: Annotation): boolean {
-  const overlay = dataOverlayState.value.DataOverlay.DataOverlay.find(
-    (overlay) => item.id === overlay.Id
-  );
-  return overlay ? overlay.Data.Visibility2d : false;
-}
-
-function hasChildren(item: Annotation): boolean {
-  return "children" in item;
-}
-
-function findNode(
-  id: string,
-  items: Annotation | Annotation[] = data.value
-): Annotation | null {
-  if (Array.isArray(items)) {
-    const values = items
-      .map((item) => findNode(id, item))
-      .filter((item) => item);
-    return values.length > 0 ? values[0] : null;
-  } else {
-    return items.id === id
-      ? items
-      : hasChildren(items)
-      ? findNode(id, items.children)
-      : null;
-  }
-}
-
-async function generateTreeViewData(): Promise<Annotation[]> {
-  return await Promise.all(
-    dataOverlayState.value.DataOverlay.DataOverlay.map(async (overlay) => {
-      const gpt = await GptService.Instantiate()
-        .GenerateAnnotations(overlay.Data.Title)
-        .then((data) => data.data)
-        .catch((err) => ({
-          GptResponse: "failed to execute",
-          FollowupQuestions: [],
-        }));
-      return {
-        id: overlay.Id,
-        title: overlay.Data.Title,
-        icon: overlay.Data.Icon2d,
-        colour: overlay.Data.Colour2d,
-        position: overlay.Data.Position,
-        children: [
-          overlay.Data.Description
-            ? {
-                id: `${overlay.Id}-0`,
-                title: "Description",
-                description: overlay.Data.Description,
-              }
-            : {
-                id: `${overlay.Id}-2`,
-                title: "Smart Description",
-                description: gpt.GptResponse,
-              },
-          {
-            id: `${overlay.Id}-1`,
-            title: "Resources",
-            actions: overlay.Data.CallToAction?.Actions.map((action) => ({
-              description: action.ActionData.Description,
-              url: action.ActionData.Url,
-              isBtn: false,
-            })),
-          },
-          {
-            id: `${overlay.Id}-3`,
-            title: "Annotiva AI",
-            actions: gpt.FollowupQuestions.map((question) => ({
-              description: question.Question,
-              url: question.ApiPreFilledRequestKey.toString(),
-              title: overlay.Data.Title,
-              isBtn: true,
-            })),
-          },
-        ],
-      };
-    })
-  );
-}
-
-function getMaskStyles(item: Annotation): Record<string, any> {
-  const src = `data:image/png;base64, ${item.icon}`;
-  return {
-    "mask-size": "12px 12px",
-    "mask-image": `url('${src}')`,
-    "min-width": "12px",
-    "min-height": "12px",
-  };
-}
-
-function getBackgroundStyles(item: Annotation): Record<string, any> {
-  const { R, G, B, A } = item.colour!;
-  const colour = `rgb(${R * 255}, ${G * 255}, ${B * 255}, ${A * 255})`;
-  return {
-    "background-color": colour,
-    "min-width": "12px",
-    "min-height": "12px",
-  };
-}
-
-async function focusSlices(ids: unknown[]): Promise<void> {
-  const id = ids.length > 0 ? ids[0] : null;
-  if (!id) {
-    return;
-  }
-
-  const item = findNode(id as string);
-  if (!item) {
-    return;
-  }
-
-  const x = item.position?.X ?? 0;
-  const y = item.position?.Y ?? 0;
-  const z = item.position?.Z ?? 0;
-
-  const xSpace = initialScanState.value.XSpacing || 1;
-  const ySpace = initialScanState.value.YSpacing || 1;
-  const zSpace = initialScanState.value.ZSpacing || 1;
-
-  const sagittal = Math.round(x / xSpace);
-  const transverse = Math.round(y / ySpace);
-  const coronal = Math.round(z / zSpace);
-
-  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;
-  padding-top: 0;
-
-  .v-list-group {
-    .v-list-item {
-      padding: 0 2px;
-    }
-  }
-
-  .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/__tests__/ViewerAnnotationModal.spec.ts

@@ -1,79 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { mountVuetify } from "~/helper";
-import { dataOverlayEvent } from "@/dataLayer/scanState";
-import { DataOverlay, DataOverlayEvent, InteractionType } from "@3cr/types-ts";
-import { flushPromises } from "@vue/test-utils";
-import { VMenu } from "vuetify/components";
-import ViewerAnnotationModal from "../ViewerAnnotationModal.vue";
-
-const DATA_OVERLAY: DataOverlay = {
-  Version: '1.1.0',
-  Id: '0',
-  Title: 'Data Overlay',
-  Description: 'Data Overlay',
-  Colour2d: { Version: '1.1.0', R: 255, B: 255, G: 255, A: 255 },
-  Colour3d: { Version: '1.1.0', R: 255, B: 255, G: 255, A: 255 },
-  Icon2d: '',
-  Visibility2d: true,
-  Visibility3d: true,
-  Inverted: { Version: '1.1.0', InvertedCoronal: false, InvertedSagittal: false, InvertedTransverse: false },
-  Position: { Version: '1.1.0', X: 0, Y: 0, Z: 0 },
-  Size2d: { Version: '1.1.0', X: 0, Y: 0 },
-  Size3d: { Version: '1.1.0', X: 0, Y: 0, Z: 0 },
-  CallToAction: {
-    Actions: [
-      {
-        ActionType: 1,
-        ActionData: {
-          Description: 'Test',
-          Url: ''
-        }
-      }
-    ]
-  }
-};
-
-const POINTER_DOWN_EVENT: DataOverlayEvent = {
-  Version: '1.1.0',
-  Interaction: InteractionType.PointerDown,
-  Annotation: DATA_OVERLAY
-}
-
-const POINTER_UP_EVENT: DataOverlayEvent = {
-  Version: '1.1.0',
-  Interaction: InteractionType.PointerUp,
-  Annotation: DATA_OVERLAY
-}
-
-describe('ViewerAnnotationModal tests', () => {
-  it('should mount', () => {
-    const wrapper = mountVuetify(ViewerAnnotationModal);
-    expect(wrapper).toBeTruthy();
-  });
-
-  it('should show on data overlay event', async () => {
-    const wrapper = mountVuetify(ViewerAnnotationModal);
-    dataOverlayEvent.value = POINTER_DOWN_EVENT;
-    document.dispatchEvent(new MouseEvent('click', { clientX: 0, clientY: 0 }));
-    await flushPromises();
-    dataOverlayEvent.value = POINTER_UP_EVENT;
-    expect(wrapper.isVisible()).toBeTruthy();
-  });
-
-  it('should dismiss on click', async () => {
-    dataOverlayEvent.value = POINTER_UP_EVENT;
-    const wrapper = mountVuetify(ViewerAnnotationModal);
-    document.dispatchEvent(new MouseEvent('click', { clientX: 0, clientY: 0 }));
-    await flushPromises();
-    expect(wrapper.html()).toBe('');
-  });
-
-  it('should close via menu state', async () => {
-    dataOverlayEvent.value = null;
-    const wrapper = mountVuetify(ViewerAnnotationModal);
-    const menu = wrapper.getComponent(VMenu);
-    await menu.setValue(true);
-    await menu.setValue(false);
-    expect(menu.html()).toBe('');
-  });
-});

package/src/components/modal/composables/useEventListener.ts

@@ -1,22 +0,0 @@
-import { isRef, onBeforeUnmount, onMounted, Ref, unref, watch } from 'vue';
-
-type Target = Ref<EventTarget> | EventTarget;
-type EventType = keyof HTMLElementEventMap;
-type Handler = (e: Event) => void | Promise<void>;
-
-export function useEventListener(target: Target, event: EventType, handler: Handler) {
-  if (isRef(target)) {
-    watch(target, (value, oldValue) => {
-      oldValue?.removeEventListener(event, handler);
-      value?.addEventListener(event, handler);
-    });
-  } else {
-    onMounted(() => {
-      target.addEventListener(event, handler);
-    });
-  }
-
-  onBeforeUnmount(() => {
-    unref(target)?.removeEventListener(event, handler);
-  });
-}

package/src/components/selectors/__tests__/value-selector.spec.ts

@@ -1,53 +0,0 @@
-import { beforeEach, describe, expect, it } from "vitest";
-
-import { mountVuetify } from "~/helper";
-import ValueSelector from "@/components/selectors/ValueSelector.vue";
-import { flushPromises } from "@vue/test-utils";
-
-describe("ValueSelector.vue", () => {
-  let wrapper = mountVuetify(ValueSelector, {
-    value: 1,
-    min: 0,
-    max: 100,
-  });
-
-  beforeEach(() => {
-    wrapper = mountVuetify(ValueSelector, {
-      value: 0,
-      min: 0,
-      max: 100,
-    });
-  });
-
-  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);
-  });
-});