@3cr/viewer-browser 0.0.220 → 0.0.247

package/src/main.ts

@@ -1,4 +1,4 @@
-import { registerVersion } from '@3cr/sdk-browser';
+import { registerVersion, quit } from '@3cr/sdk-browser';
 import { ComponentPublicInstance, createApp } from 'vue';
 import { usePlugins } from '@/plugins/usePlugins';
 import { defaultLoadViewerOptions, LoadViewerOptions } from '@/models/loadViewerOptions';
@@ -6,22 +6,24 @@ import { LoadViewerPayload } from '@/models/loadViewerPayload';
 import { injectedStyleId } from './config';
 import { useVersion3cr } from '@/composables/useVersion3cr';
 import App from '@/App.vue';
+import { getAvailableLanguages, setLanguage } from '@3cr/translations-ts';
 
 let mountedApp: ComponentPublicInstance | undefined = undefined;
 
-let modalId = `__modal_set__`;
-
-export async function registerViewer(version: string) {
-  const newElement = document.createElement('div');
-  newElement.style.width = '0';
-  newElement.style.height = '0';
-  newElement.id = modalId;
-  document.body.appendChild(newElement);
-
+export async function registerViewer(host: Element | string, version: string, language?: string): Promise<void> {
+  await registerVersion(version);
   const app = createApp(App);
   usePlugins(app);
-  mountedApp = app.mount(newElement);
-  await registerVersion(version);
+  mountedApp = app.mount(host);
+
+  const languages = await getAvailableLanguages();
+  if (language && languages.includes(language)) {
+    await setLanguage(language);
+  } else {
+    const documentLanguage = document.querySelector('html')?.getAttribute('lang');
+    const defaultLanguage = documentLanguage ?? languages[0];
+    await setLanguage(defaultLanguage);
+  }
 
   const version3cr = useVersion3cr();
   version3cr.value = version;
@@ -44,9 +46,15 @@ export async function loadSession(url: string): Promise<void> {
   await (mountedApp as any).loadSession(url);
 }
 
-export async function ejectViewer() {
-  const modal = document.getElementById(modalId);
+export async function ejectViewer(): Promise<void> {
   const styleSheet = document.getElementById(injectedStyleId);
-  modal?.remove();
   styleSheet?.remove();
+  await quit();
+}
+
+export async function closeViewer(): Promise<void> {
+  if (!mountedApp) {
+    throw new Error('Please call `registerViewer(version: string)` first');
+  }
+  await (mountedApp as any).close();
 }

package/src/models/loadViewerOptions.ts

@@ -1,7 +1,33 @@
 import { ViewerCallback } from '@/models/callbacks';
 import { CurrentDataOverlayState, CurrentMcadState, CurrentScanState } from '@3cr/types-ts';
+import { Viewer3crService } from '@/services/viewer-3cr.service';
 
 export interface LoadViewerOptions {
+  ViewerTitle?: string;
+  DisplaySettings?: {
+    Show?: boolean;
+    Title?: string;
+    Tooltip?: string;
+    Icon?: string;
+  };
+  Annotations?: {
+    Show?: boolean;
+    Title?: string;
+    Tooltip?: string;
+    Icon?: string;
+  };
+  Markups?: {
+    Show?: boolean;
+    Title?: string;
+    Tooltip?: string;
+    Icon?: string;
+  };
+  Mcad?: {
+    Show?: boolean;
+    Title?: string;
+    Tooltip?: string;
+    Icon?: string;
+  };
   OnAutoAnnotate?: ViewerCallback;
   OnClosePopup?: ViewerCallback;
   OnDownloadDicomSeries?: ViewerCallback;
@@ -18,6 +44,19 @@ export interface LoadViewerOptions {
   OnSendTo3rdParty?: ViewerCallback;
   OnShare?: ViewerCallback;
   OnShareToMobile?: ViewerCallback;
+  OnInteractionReady?: ViewerCallback;
+  OnViewerLoaded?: ViewerCallback<void, [Viewer3crService]>;
+  ShowFileMenu?: boolean;
+  ShowSettingsMenu?: boolean;
+  ShowAiMenu?: boolean;
+  Show2x2Layout?: boolean;
+  Show1x3Layout?: boolean;
+  ShowTutorial?: boolean;
+  ShowResetScan?: boolean;
+  ShowEnableCloudStorage?: boolean;
+  ShowSendTo3rdParty?: boolean;
+  ShowShareToMobile?: boolean;
+  ShowScreenshot?: boolean;
 }
 
 export const defaultLoadViewerOptions: LoadViewerOptions = {

package/src/models/loadViewerPayload.ts

@@ -8,13 +8,6 @@ export interface MftpDecryptionKey {
   Iv: string;
 }
 
-export const defaultLoadViewerPayload_old: LoadViewerPayload = {
-  Url: 'https://webgl-3dr.singular.health/demo/scans/chest.3vxl',
-  DecryptionKey: {
-    Iv: 'XEloSh+OcO7TG77au6HjPw==',
-    Key: 'KUc722X1y4w42M+jCf9a3+6EGz66z7UMWK3m2aMqGxM='
-  }
-};
 export const defaultLoadViewerPayload: LoadViewerPayload = {
   Url: 'https://webgl-3dr.singular.health/demo/scans/chest_v6.3vxl',
   DecryptionKey: {

package/src/services/viewer-3cr.service.ts

@@ -22,7 +22,8 @@ import {
   ObjectColour,
   ObjectInvert,
   ObjectVisibility,
-  ViewToggleData
+  ViewToggleData,
+  GraphicType
 } from '@3cr/types-ts';
 import { LoadViewerPayload } from '@/models/loadViewerPayload';
 import { currentColourPreset, previousLayout, transactionStarted } from '@/models/scanState';
@@ -338,6 +339,17 @@ export class Viewer3crService {
     });
   }
 
+  /**
+   * NC-08: Set Navigation Cube Face Graphics.
+   * @param type Face type of cube.
+   */
+  async setNavCubeGraphics(type: GraphicType): Promise<void> {
+    await this.sendPayload(FrontEndInterfaces.navigation_cube, NavigationCubeActions.nc08, {
+      Version: '0.0.1',
+      Value: type
+    });
+  }
+
   /**
    * SM-13: Pan the selected view to the left.
    * @param view The view.

package/src/tools/data-overlay.tool.ts

@@ -0,0 +1,71 @@
+import { McadObjectInteraction } from '@/types/mcad-object-interaction';
+import { Interactiontype } from '@3cr/types-ts';
+import { DataOverlay } from '@/types/data-overlay';
+import { ref, watch, WatchStopHandle } from 'vue';
+import { useAnnotations } from '@/composables/useAnnotations';
+import { useMarkups } from '@/composables/useMarkups';
+import { useMcadObjects } from '@/composables/useMcadObjects';
+import { DataOverlayInteraction } from '@/types/data-overlay-interaction';
+
+export function useDataOverlayTool() {
+  let _flag = false;
+  let _focused: DataOverlay | null = null;
+  let _handles: WatchStopHandle[] = [];
+
+  const { annotationEvent } = useAnnotations();
+  const { markupEvent } = useMarkups();
+  const { mcadObjectEvent } = useMcadObjects();
+  const selected = ref<DataOverlay | null>(null);
+
+  function activate(): void {
+    document.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+    _handles.push(
+      watch(annotationEvent, onInteraction),
+      watch(markupEvent, onInteraction),
+      watch(mcadObjectEvent, onMcadInteraction)
+    );
+  }
+
+  function deactivate(): void {
+    document.removeEventListener('mousedown', onMouseDown);
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+    _handles.forEach((handle) => handle());
+    _handles = [];
+    selected.value = null;
+  }
+
+  function onMouseDown(): void {
+    _flag = true;
+  }
+
+  function onMouseMove(): void {
+    _flag = false;
+  }
+
+  function onMouseUp(): void {
+    if (_flag) {
+      selected.value = _focused;
+    }
+  }
+
+  function onInteraction(event: DataOverlayInteraction<DataOverlay> | null): void {
+    if (event?.Interaction === Interactiontype.HOVER_START) {
+      _focused = event.DataOverlay;
+    } else if (event?.Interaction === Interactiontype.HOVER_END) {
+      _focused = null;
+    }
+  }
+
+  function onMcadInteraction(event: McadObjectInteraction | null): void {
+    if (event?.Interaction === Interactiontype.HOVER_START) {
+      _focused = event.Mcad;
+    } else if (event?.Interaction === Interactiontype.HOVER_END) {
+      _focused = null;
+    }
+  }
+
+  return { selected, activate, deactivate };
+}

package/src/types/data-overlay-event.ts

@@ -0,0 +1,5 @@
+import { DataOverlay } from '@/types/data-overlay';
+import { DataOverlayData } from '@/types/data-overlay-data';
+import { DataOverlayInteraction } from '@/types/data-overlay-interaction';
+
+export type DataOverlayEvent<T extends DataOverlay> = DataOverlayData<DataOverlayInteraction<T>>;

package/src/types/data-overlay-info.ts

@@ -6,6 +6,10 @@ export interface DataOverlayInfo {
     icon: string;
     title: string;
     subtitle?: string;
+    data?: {
+      key: string;
+      value: string;
+    }[];
     actions?: {
       url: string;
       description: string;

package/src/types/demo-type.ts

@@ -0,0 +1,4 @@
+export enum DemoType {
+  Patient,
+  Licence
+}

package/src/components/modal/actions/HideViewAction.vue

@@ -1,38 +0,0 @@
-<template>
-  <Action :text="text" :icon="icon" :variant="variant" @click="hide" />
-</template>
-
-<script setup lang="ts">
-import { ScanView } from '@3cr/types-ts';
-import { useViewer3cr } from '@/composables/useViewer3cr';
-import { computed, ref } from 'vue';
-import { getViewName } from '@/models/scanState';
-
-interface Props {
-  view: ScanView;
-  variant?: 'button' | 'menu-item';
-}
-const isHidden = ref<boolean>(false);
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: 'button'
-});
-
-const icon = computed(() => {
-  return isHidden.value ? 'visibility' : 'visibility_off';
-});
-
-const text = computed(() => {
-  return isHidden.value ? `Show the ${getViewName(props.view)} view.` : `Hide the ${getViewName(props.view)} view.`;
-});
-
-const viewer3cr = useViewer3cr();
-
-async function hide(): Promise<void> {
-  await viewer3cr.viewSelectionToggleView({
-    View: props.view,
-    Visibility: isHidden.value
-  });
-  isHidden.value = !isHidden.value;
-}
-</script>

package/src/components/views/modals/DataOverlayModalManager.vue

@@ -1,104 +0,0 @@
-<template>
-  <template v-for="[item, modal] of modals" :key="item">
-    <data-overlay-modal :modal="modal" :item="item" />
-  </template>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from 'vue';
-import { Interactiontype } from '@3cr/types-ts';
-import { DataOverlayInfo } from '@/types/data-overlay-info';
-import { DataOverlay } from '@/types/data-overlay';
-import { useMouse } from '@/composables/useMouse';
-import { useAnnotations } from '@/composables/useAnnotations';
-import { useMarkups } from '@/composables/useMarkups';
-import { useMcadObjects } from '@/composables/useMcadObjects';
-import { useEventListener } from '@/composables/useEventListener';
-import { GptService } from '@/services/gpt.service';
-import { GptResponsePayload } from '@/types/gpt-response-payload';
-
-useEventListener(document, 'mousedown', onMouseDown);
-const { x, y } = useMouse(document);
-const { annotationEvent } = useAnnotations();
-const { markupEvent } = useMarkups();
-const { mcadObjectEvent } = useMcadObjects();
-
-const modals = ref<Map<DataOverlayInfo, boolean>>(new Map<DataOverlayInfo, boolean>());
-const smartDescriptions = ref<Record<string, GptResponsePayload>>({});
-
-watch(
-  annotationEvent,
-  async (event) => {
-    if (event?.Interaction === Interactiontype.POINTER_UP) {
-      await generateSmartDescriptions(event.DataOverlay);
-      const item = mapToDataOverlayModal(event.DataOverlay);
-      modals.value.set(item, true);
-    }
-  },
-  { immediate: true }
-);
-
-watch(
-  markupEvent,
-  async (event) => {
-    if (event?.Interaction === Interactiontype.POINTER_UP) {
-      await generateSmartDescriptions(event.DataOverlay);
-      const item = mapToDataOverlayModal(event.DataOverlay);
-      modals.value.set(item, true);
-    }
-  },
-  { immediate: true }
-);
-
-watch(
-  mcadObjectEvent,
-  async (event) => {
-    if (event?.Interaction === Interactiontype.POINTER_UP) {
-      await generateSmartDescriptions(event.Mcad as any);
-      const item = mapToDataOverlayModal(event.Mcad as any);
-      modals.value.set(item, true);
-    }
-  },
-  { immediate: true }
-);
-
-function onMouseDown(): void {
-  for (const [key, value] of modals.value.entries()) {
-    if (value) {
-      modals.value.set(key, false);
-      setTimeout(() => modals.value.delete(key), 500); // wait for animation
-    }
-  }
-}
-
-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;
-  }
-}
-
-function mapToDataOverlayModal(overlay: DataOverlay): DataOverlayInfo {
-  return {
-    id: overlay.Id,
-    title: overlay.Title,
-    target: [x.value, y.value],
-    data: [
-      {
-        icon: overlay.Description ? 'description' : 'psychology',
-        title: overlay.Description ? 'Description' : 'Smart Description',
-        subtitle: overlay.Description || smartDescriptions.value[overlay.Title].GptResponse
-      },
-      {
-        icon: 'help',
-        title: 'Resources',
-        actions: overlay.CallToAction?.Actions.map((action) => ({
-          url: action.ActionData.Url,
-          description: action.ActionData.Description
-        }))
-      }
-    ]
-  };
-}
-</script>

package/src/components/views/modals/__tests__/DataOverlayModal.spec.ts

@@ -1,33 +0,0 @@
-import DataOverlayModal from '@/components/views/modals/DataOverlayModal.vue';
-import { DataOverlayInfoFaker } from '@test/fakers/data-overlay-info.faker';
-import { mount } from '@vue/test-utils';
-import { VCard, VMenu } from 'vuetify/components';
-
-describe('DataOverlayInfo tests', () => {
-  it('should mount', () => {
-    const item = DataOverlayInfoFaker.random();
-    const props = { item, modal: true };
-    const wrapper = mount(DataOverlayModal, { props });
-    expect(wrapper).toBeTruthy();
-  });
-
-  it('should open and close menu', async () => {
-    const item = DataOverlayInfoFaker.random();
-    const props = { item, modal: true };
-    const wrapper = mount(DataOverlayModal, { props });
-    const menu = wrapper.findComponent(VMenu);
-    await menu.setValue(false);
-    await wrapper.setProps({ modal: false });
-    expect(wrapper.findComponent(VCard).isVisible()).toBeFalsy();
-  });
-
-  it('should open link', async () => {
-    const item = DataOverlayInfoFaker.random(1);
-    const props = { item, modal: true };
-    const wrapper = mount(DataOverlayModal, { props });
-    const card = wrapper.findComponent(VCard);
-    const anchor = card.find('a');
-    await anchor.trigger('click');
-    expect(anchor.attributes('href')).toBe(item.data[0].actions![0].url);
-  });
-});

package/src/components/views/modals/__tests__/DataOverlayModalManager.spec.ts

@@ -1,93 +0,0 @@
-import { GptService } from '@/services/gpt.service';
-import { DOMWrapper, flushPromises, mount } from '@vue/test-utils';
-import { useAnnotations } from '@/composables/useAnnotations';
-import { DataOverlayInteractionFaker } from '@test/fakers/data-overlay-interaction.faker';
-import { Interactiontype } from '@3cr/types-ts';
-import { useMarkups } from '@/composables/useMarkups';
-import { McadObjectInteractionFaker } from '@test/fakers/mcad-object-interaction.faker';
-import { useMcadObjects } from '@/composables/useMcadObjects';
-import { VCard } from 'vuetify/components';
-import { GptResponsePayload } from '@/types/gpt-response-payload';
-import DataOverlayModalManager from '@/components/views/modals/DataOverlayModalManager.vue';
-import DataOverlayModal from '@/components/views/modals/DataOverlayModal.vue';
-
-const gpt: GptResponsePayload = {
-  GptResponse: 'Example',
-  FollowupQuestions: []
-};
-
-describe('DataOverlayModalManager tests', () => {
-  beforeEach(() => {
-    vi.spyOn(GptService.prototype, 'GenerateAnnotations').mockResolvedValue({ data: gpt } as any);
-  });
-
-  it('should mount', () => {
-    const wrapper = mount(DataOverlayModalManager);
-    expect(wrapper).toBeTruthy();
-  });
-
-  it('should display annotation on pointer up', async () => {
-    const event = DataOverlayInteractionFaker.annotation(Interactiontype.POINTER_UP);
-    const { annotationEvent } = useAnnotations();
-    vi.spyOn(annotationEvent, 'value', 'get').mockReturnValue(event);
-
-    const wrapper = mount(DataOverlayModalManager);
-    await flushPromises();
-    expect(wrapper.findComponent(DataOverlayModal).exists()).toBeTruthy();
-  });
-
-  it('should display markup on pointer up', async () => {
-    const event = DataOverlayInteractionFaker.polygon(Interactiontype.POINTER_UP);
-    const { markupEvent } = useMarkups();
-    vi.spyOn(markupEvent, 'value', 'get').mockReturnValue(event);
-
-    const wrapper = mount(DataOverlayModalManager);
-    await flushPromises();
-    expect(wrapper.findComponent(DataOverlayModal).exists()).toBeTruthy();
-  });
-
-  it('should display mcad on pointer up', async () => {
-    const event = McadObjectInteractionFaker.random(Interactiontype.POINTER_UP);
-    const { mcadObjectEvent } = useMcadObjects();
-    vi.spyOn(mcadObjectEvent, 'value', 'get').mockReturnValue(event);
-
-    const wrapper = mount(DataOverlayModalManager);
-    await flushPromises();
-    expect(wrapper.findComponent(DataOverlayModal).exists()).toBeTruthy();
-  });
-
-  it('should generate smart description if none provided', async () => {
-    const event = DataOverlayInteractionFaker.annotation(Interactiontype.POINTER_UP);
-    event.DataOverlay.Description = '';
-    const { annotationEvent } = useAnnotations();
-    vi.spyOn(annotationEvent, 'value', 'get').mockReturnValue(event);
-
-    const wrapper = mount(DataOverlayModalManager);
-    await flushPromises();
-    expect(wrapper.findComponent(VCard).text()).toContain('Smart Description');
-  });
-
-  describe('timed tests', () => {
-    beforeEach(() => {
-      vi.useFakeTimers();
-    });
-
-    afterEach(() => {
-      vi.useRealTimers();
-    });
-
-    it('should dismiss modal on mousedown', async () => {
-      const event = DataOverlayInteractionFaker.annotation(Interactiontype.POINTER_UP);
-      const { annotationEvent } = useAnnotations();
-      vi.spyOn(annotationEvent, 'value', 'get').mockReturnValue(event);
-
-      const wrapper = mount(DataOverlayModalManager);
-      await flushPromises();
-
-      await new DOMWrapper(document).trigger('mousedown');
-      vi.advanceTimersByTime(500);
-      await flushPromises();
-      expect(wrapper.findComponent(DataOverlayModal).exists()).toBeFalsy();
-    });
-  });
-});