fix(ScalarProbe): calculate position from IJK

Better shortening of long values and layer names

Author: PaulHax

src/components/ProbeView.vue

@@ -16,7 +16,11 @@ const formattedProbeItems = computed(() => {
   // Add additional item for Position
   const positionItem = {
     label: 'Position',
-    value: probeData.value.pos.map(Math.round).join(', '),
+    value: Array.from(probeData.value.pos)
+      .map((value) => {
+        return Number(value).toPrecision(4);
+      })
+      .join(', '),
   };
 
   return [...sampleItems, positionItem];
@@ -30,11 +34,17 @@ const formattedProbeItems = computed(() => {
         v-for="(item, index) in formattedProbeItems"
         :key="index"
         class="d-flex"
+        style="max-width: 100%"
       >
-        <span class="text-left text-truncate mr-2">
+        <span
+          class="text-left text-truncate mr-2 flex-grow-0 flex-shrink-1"
+          style="min-width: 6rem; max-width: 50%"
+        >
           {{ item.label }}
         </span>
-        <span class="text-right ml-auto font-weight-bold">
+        <span
+          class="text-right font-weight-bold text-truncate flex-grow-1 flex-shrink-1"
+        >
           {{ item.value }}
         </span>
       </div>

src/components/tools/ScalarProbe.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { inject, watch, computed, toRefs } from 'vue';
+import type { ReadonlyVec3 } from 'gl-matrix';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
@@ -101,10 +102,13 @@ watch(
 );
 
 const getImageSamples = (x: number, y: number) => {
+  const firstToSample = sampleSet.value[0];
+  if (!firstToSample) return undefined;
+
   pointPicker.pick([x, y, 1.0], view.renderer);
   if (pointPicker.getActors().length === 0) return undefined;
 
-  const ijk = pointPicker.getPointIJK();
+  const ijk = pointPicker.getPointIJK() as unknown as ReadonlyVec3;
   const samples = sampleSet.value.map((item: any) => {
     const dims = item.image.getDimensions();
     const scalarData = item.image.getPointData().getScalars();
@@ -123,8 +127,10 @@ const getImageSamples = (x: number, y: number) => {
     return { ...baseInfo, displayValue: scalars };
   });
 
+  const position = firstToSample.image.indexToWorld(ijk);
+
   return {
-    pos: pointPicker.getPickPosition(),
+    pos: position,
     samples,
   };
 };

src/store/probe.ts

@@ -1,5 +1,6 @@
 import { ref } from 'vue';
 import { defineStore } from 'pinia';
+import { vec3 } from 'gl-matrix';
 
 export type ProbeSample = {
   id: string;
@@ -9,7 +10,7 @@ export type ProbeSample = {
 
 export type ProbeData =
   | {
-      pos: number[];
+      pos: vec3;
       samples: ProbeSample[];
     }
   | undefined;