Merge pull request #827 from Kitware/tooltips

Hover over tool fill shows tooltips and Sparse state file

Author: PaulHax

.github/workflows/e2e.yml

@@ -10,7 +10,7 @@ jobs:
     name: E2E Testing on ${{ matrix.os }}
     runs-on: ${{ matrix.os }}
     env:
-      DOWNLOAD_TIMEOUT: 220000
+      DOWNLOAD_TIMEOUT: 60000
       VITE_SHOW_SAMPLE_DATA: true
     steps:
       - uses: actions/checkout@v4

docs/loading_data.md

@@ -67,3 +67,7 @@ To layer images:
 1. Under the Rendering tab, an opacity slider changes the transparency of the upper layer.
 
 ![Add Layer](./assets/add-layer.jpg)
+
+## State Files
+
+Load preconfigured scenes with annotations, segment groups, and view settings via [state files](./state_files.md). State files can embed data (`*.volview.zip`) or reference remote data via URIs (`*.volview.json`).

docs/state_files.md

@@ -1,11 +1,69 @@
 # State Files
 
-VolView state files are a great way to save your scene and data to either be used later, or for distributing to collaborators and other users. These files store all of the information you need to restore the state of VolView: your data, annotations, camera positions, background colors, colormaps, multi-view layouts, and more.
+VolView state files save your scene configuration: annotations, camera positions, colormaps, layouts, and more. There are two formats:
 
-State files can be saved by clicking on "Disk" icon in the top of the toolbar. This button will generate a `*.volview.zip` file that can then be re-opened in VolView at any time.
+## Zip State Files (`*.volview.zip`)
 
-When saving VolView state, your data is saved along with the application state. This way, when you send a state file to a collaborator, they too can open the state file and load the previously saved data. However, this means that your state file will be as large as your dataset(s) and may contain patient identifying information. Please follow your institutes HIPAA, IRB and other regulatory and confidentiality requirements.
+Save by clicking the "Disk" icon in the toolbar. This embeds your image data that was loaded from local files alongside the application state. Useful for sharing annotations with collaborators.
 
-State files are loaded by clicking on the "Folder" icon immediately below the save-state Disk icon. This will bring up a file browser for you to select and load your state file.
+## Sparse Manifest Files (`*.volview.json`)
 
-TIP: State files are a great way for developers to transfer data into / out of VolView for integration with other systems. For example, they can be used to integrate VolView with access control systems, to streamline workflows, or to ingest results from AI systems.
+JSON files that reference remote data via URIs instead of embedding it. Useful for:
+
+- Linking to data hosted on servers
+- Sharing annotations without duplicating large datasets
+- Integrating with external systems (AI pipelines, access control, etc.)
+
+Example manifest:
+
+```json
+{
+  "version": "6.2.0",
+  "dataSources": [
+    { "id": 0, "type": "uri", "uri": "https://example.com/scan.zip" },
+    { "id": 1, "type": "uri", "uri": "https://example.com/segmentation.nii.gz" }
+  ],
+  "segmentGroups": [
+    {
+      "id": "seg-1",
+      "dataSourceId": 1,
+      "metadata": {
+        "name": "Tumor Segmentation",
+        "parentImage": "0",
+        "segments": {
+          "order": [1],
+          "byValue": {
+            "1": { "value": 1, "name": "Tumor", "color": [255, 0, 0, 255] }
+          }
+        }
+      }
+    }
+  ],
+  "tools": {
+    "rectangles": {
+      "tools": [
+        {
+          "imageID": "0",
+          "frameOfReference": {
+            "planeNormal": [0, 0, 1],
+            "planeOrigin": [0, 0, 50]
+          },
+          "slice": 50,
+          "firstPoint": [-20, -20, 50],
+          "secondPoint": [20, 20, 50],
+          "label": "lesion"
+        }
+      ],
+      "labels": {
+        "lesion": { "color": "red" }
+      }
+    }
+  }
+}
+```
+
+## Loading State Files
+
+- **Drag and drop** onto VolView
+- **File browser** via the "Folder" icon below the save button
+- **URL parameter**: `?urls=[https://example.com/session.volview.json]`

package-lock.json

