@3cr/viewer-browser 0.0.61 → 0.0.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3cr/viewer-browser",
-  "version": "0.0.61",
+  "version": "0.0.62",
   "main": "./dist/Viewer3CR.umd.js",
   "module": "dist/Viewer3CR.umd.js",
   "homepage": "https://docs.3cr.singular.health",
@@ -14,6 +14,7 @@
     "deploy": "npm version --no-git-tag-version patch && npm run build && npm publish",
     "preview": "vite preview",
     "test": "vitest",
+    "test:ui": "vitest --ui",
     "compile:scripts": "tsc --project tsconfig.build-scripts.json",
     "deploy:playground": "npm run compile:scripts && node scripts/postPublish.js",
     "coverage": "vitest run --coverage"

package/src/components/modal/DemoPatientModal.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+export interface Props {
+  modal: boolean;
+  isModalOpen: boolean;
+}
+
+const emit = defineEmits<{
+  "update:modal": [value: boolean];
+}>();
+
+const props = withDefaults(defineProps<Props>(), {
+  modal: false,
+  isModalOpen: true,
+});
+
+const modalState = computed({
+  get() {
+    return props.modal;
+  },
+  set(value) {
+    emit("update:modal", value);
+  },
+});
+function openUrl(url: string) {
+  window.open(url, "_self");
+}
+</script>
+
+<template>
+  <v-dialog v-model:model-value="modalState">
+    <v-card class="pa-1 ma-auto position-relative" max-width="450">
+      <v-card-title>Purchase 3Dicom Viewer</v-card-title>
+      <v-card-text> Thank you for trying 3Dicom Online Viewer! </v-card-text>
+      <v-card-text>
+        This instance of the Online Viewer is a Demo instance. If you would like
+        to see your scans in 3D, please choose a plan for 3DICOM
+      </v-card-text>
+      <v-card-actions>
+        <v-btn
+          color="error"
+          @click="modalState = false"
+          :disabled="!isModalOpen"
+        >
+          Continue with Viewer
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          variant="tonal"
+          color="success"
+          @click="openUrl('https://3dicomviewer.com/pricing')"
+        >
+          Select a Plan
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>

package/src/components/modal/MftpWebGL3DRModal.vue

@@ -1,6 +1,7 @@
 <!-- /* c8 ignore start */ -->
 <template>
   <DemoModal v-model:modal="m_demo" />
+  <DemoPatientModal v-model:modal="m_demoPatient" :is-modal-open="value" />
   <v-dialog
     id="cr-viewer"
     class="pa-0 ma-0 overflow-y-auto overflow-x-hidden"
@@ -161,7 +162,9 @@
 
         <v-spacer />
         <div class="font-weight-bold">
-          <span v-if="isDemo">[DEMO]&nbsp;</span>Not for Diagnostic Use
+          <span v-if="isDemo" class="text-capitalize"
+            >[3DICOM {{ demoType }} Demo]&nbsp;</span
+          >Not for Diagnostic Use
         </div>
         <v-spacer />
         <v-btn
@@ -693,6 +696,10 @@ import {
   LoadViewerPayload,
 } from "../../../index";
 
