@3cr/viewer-browser 0.0.220 → 0.0.246

package/src/components/modal/buttons/AutoAnnotateBtn.vue

@@ -1,15 +1,44 @@
 <template>
-  <v-btn
-    v-if="opts.OnAutoAnnotate"
-    @click="autoAnnotate()"
-    :loading="loading"
-    :icon="true"
-    variant="text"
-    :disabled="done"
-  >
-    <v-icon>flash_auto</v-icon>
-    <v-tooltip activator="parent" location="bottom">Auto Annotate</v-tooltip>
-  </v-btn>
+  <div>
+    <v-menu :close-on-content-click="false" v-if="opts.OnAutoAnnotate">
+      <template #activator="{ props }">
+        <v-btn v-bind="props" data-testid="menu" class="mx-2" color="primary" prepend-icon="psychology" variant="flat">
+          AI
+        </v-btn>
+      </template>
+      <v-list>
+        <v-list-item
+          data-testid="auto_annotate"
+          v-if="opts.OnAutoAnnotate"
+          @click="autoAnnotate()"
+          :disabled="done"
+          prepend-icon="flash_auto"
+          :append-icon="done ? 'check' : undefined"
+        >
+          <v-list-item-title>Auto Annotate</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+    <v-dialog v-model:model-value="loading">
+      <template #default>
+        <v-card :title="`Annotiva AI: ${type}`" max-width="450" class="mx-auto">
+          <div class="prompt">
+            <div style="font-size: 6px; top: 30px; left: 40px">
+              <div class="cog" style="--cog-colour: #5a93ed"></div>
+              <div
+                class="cog anti-clockwise"
+                style="--cog-colour: #2955da; margin-top: 2.25em; margin-left: -3.375em"
+              ></div>
+              <div class="cog" style="--cog-colour: #bad3f8; margin-top: 5.625em; margin-left: -1.125em"></div>
+            </div>
+            <v-card-text class="ml-10" style="font-size: 16px">
+              {{ text }}
+            </v-card-text>
+          </div>
+        </v-card>
+      </template>
+    </v-dialog>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -19,11 +48,150 @@ import { ref } from 'vue';
 const opts = useViewerOptions();
 const loading = ref<boolean>(false);
 const done = ref<boolean>(false);
+const text = ref<string>('');
+const type = ref<string>('');
 
 async function autoAnnotate() {
+  type.value = 'Auto Annotate';
+  text.value = getRandomItemFromList(loaderTexts);
   loading.value = true;
   await opts.value!.OnAutoAnnotate!();
-  loading.value = false;
-  done.value = true;
+  setTimeout(() => {
+    loading.value = false;
+    done.value = true;
+  }, 4000);
 }
+
+function getRandomItemFromList(list: Array<string>) {
+  const randomIndex = Math.floor(Math.random() * list.length);
+  return list[randomIndex];
+}
+
+const loaderTexts = [
+  "AI: Analyzing X-rays faster than you can say 'supercalifragilisticexpialidocious'!",
+  'Just a moment, our AI is putting on its lab coat.',
+  'Scanning pixels like Sherlock scans clues.',
+  'Our AI is channeling its inner doctor.',
+  'Hang tight, our AI is donning its stethoscope.',
+  "Analyzing with AI precision – because guessing isn't an option!",
+  'Our AI is checking the scan like a detective at a crime scene.',
+  'Crunching data like a pro! Results on the way.',
+  'AI is on it, decoding your scan like a mystery novel.',
+  'Our AI is in deep thought... about your health!',
+  'Letting our AI take a close look at those pixels.',
+  'Your scan is getting the AI treatment.',
+  'Analyzing like a champ! Our AI is almost there.',
+  'Hold tight! Our AI is putting on its thinking cap.',
+  'AI is hard at work, diagnosing like a pro!',
+  'Our AI is busy solving the puzzle of your scan.',
+  'AI is processing... and sipping virtual coffee.',
+  "Your scan is in good hands – AI's hands.",
+  'Just a sec, our AI is perfecting the diagnosis.',
+  'Scanning... AI style.',
+  'AI is reading your scan like an open book.',
+  'Give us a moment, our AI is analyzing every detail.',
+  'Our AI is double-checking for good measure.',
+  'AI: Making sense of pixels and patterns.',
+  'AI is decoding your scan, Sherlock style.',
+  'Processing with precision – AI is on it.',
+  'Our AI is diving deep into the data.',
+  'AI is dissecting the details for an accurate diagnosis.',
+  'Hold on, our AI is piecing together the puzzle.',
+  'AI is at the helm, navigating your scan results.',
+  'Analyzing with AI magic – results coming up!',
+  'Our AI is untangling the mysteries of your scan.',
+  "Processing... AI's putting its brain to work.",
+  'Your scan + our AI = accurate results.',
+  'AI is fine-tuning the analysis for perfection.',
+  'Letting our AI do the heavy lifting – almost done!',
+  'AI is reading the scan like a pro.',
+  'Our AI is on a mission – accurate results ahead.',
+  'Analyzing with AI expertise – hang tight!',
+  'AI is taking a closer look – results are on the way.'
+];
 </script>
