fix(tools): show frame number in cine measurement details

Measurement details rendered "Slice: 1" for ruler/polygon/rectangle
annotations on cine ultrasound, because cine annotations store
`frame` and pin `slice` to 0. Display "Frame: N" when `tool.frame`
is set.

Author: PaulHax

src/components/MeasurementRulerDetails.vue

@@ -11,7 +11,10 @@ const toolStore = useRulerStore();
 
 <template>
   <v-row>
-    <v-col cols="4">Slice: {{ tool.slice + 1 }}</v-col>
+    <v-col v-if="tool.frame != null" cols="4">
+      Frame: {{ tool.frame + 1 }}
+    </v-col>
+    <v-col v-else cols="4">Slice: {{ tool.slice + 1 }}</v-col>
     <v-col cols="4">Axis: {{ tool.axis }}</v-col>
     <v-col>
       Length:

src/components/MeasurementToolDetails.vue

@@ -8,7 +8,10 @@ defineProps<{
 
 <template>
   <v-row>
-    <v-col cols="4">Slice: {{ tool.slice + 1 }}</v-col>
+    <v-col v-if="tool.frame != null" cols="4">
+      Frame: {{ tool.frame + 1 }}
+    </v-col>
+    <v-col v-else cols="4">Slice: {{ tool.slice + 1 }}</v-col>
     <v-col cols="4">Axis: {{ tool.axis }}</v-col>
   </v-row>
 </template>

src/components/__tests__/MeasurementDetails.spec.ts

@@ -0,0 +1,68 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import MeasurementToolDetails from '@/src/components/MeasurementToolDetails.vue';
+import MeasurementRulerDetails from '@/src/components/MeasurementRulerDetails.vue';
+import { ToolID } from '@/src/types/annotation-tool';
+
+vi.mock('@/src/store/tools/rulers', () => ({
+  useRulerStore: () => ({
+    lengthByID: { 'tool-1': 12.345 },
+  }),
+}));
+
+const stubs = {
+  'v-row': { template: '<div><slot /></div>' },
+  'v-col': { template: '<div><slot /></div>' },
+};
+
+const baseTool = {
+  id: 'tool-1' as ToolID,
+  imageID: 'img-1',
+  frameOfReference: {
+    planeOrigin: [0, 0, 0] as [number, number, number],
+    planeNormal: [0, 0, 1] as [number, number, number],
+  },
+  color: '#fff',
+  name: 'Tool',
+  axis: 'Axial',
+};
+
+describe('MeasurementToolDetails', () => {
+  it('shows slice number for a volume annotation', () => {
+    const wrapper = mount(MeasurementToolDetails, {
+      props: { tool: { ...baseTool, slice: 4 } },
+      global: { stubs },
+    });
+    expect(wrapper.text()).toContain('Slice: 5');
+    expect(wrapper.text()).not.toContain('Frame:');
+  });
+
+  it('shows frame number for a cine annotation', () => {
+    const wrapper = mount(MeasurementToolDetails, {
+      props: { tool: { ...baseTool, slice: 0, frame: 7 } },
+      global: { stubs },
+    });
+    expect(wrapper.text()).toContain('Frame: 8');
+    expect(wrapper.text()).not.toContain('Slice:');
+  });
+});
+
+describe('MeasurementRulerDetails', () => {
+  it('shows slice number for a volume ruler', () => {
+    const wrapper = mount(MeasurementRulerDetails, {
+      props: { tool: { ...baseTool, slice: 9 } },
+      global: { stubs },
+    });
+    expect(wrapper.text()).toContain('Slice: 10');
+    expect(wrapper.text()).not.toContain('Frame:');
+  });
+
+  it('shows frame number for a cine ruler', () => {
+    const wrapper = mount(MeasurementRulerDetails, {
+      props: { tool: { ...baseTool, slice: 0, frame: 2 } },
+      global: { stubs },
+    });
+    expect(wrapper.text()).toContain('Frame: 3');
+    expect(wrapper.text()).not.toContain('Slice:');
+  });
+});