@3cr/viewer-browser 0.0.162 → 0.0.195

package/src/components/modal/ViewerActionRail.vue

@@ -0,0 +1,123 @@
+<template>
+  <ActionRail
+    :actions="viewActions"
+    :menu-props="menuProps"
+    :menu-activator-props="menuActivatorProps"
+    @menu-active="onActionModal($event, view)">
+    <template #visible="{ action }">
+      <Component
+        :is="action.component"
+        :view="view"
+        :element="element"
+        variant="button"
+        @update:modal="onActionModal($event, view)"
+      />
+    </template>
+    <template #hidden="{ action }">
+      <Component
+        :is="action.component"
+        :view="view"
+        :element="element"
+        variant="menu-item"
+        @update:modal="onActionModal($event, view)"
+      />
+    </template>
+  </ActionRail>
+</template>
+
+<script setup lang="ts">
+import { computed, shallowRef } from "vue";
+import { ScanView } from "@3cr/types-ts";
+import FlipVerticalAction from "@/components/modal/actions/FlipVerticalAction.vue";
+import FlipHorizontalAction from "@/components/modal/actions/FlipHorizontalAction.vue";
+import FullscreenAction from "@/components/modal/actions/FullscreenAction.vue";
+import PanAction from "@/components/modal/actions/PanAction.vue";
+import ResetViewAction from "@/components/modal/actions/ResetViewAction.vue";
+import Rotate2dAction from "@/components/modal/actions/Rotate2dAction.vue";
+import Slice3dAction from "@/components/modal/actions/Slice3dAction.vue";
+import ZoomAction from "@/components/modal/actions/ZoomAction.vue";
+import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+
+interface Props {
+  view: ScanView;
+  element: any;
+}
+
+type Emits = {
+  modal: [boolean, number];
+};
+
+type ActionItem = {
+  component: any;
+  width: number;
+  condition: () => boolean;
+}
+
+const menuProps = {
+  closeOnContentClick: false
+};
+
+const menuActivatorProps = {
+  icon: 'more_vert',
+  variant: 'text',
+  color: 'white'
+};
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<Emits>();
+
+const viewer3cr = useViewer3cr();
+
+const viewActions = computed(() => {
+  return actions.value.filter(action => action.condition());
+});
+
+const actions = shallowRef<ActionItem[]>([
+  {
+    component: FullscreenAction,
+    width: 48,
+    condition: () => true,
+  },
+  {
+    component: ResetViewAction,
+    width: 48,
+    condition: () => true,
+  },
+  {
+    component: PanAction,
+    width: 48,
+    condition: () => true,
+  },
+  {
+    component: ZoomAction,
+    width: 48,
+    condition: () => true,
+  },
+  {
+    component: Slice3dAction,
+    width: 48,
+    condition: () => props.view === ScanView.Volume,
+  },
+  {
+    component: Rotate2dAction,
+    width: 48,
+    condition: () => props.view !== ScanView.Volume,
+  },
+  {
+    component: FlipHorizontalAction,
+    width: 48,
+    condition: () => props.view !== ScanView.Volume,
+  },
+  {
+    component: FlipVerticalAction,
+    width: 48,
+    condition: () => props.view !== ScanView.Volume,
+  }
+]);
+
+async function onActionModal(value: boolean, view: ScanView): Promise<void> {
+  await viewer3cr.hoverOverCanvas(!value); // disable unity inputs when interacting with modals
+  emit('modal', value, view);
+}
+</script>

package/src/components/modal/ViewerAnnotationModal.vue

