@3cr/viewer-browser 0.0.248 → 0.0.293

package/src/components/modal/menus/__tests__/FileMenu.spec.ts

@@ -1,110 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { useViewerOptions } from '@/composables/useViewerOptions';
-import { VBtn, VListItem } from 'vuetify/components';
-import FileMenu from '@/components/modal/menus/FileMenu.vue';
-
-describe('FileMenu tests', () => {
-  const options = useViewerOptions();
-
-  it('should mount', () => {
-    const wrapper = mount(FileMenu);
-    expect(wrapper).toBeTruthy();
-  });
-
-  it('should call OnLoadNewDicomSeries', async () => {
-    options.value.OnLoadNewDicomSeries = vi.fn();
-    const wrapper = mount(FileMenu);
-    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
-    await wrapper.findComponentByTestId<VListItem>('load-new-dicom-series').trigger('click');
-    expect(options.value.OnLoadNewDicomSeries).toHaveBeenCalled();
-  });
-
-  it('should not call OnLoadNewDicomSeries', async () => {
-    options.value.OnLoadNewDicomSeries = undefined;
-    const wrapper = mount(FileMenu);
-    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
-    const item = wrapper.findComponentByTestId<VListItem>('load-new-dicom-series');
-    expect(item.exists()).toBeFalsy();
-  });
-
-  it('should call OnDownloadDicomSeries', async () => {
-    options.value.OnDownloadDicomSeries = vi.fn();
-    const wrapper = mount(FileMenu);
-    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
-    await wrapper.findComponentByTestId<VListItem>('download-dicom-series').trigger('click');
-    expect(options.value.OnDownloadDicomSeries).toHaveBeenCalled();
-  });
-
-  it('should not call OnDownloadDicomSeries', async () => {
-    options.value.OnDownloadDicomSeries = undefined;
-    const wrapper = mount(FileMenu);
-    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
-    const item = wrapper.findComponentByTestId<VListItem>('download-dicom-series');
-    expect(item.exists()).toBeFalsy();
-  });
-
-  it('should call OnLoadSavedSession', async () => {
-    options.value.OnLoadSavedSession = vi.fn();
-    const wrapper = mount(FileMenu);
-    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
-    await wrapper.findComponentByTestId<VListItem>('load-saved-session').trigger('click');
-    expect(options.value.OnLoadSavedSession).toHaveBeenCalled();
-  });
-
-  it('should not call OnLoadSavedSession', async () => {
-    options.value.OnLoadSavedSession = undefined;
-    const wrapper = mount(FileMenu);
-    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
-    const item = wrapper.findComponentByTestId<VListItem>('load-saved-session');
-    expect(item.exists()).toBeFalsy();
-  });
-
-  it('should call OnSendTo3rdParty', async () => {
-    options.value.OnSendTo3rdParty = vi.fn();
-    const wrapper = mount(FileMenu);
-    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
-    await wrapper.findComponentByTestId<VListItem>('send-to-3rd-party').trigger('click');
-    expect(options.value.OnSendTo3rdParty).toHaveBeenCalled();
-  });
-
-  it('should not call OnSendTo3rdParty', async () => {
-    options.value.OnSendTo3rdParty = undefined;
-    const wrapper = mount(FileMenu);
-    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
-    const item = wrapper.findComponentByTestId<VListItem>('send-to-3rd-party');
-    expect(item.exists()).toBeFalsy();
-  });
-
-  it('should call OnShareToMobile', async () => {
-    options.value.OnShareToMobile = vi.fn();
-    const wrapper = mount(FileMenu);
-    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
-    await wrapper.findComponentByTestId<VListItem>('share-to-mobile').trigger('click');
-    expect(options.value.OnShareToMobile).toHaveBeenCalled();
-  });
-
-  it('should not call OnShareToMobile', async () => {
-    options.value.OnShareToMobile = undefined;
-    const wrapper = mount(FileMenu);
-    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
-    const item = wrapper.findComponentByTestId<VListItem>('share-to-mobile');
-    expect(item.exists()).toBeFalsy();
-  });
-
-  it('should call OnClosePopup', async () => {
-    options.value.OnClosePopup = vi.fn();
-    const wrapper = mount(FileMenu);
-    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
-    await wrapper.findComponentByTestId<VListItem>('close').trigger('click');
-    expect(options.value.OnClosePopup).toHaveBeenCalled();
-    expect(wrapper.emitted('close')).toEqual([[]]);
-  });
-
-  it('should not call OnClosePopup', async () => {
-    options.value.OnClosePopup = undefined;
-    const wrapper = mount(FileMenu);
-    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
-    await wrapper.findComponentByTestId<VListItem>('close').trigger('click');
-    expect(wrapper.emitted('close')).toEqual([[]]);
-  });
-});

