@3cr/viewer-browser 0.0.220 → 0.0.247

package/src/components/views/McadObjectTreeView.vue

@@ -1,41 +1,45 @@
 <template>
-  <v-treeview class="py-0" :items="data" item-value="id" density="compact" open-strategy="single">
-    <template #prepend="{ item }">
-      <visibility-btn :is-visible="item.isVisible" @click.stop="toggleVisibility(item)" />
-    </template>
-    <template #title="{ item }">
-      <div class="d-flex align-center pr-2">
-        <object-label class="mr-1" :label="item.title">
-          <template #prepend>
-            <object-color class="ml-1 mr-2" :color="getColor(item)" />
+  <div>
+    <mcad-global-actions :items="items" />
+    <v-treeview class="py-0" :items="data" item-value="id" density="compact" open-strategy="single">
+      <template #prepend="{ item }">
+        <visibility-btn :is-visible="item.isVisible" @click.stop="toggleVisibility(item)" />
+      </template>
+      <template #title="{ item }">
+        <div class="d-flex align-center">
+          <object-label class="mr-1" :label="item.title">
+            <template #prepend>
+              <object-color class="ml-1 mr-2" :color="getColor(item)" />
+            </template>
+          </object-label>
+          <v-spacer />
+          <opacity
+            :model-value="getOpacity(item)"
+            max-width="72px"
+            @update:model-value="onOpacityUpdate(item, $event)"
+            @mousedown.stop
+            @click.stop
+          />
+        </div>
+      </template>
+      <template #append="{ item }">
+        <v-menu v-if="showMenu">
+          <template #activator="{ props }">
+            <v-btn v-bind="props" data-testid="menu" size="32" variant="text" icon="more_vert" />
           </template>
-        </object-label>
-        <v-spacer />
-        <opacity
-          :model-value="getOpacity(item)"
-          @update:model-value="onOpacityUpdate(item, $event)"
-          @mousedown.stop
-          @click.stop
-        />
-      </div>
-    </template>
-    <template #append="{ item }">
-      <v-menu>
-        <template #activator="{ props }">
-          <v-btn v-bind="props" data-testid="menu" size="32" variant="text" icon="more_vert" />
-        </template>
-        <v-list>
-          <v-list-item data-testid="download" prepend-icon="download" @click="downloadMcad(item.key)">
-            <v-list-item-title>Download</v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu>
-    </template>
-  </v-treeview>
+          <v-list>
+            <v-list-item data-testid="download" prepend-icon="download" @click="downloadMcad(item.key)">
+              <v-list-item-title>Download</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </template>
+    </v-treeview>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useViewer3cr } from '@/composables/useViewer3cr';
 import { clamp } from '@/functions/clamp';
 import { rgbaNormalizedToCss } from '@/functions/rgbaToCss';
@@ -55,6 +59,10 @@ const viewer3cr = useViewer3cr();
 const options = useViewerOptions();
 const data = ref<McadObjectTreeViewItem[]>([]);
 
