@3cr/viewer-browser 0.0.162 → 0.0.194

package/src/components/demo/patient/__tests__/DemoPatientShareToMobileModal.spec.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it, vi } from "vitest";
+import { mountVuetify, openAllModals } from "~/helper";
+import DemoPatientShareToMobileModal from "@/components/demo/patient/DemoPatientShareToMobileModal.vue";
+import { PRICING_URL } from "../../options";
+
+describe('DemoPatientShareToMobileModal tests', () => {
+  it('should mount', () => {
+    const props = { modal: true };
+    const wrapper = mountVuetify(DemoPatientShareToMobileModal, props);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should close modal', async () => {
+    const props = { modal: true };
+    const wrapper = mountVuetify(DemoPatientShareToMobileModal, props);
+    const close = wrapper.findComponent('[data-testid="close-1"]');
+    await close.trigger('click');
+    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+  });
+
+  it('should go to next step and open url', async () => {
+    vi.stubGlobal('open', vi.fn());
+    const spy = vi.spyOn(window, 'open');
+    const props = { modal: true };
+    const wrapper = mountVuetify(DemoPatientShareToMobileModal, props);
+    const confirm1 = wrapper.findComponent('[data-testid="confirm-1"]');
+    await confirm1.trigger('click');
+    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+    const confirm2 = wrapper.findComponent('[data-testid="confirm-2"]');
+    await confirm2.trigger('click');
+    expect(spy).toHaveBeenCalledWith(PRICING_URL, '_self');
+    vi.restoreAllMocks();
+  });
+
+  it('should go to next step and close', async () => {
+    const props = { modal: true };
+    const wrapper = mountVuetify(DemoPatientShareToMobileModal, props);
+    const confirm1 = wrapper.findComponent('[data-testid="confirm-1"]');
+    await confirm1.trigger('click');
+    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+    const close2 = wrapper.findComponent('[data-testid="close-2"]');
+    await close2.trigger('click');
+    expect(wrapper.text()).toBe('');
+  });
+
+  it('should open via input', async () => {
+    const props = { modal: false };
+    const wrapper = mountVuetify(DemoPatientShareToMobileModal, props);
+    await openAllModals(wrapper);
+  });
+});