+import { useNotification } from "@kyvg/vue3-notification";
+
+const { notify } = useNotification();
+
 const emit = defineEmits<{
   instanceLoaded: [void];
   snap: [void];
@@ -715,8 +722,9 @@ const props = withDefaults(defineProps<Props>(), {
 });
 const isDemo = ref<boolean>(false);
 let m_demo = ref<boolean>(false);
+let m_demoPatient = ref<boolean>(false);
 
-const demoOptions: LoadViewerOptions = {
+const demoLicenceOptions: LoadViewerOptions = {
   OnClosePopup: () => Promise.resolve(),
   OnExitViewer: () => {
     m_demo.value = true;
@@ -747,11 +755,54 @@ const demoOptions: LoadViewerOptions = {
   },
 };
 
+const demoPatientOptions: LoadViewerOptions = {
+  OnClosePopup: () => Promise.resolve(),
+  OnExitViewer: () => {
+    m_demoPatient.value = true;
+  },
+  OnLoadNewDicomSeries: () => {
+    m_demoPatient.value = true;
+  },
+  OnDownloadDicomSeries: () => {
+    m_demoPatient.value = true;
+  },
+  OnLoadSavedSession: () => {
+    m_demoPatient.value = true;
+  },
+  OnSaveSession: () => {
+    m_demoPatient.value = true;
+  },
+  OnSendTo3rdParty: () => {
+    m_demoPatient.value = true;
+  },
+  OnShareToMobile: () => {
+    m_demoPatient.value = true;
+  },
+  OnShare: () => {
+    m_demoPatient.value = true;
+  },
+  OnScreenshot: () => {
+    m_demoPatient.value = true;
+  },
+};
+
+const demoType = computed(() => {
+  const urlParams = new URLSearchParams(window.location.search);
+  return urlParams.get("demoType") || "licence";
+});
+
 function executeOption(key: keyof LoadViewerOptions) {
   if (unref(isDemo)) {
-    const functionToExecute = demoOptions[key];
-    if (functionToExecute !== undefined) {
-      functionToExecute();
+    if (unref(demoType) === "licence") {
+      const functionToExecute = demoLicenceOptions[key];
+      if (functionToExecute !== undefined) {
+        functionToExecute();
+      }
+    } else if (unref(demoType) === "patient") {
+      const functionToExecute = demoPatientOptions[key];
+      if (functionToExecute !== undefined) {
+        functionToExecute();
+      }
     }
   } else {
     const functionToExecute = unref(props.options)[key];
@@ -1175,10 +1226,6 @@ async function i_fileManagement(action: string, message: string) {
   await hoverOverCanvas(false);
 }
 
-import { useNotification } from "@kyvg/vue3-notification";
-
-const { notify } = useNotification();
-
 async function i_notifications(action: string, message: string) {
   const notification = JSON.parse(message) as NotificationPayload;
 

package/src/components/modal/__tests__/mftp-webgl-3dr-modal.spec.ts

@@ -9,6 +9,8 @@ import {
   AnchorPoint,
   FileManagementActions,
   FrontEndInterfaces,
+  InteractivityActions,
+  NotificationPayload,
   PositionData,
   PresetsActions,
   ScanMovementActions,
@@ -29,6 +31,15 @@ vi.mock("@3cr/sdk-browser", async (importOriginal) => {
     registerOnPayloadHandler: vi.fn(),
   };
 });
+vi.mock("@kyvg/vue3-notification", async (importOriginal) => {
+  const mod = (await importOriginal()) as object;
+  return {
+    ...mod,
+    useNotification: {
+      notify: vi.fn(),
+    },
+  };
+});
 
 describe("MftpWebGL3DRModal.vue", () => {
   let wrapper = shallowMountVuetify(
@@ -292,6 +303,14 @@ describe("MftpWebGL3DRModal.vue", () => {
     wrapper.findComponent("#close-dialog-prompt");
   });
 
+  it("should closeModal", async () => {
+    wrapper.vm.closeModal();
+    wrapper.vm.alterValue(false);
+
+    await flushPromises();
+    wrapper.findComponent("#close-dialog-prompt");
+  });
+
   it("should handleOnPayload file_management", async () => {
     wrapper.vm.handleOnPayload(
       FrontEndInterfaces.file_management,
@@ -308,7 +327,24 @@ describe("MftpWebGL3DRModal.vue", () => {
     );
   });
   it("should handleOnPayload notifications", async () => {
-    wrapper.vm.handleOnPayload(FrontEndInterfaces.notifications, "123", "123");
+    wrapper.vm.handleOnPayload(
+      FrontEndInterfaces.notifications,
+      "123",
+      JSON.stringify({
+        Action: InteractivityActions.in01,
+        Code: "S00000",
+      } as NotificationPayload)
+    );
+  });
+  it("should handleOnPayload notifications", async () => {
+    wrapper.vm.handleOnPayload(
+      FrontEndInterfaces.notifications,
+      "123",
+      JSON.stringify({
+        Action: InteractivityActions.in02,
+        Code: "S00000",
+      } as NotificationPayload)
+    );
   });
 
   it("should handleOnPayload scan_state", async () => {

package/coverage/3cr-viewer-browser/index.html

@@ -1,116 +0,0 @@
-
-<!doctype html>
-<html lang="en">
-
-<head>
-    <title>Code coverage report for 3cr-viewer-browser</title>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="../prettify.css" />
-    <link rel="stylesheet" href="../base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="../favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style type='text/css'>
-        .coverage-summary .sorter {
-            background-image: url(../sort-arrow-sprite.png);
-        }
-    </style>
-</head>
-    
-<body>
-<div class='wrapper'>
-    <div class='pad1'>
-        <h1><a href="../index.html">All files</a> 3cr-viewer-browser</h1>
-        <div class='clearfix'>
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Statements</span>
-                <span class='fraction'>42/42</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Branches</span>
-                <span class='fraction'>3/3</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Functions</span>
-                <span class='fraction'>2/2</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Lines</span>
-                <span class='fraction'>42/42</span>
-            </div>
-        
-            
-        </div>
-        <p class="quiet">
-            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
-        </p>
-        <template id="filterTemplate">
-            <div class="quiet">
-                Filter:
-                <input type="search" id="fileSearch">
-            </div>
-        </template>
-    </div>
-    <div class='status-line high'></div>
-    <div class="pad1">
-<table class="coverage-summary">
-<thead>
-<tr>
-   <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
-   <th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
-   <th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
-   <th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
-   <th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
-   <th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
-   <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
-</tr>
-</thead>
-<tbody><tr>
-	<td class="file high" data-value="index.ts"><a href="index.ts.html">index.ts</a></td>
-	<td data-value="100" class="pic high">
-	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
-	</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="42" class="abs high">42/42</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="3" class="abs high">3/3</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="2" class="abs high">2/2</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="42" class="abs high">42/42</td>
-	</tr>
-
-</tbody>
-</table>
-</div>
-                <div class='push'></div><!-- for sticky footer -->
-            </div><!-- /wrapper -->
-            <div class='footer quiet pad2 space-top1 center small'>
-                Code coverage generated by
-                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-09T22:46:57.006Z
-            </div>
-        <script src="../prettify.js"></script>
-        <script>
-            window.onload = function () {
-                prettyPrint();
-            };
-        </script>
-        <script src="../sorter.js"></script>
-        <script src="../block-navigation.js"></script>
-    </body>
-</html>
-    

package/coverage/3cr-viewer-browser/index.ts.html

@@ -1,211 +0,0 @@
-
-<!doctype html>
-<html lang="en">
-
-<head>
-    <title>Code coverage report for 3cr-viewer-browser/index.ts</title>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="../prettify.css" />
-    <link rel="stylesheet" href="../base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="../favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style type='text/css'>
-        .coverage-summary .sorter {
-            background-image: url(../sort-arrow-sprite.png);
-        }
-    </style>
-</head>
-    
-<body>
-<div class='wrapper'>
-    <div class='pad1'>
-        <h1><a href="../index.html">All files</a> / <a href="index.html">3cr-viewer-browser</a> index.ts</h1>
-        <div class='clearfix'>
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Statements</span>
-                <span class='fraction'>42/42</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Branches</span>
-                <span class='fraction'>3/3</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Functions</span>
-                <span class='fraction'>2/2</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Lines</span>
-                <span class='fraction'>42/42</span>
-            </div>
-        
-            
-        </div>
-        <p class="quiet">
-            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
-        </p>
-        <template id="filterTemplate">
-            <div class="quiet">
-                Filter:
-                <input type="search" id="fileSearch">
-            </div>
-        </template>
-    </div>
-    <div class='status-line high'></div>
-    <pre><table class="coverage">
-<tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
-<a name='L2'></a><a href='#L2'>2</a>
-<a name='L3'></a><a href='#L3'>3</a>
-<a name='L4'></a><a href='#L4'>4</a>
-<a name='L5'></a><a href='#L5'>5</a>
-<a name='L6'></a><a href='#L6'>6</a>
-<a name='L7'></a><a href='#L7'>7</a>
-<a name='L8'></a><a href='#L8'>8</a>
-<a name='L9'></a><a href='#L9'>9</a>
-<a name='L10'></a><a href='#L10'>10</a>
-<a name='L11'></a><a href='#L11'>11</a>
-<a name='L12'></a><a href='#L12'>12</a>
-<a name='L13'></a><a href='#L13'>13</a>
-<a name='L14'></a><a href='#L14'>14</a>
-<a name='L15'></a><a href='#L15'>15</a>
-<a name='L16'></a><a href='#L16'>16</a>
-<a name='L17'></a><a href='#L17'>17</a>
-<a name='L18'></a><a href='#L18'>18</a>
-<a name='L19'></a><a href='#L19'>19</a>
-<a name='L20'></a><a href='#L20'>20</a>
-<a name='L21'></a><a href='#L21'>21</a>
-<a name='L22'></a><a href='#L22'>22</a>
-<a name='L23'></a><a href='#L23'>23</a>
-<a name='L24'></a><a href='#L24'>24</a>
-<a name='L25'></a><a href='#L25'>25</a>
-<a name='L26'></a><a href='#L26'>26</a>
-<a name='L27'></a><a href='#L27'>27</a>
-<a name='L28'></a><a href='#L28'>28</a>
-<a name='L29'></a><a href='#L29'>29</a>
-<a name='L30'></a><a href='#L30'>30</a>
-<a name='L31'></a><a href='#L31'>31</a>
-<a name='L32'></a><a href='#L32'>32</a>
-<a name='L33'></a><a href='#L33'>33</a>
-<a name='L34'></a><a href='#L34'>34</a>
-<a name='L35'></a><a href='#L35'>35</a>
-<a name='L36'></a><a href='#L36'>36</a>
-<a name='L37'></a><a href='#L37'>37</a>
-<a name='L38'></a><a href='#L38'>38</a>
-<a name='L39'></a><a href='#L39'>39</a>
-<a name='L40'></a><a href='#L40'>40</a>
-<a name='L41'></a><a href='#L41'>41</a>
-<a name='L42'></a><a href='#L42'>42</a>
-<a name='L43'></a><a href='#L43'>43</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { registerVersion } from "@3cr/sdk-browser";
-import { ComponentPublicInstance, createApp } from "vue";
-import { registerPlugins } from "./src/plugins";
-import { App as BrowserViewer } from "./src/main";
-&nbsp;
-export interface LoadViewerPayload {
-  Url: string;
-  DecryptionKey: MftpDecryptionKey;
-}
-export interface MftpDecryptionKey {
-  Key: string;
-  Iv: string;
-}
-&nbsp;
-let mountedApp: ComponentPublicInstance | undefined = undefined;
-&nbsp;
-export async function registerViewer(version: string) {
-  const newElement = document.createElement("div");
-&nbsp;
-  newElement.style.width = "0";
-  newElement.style.height = "0";
-&nbsp;
-  document.body.appendChild(newElement);
-&nbsp;
-  const app = createApp(BrowserViewer);
-  registerPlugins(app);
-&nbsp;
-  mountedApp = app.mount(newElement);
-  await registerVersion(version);
-}
-&nbsp;
-// TODO: accept callbacks for each function we want the parent to handle
-export async function loadViewer(
-  payload: LoadViewerPayload | undefined = undefined
-): Promise&lt;void&gt; {
-  if (!mountedApp) {
-    throw new Error(
-      "Please call `registerViewer(version: string, idSelector: string)` first"
-    );
-  }
-  await (mountedApp as any).loadInstance(payload);
-}
-&nbsp;</pre></td></tr></table></pre>
-
-                <div class='push'></div><!-- for sticky footer -->
-            </div><!-- /wrapper -->
-            <div class='footer quiet pad2 space-top1 center small'>
-                Code coverage generated by
-                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-09T22:46:57.006Z
-            </div>
-        <script src="../prettify.js"></script>
-        <script>
-            window.onload = function () {
-                prettyPrint();
-            };
-        </script>
-        <script src="../sorter.js"></script>
-        <script src="../block-navigation.js"></script>
-    </body>
-</html>
-