@@ -39,7 +39,11 @@ const itemsToRender = computed(() =>
     mandatory
   >
     <v-row dense>
-      <v-col cols="6" v-for="({ key, title }, idx) in itemsToRender" :key="key">
+      <v-col
+        cols="12"
+        v-for="({ key, title }, idx) in itemsToRender"
+        :key="key"
+      >
         <v-item v-slot="{ selectedClass, toggle }" :value="key">
           <v-chip
             variant="tonal"
@@ -59,7 +63,7 @@ const itemsToRender = computed(() =>
       </v-col>
 
       <!-- Add Label button -->
-      <v-col cols="6">
+      <v-col cols="12">
         <v-chip variant="outlined" class="w-100" @click="$emit('create')">
           <v-icon class="mr-2">mdi-plus</v-icon>
           {{ createLabelText }}

src/components/EditableChipList.vue

@@ -149,6 +149,7 @@ export default defineComponent({
   position: relative;
   flex: 2;
   overflow: auto;
+  scrollbar-gutter: stable;
 }
 
 .module-text {

src/components/ModulePanel.vue

@@ -35,7 +35,7 @@ import { defineComponent, onMounted, ref } from 'vue';
 import { saveAs } from 'file-saver';
 import { onKeyDown } from '@vueuse/core';
 
-import { serialize } from '../io/state-file';
+import { serialize } from '../io/state-file/serialize';
 
 const DEFAULT_FILENAME = 'session.volview.zip';
 

src/components/SaveSession.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { inject, watch, computed, toRefs } from 'vue';
 import type { ReadonlyVec3 } from 'gl-matrix';
+import { vec3 } from 'gl-matrix';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { worldPointToIndex } from '@/src/utils/imageSpace';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import vtkPointPicker from '@kitware/vtk.js/Rendering/Core/PointPicker';
@@ -110,29 +112,54 @@ const getImageSamples = (x: number, y: number) => {
   pointPicker.pick([x, y, 1.0], view.renderer);
   if (pointPicker.getActors().length === 0) return undefined;
 
-  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();
-    const index = dims[0] * dims[1] * ijk[2] + dims[0] * ijk[1] + ijk[0];
-    const scalars = scalarData.getTuple(index) as number[];
-    const baseInfo = { id: item.id, name: item.name };
-
-    if (item.type === 'segmentGroup') {
-      return {
-        ...baseInfo,
-        displayValues: scalars.map(
-          (v) => item.segments.byValue[v]?.name || 'Background'
-        ),
-      };
-    }
-    return { ...baseInfo, displayValues: scalars };
-  });
-
-  const position = firstToSample.image.indexToWorld(ijk);
+  // Get world position from the picked point
+  const pickedIjk = pointPicker.getPointIJK() as unknown as ReadonlyVec3;
+  const worldPosition = vec3.clone(
+    firstToSample.image.indexToWorld(pickedIjk) as vec3
+  );
+
+  const samples = sampleSet.value
+    .map((item: any) => {
+      // Convert world position to this specific image's IJK
+      const itemIjk = worldPointToIndex(item.image, worldPosition);
+      const dims = item.image.getDimensions();
+      const scalarData = item.image.getPointData().getScalars();
+
+      // Round to nearest integer indices
+      const i = Math.round(itemIjk[0]);
+      const j = Math.round(itemIjk[1]);
+      const k = Math.round(itemIjk[2]);
+
+      // Check bounds
+      if (
+        i < 0 ||
+        j < 0 ||
+        k < 0 ||
+        i >= dims[0] ||
+        j >= dims[1] ||
+        k >= dims[2]
+      ) {
+        return null;
+      }
+
+      const index = dims[0] * dims[1] * k + dims[0] * j + i;
+      const scalars = scalarData.getTuple(index) as number[];
+      const baseInfo = { id: item.id, name: item.name };
+
+      if (item.type === 'segmentGroup') {
+        return {
+          ...baseInfo,
+          displayValues: scalars.map(
+            (v) => item.segments.byValue[v]?.name || 'Background'
+          ),
+        };
+      }
+      return { ...baseInfo, displayValues: scalars };
+    })
+    .filter((s): s is NonNullable<typeof s> => s !== null);
 
   return {
-    pos: position,
+    pos: worldPosition,
     samples,
   };
 };

src/components/tools/ScalarProbe.vue

@@ -2,6 +2,8 @@
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { WIDGET_PRIORITY } from '@kitware/vtk.js/Widgets/Core/AbstractWidget/Constants';
 import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
+import { useToolStore } from '@/src/store/tools';
+import { Tools } from '@/src/store/tools/types';
 import { vtkAnnotationToolWidget } from '@/src/vtk/ToolWidgetUtils/types';
 import { inject } from 'vue';
 import { VtkViewContext } from '@/src/components/vtk/context';
@@ -10,11 +12,19 @@ const view = inject(VtkViewContext);
 if (!view) throw new Error('No VtkView');
 
 const selectionStore = useToolSelectionStore();
+const toolStore = useToolStore();
+
+const PLACING_TOOLS = [Tools.Ruler, Tools.Rectangle, Tools.Polygon];
 
 onVTKEvent(
   view.interactor,
   'onLeftButtonPress',
   (event: any) => {
+    if (PLACING_TOOLS.includes(toolStore.currentTool)) {
+      // avoid bugs when starting a placing tool on an existing tool and right clicking and deleting existing tools
+      return;
+    }
+
     const withModifiers = !!(event.shiftKey || event.controlKey);
     const selectedData = view.widgetManager.getSelectedData();
     if ('widget' in selectedData) {