+const showMenu = computed(() => {
+  return !!options.value.OnDownloadMcad;
+});
+
 watch(
   () => props.items,
   (items) => {
@@ -64,7 +72,9 @@ watch(
 );
 
 function setTreeViewData(mcadObjects: DataOverlayMcad[]): void {
-  data.value = mcadObjects.map((mcadObject) => mapToTreeViewItem(mcadObject));
+  data.value = mcadObjects
+    .sort((a, b) => a.Title.localeCompare(b.Title))
+    .map((mcadObject) => mapToTreeViewItem(mcadObject));
 }
 
 async function downloadMcad(id: string): Promise<void> {
@@ -74,8 +84,8 @@ async function downloadMcad(id: string): Promise<void> {
 }
 
 function getColor(item: McadObjectTreeViewItem): string {
-  const { r, g, b, a } = item.colour;
-  return rgbaNormalizedToCss(r + 0.2, g + 0.2, b + 0.2, a - 0.2);
+  const { r, g, b } = item.colour;
+  return rgbaNormalizedToCss(r, g, b, 1);
 }
 
 function getOpacity(item: McadObjectTreeViewItem): number {

package/src/components/views/modals/DataOverlayGeneralModal.vue

@@ -0,0 +1,71 @@
+<template>
+  <v-card density="compact">
+    <v-card-title>{{ dataOverlay.Title }}</v-card-title>
+    <v-list density="compact" :lines="false">
+      <v-list-item v-if="hasDescription" prepend-icon="description">
+        <v-list-item-title>Description</v-list-item-title>
+        <v-list-item-subtitle>{{ dataOverlay.Description }}</v-list-item-subtitle>
+      </v-list-item>
+      <v-list-item v-else prepend-icon="psychology">
+        <v-list-item-title>Smart Description</v-list-item-title>
+        <v-list-item-subtitle v-if="hasSmartDescription">
+          {{ smartDescriptions[dataOverlay.Title].GptResponse }}
+        </v-list-item-subtitle>
+        <v-list-item-subtitle v-else>
+          <v-progress-linear class="mt-2" indeterminate />
+        </v-list-item-subtitle>
+      </v-list-item>
+      <v-list-item prepend-icon="info">
+        <v-list-item-title>Resources</v-list-item-title>
+        <v-list-item-subtitle v-if="hasActions">
+          <template v-for="action in dataOverlay.CallToAction!.Actions">
+            <a @click.stop class="text-small" :href="action.ActionData.Url" target="_blank">
+              {{ action.ActionData.Description }}
+            </a>
+            <br />
+          </template>
+        </v-list-item-subtitle>
+        <v-list-item-subtitle v-else class="font-italic">No resources provided</v-list-item-subtitle>
+      </v-list-item>
+    </v-list>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { DataOverlay } from '@/types/data-overlay';
+import { computed, ref, watch } from 'vue';
+import { GptResponsePayload } from '@/types/gpt-response-payload';
+import { GptService } from '@/services/gpt.service';
+
+interface Props {
+  dataOverlay: DataOverlay;
+}
+
+const props = defineProps<Props>();
+
+const smartDescriptions = ref<Record<string, GptResponsePayload>>({});
+
+const hasDescription = computed(() => !!props.dataOverlay.Description);
+
+const hasSmartDescription = computed(() => props.dataOverlay.Title in smartDescriptions.value);
+
+const hasActions = computed(() => {
+  return props.dataOverlay.CallToAction?.Actions && props.dataOverlay.CallToAction.Actions.length > 0;
+});
+
+watch(
+  () => props.dataOverlay,
+  async (value: DataOverlay) => {
+    await generateSmartDescriptions(value);
+  },
+  { immediate: true }
+);
+
+async function generateSmartDescriptions(overlay: DataOverlay): Promise<void> {
+  const key = overlay.Title;
+  if (!(key in smartDescriptions.value)) {
+    const response = await GptService.Instantiate().GenerateAnnotations(key);
+    smartDescriptions.value[key] = response.data;
+  }
+}
+</script>

package/src/components/views/modals/DataOverlayMarkupModal.vue

@@ -0,0 +1,60 @@
+<template>
+  <v-card density="compact">
+    <v-card-title>{{ markup.Title }}</v-card-title>
+    <v-list density="compact" :lines="false">
+      <v-list-item prepend-icon="analytics">
+        <v-list-item-title>Data</v-list-item-title>
+        <v-list-item-subtitle>
+          <template v-if="'SegmentLengths' in markup">
+            <v-row no-gutters v-for="(segment, idx) in markup.SegmentLengths">
+              <v-col style="width: 200px">Segment {{ idx + 1 }}</v-col>
+              <v-col class="text-mono">{{ segment }}{{ markup.Units }}</v-col>
+            </v-row>
+            <v-row no-gutters>
+              <v-col style="width: 200px">Total Length</v-col>
+              <v-col class="text-mono">{{ markup.TotalLength }}{{ markup.Units }}</v-col>
+            </v-row>
+          </template>
+          <template v-if="'Area' in markup">
+            <v-row no-gutters>
+              <v-col style="width: 200px">Area</v-col>
+              <v-col class="text-mono">{{ markup.Area }}</v-col>
+            </v-row>
+            <v-row no-gutters>
+              <v-col style="width: 200px">Perimeter</v-col>
+              <v-col class="text-mono">{{ markup.Perimeter }}</v-col>
+            </v-row>
+            <v-row no-gutters>
+              <v-col style="width: 200px">Average HU</v-col>
+              <v-col class="text-mono">{{ markup.AverageHU }}</v-col>
+            </v-row>
+            <v-row no-gutters>
+              <v-col style="width: 200px">Lowest HU</v-col>
+              <v-col class="text-mono">{{ markup.LowestHU }}</v-col>
+            </v-row>
+            <v-row no-gutters>
+              <v-col style="width: 200px">Highest HU</v-col>
+              <v-col class="text-mono">{{ markup.HighestHU }}</v-col>
+            </v-row>
+          </template>
+          <template v-if="'SegmentAngles' in markup">
+            <v-row no-gutters v-for="(angle, idx) in markup.SegmentAngles">
+              <v-col style="width: 200px">Angle {{ idx + 1 }}</v-col>
+              <v-col class="text-mono">{{ angle.Acute }}{{ markup.Units }}</v-col>
+            </v-row>
+          </template>
+        </v-list-item-subtitle>
+      </v-list-item>
+    </v-list>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { DataOverlayMarkup } from '@/types/data-overlay-markup';
+
+interface Props {
+  markup: DataOverlayMarkup;
+}
+
+defineProps<Props>();
+</script>

package/src/components/views/modals/DataOverlayModal.vue

@@ -1,89 +1,88 @@
 <template>
-  <v-menu
-    v-model="modalState"
-    min-width="100"
-    max-width="400"
-    persistent
-    :no-click-animation="true"
-    :target="item.target"
-  >
-    <v-card density="compact">
-      <v-card-title>{{ item.title }}</v-card-title>
-      <v-list density="compact" :lines="false">
-        <v-list-item v-for="data of item.data">
-          <template #prepend>
-            <v-icon class="mr-n4" :icon="data.icon" />
-          </template>
-          <v-list-item-title>{{ data.title }}</v-list-item-title>
-
-          <v-list-item-subtitle v-if="data.subtitle">{{ data.subtitle }}</v-list-item-subtitle>
-
-          <v-list-item-subtitle v-if="data.actions && data.actions.length > 0">
-            <template v-for="action in data.actions">
-              <a @click.stop class="text-small" :href="action.url" target="_blank">
-                {{ action.description }}
-              </a>
-              <br />
-            </template>
-          </v-list-item-subtitle>
-        </v-list-item>
-      </v-list>
-    </v-card>
+  <v-menu v-model="menu" max-width="500" persistent :no-click-animation="true" :target="menuTarget">
+    <template v-if="selected">
+      <data-overlay-markup-modal v-if="isMarkup" :markup="selected as DataOverlayMarkup" />
+      <data-overlay-general-modal v-else :data-overlay="selected" />
+    </template>
   </v-menu>
 </template>
 
 <script setup lang="ts">
-import { DataOverlayInfo } from '@/types/data-overlay-info';
-import { computed } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useEventListener } from '@/composables/useEventListener';
+import { DataOverlay } from '@/types/data-overlay';
+import { DataOverlayMarkup } from '@/types/data-overlay-markup';
+import { isDataOverlayLength } from '@/functions/guards/isDataOverlayLength';
+import { isDataOverlayPolygon } from '@/functions/guards/isDataOverlayPolygon';
+import { isDataOverlayAngle } from '@/functions/guards/isDataOverlayAngle';
+import { useDataOverlayTool } from '@/tools/data-overlay.tool';
 
-interface Props {
-  modal?: boolean;
-  item: DataOverlayInfo;
-}
+useEventListener(document, 'mousemove', onMouseMove);
+useEventListener(document, 'mousedown', onMouseDown);
 
-type Emits = {
-  'update:modal': [boolean];
-};
+const dataOverlayTool = useDataOverlayTool();
+const menu = ref<boolean>(false);
+const currentTarget = ref<[number, number]>([0, 0]);
+const menuTarget = ref<[number, number]>([0, 0]);
 
-const props = withDefaults(defineProps<Props>(), {
-  modal: false
+const selected = computed(() => dataOverlayTool.selected.value);
+
+const isMarkup = computed(() => {
+  const val = selected.value;
+  return val && (isDataOverlayLength(val) || isDataOverlayPolygon(val) || isDataOverlayAngle(val));
 });
 
-const emit = defineEmits<Emits>();
+onMounted(() => {
+  dataOverlayTool.activate();
+});
 
-const modalState = computed({
-  get(): boolean {
-    return props.modal;
-  },
-  set(value: boolean): void {
-    emit('update:modal', value);
-  }
+onUnmounted(() => {
+  dataOverlayTool.deactivate();
 });
+
+watch(
+  selected,
+  async (value: DataOverlay | null) => {
+    if (value !== null) {
+      menuTarget.value = currentTarget.value;
+      menu.value = true;
+    }
+  },
+  { immediate: true }
+);
+
+function onMouseMove(event: MouseEvent): void {
+  currentTarget.value = [event.x, event.y];
+}
+
+function onMouseDown(): void {
+  menu.value = false;
+}
 </script>
 
 <style scoped lang="scss">
-.v-card {
+:deep(.v-card) {
   background: rgba(var(--v-theme-surface), 0.5) !important;
-  backdrop-filter: blur(48px);
+  backdrop-filter: blur(24px);
 }
 
-.v-card-title {
+:deep(.v-card-title) {
   background: none;
   font-size: 14px;
   padding-bottom: 0;
 }
 
-.v-list {
+:deep(.v-list) {
   background: none;
   padding-top: 4px;
   padding-bottom: 4px;
 }
 
-.v-list-item-title {
+:deep(.v-list-item-title) {
   font-size: 13px;
 }
 
-.v-list-item-subtitle {
+:deep(.v-list-item-subtitle) {
   font-size: 12px;
 }
 </style>

package/src/components/views/shared/Opacity.vue

@@ -4,7 +4,6 @@
     density="compact"
     hide-details
     max="100"
-    max-width="64px"
     min="0"
     suffix="%"
     type="number"

package/src/composables/useDebounce.ts

@@ -0,0 +1,11 @@
+export type Debouncable<Args extends unknown[]> = (...args: Args) => any;
+
+export type Debounced<Args extends unknown[]> = (...args: Args) => void;
+
+export function useDebounce<Args extends unknown[]>(callback: Debouncable<Args>, delay: number): Debounced<Args> {
+  let timeout: NodeJS.Timeout;
+  return function (...args: Args): void {
+    clearTimeout(timeout);
+    timeout = setTimeout(callback, delay, ...args);
+  };
+}

package/src/composables/useIntroJs.ts

@@ -5,13 +5,17 @@ import { computed, nextTick, ref, watch, WatchStopHandle } from 'vue';
 import { ScanView } from '@3cr/types-ts';
 import { useViewer3cr } from '@/composables/useViewer3cr';
 import { isFullscreen, previousLayout, scanState } from '@/models/scanState';
+import { DemoType } from '@/types/demo-type';
 import introJs from 'intro.js';
-
-const viewer3cr = useViewer3cr();
+import { useViewerOptions } from '@/composables/useViewerOptions';
 
 const demo = computed<string>(() => {
-  const value = demoType.value;
-  return value.charAt(0).toUpperCase() + value.substring(1);
+  switch (demoType.value) {
+    case DemoType.Licence:
+      return 'Licence';
+    default:
+      return 'Patient';
+  }
 });
 
 const options = computed<Partial<TourOptions>>(() => ({
@@ -71,11 +75,16 @@ function blurActiveElement(): void {
 }
 
 export function useIntroJs() {
+  const viewer3cr = useViewer3cr();
+  const viewerOptions = useViewerOptions();
+
   let scanStateHandle: WatchStopHandle;
 
   function onStart(this: Tour): void {
     scanStateHandle = watch(scanState, () => {
-      this.refresh(true);
+      if (this.isActive()) {
+        this.refresh(true);
+      }
     });
   }
 
@@ -106,9 +115,16 @@ export function useIntroJs() {
   }
 
   /* istanbul ignore next: does not work with jsdom -- @preserve */
-  function onExit(this: Tour): void {
+  function onBeforeExit(this: Tour): boolean {
     scanStateHandle();
     setTimeout(() => blurActiveElement(), 500);
+    return true;
+  }
+
+  async function onExit(this: Tour): Promise<void> {
+    if (viewerOptions.value.OnInteractionReady) {
+      await viewerOptions.value.OnInteractionReady();
+    }
   }
 
   const tour = introJs
@@ -117,6 +133,7 @@ export function useIntroJs() {
     .onStart(onStart)
     .onBeforeChange(onBeforeChange)
     .onChange(onChange)
+    .onBeforeExit(onBeforeExit)
     .onExit(onExit);
 
   const intro = ref<Tour>(tour);

package/src/composables/useViewerOptions.ts

@@ -11,6 +11,7 @@ const ax = axios.create();
 export function useViewerOptions() {
   return options;
 }
+
 export function mockDemoViewerStlDecimator() {
   options.value.OnResolveUrls = async (keys: string[]) =>
     await Promise.all(

package/src/functions/guards/isDataOverlayAngle.ts

@@ -0,0 +1,6 @@
+import { DataOverlayAngle } from '@/types/data-overlay-angle';
+import { DataOverlay } from '@/types/data-overlay';
+
+export function isDataOverlayAngle(markup: DataOverlay): markup is DataOverlayAngle {
+  return 'SegmentAngles' in markup;
+}

package/src/functions/guards/isDataOverlayLength.ts

@@ -0,0 +1,6 @@
+import { DataOverlayLength } from '@/types/data-overlay-length';
+import { DataOverlay } from '@/types/data-overlay';
+
+export function isDataOverlayLength(markup: DataOverlay): markup is DataOverlayLength {
+  return 'SegmentLengths' in markup;
+}

package/src/functions/guards/isDataOverlayPolygon.ts

@@ -0,0 +1,6 @@
+import { DataOverlayPolygon } from '@/types/data-overlay-polygon';
+import { DataOverlay } from '@/types/data-overlay';
+
+export function isDataOverlayPolygon(markup: DataOverlay): markup is DataOverlayPolygon {
+  return 'Area' in markup;
+}

package/src/functions/modelHelper.ts

@@ -3,6 +3,7 @@ import {
   CurrentDataOverlayState,
   CurrentMcadState,
   CurrentScanState,
+  GraphicType,
   InitialDataOverlayState,
   InitialMcadState,
   InitialScanState,
@@ -97,6 +98,7 @@ export function inflateScanState(): CurrentScanState {
     },
     NavigationCube: {
       Version: '1.0.0',
+      NavCubeGraphicType: GraphicType.BODY_SYMBOL,
       Transform: {
         Version: '1.0.0',
         AnchorPoint: AnchorPoint.DEFAULT,

package/src/functions/notification.ts

@@ -1,48 +1,82 @@
 import { InteractivityActions, NavigationCubeActions, NotificationPayload, NotificationsActions } from '@3cr/types-ts';
 import { useNotification } from '@kyvg/vue3-notification';
+import { t } from '@3cr/translations-ts';
+
 const { notify } = useNotification();
 
-export async function handleNotification(action: NotificationsActions, message: string) {
-  const notification = JSON.parse(message) as NotificationPayload;
+type NotificationType = 'success' | 'info' | 'warn' | 'error';
 
-  switch (notification.Action) {
-    case InteractivityActions.in01:
-    case InteractivityActions.in02:
-    case InteractivityActions.in03:
-    case InteractivityActions.in04:
-    case NavigationCubeActions.nc01:
-      return;
-    default:
-  }
+function getNotificationType(action: NotificationsActions): NotificationType {
+  switch (action) {
+    case NotificationsActions.no01:
+      return 'success';
 
-  if (notification.Action.startsWith('sl')) {
-    return;
+    case NotificationsActions.no02:
+      return 'error';
+
+    case NotificationsActions.no03:
+      return 'warn';
+
+    default:
+    case NotificationsActions.no04:
+      return 'info';
   }
+}
 
-  let type = 'success';
+function getNotificationTitle(action: NotificationsActions): string {
   switch (action) {
-    // Muting no01
     case NotificationsActions.no01:
-      type = 'success';
-      return;
+      return 'Success';
 
     case NotificationsActions.no02:
-      type = 'error';
-      break;
+      return 'Error';
 
     case NotificationsActions.no03:
-      type = 'warn';
-      break;
+      return 'Warning';
 
-    // Muting no04
+    default:
     case NotificationsActions.no04:
-      type = 'info';
-      return;
+      return 'Information';
+  }
+}
+
+function getNotificationText(notification: NotificationPayload): string {
+  return t(notification.Code, {});
+}
+
+function shouldDisplayNotification(action: NotificationsActions, notification: NotificationPayload): boolean {
+  // Hide type specific messages
+  const hiddenTypes = [NotificationsActions.no01, NotificationsActions.no04];
+  if (hiddenTypes.includes(action)) {
+    return false;
+  }
+
+  // Hide all slider actions
+  if (notification.Action.startsWith('sl')) {
+    return false;
   }
 
-  notify({
-    title: notification.Code,
-    text: notification.Action,
-    type
-  });
+  // Hide action specific messages
+  const hiddenActions = [
+    InteractivityActions.in01,
+    InteractivityActions.in02,
+    InteractivityActions.in03,
+    InteractivityActions.in04,
+    NavigationCubeActions.nc01
+  ] as string[];
+  if (hiddenActions.includes(notification.Action)) {
+    return false;
+  }
+
+  return true;
+}
+
+export async function handleNotification(action: NotificationsActions, message: string) {
+  const notification = JSON.parse(message) as NotificationPayload;
+  if (shouldDisplayNotification(action, notification)) {
+    const title = getNotificationTitle(action);
+    const text = getNotificationText(notification);
+    const type = getNotificationType(action);
+    notify({ title, text, type });
+  }
 }