package/src/components/loading/LoadingSpinner.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 export interface Props {
-  text: string;
+  text?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {

package/src/components/modal/ActionRail.vue

@@ -0,0 +1,96 @@
+<template>
+  <div ref="rail" class="action-rail d-flex">
+    <template v-for="(action, index) of visible">
+      <div class="visible-item">
+        <slot name="visible" :action="action" :index="index"></slot>
+      </div>
+    </template>
+    <v-menu v-if="showMenu" v-bind="menuProps" @update:model-value="emit('menuActive', $event)">
+      <template #activator="{ props }">
+        <v-btn v-bind="mergeProps(props, menuActivatorProps)" />
+      </template>
+      <v-list>
+        <template v-for="(action, index) of hidden" >
+          <div class="hidden-item">
+            <slot name="hidden" :action="action" :index="index"></slot>
+          </div>
+        </template>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, mergeProps, onBeforeUnmount, onMounted, ref } from 'vue';
+
+type Action<T = Record<string, unknown>> = {
+  width: number
+} & T;
+
+interface Props {
+  actions?: Action[];
+  menuProps?: Record<string, unknown>;
+  menuActivatorProps?: Record<string, unknown>;
+}
+
+type Emits = {
+  menuActive: [boolean];
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  actions: () => [],
+  menuProps: () => ({}),
+  menuActivatorProps: () => ({})
+});
+
+const emit = defineEmits<Emits>();
+
+const rail = ref<HTMLDivElement>();
+const splitIndex = ref<number>(0);
+
+const observer = new ResizeObserver(entries => {
+  if (entries.length > 0) {
+    const railWidth = entries[0].contentRect.width;
+    calculateSplitIndex(railWidth);
+  }
+});
+
+const visible = computed(() => {
+  return props.actions.slice(0, splitIndex.value);
+});
+
+const hidden = computed(() => {
+  return props.actions.slice(splitIndex.value);
+});
+
+const showMenu = computed(() => {
+  return hidden.value.length > 0;
+});
+
+onMounted(() => {
+  observer.observe(rail.value!);
+  const rect = rail.value!.getBoundingClientRect();
+  calculateSplitIndex(rect.width);
+});
+
+onBeforeUnmount(() => {
+  observer.disconnect();
+});
+
+function calculateSplitIndex(railWidth: number): void {
+  const widths = props.actions.map(action => action.width);
+  let sum = 48;
+  for (const [idx, width] of widths.entries()) {
+    if (sum + width < railWidth) {
+      sum += width;
+      splitIndex.value = idx + 1;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.action-rail {
+  min-width: 0;
+}
+</style>

package/src/components/modal/AskAI.vue

@@ -0,0 +1,250 @@
+<template>
+  <v-dialog v-model:model-value="modalState" max-width="800" theme="light">
+    <v-card class="prompt-box pa-2 py-4" rounded="xl">
+      <v-card-title class="text-body-1 d-flex align-center text-wrap mx-3 mb-4">
+        <span>{{ questionText }}</span>
+      </v-card-title>
+      <!--      <v-card-subtitle> From ChatGPT: </v-card-subtitle>-->
+      <div class="bordered-gradient-box" v-if="smartResponses">
+        <div class="prompt" style="font-size: 28px">
+          <!--          &#129668;-->
+          <v-img
+            src="@/assets/magic_wand.svg"
+            class="animated"
+            max-width="42"
+          />
+          &nbsp;&nbsp;&nbsp;<span
+            style="font-size: 18px"
+            v-html="smartResponses?.GptResponse"
+          >
+          </span>
+        </div>
+      </div>
+
+      <!--      <v-card-text v-html="smartResponses?.GptResponse"> </v-card-text>-->
+      <div class="prompt bordered-gradient-box" v-else>
+        <div class="loading"></div>
+      </div>
+      <v-card-text class="py-0">
+        <span
+          class="text-caption"
+          style="font-size: 10px !important; line-height: 10px !important"
+          >* 3Dicom's Annotiva AI is powered by AI Large Language Models (LLMs)
+          which generate general health information for improved patient
+          comprehension. <br />It is NOT for diagnostic usage.
+        </span>
+      </v-card-text>
+
+      <v-card-title
+        v-if="smartResponses"
+        class="text-body-1 d-flex align-center text-wrap mx-3 mt-6 mb-0"
+      >
+        Still Curious?
+      </v-card-title>
+      <v-card-text class="py-0">
+        <v-chip-group column v-model="item">
+          <v-chip
+            v-for="action in smartResponses?.FollowupQuestions"
+            style="
+              text-wrap: wrap;
+              word-wrap: break-word;
+              min-height: 36px;
+              background: linear-gradient(
+                to right,
+                rgba(38, 55, 245, 0.85),
+                rgba(145, 78, 245, 0.85)
+              );
+            "
+            class="text-wrap mb-1 px-4 v-chip--selected text-white"
+            @click="askFollowUpQuestion(action)"
+          >
+            {{ action.Question }}
+          </v-chip>
+        </v-chip-group>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import {
+  GptQuestion,
+  GptResponsePayload,
+  GptService,
+} from "@/services/gpt/gpt.service";
+const smartResponses = ref<GptResponsePayload | null>(null);
+interface Props {
+  modal?: boolean;
+  questionText: string;
+  title: string;
+  questionKey: number;
+}
+
+type Emits = {
+  "update:modal": [value: boolean];
+  askFollowup: [value: GptQuestion];
+};
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<Emits>();
+
+const item = ref();
+const modalState = computed({
+  get(): boolean {
+    return props.modal;
+  },
+  set(value: boolean): void {
+    emit("update:modal", value);
+  },
+});
+
+watch(
+  modalState,
+  async (val: boolean) => {
+    if (val) {
+      smartResponses.value = null;
+      await getSmartResponses();
+    }
+  },
+  { immediate: true }
+);
+
+async function getSmartResponses(): Promise<void> {
+  smartResponses.value = await GptService.Instantiate()
+    .GenerateAnnotations(props.title, props.questionKey)
+    .then((data) => data.data);
+  item.value = smartResponses.value?.FollowupQuestions.findIndex(
+    (question) => question.ApiPreFilledRequestKey === props.questionKey
+  );
+}
+
+async function askFollowUpQuestion(question: GptQuestion): Promise<void> {
+  emit("askFollowup", question);
+}
+</script>
+<style>
+.loading {
+  font-size: 30px;
+}
+.loading:after {
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: bottom;
+  -webkit-animation: ellipsis steps(4, end) 900ms infinite;
+  animation: ellipsis steps(4, end) 900ms infinite;
+  content: "\2026";
+  /* ascii code for the ellipsis character */
+  width: 0px;
+}
+
+@keyframes ellipsis {
+  to {
+    width: 40px;
+  }
+}
+
+@-webkit-keyframes ellipsis {
+  to {
+    width: 40px;
+  }
+}
+
+.prompt-box p {
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+.prompt {
+  margin-left: 20px;
+  margin-right: 20px;
+  padding: 20px;
+  text-align: center;
+  color: black;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  z-index: 100;
+  position: relative;
+}
+
+.prompt::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 16px;
+  padding: 3px;
+  background: linear-gradient(to right, #6fb3f2, #4e51f5);
+
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+
+.prompt span {
+  flex: 1;
+  text-align: left;
+  margin-right: 10px;
+}
+
+.icon {
+  background: #e0e0e0;
+  border-radius: 50%;
+  padding: 5px;
+}
+
+.record {
+  margin-top: 20px;
+}
+
+.record-button {
+  background: #4e51f5;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 20px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.record-button:active {
+  background: #3b3edf;
+}
+.animated {
+  animation: pulse 2s infinite;
+  transition: all 2s ease-in-out;
+}
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  70% {
+    transform: scale(1.2);
+  }
+}
+.btn-grad {
+  background-image: linear-gradient(
+    to right,
+    #2b5876 0%,
+    #4e4376 51%,
+    #2b5876 100%
+  );
+  margin: 10px;
+  padding: 15px 45px;
+  text-align: center;
+  text-transform: uppercase;
+  transition: 0.5s;
+  background-size: 200% auto;
+  color: white;
+  box-shadow: 0 0 20px #eee;
+  border-radius: 10px;
+  display: block;
+}
+.btn-grad:hover {
+  background-position: right center; /* change the direction of the change here */
+  color: #fff;
+  text-decoration: none;
+}
+</style>

package/src/components/modal/CloseViewerModal.vue

@@ -0,0 +1,104 @@
+<template>
+  <v-dialog data-testid="dialog" v-model:model-value="modalState">
+    <v-card
+      class="pa-1 ma-auto position-relative motif-background"
+      width="600"
+      theme="dark"
+    >
+      <v-card-title class="text-center">Close Viewer?</v-card-title>
+      <v-card-text class="text-center mb-2">
+        Are you sure you want to close the Online Viewer?
+      </v-card-text>
+      <v-card-actions>
+        <v-btn
+          variant="flat"
+          color="secondary"
+          @click="modalState = false"
+        >
+          Cancel
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          data-testid="close"
+          color="red"
+          variant="flat"
+          @click="closeModal"
+          v-if="showOption('OnSaveSession')"
+        >
+          Close without saving
+        </v-btn>
+        <v-btn
+          data-testid="save"
+          color="primary"
+          variant="flat"
+          @click="closeModalSave"
+          v-if="showOption('OnSaveSession')"
+        >
+          Save Session
+        </v-btn>
+        <v-btn
+          data-testid="close"
+          color="flat"
+          variant="tonal"
+          @click="closeModal" v-else>
+          Close Viewer
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import {computed} from "vue";
+import {LoadViewerOptions} from "@/models/LoadViewerOptions";
+import {dataOverlayState, scanState} from "@/dataLayer/scanState";
+
+interface Props {
+  options: LoadViewerOptions,
+  modal?: boolean;
+}
+
+type Emits = {
+  'update:modal': [boolean];
+  'close': [void];
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  modal: false
+});
+
+const emit = defineEmits<Emits>();
+
+const modalState = computed({
+  get(): boolean {
+    return props.modal;
+  },
+  set(value: boolean): void {
+    emit('update:modal', value);
+  }
+});
+
+async function closeModal(): Promise<void> {
+  await executeOption('OnExitViewer');
+  modalState.value = false;
+  emit('close');
+}
+
+async function closeModalSave(): Promise<void> {
+  const scnState = scanState.value;
+  const dtaOverlayState = dataOverlayState.value.DataOverlay;
+  await executeOption('OnSaveSession', scnState, dtaOverlayState, null);
+  await closeModal();
+}
+
+function showOption(key: keyof LoadViewerOptions): boolean {
+  return props.options[key] !== undefined;
+}
+
+async function executeOption(key: keyof LoadViewerOptions, ...args: any[]): Promise<void> {
+  const functionToExecute = props.options[key];
+  if (functionToExecute !== undefined) {
+    await functionToExecute(...args);
+  }
+}
+</script>