fix(ScalarProbe): calculate position from IJK

Better shortening of long values and layer names

Author: PaulHax

src/components/ProbeView.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useProbeStore } from '@/src/store/probe';
 import { storeToRefs } from 'pinia';
+import { useProbeStore } from '@/src/store/probe';
+import { shortenNumber } from '@/src/utils';
 
 const probeStore = useProbeStore();
 const { probeData } = storeToRefs(probeStore);
@@ -10,13 +11,15 @@ const formattedProbeItems = computed(() => {
   if (!probeData.value) return [];
   const sampleItems = probeData.value.samples.map((sample) => ({
     label: sample.name,
-    value: sample.displayValue.join(', '),
+    value: sample.displayValues
+      .map((item) => (typeof item === 'number' ? shortenNumber(item) : item))
+      .join(', '),
   }));
 
   // Add additional item for Position
   const positionItem = {
     label: 'Position',
-    value: probeData.value.pos.map(Math.round).join(', '),
+    value: Array.from(probeData.value.pos).map(Math.round).join(', '),
   };
 
   return [...sampleItems, positionItem];
@@ -30,11 +33,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();
@@ -115,16 +119,18 @@ const getImageSamples = (x: number, y: number) => {
     if (item.type === 'segmentGroup') {
       return {
         ...baseInfo,
-        displayValue: scalars.map(
+        displayValues: scalars.map(
           (v) => item.segments.byValue[v]?.name || 'Background'
         ),
       };
     }
-    return { ...baseInfo, displayValue: scalars };
+    return { ...baseInfo, displayValues: scalars };
   });
 
+  const position = firstToSample.image.indexToWorld(ijk);
+
   return {
-    pos: pointPicker.getPickPosition(),
+    pos: position,
     samples,
   };
 };

src/store/probe.ts

@@ -1,15 +1,16 @@
 import { ref } from 'vue';
 import { defineStore } from 'pinia';
+import { vec3 } from 'gl-matrix';
 
 export type ProbeSample = {
   id: string;
   name: string;
-  displayValue: (string | number)[];
+  displayValues: (string | number)[];
 };
 
 export type ProbeData =
   | {
-      pos: number[];
+      pos: vec3;
       samples: ProbeSample[];
     }
   | undefined;

src/utils/index.ts

@@ -283,3 +283,14 @@ export function normalizeForStore<T, K extends keyof T>(objects: T[], key: K) {
 
   return { order, byKey };
 }
+
+export function shortenNumber(value: number) {
+  if (Number.isInteger(value)) {
+    return value.toString();
+  }
+  const abs = Math.abs(value);
+  if (abs > 0 && abs < 1) {
+    return value.toExponential(2);
+  }
+  return value.toFixed(2);
+}