@@ -0,0 +1,115 @@
+<template>
+  <v-menu
+    v-model="menuState"
+    min-width="0"
+    max-width="300"
+    persistent
+    :no-click-animation="true"
+    :target="target"
+    :offset="[15, 0]"
+  >
+    <v-card>
+      <v-card-title class="text-body-1 d-flex align-center">
+        <span>{{ title }}</span>
+      </v-card-title>
+      <v-card-text>
+        <v-row no-gutters>
+          <v-col cols="4">
+            <b style="font-size: 12px">Description</b>
+          </v-col>
+          <v-col>
+            <span style="font-size: 12px">{{ description }}</span>
+          </v-col>
+        </v-row>
+        <v-row no-gutters v-if="smartResponses">
+          <v-col cols="4">
+            <b style="font-size: 12px">Smart Description</b>
+          </v-col>
+          <v-col>
+            <span style="font-size: 12px">{{
+              smartResponses.GptResponse
+            }}</span>
+          </v-col>
+        </v-row>
+        <v-row no-gutters>
+          <v-col cols="4">
+            <b style="font-size: 12px">Resources</b>
+          </v-col>
+          <v-col>
+            <template v-for="action in actions">
+              <a style="font-size: 12px" :href="action.ActionData.Url">{{
+                action.ActionData.Description
+              }}</a>
+              <br />
+            </template>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { GptResponsePayload, GptService } from '@/services/gpt/gpt.service';
+import { DataOverlay, DataOverlayEvent, InteractionType } from '@3cr/types-ts';
+import { dataOverlayEvent, scanState } from '@/dataLayer/scanState';
+import { useEventListener } from "@/components/modal/composables/useEventListener";
+
+useEventListener(document, 'click', onClick);
+const annotation = ref<DataOverlay | null>(null);
+const target = ref<[number, number]>([0, 0]);
+const smartResponses = ref<GptResponsePayload | null>(null);
+
+const menuState = computed({
+  get(): boolean {
+    return !!annotation.value;
+  },
+  set(value: boolean): void {
+    if (!value) {
+      annotation.value = null;
+    }
+  },
+});
+
+const title = computed(() => {
+  return annotation.value?.Title ?? '';
+});
+
+const description = computed(() => {
+  return annotation.value?.Description ?? '';
+});
+
+const actions = computed(() => {
+  return annotation.value?.CallToAction?.Actions || [];
+});
+
+watch([
+  () => scanState.value.Orientations.Transverse.Slice,
+  () => scanState.value.Orientations.Sagittal.Slice,
+  () => scanState.value.Orientations.Coronal.Slice,
+], () => {
+  menuState.value = false;
+});
+
+watch(dataOverlayEvent, async (event: DataOverlayEvent | null) => {
+  if (event && event.Interaction === InteractionType.PointerUp) {
+    annotation.value = event.Annotation;
+    await getSmartResponses();
+  }
+});
+
+async function getSmartResponses(): Promise<void> {
+  const response = await GptService.Instantiate().GenerateAnnotations(title.value);
+  smartResponses.value = response.data;
+}
+
+function onClick(event: Event): void {
+  const e = event as MouseEvent;
+  if (dataOverlayEvent.value?.Interaction === InteractionType.PointerDown) {
+    target.value = [e.x, e.y];
+  } else {
+    menuState.value = false;
+  }
+}
+</script>

package/src/components/modal/ViewerAnnotations.vue

