@3cr/viewer-browser 0.0.58 → 0.0.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3cr/viewer-browser",
-  "version": "0.0.58",
+  "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/src/components/selectors/ValueSelector.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import {computed, defineEmits} from 'vue';
-
-
+import { computed, defineEmits } from "vue";
+import { toNumber } from "@/helpers/utils";
 
 export interface Props {
   value: number;
@@ -9,8 +8,8 @@ export interface Props {
   label?: string;
   min?: number;
   max?: number;
-  step?: number,
-  prepend?: string,
+  step?: number;
+  prepend?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -20,19 +19,22 @@ const props = withDefaults(defineProps<Props>(), {
   min: -99999,
   max: 99999,
   step: 1,
-  prepend: '',
+  prepend: "",
 });
 const emit = defineEmits<{
-  'update:value': [number];
+  "update:value": [number];
 }>();
 const sliderValue = computed({
   get() {
-    return props.value
+    return Math.floor(props.value);
   },
   set(value: number) {
-    emit('update:value', value);
-  }
-})
+    let val = value;
+    if (value > props.max) val = props.max;
+    if (value < props.min) val = props.min;
+    emit("update:value", Math.floor(val));
+  },
+});
 </script>
 
 <template>
@@ -45,7 +47,8 @@ const sliderValue = computed({
       </v-col>
       <v-col cols="6">
         <v-text-field
-          v-model="sliderValue"
+          :model-value="sliderValue"
+          @update:modelValue="sliderValue = toNumber($event)"
           outlined
           dense
           class="mt-0 pt-0"
@@ -65,7 +68,9 @@ const sliderValue = computed({
   .v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)
   > .v-input__control
   > .v-input__slot,
-.single-slider-selector .v-text-field.v-text-field--enclosed .v-text-field__details {
+.single-slider-selector
+  .v-text-field.v-text-field--enclosed
+  .v-text-field__details {
   padding: 0px 8px !important;
 }
 

package/src/components/sliders/DoubleSliderSelector.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, defineEmits, ref, unref, watch } from "vue";
+import { toNumber } from "@vue/shared";
 
 export interface Props {
   value: Array<number>;
@@ -33,10 +34,15 @@ const sliderValue = computed({
     return props.value;
   },
   set(value: Array<number>) {
-    emit("update:value", value);
+    let val = value;
+    if (value[0] > props.max) val[0] = props.max;
+    if (value[1] > props.max) val[1] = props.max;
+    if (value[0] < props.min) val[0] = props.min;
+    if (value[1] < props.min) val[1] = props.min;
+    const normalised = [Math.floor(val[0]), Math.floor(val[1])];
+    emit("update:value", normalised);
   },
 });
-
 watch(
   sliderValue,
   async (currentValue: Array<number>) => {
@@ -60,7 +66,8 @@ watch(
     }}</v-card-subtitle>
     <v-card-actions class="px-2 pb-0">
       <v-text-field
-        v-model="sliderValue[0]"
+        :model-value="sliderValue[0]"
+        @update:modelValue="sliderValue = [toNumber($event), sliderValue[1]]"
         density="compact"
         class="mt-0 pt-0"
         hide-details
@@ -70,7 +77,8 @@ watch(
       ></v-text-field>
       <v-spacer />
       <v-text-field
-        v-model="sliderValue[1]"
+        :model-value="sliderValue[1]"
+        @update:modelValue="sliderValue = [sliderValue[0], toNumber($event)]"
         density="compact"
         class="mt-0 pt-0"
         hide-details

package/src/components/sliders/VerticalSliderSelector.vue

@@ -30,10 +30,10 @@ const showThumb = ref<"always" | boolean>(true);
 const showThumbTimeout = ref<NodeJS.Timeout | undefined>(undefined);
 const sliderValue = computed({
   get() {
-    return props.value;
+    return Math.floor(props.value);
   },
   set(value: number) {
-    emit("update:value", value);
+    emit("update:value", Math.floor(value));
   },
 });
 
@@ -73,6 +73,9 @@ watch(
     <template #prepend>
       <div class="text-white py-1 my-0 text-center">{{ min }}</div>
     </template>
+    <template v-slot:thumb-label="{ modelValue }">
+      {{ Math.floor(modelValue) }}
+    </template>
   </v-slider>
 </template>
 

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>
-