feat(segmentGroups): use segment group name as filname

When zipping up session.volview.zip files.

Author: PaulHax

src/components/SaveSegmentGroupDialog.vue

@@ -7,7 +7,7 @@
       <v-form v-model="valid" @submit.prevent="saveSegmentGroup">
         <v-text-field
           v-model="fileName"
-          hint="Filename that will appear in downloads."
+          hint="Filename used for downloads. Invalid filename characters are replaced automatically."
           label="Filename"
           :rules="[validFileName]"
           required
@@ -37,12 +37,13 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { onKeyDown } from '@vueuse/core';
 import { saveAs } from 'file-saver';
 import { useSegmentGroupStore } from '@/src/store/segmentGroups';
 import { writeSegmentation } from '@/src/io/readWriteImage';
 import { useErrorMessage } from '@/src/composables/useErrorMessage';
+import { sanitizeSegmentGroupFileStem } from '@/src/io/state-file/segmentGroupArchivePath';
 
 const EXTENSIONS = [
   'seg.nrrd',
@@ -63,12 +64,18 @@ const props = defineProps<{
 
 const emit = defineEmits(['done']);
 
-const fileName = ref('');
+const fileNameValue = ref('');
 const valid = ref(true);
 const saving = ref(false);
 const fileFormat = ref(EXTENSIONS[0]);
 
 const segmentGroupStore = useSegmentGroupStore();
+const fileName = computed({
+  get: () => fileNameValue.value,
+  set: (value: string) => {
+    fileNameValue.value = sanitizeSegmentGroupFileStem(value, '');
+  },
+});
 
 async function saveSegmentGroup() {
   if (fileName.value.trim().length === 0) {
@@ -77,20 +84,24 @@ async function saveSegmentGroup() {
 
   saving.value = true;
   await useErrorMessage('Failed to save segment group', async () => {
+    const sanitizedFileName = sanitizeSegmentGroupFileStem(fileName.value);
+    fileNameValue.value = sanitizedFileName;
     const serialized = await writeSegmentation(
       fileFormat.value,
       segmentGroupStore.dataIndex[props.id],
       segmentGroupStore.metadataByID[props.id]
     );
-    saveAs(new Blob([serialized]), `${fileName.value}.${fileFormat.value}`);
+    saveAs(new Blob([serialized]), `${sanitizedFileName}.${fileFormat.value}`);
   });
   saving.value = false;
   emit('done');
 }
 
 onMounted(() => {
   // trigger form validation check so can immediately save with default value
-  fileName.value = segmentGroupStore.metadataByID[props.id].name;
+  fileNameValue.value = sanitizeSegmentGroupFileStem(
+    segmentGroupStore.metadataByID[props.id].name
+  );
 });
 
 onKeyDown('Enter', () => {

src/components/SegmentGroupControls.vue

@@ -335,6 +335,7 @@ function deleteSelected() {
             </v-tooltip>
           </v-btn>
           <v-btn
+            data-testid="segment-group-save-button"
             icon="mdi-content-save"
             size="small"
             variant="text"

src/composables/__tests__/useKeyboardShortcuts.spec.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest';
+import { shouldIgnoreKeyboardShortcuts } from '../useKeyboardShortcuts';
+
+describe('shouldIgnoreKeyboardShortcuts', () => {
+  it('ignores shortcuts while an input is focused', () => {
+    const input = document.createElement('input');
+    expect(shouldIgnoreKeyboardShortcuts(input)).toBe(true);
+  });
+
+  it('ignores shortcuts while a textarea is focused', () => {
+    const textarea = document.createElement('textarea');
+    expect(shouldIgnoreKeyboardShortcuts(textarea)).toBe(true);
+  });
+
+  it('ignores shortcuts while a contenteditable element is focused', () => {
+    const editable = document.createElement('div');
+    editable.contentEditable = 'true';
+    expect(shouldIgnoreKeyboardShortcuts(editable)).toBe(true);
+  });
+
+  it('does not ignore shortcuts for non-editable controls', () => {
+    const button = document.createElement('button');
+    expect(shouldIgnoreKeyboardShortcuts(button)).toBe(false);
+  });
+});

src/composables/useKeyboardShortcuts.ts

@@ -7,6 +7,19 @@ import { ACTION_TO_FUNC } from './actions';
 
 export const actionToKey = ref(ACTION_TO_KEY);
 
+export function shouldIgnoreKeyboardShortcuts(
+  activeElement: Element | null = document.activeElement
+) {
+  if (!(activeElement instanceof HTMLElement)) {
+    return false;
+  }
+
+  return (
+    activeElement.isContentEditable ||
+    activeElement.closest('input, textarea, select, [role="textbox"]') !== null
+  );
+}
+
 export function useKeyboardShortcuts() {
   const keys = useMagicKeys();
   let unwatchFuncs = [] as Array<ReturnType<typeof whenever>>;
@@ -21,6 +34,10 @@ export function useKeyboardShortcuts() {
         const lastKey = individualKeys[individualKeys.length - 1];
 
         return whenever(keys[key], () => {
+          if (shouldIgnoreKeyboardShortcuts()) {
+            return;
+          }
+
           const shiftPressed = keys.current.has('shift');
           const lastPressedKey = Array.from(keys.current).pop();
           const currentKeyWithCase = shiftPressed

src/io/__tests__/fileName.spec.ts

@@ -0,0 +1,32 @@
+import { DEFAULT_FILE_STEM, sanitizeFileStem } from '@/src/io/fileName';
+import { describe, expect, it } from 'vitest';
+
+describe('io/fileName', () => {
+  describe('sanitizeFileStem', () => {
+    it('replaces invalid filename characters with readable spacing', () => {
+      expect(sanitizeFileStem('Liver: left/right*?')).to.equal(
+        'Liver left right'
+      );
+    });
+
+    it('collapses repeated whitespace and trims trailing dots and spaces', () => {
+      expect(sanitizeFileStem('  Liver    left.   ')).to.equal('Liver left');
+    });
+
+    it('handles reserved Windows filenames', () => {
+      expect(sanitizeFileStem('CON')).to.equal('CON_');
+    });
+
+    it('falls back when the sanitized stem would be empty', () => {
+      expect(sanitizeFileStem('  ..../\\\\****   ')).to.equal(
+        DEFAULT_FILE_STEM
+      );
+    });
+
+    it('preserves already-valid names', () => {
+      expect(sanitizeFileStem('Prostate Segmentation')).to.equal(
+        'Prostate Segmentation'
+      );
+    });
+  });
+});

src/io/fileName.ts

@@ -0,0 +1,37 @@
+const TRAILING_DOTS_AND_SPACES = /[. ]+$/g;
+const REPEATED_WHITESPACE = /\s+/g;
+const WINDOWS_RESERVED_FILE_NAME = /^(con|prn|aux|nul|com[1-9]|lpt[1-9])$/i;
+const INVALID_FILE_STEM_CHARS = new Set([
+  '<',
+  '>',
+  ':',
+  '"',
+  '/',
+  '\\',
+  '|',
+  '?',
+  '*',
+]);
+
+export const DEFAULT_FILE_STEM = 'File';
+
+export function sanitizeFileStem(name: string, fallback = DEFAULT_FILE_STEM) {
+  let sanitized = name
+    .split('')
+    .map((char) => {
+      const isControlCharacter = char.charCodeAt(0) < 32;
+      return isControlCharacter || INVALID_FILE_STEM_CHARS.has(char)
+        ? ' '
+        : char;
+    })
+    .join('')
+    .replace(REPEATED_WHITESPACE, ' ')
+    .trim()
+    .replace(TRAILING_DOTS_AND_SPACES, '');
+
+  if (WINDOWS_RESERVED_FILE_NAME.test(sanitized)) {
+    sanitized = `${sanitized}_`;
+  }
+
+  return sanitized || fallback;
+}

src/io/state-file/__tests__/segmentGroupArchivePath.spec.ts

@@ -0,0 +1,25 @@
+import { makeSegmentGroupArchivePath } from '@/src/io/state-file/segmentGroupArchivePath';
+import { describe, expect, it } from 'vitest';
+
+describe('io/state-file/segmentGroupArchivePath', () => {
+  describe('makeSegmentGroupArchivePath', () => {
+    it('uses a sanitized segment group stem in the archive path', () => {
+      const usedPaths = new Set<string>();
+
+      expect(
+        makeSegmentGroupArchivePath('Liver: left/right*?', 'vti', usedPaths)
+      ).to.equal('labels/Liver left right.vti');
+    });
+
+    it('deduplicates colliding sanitized names case-insensitively', () => {
+      const usedPaths = new Set<string>();
+
+      expect(
+        makeSegmentGroupArchivePath('Liver/Left', 'vti', usedPaths)
+      ).to.equal('labels/Liver Left.vti');
+      expect(
+        makeSegmentGroupArchivePath('liver:left', 'vti', usedPaths)
+      ).to.equal('labels/liver left (2).vti');
+    });
+  });
+});

src/io/state-file/segmentGroupArchivePath.ts

@@ -0,0 +1,33 @@
+import { normalize } from '@/src/utils/path';
+import { sanitizeFileStem } from '@/src/io/fileName';
+
+export const DEFAULT_SEGMENT_GROUP_ARCHIVE_STEM = 'Segment Group';
+
+export function sanitizeSegmentGroupFileStem(
+  name: string,
+  fallback = DEFAULT_SEGMENT_GROUP_ARCHIVE_STEM
+) {
+  return sanitizeFileStem(name, fallback);
+}
+
+function makeArchivePathKey(path: string) {
+  return normalize(path).toLowerCase();
+}
+
+export function makeSegmentGroupArchivePath(
+  name: string,
+  extension: string,
+  usedPaths: Set<string>
+) {
+  const stem = sanitizeSegmentGroupFileStem(name);
+
+  let index = 1;
+  let path = normalize(`labels/${stem}.${extension}`);
+  while (usedPaths.has(makeArchivePathKey(path))) {
+    index += 1;
+    path = normalize(`labels/${stem} (${index}).${extension}`);
+  }
+
+  usedPaths.add(makeArchivePathKey(path));
+  return path;
+}

src/store/segmentGroups.ts

@@ -27,6 +27,7 @@ import {
   SegmentGroupMetadata,
   SegmentGroup,
 } from '../io/state-file/schema';
+import { makeSegmentGroupArchivePath } from '../io/state-file/segmentGroupArchivePath';
 import { FileEntry } from '../io/types';
 import { ensureSameSpace } from '../io/resample/resample';
 import { untilLoaded } from '../composables/untilLoaded';
@@ -459,6 +460,7 @@ export const useSegmentGroupStore = defineStore('segmentGroup', () => {
    */
   async function serialize(state: StateFile) {
     const { zip } = state;
+    const usedArchivePaths = new Set<string>();
 
     // orderByParent is implicitly preserved based on
     // the order of serialized entries.
@@ -470,7 +472,11 @@ export const useSegmentGroupStore = defineStore('segmentGroup', () => {
         const metadata = metadataByID[id];
         return {
           id,
-          path: `labels/${id}.${saveFormat.value}`,
+          path: makeSegmentGroupArchivePath(
+            metadata.name,
+            saveFormat.value,
+            usedArchivePaths
+          ),
           metadata: {
             ...metadata,
             parentImage: metadata.parentImage,

tests/pageobjects/volview.page.ts

@@ -14,12 +14,14 @@ export const setValueVueInput = async (
   input: ChainablePromiseElement,
   value: string
 ) => {
-  // input.setValue does not clear existing input, so click and backspace
+  // input.setValue does not clear existing input, so select all and replace.
   await input.click();
   const oldValue = await input.getValue();
   if (oldValue) {
-    const backspaces = new Array(oldValue.length).fill(Key.Backspace);
-    await browser.keys([Key.ArrowRight, ...backspaces]);
+    const selectAllModifier =
+      process.platform === 'darwin' ? 'Meta' : 'Control';
+    await browser.keys([selectAllModifier, 'a']);
+    await browser.keys(Key.Backspace);
   }
   await input.setValue(value);
 };
@@ -149,6 +151,22 @@ class VolViewPage extends Page {
     return $('button span i[class~=mdi-content-save-all]');
   }
 
+  get annotationsModuleTab() {
+    return $('button[data-testid="module-tab-Annotations"]');
+  }
+
+  get newSegmentGroupButton() {
+    return $('button*=New Group');
+  }
+
+  get activeDialog() {
+    return $('div[role="dialog"]');
+  }
+
+  get activeDialogInput() {
+    return this.activeDialog.$('input[placeholder="Unnamed Segment Group"]');
+  }
+
   get saveSessionFilenameInput() {
     return $('#session-state-filename');
   }
@@ -157,6 +175,33 @@ class VolViewPage extends Page {
     return $('span[data-testid="save-session-confirm-button"]');
   }
 
+  get segmentGroupsTab() {
+    return $('button.v-tab*=Segment Groups');
+  }
+
+  get segmentGroupSaveButtons() {
+    return $$('button[data-testid="segment-group-save-button"]');
+  }
+
+  get saveSegmentGroupFilenameInput() {
+    return this.activeDialog.$('#filename');
+  }
+
+  get saveSegmentGroupConfirmButton() {
+    return this.activeDialog.$('button=Save');
+  }
+
+  async clickFirstSegmentGroupSaveButton() {
+    await browser.waitUntil(async () => {
+      const buttons = await this.segmentGroupSaveButtons;
+      return (await buttons.length) >= 1;
+    });
+    const buttons = await this.segmentGroupSaveButtons;
+    await buttons[0].scrollIntoView();
+    await buttons[0].waitForClickable();
+    await buttons[0].click();
+  }
+
   async saveSession() {
     const save = this.saveButton;
     await save.click();
@@ -177,6 +222,20 @@ class VolViewPage extends Page {
     return fileName;
   }
 
+  async createSegmentGroup(name: string) {
+    const annotationsTab = await this.annotationsModuleTab;
+    await annotationsTab.click();
+
+    const newGroup = await this.newSegmentGroupButton;
+    await newGroup.waitForClickable();
+    await newGroup.click();
+
+    const input = await this.activeDialogInput;
+    await input.waitForDisplayed();
+    await setValueVueInput(input, name);
+    await browser.keys([Key.Enter]);
+  }
+
   get editLabelButtons() {
     return $$('button[data-testid="edit-label-button"]');
   }