@3cr/viewer-browser 0.0.162 → 0.0.194

package/index.html

@@ -18,24 +18,21 @@
     import {registerViewer, loadViewer} from './index.ts';
 
     const { StatsigClient, SessionReplay, runStatsigAutoCapture, runStatsigSessionReplay } = window.Statsig;
+
     const client = new StatsigClient(
         "client-YaAjxOTTRbuSN3peDAwXEzErieXpI744a3OHDgonzvV",
         { userID: undefined },
-        {environment: {tier: 'production'}}
+        {environment: {tier: 'development'}}
     );
-
-    // const replayer = new SessionReplay(client);
-    // console.log(replayer)
+    client.initializeSync()
 
     runStatsigAutoCapture(client);
     window.playgroundStatsigClient = client
-    // runStatsigSessionReplay(client);
-
 
 
-    const dynamicConfig = window.playgroundStatsigClient.getDynamicConfig("3cr_viewer_version");
+    const dynamicConfig = client.getDynamicConfig("3cr_viewer_version");
     const testVersion = (window.location.href.includes('test.') || window.location.href.includes('localhost')) && new URLSearchParams(window.location.search).get("build_version")
-    const version = testVersion ?? dynamicConfig.value["sdkVersion"] ?? "1.0.0_381";
+    const version = testVersion ?? dynamicConfig.value["sdkVersion"] ?? "1.1.0";
 
     client.initializeAsync().then(() => {
       registerViewer(version).then(() => {

package/index.ts

@@ -57,11 +57,16 @@ export async function loadViewer(
   await (mountedApp as any).loadInstance(payload, options);
 }
 
+export async function loadSession(url: string): Promise<void> {
+  if (!mountedApp) {
+    throw new Error("Please call `registerViewer(version: string)` first");
+  }
+  await (mountedApp as any).loadSession(url);
+}
+
 export async function ejectViewer() {
-  console.log("Ejected Viewer");
   const modal = document.getElementById(modalId);
   const styleSheet = document.getElementById(injectedStyleId);
-
   modal?.remove();
   styleSheet?.remove();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3cr/viewer-browser",
-  "version": "0.0.162",
+  "version": "0.0.194",
   "main": "./dist/Viewer3CR.umd.js",
   "module": "dist/Viewer3CR.umd.js",
   "homepage": "https://docs.3cr.singular.health",
@@ -22,10 +22,12 @@
   },
   "dependencies": {
     "@3cr/sdk-browser": "^1.0.13",
-    "@3cr/types-ts": "^1.0.9",
+    "@3cr/types-ts": "file:static/3cr-types-browser",
     "@kyvg/vue3-notification": "^3.2.1",
     "@mdi/font": "6.2.95",
     "@mdi/js": "^7.4.47",
+    "axios": "^1.7.2",
+    "intro.js": "^7.2.0",
     "logrocket": "^8.1.0",
     "roboto-fontface": "*",
     "vue": "^3.4.21",

package/playground/index.html

@@ -80,17 +80,19 @@
   <script type="module">
 
     const { StatsigClient, runStatsigAutoCapture } = window.Statsig;
+    const isTest = (window.location.href.includes('test.') || window.location.href.includes('localhost'))
     const client = new StatsigClient(
         "client-YaAjxOTTRbuSN3peDAwXEzErieXpI744a3OHDgonzvV",
         { userID: undefined },
-        {environment: {tier: 'production'}}
+        {environment: {tier: isTest ? 'development' : 'production'}}
     );
+    client.initializeSync()
     runStatsigAutoCapture(client);
     window.playgroundStatsigClient = client
 
-    const dynamicConfig = window.playgroundStatsigClient.getDynamicConfig("3cr_viewer_version");
-    const testVersion = (window.location.href.includes('test.') || window.location.href.includes('localhost')) && new URLSearchParams(window.location.search).get("build_version")
-    const version = testVersion ?? dynamicConfig.value["sdkVersion"] ?? "1.0.0_381";
+    const dynamicConfig = client.getDynamicConfig("3cr_viewer_version");
+    const testVersion = (isTest) && new URLSearchParams(window.location.search).get("build_version")
+    const version = testVersion ?? dynamicConfig.value["sdkVersion"] ?? "1.1.0";
 
     client.initializeAsync().then(() => {
       window.registerViewer(version).then(() => {

package/src/App.vue

@@ -20,7 +20,7 @@ import {
   defaultLoadViewerOptions,
   LoadViewerOptions,
 } from "@/models/LoadViewerOptions";
-import { isDemo } from "@/demo/options";
+import { isDemo } from "@/components/demo/options";
 import LogRocket from "logrocket";
 
 if (isDemo.value) {
@@ -34,12 +34,10 @@ const payload = ref<LoadViewerPayload>({
     Key: "KUc722X1y4w42M+jCf9a3+6EGz66z7UMWK3m2aMqGxM=",
   },
 });
+
 const options = ref<LoadViewerOptions>(defaultLoadViewerOptions);
 
 const mftpWebGL3DRModal = ref<typeof MftpWebGL3DRModal | null>(null);
-defineExpose({
-  loadInstance,
-});
 
 async function loadInstance(
   payloadIncoming: LoadViewerPayload | undefined,
@@ -51,7 +49,17 @@ async function loadInstance(
   await nextTick();
   unref(mftpWebGL3DRModal)?.alterValue(true);
 }
+
+async function loadSession(url: string): Promise<void> {
+  await unref(mftpWebGL3DRModal)?.loadSession(url);
+}
+
+defineExpose({
+  loadInstance,
+  loadSession,
+});
 </script>
+
 <style>
 .material-icons-outlined,
 .material-symbols-outlined {

package/src/__tests__/app.spec.ts

@@ -1,25 +1,14 @@
-import { expect, describe, it, vi } from "vitest";
+import { expect, describe, it } from "vitest";
 import { shallowMountVuetify } from "~/helper";
 import App from "@/App.vue";
 
 const wrapper = shallowMountVuetify(App);
 
-vi.mock("@3cr/sdk-browser", async (importOriginal) => {
-  const mod = (await importOriginal()) as object;
-  return {
-    ...mod,
-    // replace some exports
-    registerVersion: vi.fn(),
-    createInstance: vi.fn(),
-    executePayload: vi.fn(),
-    registerOnPayloadHandler: vi.fn(),
-  };
-});
-
 describe("App.vue", () => {
   it("should inflate component", () => {
     expect(wrapper).toBeTruthy();
   });
+
   it("should loadScan", async () => {
     await wrapper.vm.loadInstance(undefined, {});
     expect(wrapper).toBeTruthy();

package/src/assets/magic_wand.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-3 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="icomoon-ignore">
+</g>
+<path d="M-0.007 28.236l13.916-13.916 0.754 0.754-13.916 13.916-0.754-0.754z" fill="#000000">
+
+<path d="M9.973 10.453h4.267v1.067h-4.267v-1.067z" fill="#000000">
+
+<path d="M21.707 10.453h4.267v1.067h-4.267v-1.067z" fill="#000000">
+
+<path d="M17.44 14.72h1.067v4.267h-1.067v-4.267z" fill="#000000">
+
+<path d="M17.44 2.987h1.067v4.267h-1.067v-4.267z" fill="#000000">
+
+<path d="M23.991 5.717l-3.017 3.017-0.754-0.754 3.017-3.017 0.754 0.754z" fill="#000000">
+
+<path d="M23.246 17.042l-3.017-3.017 0.754-0.754 3.017 3.017-0.754 0.754z" fill="#000000">
+
+<path d="M14.986 8.741l-3.017-3.017 0.754-0.754 3.017 3.017-0.754 0.754z" fill="#000000">
+
+</svg>

package/src/components/WebGL3DR.vue

@@ -1,82 +1,46 @@
 <template>
-  <div
-    id="screenshotWindow"
-    class=""
-    @mouseover="emit('hover', true)"
-    @mouseout="emit('hover', false)"
-  >
+  <div id="webgl-container">
     <canvas
-      id="unity-canvas"
+      id="canvas"
+      ref="canvas"
       width="100%"
-      height="calc(100vh - 48px)"
+      height="100%"
       tabindex="-1"
-      style="
-        width: 100%;
-        height: calc(100vh - 50px);
-        background-size: cover !important;
-      "
     >
     </canvas>
-    <div id="parent-canvas" ref="parent_canvas">
+    <div id="overlay" ref="overlay">
       <slot></slot>
     </div>
   </div>
 </template>
-<script setup lang="ts">
-import { defineEmits, nextTick, onMounted, ref } from "vue";
 
-import {
-  createInstance,
-  executePayload,
-  registerOnPayloadHandler,
-} from "@3cr/sdk-browser";
-import {
-  FrontEndInterfaces,
-  FrontEndPayload,
-} from "@3cr/sdk-browser/types/payload";
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useViewer3cr } from '@/dataLayer/useViewer3cr';
 
-const unityInstance = ref<any>(null);
+const viewer3cr = useViewer3cr();
+const canvas = ref<HTMLCanvasElement>();
+const overlay = ref<HTMLDivElement>();
 
 const emit = defineEmits<{
   instance_loaded: [void];
-  on_payload: [FrontEndInterfaces, string, string];
-  hover: [boolean];
 }>();
 
-defineExpose({
-  sendPayload,
-  receiveMessageFromUnity,
-});
-
 onMounted(async () => {
-  await nextTick();
-  const canvas = document.querySelector("#unity-canvas") as HTMLCanvasElement;
-
-  await registerOnPayloadHandler(receiveMessageFromUnity);
+  if (!canvas.value || !overlay.value) {
+    throw new Error('One or more canvases failed to load');
+  }
 
   /* c8 ignore start */
   if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
     // Mobile device style: fill the whole browser client area with the game canvas:
     const meta = document.createElement("meta");
     meta.name = "viewport";
-    meta.content =
-      "width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes";
+    meta.content = "width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes";
     document.getElementsByTagName("head")[0].appendChild(meta);
-
-    canvas.style.width = "100%";
-    canvas.style.height = "80vh";
-    canvas.style.position = "fixed";
-
-    document.body.style.textAlign = "left";
   }
-  /* c8 ignore stop */
-  await nextTick();
-  unityInstance.value = await createInstance(canvas);
-
-  await nextTick();
 
-  /* c8 ignore start */
-  if (navigator.storage) {
+  if (navigator.storage && navigator.storage.estimate) {
     const quota = await navigator.storage.estimate();
     if (quota) {
       const percentageUsed = (quota.usage! / quota.quota!) * 100;
@@ -87,55 +51,52 @@ onMounted(async () => {
   }
   /* c8 ignore stop */
 
-  emit("instance_loaded");
   // Overlay scroll events to the container instance
-  const fixedDiv = document.getElementById("parent-canvas");
   /* c8 ignore start */
-  fixedDiv?.addEventListener("wheel", function (e: WheelEvent) {
-    e.preventDefault();
-    const evt = new WheelEvent("wheel", {
-      ...e,
-      deltaY: e.deltaY,
-    });
-    canvas.dispatchEvent(evt);
-  });
-  function injectEventListener(eventType: keyof HTMLElementEventMap) {
-    fixedDiv?.addEventListener(eventType, function (e: Event) {
+  function injectEventListener(type: keyof HTMLElementEventMap) {
+    overlay.value!.addEventListener(type, (e: Event) => {
       e.preventDefault();
-      const evt = new MouseEvent(eventType, {
-        ...e,
-      });
-      canvas.dispatchEvent(evt);
+      canvas.value!.dispatchEvent(new MouseEvent(type, e));
     });
   }
-  injectEventListener("mousedown");
-  injectEventListener("mouseup");
-  injectEventListener("mouseout");
-  injectEventListener("mouseover");
-  injectEventListener("mouseenter");
-  injectEventListener("mouseleave");
-  injectEventListener("mousemove");
-  injectEventListener("contextmenu");
-  injectEventListener("dblclick");
 
-  fixedDiv?.addEventListener(
-    "*",
-    function (ev) {
-      console.log(`${ev.type}`);
-      ev.preventDefault();
-      const evt = new Event(ev.type, { ...ev });
-      canvas.dispatchEvent(evt);
-    }
-    // false
-  );
+  overlay.value!.addEventListener("wheel", (e: WheelEvent) => {
+    e.preventDefault();
+    canvas.value!.dispatchEvent(new WheelEvent(e.type, e));
+  });
+
+  injectEventListener('click');
+  injectEventListener('dblclick');
+  injectEventListener('auxclick');
+  injectEventListener('mousedown');
+  injectEventListener('mousemove');
+  injectEventListener('mouseup');
+  injectEventListener('mouseout');
+  injectEventListener('mouseover');
+  injectEventListener('mouseenter');
+  injectEventListener('mouseleave');
+  injectEventListener('contextmenu');
+
+  await viewer3cr.register(canvas.value);
+  emit("instance_loaded");
 
   /* c8 ignore stop */
 });
 
-async function sendPayload(payload: string) {
-  await executePayload(JSON.parse(payload));
+defineExpose({ canvas });
+</script>
+
+<style scoped lang="scss">
+#webgl-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
 }
-function receiveMessageFromUnity(json: FrontEndPayload) {
-  emit("on_payload", json.Interface, json.Action, json.Message);
+
+#canvas, #overlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
 }
-</script>
+</style>

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

@@ -1,56 +1,37 @@
-import { expect, test, vi } from "vitest";
-import WebGL3DR from "../WebGL3DR.vue";
+import { expect, describe, it } from "vitest";
 import { registerOnPayloadHandler, createInstance } from "@3cr/sdk-browser";
 import { mountVuetify } from "~/helper";
-import { FileManagementActions, FrontEndInterfaces } from "@3cr/types-ts";
-
-vi.mock("@3cr/sdk-browser", async (importOriginal) => {
-  const mod = (await importOriginal()) as object;
-  return {
-    ...mod,
-    registerVersion: vi.fn(),
-    createInstance: vi.fn(),
-    executePayload: vi.fn(),
-    registerOnPayloadHandler: vi.fn(),
-  };
-});
-
-const wrapper = mountVuetify(WebGL3DR);
+import { nextTick } from "vue";
+import WebGL3DR from "../WebGL3DR.vue";
 
-test("registers payload handler", () => {
-  expect(registerOnPayloadHandler).toHaveBeenCalled();
-});
-test("creates instance", () => {
-  expect(createInstance).toHaveBeenCalled();
-});
-test("creates instance", () => {
-  wrapper.vm.receiveMessageFromUnity({
-    Action: FileManagementActions.fm01 as any,
-    Message: "testing message",
-    Interface: FrontEndInterfaces.file_management as any,
+describe('WebGL3DR spec', () => {
+  it("creates instance", async () => {
+    mountVuetify(WebGL3DR);
+    await nextTick();
+    expect(createInstance).toHaveBeenCalled();
+    expect(registerOnPayloadHandler).toHaveBeenCalled();
   });
 
-  expect(wrapper.emitted()["on_payload"]).toStrictEqual([
-    ["file_management", "fm_01", "testing message"],
-  ]);
-});
-
-test("scrolling", () => {
-  const parentCanvas = wrapper.find("#parent-canvas");
-  parentCanvas.trigger("wheel");
-});
-
-test("mouseover", () => {
-  const parentCanvas = wrapper.find("#screenshotWindow");
-  parentCanvas.trigger("mouseover");
-
-  expect(wrapper.emitted()["hover"]).toStrictEqual([[true]]);
-});
+  it("should emit wheel event", () => {
+    const wrapper = mountVuetify(WebGL3DR);
+    const overlay = wrapper.find("#overlay");
+    overlay.trigger("wheel");
+    expect(wrapper.emitted()["wheel"]).toBeTruthy();
+  });
 
-test("mouseout", () => {
-  const parentCanvas = wrapper.find("#screenshotWindow");
-  parentCanvas.trigger("mouseover");
-  parentCanvas.trigger("mouseout");
+  it("should emit mouseover event", () => {
+    const wrapper = mountVuetify(WebGL3DR);
+    const overlay = wrapper.find("#overlay");
+    overlay.trigger("mouseover");
+    expect(wrapper.emitted()["mouseover"]).toBeTruthy();
+  });
 
-  expect(wrapper.emitted()["hover"]).toStrictEqual([[true], [true], [false]]);
+  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/{demo → components/demo}/DemoModal.vue

@@ -37,7 +37,7 @@ const modalState = computed({
       <v-card-text> support@singular.health </v-card-text>
       <v-card-actions>
         <v-spacer />
-        <v-btn color="primary" @click="modalState = false"> Thanks! </v-btn>
+        <v-btn data-testid="close" color="primary" @click="modalState = false"> Thanks! </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>

package/src/{demo → components/demo}/DemoPatientModal.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import {PRICING_URL} from "@/components/demo/options";
 
 export interface Props {
   modal: boolean;
@@ -39,6 +40,7 @@ function openUrl(url: string) {
       </v-card-text>
       <v-card-actions>
         <v-btn
+          data-testid="close"
           color="error"
           @click="modalState = false"
           :disabled="!isModalOpen"
@@ -47,9 +49,10 @@ function openUrl(url: string) {
         </v-btn>
         <v-spacer />
         <v-btn
+          data-testid="select-plan"
           variant="tonal"
           color="success"
-          @click="openUrl('https://3dicomviewer.com/pricing')"
+          @click="openUrl(PRICING_URL)"
         >
           Select a Plan
         </v-btn>

package/src/components/demo/__tests__/DemoModal.spec.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect } from "vitest";
+import {mountVuetify, openAllModals} from "~/helper";
+import DemoModal from "@/components/demo/DemoModal.vue";
+
+describe('DemoModal tests', () => {
+  it('should mount', () => {
+    const props = { modal: true };
+    const wrapper = mountVuetify(DemoModal, props);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should close', async () => {
+    const props = { modal: true };
+    const wrapper = mountVuetify(DemoModal, props);
+    const button = wrapper.findComponent('[data-testid="close"]');
+    await button.trigger('click');
+    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+  });
+
+  it('should open via input', async () => {
+    const props = { modal: false };
+    const wrapper = mountVuetify(DemoModal, props);
+    await openAllModals(wrapper);
+  });
+});

package/src/components/demo/__tests__/DemoPatientModal.spec.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect, vi } from "vitest";
+import { mountVuetify, openAllModals } from "~/helper";
+import { PRICING_URL } from "@/components/demo/options";
+import DemoPatientModal from "@/components/demo/DemoPatientModal.vue";
+
+describe('DemoPatientModal tests', () => {
+  it('should mount', () => {
+    const props = { modal: true, isModalOpen: true };
+    const wrapper = mountVuetify(DemoPatientModal, props);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should close', async () => {
+    const props = { modal: true, isModalOpen: true };
+    const wrapper = mountVuetify(DemoPatientModal, props);
+    const button = wrapper.findComponent('[data-testid="close"]');
+    await button.trigger('click');
+    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+  });
+
+  it('should open pricing url', async () => {
+    vi.stubGlobal('open', vi.fn());
+    const spy = vi.spyOn(window, 'open');
+    const props = { modal: true, isModalOpen: true };
+    const wrapper = mountVuetify(DemoPatientModal, props);
+    const button = wrapper.findComponent('[data-testid="select-plan"]');
+    await button.trigger('click');
+    expect(spy).toHaveBeenCalledWith(PRICING_URL, '_self');
+    vi.restoreAllMocks();
+  });
+
+  it('should open via input', async () => {
+    const props = { modal: false, isModalOpen: true };
+    const wrapper = mountVuetify(DemoPatientModal, props);
+    await openAllModals(wrapper);
+  });
+});

package/src/components/demo/__tests__/options.spec.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { demoLicenceOptions, demoPatientOptions } from "@/components/demo/options";
+import { LoadViewerOptions } from "@/models/LoadViewerOptions";
+
+describe('options tests', () => {
+  it('should call demo license options', () => {
+    Object.keys(demoLicenceOptions).forEach(key => {
+      const k = key as keyof LoadViewerOptions;
+      const fn = demoLicenceOptions[k];
+      if (fn) {
+        expect(fn).not.toThrow();
+      }
+    });
+  });
+
+  it('should call demo patient options', () => {
+    Object.keys(demoPatientOptions).forEach(key => {
+      const k = key as keyof LoadViewerOptions;
+      const fn = demoPatientOptions[k];
+      if (fn) {
+        expect(fn).not.toThrow();
+      }
+    });
+  });
+});

package/src/components/demo/licence/DemoLicenceEnableCloudStorageModal.vue

@@ -0,0 +1,64 @@
+<template>
+  <v-dialog width="600" v-model:model-value="modalState">
+    <v-card theme="dark" class="motif-background">
+      <v-card-title class="text-center font-weight-bold">
+        Enable Cloud Storage
+      </v-card-title>
+      <v-card-text>
+        <p style="text-align: center;">Enable annual storage for just <b>5 credits</b>.</p>
+        <br />
+        <div>
+          <v-row no-gutters v-for="(benefit, idx) in benefits" :key="idx">
+            <v-col class="d-flex justify-end" cols="2">
+              <v-icon class="mr-2" color="success" icon="check" />
+            </v-col>
+            <v-col>
+              {{ benefit }}
+            </v-col>
+          </v-row>
+        </div>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn data-testid="close" color="red" @click="modalState = false">
+          Continue with Demo
+        </v-btn>
+        <v-spacer />
+        <v-btn data-testid="confirm" variant="flat" color="success" @click="openUrl(PRICING_URL)">
+          Enable Cloud Storage
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { PRICING_URL, openUrl } from '@/components/demo/options';
+
+interface Props {
+  modal?: boolean;
+}
+
+type Emits = {
+  'update:modal': [value: boolean];
+};
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<Emits>();
+
+const benefits = [
+  'Secure storage',
+  'Access your scan from any device',
+  'Keep your medical imaging records at your fingertips'
+];
+
+const modalState = computed({
+  get(): boolean {
+    return props.modal;
+  },
+  set(value: boolean): void {
+    emit('update:modal', value);
+  }
+});
+</script>