@3cr/viewer-browser 0.0.162 → 0.0.195

package/src/helpers/__tests__/layout-overlay-style.spec.ts

@@ -5,6 +5,8 @@ import { flushPromises } from "@vue/test-utils";
 import { spyOn } from "@vitest/spy";
 
 describe("generateDivStyleForLayout", () => {
+  const canvas = { clientWidth: 0, clientHeight: 0 } as HTMLCanvasElement;
+
   it("should generateDivStyleForLayout AnchorPoint.TOP", () => {
     expect(
       generateDivStyleForLayout({
@@ -24,9 +26,9 @@ describe("generateDivStyleForLayout", () => {
           Y: 1,
         },
         Version: "1.0.0",
-      })
+      }, canvas)
     ).toStrictEqual({
-      height: "calc(100% - 2px)",
+      height: "calc(100% - 0px)",
       left: "50%",
       top: "0px",
       transform: "translateX(-50%)",
@@ -53,11 +55,11 @@ describe("generateDivStyleForLayout", () => {
           Y: 1,
         },
         Version: "1.0.0",
-      })
+      }, canvas)
     ).toStrictEqual({
-      height: "calc(100% - 2px)",
+      height: "calc(100% - 0px)",
       left: "50%",
-      bottom: "4px",
+      bottom: "0px",
       transform: "translateX(-50%)",
       width: "calc(100% - 0px)",
     });
@@ -82,9 +84,9 @@ describe("generateDivStyleForLayout", () => {
           Y: 1,
         },
         Version: "1.0.0",
-      })
+      }, canvas)
     ).toStrictEqual({
-      height: "calc(100% - 2px)",
+      height: "calc(100% - 0px)",
       left: "0px",
       top: "50%",
       transform: "translateY(-50%)",
@@ -111,9 +113,9 @@ describe("generateDivStyleForLayout", () => {
           Y: 1,
         },
         Version: "1.0.0",
-      })
+      }, canvas)
     ).toStrictEqual({
-      height: "calc(100% - 2px)",
+      height: "calc(100% - 0px)",
       right: "0px",
       top: "50%",
       transform: "translateY(-50%)",
@@ -140,10 +142,10 @@ describe("generateDivStyleForLayout", () => {
           Y: 1,
         },
         Version: "1.0.0",
-      })
+      }, canvas)
     ).toStrictEqual({
       "border-top-left-radius": "0px",
-      height: "calc(100% - 2px)",
+      height: "calc(100% - 0px)",
       left: "0px",
       top: "0px",
       width: "calc(100% - 0px)",
@@ -169,22 +171,22 @@ describe("generateDivStyleForLayout", () => {
           Y: 1,
         },
         Version: "1.0.0",
-      })
+      }, canvas)
     ).toStrictEqual({
       "border-bottom-left-radius": "0px",
       "border-bottom-right-radius": "0px",
       "border-top-left-radius": "0px",
       "border-top-right-radius": "0px",
-      height: "calc(100% -  2px -  2px)",
+      height: "calc(100% -  0px -  0px)",
       left: "0px",
       top: "0px",
-      width: "calc(100% - 0px - 0px)",
+      width: "calc(100% - 0px - 0px - 0px)",
     });
   });
 
   it("should generateDivStyleForLayout AspectRatio === 1", async () => {
     spyOn(document, "getElementById").mockReturnValue({
-      id: "unity-canvas",
+      id: "unity",
       offsetWidth: 1,
       offsetHeight: 2,
     } as HTMLElement);
@@ -207,16 +209,16 @@ describe("generateDivStyleForLayout", () => {
           Y: 1,
         },
         Version: "1.0.0",
-      })
+      }, canvas)
     ).toStrictEqual({
       "border-bottom-left-radius": "0px",
       "border-bottom-right-radius": "0px",
       "border-top-left-radius": "0px",
       "border-top-right-radius": "0px",
-      height: "calc(1px)",
+      height: "calc(0px)",
       left: "0px",
       top: "0px",
-      width: "calc(2px)",
+      width: "calc(0px)",
     });
   });
 