+<style>
+.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;
+}
+
+div.cog {
+  nfont-size: 25px;
+  border-radius: 0.25em;
+  border: solid 0.55em var(--cog-colour, #eee);
+  display: inline-block;
+  padding: 1.125em;
+  position: absolute;
+  top: inherit;
+  left: inherit;
+  -webkit-animation: rotate var(--cog-speed, 3s) linear infinite;
+  -moz-animation: rotate var(--cog-speed, 3s) linear infinite;
+  animation: rotate var(--cog-speed, 3s) linear infinite;
+}
+
+div.cog.anti-clockwise {
+  -webkit-animation-direction: reverse;
+  -moz-animation-direction: reverse;
+  animation-direction: reverse;
+}
+
+div.cog::before {
+  border: solid 0.55em var(--cog-colour, #eee);
+  padding: 1.125em;
+  position: absolute;
+  content: '';
+  transform: translate(-1.675em, -1.675em) rotate(45deg);
+  border-radius: 0.25em;
+}
+
+div.cog::after {
+  content: '';
+  position: absolute;
+  border: solid 1em var(--cog-colour, #eee);
+  padding: 0.375em;
+  border-radius: 1.8125em;
+  transform: translate(-1.375em, -1.375em);
+  filter: brightness(87.5%);
+}
+
+@-moz-keyframes rotate {
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+</style>

package/src/components/modal/menus/FileMenu.vue

@@ -1,14 +1,7 @@
 <template>
   <v-menu :close-on-content-click="false">
-    <template #activator="{ props, isActive }">
-      <v-btn
-        v-bind="props"
-        data-testid="menu"
-        class="mr-2"
-        :color="isActive ? 'secondary' : 'primary'"
-        prepend-icon="description"
-        variant="flat"
-      >
+    <template #activator="{ props }">
+      <v-btn v-bind="props" data-testid="menu" class="mr-2" color="primary" prepend-icon="description" variant="flat">
         File
       </v-btn>
     </template>

package/src/components/modal/menus/SettingsMenu.vue

@@ -1,12 +1,7 @@
 <template>
   <v-menu v-model="menuState" :close-on-content-click="false">
-    <template #activator="{ props, isActive }">
-      <v-btn
-        v-bind="mergeProps(props, activatorProps)"
-        :color="isActive ? 'secondary' : 'primary'"
-        prepend-icon="settings"
-        variant="flat"
-      >
+    <template #activator="{ props }">
+      <v-btn v-bind="mergeProps(props, activatorProps)" color="primary" prepend-icon="settings" variant="flat">
         Settings
       </v-btn>
     </template>

package/src/components/navigation/mcad/McadGlobalActions.vue

@@ -0,0 +1,20 @@
+<template>
+  <v-card flat density="compact" color="transparent">
+    <v-card-title class="text-overline">Global Actions</v-card-title>
+    <v-card-text class="d-flex flex-column ga-1">
+      <mcad-global-scan-view-btn />
+      <!--      <mcad-global-visibility-btn :mcads="items" />-->
+      <!--      <mcad-global-opacity-slider :mcads="items" />-->
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { DataOverlayMcad } from '@/types/data-overlay-mcad';
+
+interface Props {
+  items: DataOverlayMcad[];
+}
+
+defineProps<Props>();
+</script>

package/src/components/navigation/mcad/McadGlobalOpacitySlider.vue

@@ -0,0 +1,103 @@
+<template>
+  <v-row class="flex-column" no-gutters>
+    <v-row no-gutters>
+      <v-col>
+        <span class="text-caption">Global Opacity</span>
+      </v-col>
+    </v-row>
+    <v-row no-gutters>
+      <v-col class="my-auto" cols="9">
+        <v-slider
+          v-model="opacity"
+          class="pr-4"
+          hide-details
+          min="0"
+          max="100"
+          thumb-color="primary"
+          thumb-size="16"
+          step="1"
+        />
+      </v-col>
+      <v-col class="my-auto" cols="3">
+        <v-text-field
+          v-model="opacity"
+          density="compact"
+          hide-details
+          variant="outlined"
+          type="number"
+          min="0"
+          max="100"
+        >
+          <template #append-inner>
+            <v-icon icon="percent" size="16" />
+          </template>
+        </v-text-field>
+      </v-col>
+    </v-row>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import { DataOverlayMcad } from '@/types/data-overlay-mcad';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { computed, ref } from 'vue';
+import { ObjectColour } from '@3cr/types-ts';
+import { clamp } from '@/functions/clamp';
+import { useDebounce } from '@/composables/useDebounce';
+
+interface Props {
+  mcads: DataOverlayMcad[];
+}
+
+const props = defineProps<Props>();
+
+const viewer3cr = useViewer3cr();
+const setOpacityDebounce = useDebounce(setOpacity, 500);
+
+const _opacity = ref<number>(100);
+
+const opacity = computed({
+  get(): number {
+    return _opacity.value;
+  },
+  set(value: number): void {
+    const next = clamp(value, 0, 100);
+    _opacity.value = next;
+    setOpacityDebounce(next);
+  }
+});
+
+async function setOpacity(value: number): Promise<void> {
+  const alpha = clamp(value, 0, 100) / 100;
+  for (const mcad of props.mcads) {
+    const message: ObjectColour = {
+      Version: '0.0.0',
+      Id: mcad.Id,
+      Colour: {
+        Version: '0.0.0',
+        R: mcad.Colour.R,
+        G: mcad.Colour.G,
+        B: mcad.Colour.B,
+        A: alpha
+      }
+    };
+    await viewer3cr.setMcadObjectColour(message);
+  }
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.v-field) {
+  padding-right: 1px !important;
+}
+
+:deep(input) {
+  font-size: 11px;
+  padding: 4px 0 4px 4px;
+  min-height: 0;
+}
+
+:deep(.v-field__append-inner) {
+  padding-top: 4px;
+}
+</style>

package/src/components/navigation/mcad/McadGlobalScanViewBtn.vue

@@ -0,0 +1,28 @@
+<template>
+  <v-btn variant="text" size="small" @click="toggle">
+    <v-icon start :icon="icon" size="20" />
+    <span>{{ visibility ? 'Hide' : 'Show' }} 3D Volume</span>
+  </v-btn>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { ScanView, ViewToggleData } from '@3cr/types-ts';
+import { scanState } from '@/models/scanState';
+
+const viewer3cr = useViewer3cr();
+
+const visibility = computed(() => {
+  return scanState.value.Orientations.Volume.Visibility;
+});
+
+const icon = computed(() => {
+  return visibility.value ? 'visibility' : 'visibility_off';
+});
+
+async function toggle(): Promise<void> {
+  const message: ViewToggleData = { Version: '0.0.0', View: ScanView.Volume, Visibility: !visibility.value };
+  await viewer3cr.viewSelectionToggleView(message);
+}
+</script>

package/src/components/navigation/mcad/McadGlobalVisibilityBtn.vue

@@ -0,0 +1,38 @@
+<template>
+  <v-btn variant="text" size="small" @click="toggle">
+    <v-icon start :icon="icon" size="20" />
+    <span>{{ visibility ? 'Hide' : 'Show' }} all MCADs</span>
+  </v-btn>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { DataOverlayMcad } from '@/types/data-overlay-mcad';
+import { ObjectVisibility } from '@3cr/types-ts';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+
+interface Props {
+  mcads: DataOverlayMcad[];
+}
+
+const props = defineProps<Props>();
+
+const viewer3cr = useViewer3cr();
+
+const visibility = computed(() => {
+  return props.mcads.some((mcad) => mcad.Visibility);
+});
+
+const icon = computed(() => {
+  return visibility.value ? 'visibility' : 'visibility_off';
+});
+
+async function toggle(): Promise<void> {
+  for (const mcad of props.mcads) {
+    const message: ObjectVisibility = { Version: '0.0.0', Id: mcad.Id, Visibility: !visibility.value };
+    await viewer3cr.setMcadObjectVisibility(message);
+  }
+}
+
+defineOptions({ inheritAttrs: false });
+</script>

package/src/components/shared/LoadingSpinner.vue

@@ -4,12 +4,12 @@ export interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  text: "Loading Online Viewer",
+  text: 'Loading Online Viewer'
 });
 </script>
 
 <template>
-  <div style="height: 100%">
+  <div class="w-100 h-100">
     <div id="spinner">
       <div class="content">
         <div class="circle"></div>
@@ -20,12 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
     </div>
     <div
       class="mx-auto text-center text-white text-h3"
-      style="
-        position: absolute;
-        bottom: 10%;
-        left: 50%;
-        transform: translateX(-50%);
-      "
+      style="position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%)"
       v-html="props.text"
     ></div>
   </div>
@@ -62,20 +57,9 @@ const props = withDefaults(defineProps<Props>(), {
   --in: 80%;
   --ar: #8799a4;
   --dt: #ffffff;
-  --shadow: drop-shadow(0vmin 0vmin 0.5vmin rgba(0, 0, 0, 0.35))
-    drop-shadow(0vmin 1vmin 0.5vmin rgba(0, 0, 0, 0.09));
-  --cross: linear-gradient(
-      0deg,
-      #fff0 calc(50% - 2px),
-      #000 calc(50% - 1px) calc(50% + 1px),
-      #fff0 calc(50% + 2px)
-    ),
-    linear-gradient(
-      90deg,
-      #fff0 calc(50% - 2px),
-      #000 calc(50% - 1px) calc(50% + 1px),
-      #fff0 calc(50% + 2px)
-    );
+  --shadow: drop-shadow(0vmin 0vmin 0.5vmin rgba(0, 0, 0, 0.35)) drop-shadow(0vmin 1vmin 0.5vmin rgba(0, 0, 0, 0.09));
+  --cross: linear-gradient(0deg, #fff0 calc(50% - 2px), #000 calc(50% - 1px) calc(50% + 1px), #fff0 calc(50% + 2px)),
+    linear-gradient(90deg, #fff0 calc(50% - 2px), #000 calc(50% - 1px) calc(50% + 1px), #fff0 calc(50% + 2px));
   border: 6vmin solid var(--ar);
   width: var(--in);
   height: var(--in);
@@ -87,10 +71,12 @@ const props = withDefaults(defineProps<Props>(), {
   top: 15vmin;
   right: -10vmin;
   animation: spin-bot var(--sp) ease 0s infinite;
-  background-image: var(--cross),
-    radial-gradient(var(--dt) 5.5vmin, #fff0 calc(5.5vmin + 1px));
+  background-image: var(--cross), radial-gradient(var(--dt) 5.5vmin, #fff0 calc(5.5vmin + 1px));
   background-repeat: no-repeat;
-  background-size: 3vmin 1vmin, 1vmin 3vmin, 100% 100%;
+  background-size:
+    3vmin 1vmin,
+    1vmin 3vmin,
+    100% 100%;
   background-position: center center;
   filter: var(--shadow);
 }
@@ -100,11 +86,13 @@ const props = withDefaults(defineProps<Props>(), {
   top: -2vmin;
   animation: spin-top var(--sp) ease 0s infinite;
   transform: rotate(-45deg);
-  background-image: var(--cross),
-    radial-gradient(var(--dt) 1.25vmin, #fff0 calc(1.25vmin + 1px));
+  background-image: var(--cross), radial-gradient(var(--dt) 1.25vmin, #fff0 calc(1.25vmin + 1px));
   right: -4vmin;
   filter: hue-rotate(10deg) var(--shadow);
-  background-size: 1.4vmin 1vmin, 1vmin 1.4vmin, 100% 100%;
+  background-size:
+    1.4vmin 1vmin,
+    1vmin 1.4vmin,
+    100% 100%;
 }
 
 .circle:nth-child(3) {
@@ -113,10 +101,12 @@ const props = withDefaults(defineProps<Props>(), {
   left: -13vmin;
   transform: rotate(175deg);
   animation: spin-left var(--sp) ease calc(var(--sp) / 4) infinite;
-  background-image: var(--cross),
-    radial-gradient(var(--dt) 9vmin, #fff0 calc(9vmin + 1px));
+  background-image: var(--cross), radial-gradient(var(--dt) 9vmin, #fff0 calc(9vmin + 1px));
   filter: hue-rotate(20deg) var(--shadow);
-  background-size: 5vmin 1vmin, 1vmin 5vmin, 100% 100%;
+  background-size:
+    5vmin 1vmin,
+    1vmin 5vmin,
+    100% 100%;
 }
 
 .circle:nth-child(4) {
@@ -124,12 +114,13 @@ const props = withDefaults(defineProps<Props>(), {
   top: 35vmin;
   left: -6vmin;
   transform: rotate(-280deg);
-  animation: spin-last var(--sp) ease
-    calc(calc(calc(var(--sp) / 4) + var(--sp)) * -1) infinite;
-  background-image: var(--cross),
-    radial-gradient(var(--dt) 2.5vmin, #fff0 calc(2.5vmin + 1px));
+  animation: spin-last var(--sp) ease calc(calc(calc(var(--sp) / 4) + var(--sp)) * -1) infinite;
+  background-image: var(--cross), radial-gradient(var(--dt) 2.5vmin, #fff0 calc(2.5vmin + 1px));
   filter: hue-rotate(30deg) var(--shadow);
-  background-size: 2vmin 1vmin, 1vmin 2vmin, 100% 100%;
+  background-size:
+    2vmin 1vmin,
+    1vmin 2vmin,
+    100% 100%;
 }
 
 @keyframes spin-all {

package/src/components/views/AnnotationTreeView.vue

@@ -89,7 +89,9 @@ const questionText = ref<string>('');
 const title = ref<string>('');
 
 function setTreeViewData(annotations: DataOverlayData<DataOverlayAnnotation>[]): void {
-  data.value = annotations.map((annotation) => mapToTreeViewItem(annotation));
+  data.value = annotations
+    .sort((a, b) => a.Data.Title.localeCompare(b.Data.Title))
+    .map((annotation) => mapToTreeViewItem(annotation));
 }
 
 watch(

package/src/components/views/MarkupTreeView.vue

@@ -61,7 +61,9 @@ watch(
 );
 
 function setTreeViewData(markups: DataOverlayData<DataOverlayMarkup>[]): void {
-  data.value = markups.map((markup) => mapToTreeViewItem(markup));
+  data.value = markups
+    .sort((a, b) => a.Data.Title.localeCompare(b.Data.Title))
+    .map((markup) => mapToTreeViewItem(markup));
 }
 
 function getMarkupColour(data: DataOverlayData<DataOverlayMarkup>): string {