package/src/components/navigation/mcad/McadGlobalActions.vue

@@ -1,20 +0,0 @@
-<template>
-  <v-card flat density="compact" color="transparent">
-    <v-card-title class="text-overline">Global Actions</v-card-title>
-    <v-card-text class="d-flex flex-column ga-1">
-      <mcad-global-scan-view-btn />
-      <!--      <mcad-global-visibility-btn :mcads="items" />-->
-      <!--      <mcad-global-opacity-slider :mcads="items" />-->
-    </v-card-text>
-  </v-card>
-</template>
-
-<script setup lang="ts">
-import { DataOverlayMcad } from '@/types/data-overlay-mcad';
-
-interface Props {
-  items: DataOverlayMcad[];
-}
-
-defineProps<Props>();
-</script>

package/src/components/navigation/mcad/McadGlobalOpacitySlider.vue

@@ -1,103 +0,0 @@
-<template>
-  <v-row class="flex-column" no-gutters>
-    <v-row no-gutters>
-      <v-col>
-        <span class="text-caption">Global Opacity</span>
-      </v-col>
-    </v-row>
-    <v-row no-gutters>
-      <v-col class="my-auto" cols="9">
-        <v-slider
-          v-model="opacity"
-          class="pr-4"
-          hide-details
-          min="0"
-          max="100"
-          thumb-color="primary"
-          thumb-size="16"
-          step="1"
-        />
-      </v-col>
-      <v-col class="my-auto" cols="3">
-        <v-text-field
-          v-model="opacity"
-          density="compact"
-          hide-details
-          variant="outlined"
-          type="number"
-          min="0"
-          max="100"
-        >
-          <template #append-inner>
-            <v-icon icon="percent" size="16" />
-          </template>
-        </v-text-field>
-      </v-col>
-    </v-row>
-  </v-row>
-</template>
-
-<script setup lang="ts">
-import { DataOverlayMcad } from '@/types/data-overlay-mcad';
-import { useViewer3cr } from '@/composables/useViewer3cr';
-import { computed, ref } from 'vue';
-import { ObjectColour } from '@3cr/types-ts';
-import { clamp } from '@/functions/clamp';
-import { useDebounce } from '@/composables/useDebounce';
-
-interface Props {
-  mcads: DataOverlayMcad[];
-}
-
-const props = defineProps<Props>();
-
-const viewer3cr = useViewer3cr();
-const setOpacityDebounce = useDebounce(setOpacity, 500);
-
-const _opacity = ref<number>(100);
-
-const opacity = computed({
-  get(): number {
-    return _opacity.value;
-  },
-  set(value: number): void {
-    const next = clamp(value, 0, 100);
-    _opacity.value = next;
-    setOpacityDebounce(next);
-  }
-});
-
-async function setOpacity(value: number): Promise<void> {
-  const alpha = clamp(value, 0, 100) / 100;
-  for (const mcad of props.mcads) {
-    const message: ObjectColour = {
-      Version: '0.0.0',
-      Id: mcad.Id,
-      Colour: {
-        Version: '0.0.0',
-        R: mcad.Colour.R,
-        G: mcad.Colour.G,
-        B: mcad.Colour.B,
-        A: alpha
-      }
-    };
-    await viewer3cr.setMcadObjectColour(message);
-  }
-}
-</script>
-
-<style scoped lang="scss">
-:deep(.v-field) {
-  padding-right: 1px !important;
-}
-
-:deep(input) {
-  font-size: 11px;
-  padding: 4px 0 4px 4px;
-  min-height: 0;
-}
-
-:deep(.v-field__append-inner) {
-  padding-top: 4px;
-}
-</style>

package/src/components/navigation/mcad/McadGlobalScanViewBtn.vue