@@ -241,7 +243,7 @@ describe("generateDivStyleForLayout", () => {
           Y: 1,
         },
         Version: "1.0.0",
-      })
+      }, canvas)
     ).toStrictEqual({
       "border-bottom-left-radius": "0px",
       "border-bottom-right-radius": "0px",
@@ -273,16 +275,16 @@ describe("generateDivStyleForLayout", () => {
           Y: 1,
         },
         Version: "1.0.0",
-      })
+      }, canvas)
     ).toStrictEqual({
       "border-bottom-left-radius": "0px",
       "border-bottom-right-radius": "0px",
       "border-top-left-radius": "0px",
       "border-top-right-radius": "0px",
-      height: "calc(0% -  2px -  2px)",
+      height: "calc(0% -  0px -  0px)",
       left: "0px",
       top: "0px",
-      width: "calc(0% - 0px - 0px)",
+      width: "calc(0% - 0px - 0px - 0px)",
     });
   });
 });

package/src/helpers/__tests__/model-helper.spec.ts

@@ -9,6 +9,9 @@ describe("inflateScanState", () => {
   it("should inflateScanState", () => {
     expect(inflateScanState()).toStrictEqual({
       Version: "1.0.0",
+      ScanMovement: {
+        Version: '1.1.0',
+      },
       Display: {
         Version: "1.0.0",
         Brightness: 50,
@@ -19,6 +22,7 @@ describe("inflateScanState", () => {
         ThresholdLower: 0,
         ThresholdUpper: 100,
       },
+      Colour: null,
       CurrentView: ScanView.Volume,
       Slice: {
         Version: "1.0.0",
@@ -40,31 +44,41 @@ describe("inflateScanState", () => {
         InteractionMode: ViewInteractiveMode.STATIC,
       },
       Orientations: {
-        Version: "1.0.0",
+        Version: '1.0.0',
         Transverse: {
-          Version: "1.0.0",
-          View: ScanView.Transverse,
-          VFlip: false,
-          HFlip: false,
+          Version: '1.0.0',
+          Visibility: true,
+          VerticalFlip: false,
+          HorizontalFlip: false,
           Rotation: 0,
           Slice: 0,
         },
         Sagittal: {
-          Version: "1.0.0",
-          View: ScanView.Transverse,
-          VFlip: false,
-          HFlip: false,
+          Version: '1.0.0',
+          Visibility: true,
+          VerticalFlip: false,
+          HorizontalFlip: false,
           Rotation: 0,
           Slice: 0,
         },
         Coronal: {
-          Version: "1.0.0",
-          View: ScanView.Transverse,
-          VFlip: false,
-          HFlip: false,
+          Version: '1.0.0',
+          Visibility: true,
+          VerticalFlip: false,
+          HorizontalFlip: false,
           Rotation: 0,
           Slice: 0,
         },
+        Volume: {
+          Version: '1.1.0',
+          Visibility: true,
+          Inverted: {
+            Version: '1.1.0',
+            InvertedSagittal: false,
+            InvertedCoronal: false,
+            InvertedTransverse: false
+          }
+        }
       },
       Layout: {
         Version: "1.0.0",
@@ -95,6 +109,20 @@ describe("inflateScanState", () => {
           Version: "1.0.0",
           Value: false,
         },
+        Colour: {
+          Version: '1.1.0',
+          R: 0.75,
+          G: 0.75,
+          B: 0.75,
+          A: 1.0
+        },
+        HighlightColour: {
+          Version: '1.1.0',
+          R: 0.8,
+          G: 0.8,
+          B: 0.8,
+          A: 1.0
+        }
       },
     });
   });
@@ -107,6 +135,9 @@ describe("inflateInitialScanState", () => {
       XSlices: 0,
       YSlices: 0,
       ZSlices: 0,
+      XSpacing: 0,
+      YSpacing: 0,
+      ZSpacing: 0,
       Modality: "CT",
       HuUpper: 0,
       HuLower: 0,

package/src/helpers/layoutOverlayStyle.ts

@@ -1,29 +1,24 @@
 import { AnchorPoint, PositionData } from "@3cr/types-ts";
+import { isFullscreen } from "@/dataLayer/scanState";
 
-import { toNumber } from "@/helpers/utils";
-
-export function generateDivStyleForLayout(layout: PositionData) {
-  const padding = "0px";
-  const canvas = document.getElementById("unity-canvas");
-
-  const props = {} as any;
+export function generateDivStyleForLayout(layout: PositionData, canvas: HTMLCanvasElement) {
+  const padding: string = "0px";
+  const props: Record<string, any> = {} as any;
 
   if (layout.Anchor === AnchorPoint.TOP) {
     props["left"] = "50%";
     props["transform"] = "translateX(-50%)";
-  }
-  if (layout.Anchor === AnchorPoint.BOTTOM) {
+  } else if (layout.Anchor === AnchorPoint.BOTTOM) {
     props["left"] = "50%";
     props["transform"] = "translateX(-50%)";
-  }
-  if (layout.Anchor === AnchorPoint.LEFT) {
+  } else if (layout.Anchor === AnchorPoint.LEFT) {
     props["top"] = "50%";
     props["transform"] = "translateY(-50%)";
-  }
-  if (layout.Anchor === AnchorPoint.RIGHT) {
+  } else if (layout.Anchor === AnchorPoint.RIGHT) {
     props["top"] = "50%";
     props["transform"] = "translateY(-50%)";
   }
+
   if (
     layout.Anchor === AnchorPoint.TOP_LEFT ||
     layout.Anchor === AnchorPoint.TOP ||
@@ -52,7 +47,7 @@ export function generateDivStyleForLayout(layout: PositionData) {
     layout.Anchor === AnchorPoint.BOTTOM_LEFT ||
     layout.Anchor === AnchorPoint.BOTTOM_RIGHT
   ) {
-    props["bottom"] = "4px";
+    props["bottom"] = padding;
   }
   if (
     layout.Anchor === AnchorPoint.TOP_LEFT ||
@@ -80,26 +75,20 @@ export function generateDivStyleForLayout(layout: PositionData) {
   }
 
   props["width"] = `calc(${layout.MaxSize.X * 100}% - ${padding})`;
-  props["height"] = `calc(${layout.MaxSize.Y * 100}% - ${"2px"})`;
+  props["height"] = `calc(${layout.MaxSize.Y * 100}% - ${padding})`;
+
   if (layout.Anchor === AnchorPoint.CENTER) {
-    props["width"] = `calc(${
-      layout.MaxSize.X * 100
-    }% - ${padding} - ${padding})`;
-    props["height"] = `calc(${
-      layout.MaxSize.Y * 100
-    }% -  ${"2px"} -  ${"2px"})`;
+    const adjustment = !isFullscreen.value ? canvas.clientHeight / 3 : 0;
+    props["width"] = `calc(${ layout.MaxSize.X * 100 }% - ${adjustment}px - ${padding} - ${padding})`;
+    props["height"] = `calc(${ layout.MaxSize.Y * 100 }% -  ${padding} -  ${padding})`;
   }
 
   if (layout.AspectRatio === 1) {
     if (layout.MaxSize.X === 1) {
-      props["width"] = `calc(${
-        layout.MaxSize.Y * toNumber(canvas?.offsetHeight)
-      }px)`;
+      props["width"] = `calc(${layout.MaxSize.Y * canvas.clientHeight}px)`;
     }
     if (layout.MaxSize.Y === 1) {
-      props["height"] = `calc(${
-        layout.MaxSize.X * toNumber(canvas?.offsetWidth)
-      }px)`;
+      props["height"] = `calc(${layout.MaxSize.X * canvas.clientWidth}px)`;
     }
   }
 

package/src/helpers/modelHelper.ts

@@ -1,8 +1,18 @@
-import {AnchorPoint, CurrentScanState, InitialScanState, ScanView, ViewInteractiveMode,} from '@3cr/types-ts';
+import {
+  AnchorPoint, CurrentDataOverlayState,
+  CurrentScanState,
+  InitialDataOverlayState,
+  InitialScanState,
+  ScanView,
+  ViewInteractiveMode,
+} from '@3cr/types-ts';
 
 export function inflateScanState(): CurrentScanState {
   return {
     Version: '1.0.0',
+    ScanMovement: {
+      Version: '1.1.0',
+    },
     Display: {
       Version: '1.0.0',
       Brightness: 50,
@@ -37,34 +47,45 @@ export function inflateScanState(): CurrentScanState {
       Version: '1.0.0',
       Transverse: {
         Version: '1.0.0',
-        View: ScanView.Transverse,
-        VFlip: false,
-        HFlip: false,
+        Visibility: true,
+        VerticalFlip: false,
+        HorizontalFlip: false,
         Rotation: 0,
         Slice: 0,
       },
       Sagittal: {
         Version: '1.0.0',
-        View: ScanView.Transverse,
-        VFlip: false,
-        HFlip: false,
+        Visibility: true,
+        VerticalFlip: false,
+        HorizontalFlip: false,
         Rotation: 0,
         Slice: 0,
       },
       Coronal: {
         Version: '1.0.0',
-        View: ScanView.Transverse,
-        VFlip: false,
-        HFlip: false,
+        Visibility: true,
+        VerticalFlip: false,
+        HorizontalFlip: false,
         Rotation: 0,
         Slice: 0,
       },
+      Volume: {
+        Version: '1.1.0',
+        Visibility: true,
+        Inverted: {
+          Version: '1.1.0',
+          InvertedSagittal: false,
+          InvertedCoronal: false,
+          InvertedTransverse: false
+        }
+      }
     },
     Layout: {
       Version: '1.0.0',
       SwitchOnViewChange: false,
       PositionData: [],
     },
+    Colour: null,
     NavigationCube: {
       Version: '1.0.0',
       Transform: {
@@ -89,6 +110,20 @@ export function inflateScanState(): CurrentScanState {
         Version: '1.0.0',
         Value: false,
       },
+      Colour: {
+        Version: '1.1.0',
+        R: 0.75,
+        G: 0.75,
+        B: 0.75,
+        A: 1.0
+      },
+      HighlightColour: {
+        Version: '1.1.0',
+        R: 0.8,
+        G: 0.8,
+        B: 0.8,
+        A: 1.0
+      }
     },
   };
 }
@@ -99,6 +134,9 @@ export function inflateInitialScanState(): InitialScanState {
     XSlices: 0,
     YSlices: 0,
     ZSlices: 0,
+    XSpacing: 0,
+    YSpacing: 0,
+    ZSpacing: 0,
     Modality: 'CT',
     HuUpper: 0,
     HuLower: 0,
@@ -107,3 +145,17 @@ export function inflateInitialScanState(): InitialScanState {
     ColourPresets: [],
   };
 }
+
+export function inflateDataOverlayState(): CurrentDataOverlayState {
+  return {
+    Version: '1.1.0',
+    DataOverlay: []
+  };
+}
+
+export function inflateInitialDataOverlayState(): InitialDataOverlayState {
+  return {
+    Version: '1.1.0',
+    DataOverlay: inflateDataOverlayState()
+  };
+}

package/src/models/Callbacks.ts

@@ -1,2 +1,2 @@
-export type ViewerCallback = () => void;
-export type ViewerAsyncCallback = () => Promise<void>;
+export type ViewerCallback = (...args: any[]) => void;
+export type ViewerAsyncCallback = (...args: any[]) => Promise<void>;

package/src/models/LoadViewerOptions.ts

@@ -8,6 +8,7 @@ export interface LoadViewerOptions {
   OnLoadSavedSession?: ViewerCallback | ViewerAsyncCallback | undefined;
   OnShareToMobile?: ViewerCallback | ViewerAsyncCallback | undefined;
   OnSendTo3rdParty?: ViewerCallback | ViewerAsyncCallback | undefined;
+  OnEnableCloudStorage?: ViewerCallback | ViewerAsyncCallback | undefined;
   OnSaveSession?: ViewerCallback | ViewerAsyncCallback | undefined;
   OnClosePopup?: ViewerCallback | ViewerAsyncCallback | undefined;
   OnExitViewer?: ViewerCallback | ViewerAsyncCallback | undefined;
@@ -23,6 +24,7 @@ export const defaultLoadViewerOptions: LoadViewerOptions = {
   OnSaveSession: () => Promise.resolve(),
   OnSendTo3rdParty: () => Promise.resolve(),
   OnShareToMobile: () => Promise.resolve(),
+  OnEnableCloudStorage: () => Promise.resolve(),
   OnShare: () => Promise.resolve(),
   OnScreenshot: () => Promise.resolve(),
   OnErrorClose: () => Promise.resolve(),

package/src/models/LoadViewerPayload.ts

@@ -2,6 +2,7 @@ export interface LoadViewerPayload {
   Url: string;
   DecryptionKey: MftpDecryptionKey;
 }
+
 export interface MftpDecryptionKey {
   Key: string;
   Iv: string;

package/src/notifications/notification.ts

@@ -1,15 +1,13 @@
 import {
   InteractivityActions,
+  NavigationCubeActions,
   NotificationPayload,
   NotificationsActions,
 } from "@3cr/types-ts";
 import { useNotification } from "@kyvg/vue3-notification";
 const { notify } = useNotification();
 
-export async function handleNotification(
-  action: NotificationsActions,
-  message: string
-) {
+export async function handleNotification(action: NotificationsActions, message: string) {
   const notification = JSON.parse(message) as NotificationPayload;
 
   switch (notification.Action) {
@@ -17,6 +15,7 @@ export async function handleNotification(
     case InteractivityActions.in02:
     case InteractivityActions.in03:
     case InteractivityActions.in04:
+    case NavigationCubeActions.nc01:
       return;
     default:
   }

package/src/plugins/vuetify.ts

@@ -14,6 +14,7 @@ import { mdi } from "vuetify/iconsets/mdi";
 import { fa } from "vuetify/iconsets/fa";
 import { h, ref } from "vue";
 import liver from "@/components/icons/liver.vue";
+import { VTreeview, VTreeviewItem } from 'vuetify/labs/components';
 
 const customComponents: any = {
   liver,
@@ -22,6 +23,10 @@ export const disableTheme = ref<boolean>(false);
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 /* istanbul ignore next  -- @preserve */
 export default createVuetify({
+  components: {
+    VTreeview,
+    VTreeviewItem
+  },
   theme: disableTheme.value
     ? false
     : {

package/src/services/gpt/__tests__/gpt.service.spec.ts

@@ -0,0 +1,27 @@
+import {describe, expect, it, vi} from "vitest";
+import {GptResponsePayload, GptService} from "@/services/gpt/gpt.service";
+
+vi.mock('axios', async (importOriginal) => {
+  return {
+    ...(await importOriginal<typeof import('axios')>()),
+    create: () => ({
+      post: vi.fn()
+    })
+  };
+});
+
+describe('GptService tests', () => {
+  it('should instantiate', () => {
+    expect(GptService.Instantiate()).toBeTruthy();
+  });
+
+  it('should generate response', async () => {
+    const data: GptResponsePayload = { GptResponse: 'test', FollowupQuestions: [] };
+    const service = GptService.Instantiate();
+    vi.spyOn(service.client, 'post').mockResolvedValue({ data });
+
+    const response = await service.GenerateAnnotations('test', 0);
+    expect(response).toBeDefined();
+    expect(response).toStrictEqual({ data });
+  });
+});

package/src/services/gpt/gpt.service.ts

@@ -0,0 +1,27 @@
+import axios, { AxiosInstance, AxiosResponse } from "axios";
+
+export class GptService {
+  static Instantiate() {
+    return new GptService();
+  }
+
+  client: AxiosInstance = axios.create();
+
+  async GenerateAnnotations(title: string, question: number = 0): Promise<AxiosResponse<GptResponsePayload>> {
+    return this.client.post(
+      "https://test.api.singular.health/api/GPT/Smart/Annotation",
+      null,
+      { params: { annotationTitle: title, question } }
+    );
+  }
+}
+
+export interface GptResponsePayload {
+  GptResponse: string;
+  FollowupQuestions: GptQuestion[];
+}
+
+export interface GptQuestion {
+  Question: string;
+  ApiPreFilledRequestKey: number;
+}

package/static/3cr-types-browser/index.ts

@@ -0,0 +1,74 @@
+// Interfaces
+export { FrontEndInterfaces } from './types/FrontEndInterfaces';
+
+// Actions
+export { FileManagementActions } from './types/FileManagementActions';
+export { SlidersActions } from './types/SlidersActions';
+export { ScanStateActions } from './types/ScanStateActions';
+export { ViewSelectionActions } from './types/ViewSelectionActions';
+export { ScanOrientationActions } from './types/ScanOrientationActions';
+export { InteractivityActions } from './types/InteractivityActions';
+export { NotificationsActions } from './types/NotificationsActions';
+export { PresetsActions } from './types/PresetsActions';
+export { ScanMovementActions } from './types/ScanMovementActions';
+export { NavigationCubeActions } from './types/NavigationCubeActions';
+export { LayoutActions } from './types/LayoutActions';
+export { DataOverlayActions } from './types/DataOverlayActions';
+
+// Type Definitions
+export type { Action } from './types/Action';
+export type { ActionData } from './types/ActionData';
+export type { CallToAction } from './types/CallToAction';
+export type { DecryptionKey } from './types/DecryptionKey';
+export type { LoadDataSet } from './types/LoadDataSet';
+export type { DataOverlay } from './types/DataOverlay';
+export type { DataOverlayEvent } from './types/DataOverlayEvent';
+export type { DisplaySettings } from './types/DisplaySettings';
+export type { SlicerData } from './types/SlicerData';
+export type { SettingsData } from './types/SettingsData';
+export type { ViewOrientation } from './types/ViewOrientation';
+export type { InvertTransformData } from './types/InvertTransformData';
+export type { VolumeOrientation } from './types/VolumeOrientation';
+export type { ViewOrientations } from './types/ViewOrientations';
+export type { Vector2Data } from './types/Vector2Data';
+export type { PositionData } from './types/PositionData';
+export type { LayoutData } from './types/LayoutData';
+export type { GradientKeys } from './types/GradientKeys';
+export type { AlphaKeys } from './types/AlphaKeys';
+export type { ColourPresetData } from './types/ColourPresetData';
+export type { NavigationCubeTransform } from './types/NavigationCubeTransform';
+export type { InteractivityState } from './types/InteractivityState';
+export type { ColourData } from './types/ColourData';
+export type { NavigationCubeData } from './types/NavigationCubeData';
+export type { ScanMovementData } from './types/ScanMovementData';
+export type { CurrentScanState } from './types/CurrentScanState';
+export type { GreyscalePresetData } from './types/GreyscalePresetData';
+export type { InitialScanState } from './types/InitialScanState';
+export type { LoadSessionState } from './types/LoadSessionState';
+export type { LocalLoadDataset } from './types/LocalLoadDataset';
+export type { SliderValue } from './types/SliderValue';
+export type { Object } from './types/Object';
+export type { DataOverlayData } from './types/DataOverlayData';
+export type { CurrentDataOverlayState } from './types/CurrentDataOverlayState';
+export type { EmptyPayload } from './types/EmptyPayload';
+export type { ViewToggleData } from './types/ViewToggleData';
+export type { RotationValue } from './types/RotationValue';
+export type { FlipValue } from './types/FlipValue';
+export type { EnumPayload } from './types/EnumPayload';
+export type { NotificationPayload } from './types/NotificationPayload';
+export type { MovementData } from './types/MovementData';
+export type { Vector3Data } from './types/Vector3Data';
+export type { VectorMovementData } from './types/VectorMovementData';
+export type { InitialDataOverlayState } from './types/InitialDataOverlayState';
+export type { ObjectVisible } from './types/ObjectVisible';
+export type { ObjectSize2D } from './types/ObjectSize2D';
+export type { ObjectColour } from './types/ObjectColour';
+export type { ObjectIcon } from './types/ObjectIcon';
+export type { ObjectSize } from './types/ObjectSize';
+export type { ObjectInvert } from './types/ObjectInvert';
+
+// Enum Definitions
+export { ScanView } from './types/ScanView';
+export { AnchorPoint } from './types/AnchorPoint';
+export { ViewInteractiveMode } from './types/ViewInteractiveMode';
+export { InteractionType } from './types/InteractionType';

package/static/3cr-types-browser/types/Action.ts

@@ -0,0 +1,6 @@
+import {ActionData} from "./ActionData";
+
+export interface Action {
+  ActionType: number;
+  ActionData: ActionData
+}

package/static/3cr-types-browser/types/ActionData.ts

@@ -0,0 +1,4 @@
+export interface ActionData {
+  Description: string;
+  Url: string;
+}

package/static/3cr-types-browser/types/AlphaKeys.ts

@@ -0,0 +1,5 @@
+export interface AlphaKeys {
+  Version: string,
+  Alpha: number,
+  Time: number
+}