@@ -0,0 +1,283 @@
+<template>
+  <v-treeview
+    class="annotation-treeview"
+    :items="data"
+    density="compact"
+    item-value="id"
+    open-strategy="single"
+    @update:opened="focusSlices($event)"
+  >
+    <template #prepend="{ item }">
+      <div v-if="hasChildren(item)">
+        <v-btn
+          size="xx-small"
+          :icon="getVisibilityIcon(item)"
+          variant="text"
+          @click.stop="toggleVisibility(item)"
+        />
+      </div>
+    </template>
+    <template #title="{ item }">
+      <div class="d-flex align-center ml-1">
+        <div :style="getMaskStyles(item)">
+          <div :style="getBackgroundStyles(item)"></div>
+        </div>
+        <b class="mx-2">{{ item.id }}</b>
+        <span class="text-subtitle-2">{{ item.title }}</span>
+      </div>
+    </template>
+    <template #item="{ props }">
+      <v-row no-gutters class="px-6 py-2">
+        <v-col cols="4">
+          <b>{{ findNode(props.value)?.title }}</b>
+        </v-col>
+        <v-col>
+          <span v-html="findNode(props.value)?.description"></span>
+          <template v-for="action in findNode(props.value)?.actions">
+            <v-chip
+              v-if="action.isBtn"
+              size="small"
+              label
+              variant="tonal"
+              class="action text-wrap mb-2"
+              @click="selectAction(action)"
+            >
+              {{ action.description }}
+            </v-chip>
+            <a v-else :href="action.url">{{ action.description }}</a>
+            <br />
+          </template>
+        </v-col>
+      </v-row>
+    </template>
+  </v-treeview>
+  <AskAI
+    v-model:modal="m_askAi"
+    :title="title"
+    :question-key="questionKey"
+    :question-text="questionText"
+    @askFollowup="askFollowUpQuestion"
+  >
+  </AskAI>
+  <span
+    class="text-caption"
+    style="font-size: 8px !important; line-height: 8px !important"
+    >* Powered by ChatGPT, Smart Items are NOT for diagnostic use. Please
+    consult a medical professional for a diagnosis or treatment plan
+  </span>
+</template>
+
+<script setup lang="ts">
+import { dataOverlayState, initialScanState } from "@/dataLayer/scanState";
+import { nextTick, onMounted, ref } from "vue";
+import { ColourData, SlidersActions, Vector3Data } from "@3cr/types-ts";
+import { GptQuestion, GptService } from "@/services/gpt/gpt.service";
+import {useViewer3cr} from "@/dataLayer/useViewer3cr";
+
+interface Annotation {
+  id: string;
+  index?: number | undefined;
+  title: string;
+  description?: string;
+  icon?: string;
+  position?: Vector3Data;
+  colour?: ColourData;
+  children?: Annotation[];
+  actions?: AnnotationAction[];
+}
+
+interface AnnotationAction {
+  description: string;
+  url: string;
+  title?: string | undefined;
+  isBtn: boolean;
+}
+
+const viewer3cr = useViewer3cr();
+const data = ref<Annotation[]>([]);
+const m_askAi = ref<boolean>(false);
+const questionKey = ref<number>(0);
+const questionText = ref<string>("");
+const title = ref<string>("");
+
+onMounted(async () => {
+  data.value = await generateTreeViewData();
+});
+
+async function selectAction(action: AnnotationAction): Promise<void> {
+  questionKey.value = Number(action.url);
+  questionText.value = action.description || "";
+  title.value = action.title || "";
+  m_askAi.value = true;
+}
+
+async function askFollowUpQuestion(question: GptQuestion): Promise<void> {
+  m_askAi.value = false;
+  await nextTick();
+  questionKey.value = question.ApiPreFilledRequestKey;
+  questionText.value = question.Question;
+  m_askAi.value = true;
+}
+
+async function toggleVisibility(item: any): Promise<void> {
+  const visibility = getVisibility(item);
+  await viewer3cr.toggle2dAnnotation(item.id, !visibility);
+  await viewer3cr.toggle3dAnnotation(item.id, !visibility);
+}
+
+function getVisibilityIcon(item: Annotation): string {
+  return getVisibility(item) ? "visibility" : "visibility_off";
+}
+
+function getVisibility(item: Annotation): boolean {
+  const overlay = dataOverlayState.value.DataOverlay.DataOverlay.find(
+    (overlay) => item.id === overlay.Id
+  );
+  return overlay ? overlay.Data.Visibility2d : false;
+}
+
+function hasChildren(item: Annotation): boolean {
+  return "children" in item;
+}
+
+function findNode(
+  id: string,
+  items: Annotation | Annotation[] = data.value
+): Annotation | null {
+  if (Array.isArray(items)) {
+    const values = items
+      .map((item) => findNode(id, item))
+      .filter((item) => item);
+    return values.length > 0 ? values[0] : null;
+  } else {
+    return items.id === id
+      ? items
+      : hasChildren(items)
+      ? findNode(id, items.children)
+      : null;
+  }
+}
+
+async function generateTreeViewData(): Promise<Annotation[]> {
+  return await Promise.all(
+    dataOverlayState.value.DataOverlay.DataOverlay.map(async (overlay) => {
+      const gpt = await GptService.Instantiate()
+        .GenerateAnnotations(overlay.Data.Title)
+        .then((data) => data.data)
+        .catch((err) => ({
+          GptResponse: "failed to execute",
+          FollowupQuestions: [],
+        }));
+      return {
+        id: overlay.Id,
+        title: overlay.Data.Title,
+        icon: overlay.Data.Icon2d,
+        colour: overlay.Data.Colour2d,
+        position: overlay.Data.Position,
+        children: [
+          overlay.Data.Description
+            ? {
+                id: `${overlay.Id}-0`,
+                title: "Description",
+                description: overlay.Data.Description,
+              }
+            : {
+                id: `${overlay.Id}-2`,
+                title: "Smart Description",
+                description: gpt.GptResponse,
+              },
+          {
+            id: `${overlay.Id}-1`,
+            title: "Resources",
+            actions: overlay.Data.CallToAction?.Actions.map((action) => ({
+              description: action.ActionData.Description,
+              url: action.ActionData.Url,
+              isBtn: false,
+            })),
+          },
+          {
+            id: `${overlay.Id}-3`,
+            title: "Annotiva AI",
+            actions: gpt.FollowupQuestions.map((question) => ({
+              description: question.Question,
+              url: question.ApiPreFilledRequestKey.toString(),
+              title: overlay.Data.Title,
+              isBtn: true,
+            })),
+          },
+        ],
+      };
+    })
+  );
+}
+
+function getMaskStyles(item: Annotation): Record<string, any> {
+  const src = `data:image/png;base64, ${item.icon}`;
+  return {
+    "mask-size": "12px 12px",
+    "mask-image": `url('${src}')`,
+    "min-width": "12px",
+    "min-height": "12px",
+  };
+}
+
+function getBackgroundStyles(item: Annotation): Record<string, any> {
+  const { R, G, B, A } = item.colour!;
+  const colour = `rgb(${R * 255}, ${G * 255}, ${B * 255}, ${A * 255})`;
+  return {
+    "background-color": colour,
+    "min-width": "12px",
+    "min-height": "12px",
+  };
+}
+
+async function focusSlices(ids: unknown[]): Promise<void> {
+  const id = ids.length > 0 ? ids[0] : null;
+  if (!id) { return; }
+
+  const item = findNode(id as string);
+  if (!item) { return; }
+
+  const x = item.position?.X ?? 0;
+  const y = item.position?.Y ?? 0;
+  const z = item.position?.Z ?? 0;
+
+  const xSpace = initialScanState.value.XSpacing || 1;
+  const ySpace = initialScanState.value.YSpacing || 1;
+  const zSpace = initialScanState.value.ZSpacing || 1;
+
+  const sagittal = Math.round(x / xSpace);
+  const transverse = Math.round(y / ySpace);
+  const coronal = Math.round(z / zSpace);
+
+  await viewer3cr.sliderHandler(SlidersActions.sl12, sagittal);
+  await viewer3cr.sliderHandler(SlidersActions.sl09, coronal);
+  await viewer3cr.sliderHandler(SlidersActions.sl15, transverse);
+}
+</script>
+
+<style lang="scss">
+.annotation-treeview {
+  font-size: 12px;
+  padding-top: 0;
+
+  .v-list-group {
+    .v-list-item {
+      padding: 0 2px;
+    }
+  }
+
+  .v-list-group ~ .v-list-group {
+    border-top: thin solid rgb(100%, 100%, 100%, var(--v-border-opacity));
+  }
+
+  .v-chip.action {
+    text-wrap: wrap;
+    word-wrap: break-word;
+    min-height: 42px;
+    line-height: 14px !important;
+    height: unset;
+    padding: 4px 8px;
+  }
+}
+</style>