@@ -1,28 +0,0 @@
-<template>
-  <v-btn variant="text" size="small" @click="toggle">
-    <v-icon start :icon="icon" size="20" />
-    <span>{{ visibility ? 'Hide' : 'Show' }} 3D Volume</span>
-  </v-btn>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useViewer3cr } from '@/composables/useViewer3cr';
-import { ScanView, ViewToggleData } from '@3cr/types-ts';
-import { scanState } from '@/models/scanState';
-
-const viewer3cr = useViewer3cr();
-
-const visibility = computed(() => {
-  return scanState.value.Orientations.Volume.Visibility;
-});
-
-const icon = computed(() => {
-  return visibility.value ? 'visibility' : 'visibility_off';
-});
-
-async function toggle(): Promise<void> {
-  const message: ViewToggleData = { Version: '0.0.0', View: ScanView.Volume, Visibility: !visibility.value };
-  await viewer3cr.viewSelectionToggleView(message);
-}
-</script>

package/src/components/navigation/mcad/McadGlobalVisibilityBtn.vue

@@ -1,38 +0,0 @@
-<template>
-  <v-btn variant="text" size="small" @click="toggle">
-    <v-icon start :icon="icon" size="20" />
-    <span>{{ visibility ? 'Hide' : 'Show' }} all MCADs</span>
-  </v-btn>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { DataOverlayMcad } from '@/types/data-overlay-mcad';
-import { ObjectVisibility } from '@3cr/types-ts';
-import { useViewer3cr } from '@/composables/useViewer3cr';
-
-interface Props {
-  mcads: DataOverlayMcad[];
-}
-
-const props = defineProps<Props>();
-
-const viewer3cr = useViewer3cr();
-
-const visibility = computed(() => {
-  return props.mcads.some((mcad) => mcad.Visibility);
-});
-
-const icon = computed(() => {
-  return visibility.value ? 'visibility' : 'visibility_off';
-});
-
-async function toggle(): Promise<void> {
-  for (const mcad of props.mcads) {
-    const message: ObjectVisibility = { Version: '0.0.0', Id: mcad.Id, Visibility: !visibility.value };
-    await viewer3cr.setMcadObjectVisibility(message);
-  }
-}
-
-defineOptions({ inheritAttrs: false });
-</script>

package/src/components/views/AnnotationTreeView.vue

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

package/src/components/views/DisplaySettings.vue

@@ -1,94 +0,0 @@
-<template>
-  <v-row class="flex-column" no-gutters>
-    <v-row no-gutters>
-      <v-col>
-        <DoubleSliderSelector
-          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-bind="huMinMax" v-model:model-value="thresholdSlider" label="Fine Adjustment" />
-      </v-col>
-    </v-row>
-    <v-row no-gutters>
-      <v-col>
-        <v-select
-          class="pt-4"
-          data-testid="greyscale"
-          :model-value="currentGreyscalePreset"
-          :items="initialScanState.GreyscalePresets"
-          label="Greyscale Preset"
-          item-text="Name"
-          density="compact"
-          variant="outlined"
-          persistent-placeholder
-          hide-details
-          return-object
-          placeholder="None"
-          @update:model-value="onGreyscalePresetChange"
-        >
-          <template #item="{ props, item }">
-            <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>
-                <v-spacer />
-                Bone Density:
-                <span class="text-mono">{{ item.raw.Upper }}</span>
-              </template>
-            </v-list-item>
-          </template>
-          <template v-slot:selection="{ item }">
-            <span>{{ item.raw.Name }}</span>
-          </template>
-        </v-select>
-      </v-col>
-    </v-row>
-    <v-row no-gutters>
-      <v-col>
-        <v-select
-          class="pt-4"
-          data-testid="colour"
-          :model-value="currentColourPreset"
-          :items="initialScanState.ColourPresets"
-          label="Colour Preset"
-          variant="outlined"
-          density="compact"
-          item-title="Name"
-          hide-details
-          placeholder="Select a Colour Preset"
-          return-object
-          @update:model-value="onColourPresetChange"
-        ></v-select>
-      </v-col>
-    </v-row>
-  </v-row>
-</template>
-
-<script setup lang="ts">
-import {
-  currentColourPreset,
-  currentGreyscalePreset,
-  huMinMax,
-  initialScanState,
-  thresholdSlider,
-  windowSlider
-} from '@/models/scanState';
-import { ColourPresetData, GreyscalePresetData, PresetsActions } from '@3cr/types-ts';
-import { useViewer3cr } from '@/composables/useViewer3cr';
-
-const viewer3cr = useViewer3cr();
-
-async function onGreyscalePresetChange(preset: GreyscalePresetData): Promise<void> {
-  await viewer3cr.setPreset(PresetsActions.pr01, preset);
-}
-
-async function onColourPresetChange(preset: ColourPresetData): Promise<void> {
-  await viewer3cr.setPreset(PresetsActions.pr02, preset);
-}
-</script>