package/src/components/modal/ViewerDisplaySettings.vue

@@ -0,0 +1,102 @@
+<template>
+  <v-row class="flex-column" no-gutters>
+    <v-row no-gutters>
+      <v-col>
+        <DoubleSliderSelector
+          id="skin-to-bone"
+          v-model:value="windowSlider"
+          v-bind="huMinMax"
+          label="Skin to Bone"
+        />
+      </v-col>
+    </v-row>
+    <v-row no-gutters>
+      <v-col>
+        <DoubleSliderSelector
+          v-model:value="thresholdSlider"
+          v-bind="huMinMax"
+          label="Fine Adjustment"
+        />
+      </v-col>
+    </v-row>
+    <v-row no-gutters>
+      <v-col>
+        <v-select
+          class="pt-4"
+          data-testid="greyscale"
+          :model-value="currentGreyscalePreset"
+          :items="initialScanState.GreyscalePresets"
+          label="Greyscale Preset"
+          item-text="Name"
+          density="compact"
+          variant="outlined"
+          persistent-placeholder
+          hide-details
+          return-object
+          placeholder="None"
+          @update:model-value="onGreyscalePresetChange"
+        >
+          <template #item="{ props, item }">
+            <v-list-item
+              v-bind="props"
+              :title="item.raw.Name"
+              lines="three"
+            >
+              <template v-slot:subtitle>
+                Skin Density:
+                <span class="text-mono">{{ item.raw.Lower }}</span>
+                <v-spacer />
+                Bone Density:
+                <span class="text-mono">{{ item.raw.Upper }}</span>
+              </template>
+            </v-list-item>
+          </template>
+          <template v-slot:selection="{ item }">
+            <span>{{ item.raw.Name }}</span>
+          </template>
+        </v-select>
+      </v-col>
+    </v-row>
+    <v-row no-gutters>
+      <v-col>
+        <v-select
+          class="pt-4"
+          data-testid="colour"
+          :model-value="currentColourPreset"
+          :items="initialScanState.ColourPresets"
+          label="Colour Preset"
+          variant="outlined"
+          density="compact"
+          item-title="Name"
+          hide-details
+          placeholder="Select a Colour Preset"
+          return-object
+          @update:model-value="onColourPresetChange"
+        ></v-select>
+      </v-col>
+    </v-row>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import {
+  currentColourPreset,
+  currentGreyscalePreset,
+  huMinMax,
+  initialScanState,
+  thresholdSlider,
+  windowSlider
+} from "@/dataLayer/scanState";
+import { ColourPresetData, GreyscalePresetData, PresetsActions } from "@3cr/types-ts";
+import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+
+const viewer3cr = useViewer3cr();
+
+async function onGreyscalePresetChange(preset: GreyscalePresetData): Promise<void> {
+  await viewer3cr.setPreset(PresetsActions.pr01, preset);
+}
+
+async function onColourPresetChange(preset: ColourPresetData): Promise<void> {
+  await viewer3cr.setPreset(PresetsActions.pr02, preset);
+}
+</script>

package/src/components/modal/ViewerNavigationDrawer.vue

@@ -0,0 +1,90 @@
+<template>
+  <v-navigation-drawer
+    class="motif-background"
+    :model-value="true"
+    :rail="!drawer"
+    rail-width="72"
+    width="350"
+    permanent
+    touchless
+  >
+    <template #prepend>
+      <ViewerNavigationDrawerHeader :drawer="drawer" />
+    </template>
+    <template #default>
+      <ViewerNavigationDrawerContent v-model:drawer="drawer" :options="options" @update:expanded="emit('update:expanded', $event)" />
+    </template>
+    <template #append>
+      <v-divider />
+      <ViewerNavigationDrawerFooter :drawer="drawer" :options="options" />
+    </template>
+  </v-navigation-drawer>
+  <v-btn
+    data-testid="toggle"
+    height="84"
+    color="grey"
+    variant="flat"
+    width="20"
+    min-width="20"
+    class="toggle"
+    :style="!drawer ? 'left: 72px' : 'left: 350px'"
+    @click="drawer = !drawer"
+  >
+    <v-icon color="black">
+      {{ !drawer ? "chevron_right" : "chevron_left" }}
+    </v-icon>
+  </v-btn>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { LoadViewerOptions } from "@/models/LoadViewerOptions";
+
+interface Props {
+  options: LoadViewerOptions;
+  drawer?: boolean;
+}
+
+type Emits = {
+  'update:drawer': [boolean];
+  'update:expanded': [number | undefined];
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  drawer: false
+});
+
+const emit = defineEmits<Emits>();
+
+const _drawer = ref<boolean>(props.drawer);
+
+const drawer = computed({
+  get(): boolean {
+    return _drawer.value;
+  },
+  set(value: boolean): void {
+    _drawer.value = value;
+    emit('update:drawer', value);
+  }
+});
+
+watch(() => props.drawer, (value: boolean) => {
+  drawer.value = value;
+});
+
+defineExpose({ drawer });
+</script>
+
+<style scoped>
+.toggle {
+  border-bottom-left-radius: 0 !important;
+  border-top-left-radius: 0 !important;
+  padding: 0;
+  position: absolute;
+  top: 50%;
+  opacity: 0.7;
+  z-index: 1;
+  transform: translateY(-50%);
+  transition: 0.25s left;
+}
+</style>