feat(labels + segments): disable Done if duplicate name

src/components/LabelControls.vue

@@ -6,6 +6,7 @@ import type { AnnotationTool } from '@/src/types/annotation-tool';
 import { Maybe } from '@/src/types';
 import ToolLabelEditor from '@/src/components/ToolLabelEditor.vue';
 import IsolatedDialog from '@/src/components/IsolatedDialog.vue';
+import { nonNullable } from '@/src/utils';
 
 const props = defineProps<{
   labelsStore: LabelsStore<Pick<AnnotationTool, 'strokeWidth'>>;
@@ -42,6 +43,17 @@ const editingLabel = computed(() => {
   return props.labelsStore.labels[editingLabelID.value];
 });
 
+const invalidNames = computed(() => {
+  const names = new Set(
+    Object.values(props.labelsStore.labels)
+      .map(({ labelName }) => labelName)
+      .filter(nonNullable)
+  )
+  const currentName = editingLabel.value?.labelName;
+  if(currentName) names.delete(currentName); // allow current name
+  return names;
+});
+
 const makeUniqueName = (name: string) => {
   const existingNames = new Set(
     Object.values(props.labelsStore.labels).map((label) => label.labelName)
@@ -99,7 +111,7 @@ function deleteEditingLabel() {
         @create="createLabel"
       >
         <template #item-prepend="{ item }">
-          <!-- dot container keeps overflowing name from squishing dot width  -->
+          <!-- dot-container class keeps overflowing name from squishing dot width  -->
           <div class="dot-container mr-3">
             <div class="color-dot" :style="{ background: item.color }" />
           </div>
@@ -120,15 +132,15 @@ function deleteEditingLabel() {
   </v-card>
 
   <isolated-dialog v-model="editDialog" max-width="800px">
-    <ToolLabelEditor
+    <tool-label-editor
       v-if="editingLabelID"
       v-model:name="editState.labelName"
       v-model:stroke-width="editState.strokeWidth"
       v-model:color="editState.color"
       @delete="deleteEditingLabel"
       @cancel="stopEditing(false)"
       @done="stopEditing(true)"
-      :labelsStore="labelsStore"
+      :invalidNames="invalidNames"
     />
   </isolated-dialog>
 </template>

src/components/LabelEditor.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { toRefs } from 'vue';
+import { computed, toRefs } from 'vue';
 
 const emit = defineEmits(['done', 'cancel', 'delete', 'update:color']);
-const props = defineProps({
-  color: String,
+const props = defineProps<{ color: string; valid: boolean }>();
+const { color, valid } = toRefs(props);
+const doneDisabled = computed(() => {
+  return !valid.value;
 });
-const { color } = toRefs(props);
 
 const done = () => {
   emit('done');
@@ -40,6 +41,7 @@ const onDelete = () => {
               color="secondary"
               variant="elevated"
               @click="done"
+              :disabled="doneDisabled"
               data-testid="edit-label-done-button"
             >
               Done

src/components/SegmentEditor.vue

@@ -1,17 +1,32 @@
 <script setup lang="ts">
 import LabelEditor from '@/src/components/LabelEditor.vue';
+import { computed } from 'vue';
 
 defineEmits(['done', 'cancel', 'delete', 'update:name', 'update:color']);
 
-defineProps({
-  name: String,
-  color: String,
+const props = defineProps<{
+  name: string;
+  color: string;
+  invalidNames: Set<string>;
+}>();
+
+function isUniqueEditingName(name: string) {
+  return !props.invalidNames.has(name.trim());
+}
+
+function uniqueNameRule(name: string) {
+  return isUniqueEditingName(name) || 'Name is not unique';
+}
+
+const valid = computed(() => {
+  return isUniqueEditingName(props.name);
 });
 </script>
 
 <template>
   <label-editor
     :color="color"
+    :valid="valid"
     @update:color="$emit('update:color', $event)"
     @delete="$emit('delete')"
     @cancel="$emit('cancel')"
@@ -24,6 +39,7 @@ defineProps({
         :model-value="name"
         @update:model-value="$emit('update:name', $event)"
         @keydown.stop.enter="done"
+        :rules="[uniqueNameRule]"
       />
     </template>
   </label-editor>

src/components/SegmentList.vue

@@ -70,6 +70,12 @@ const editingSegment = computed(() => {
   if (editingSegmentValue.value == null) return null;
   return segmentGroupStore.getSegment(groupId.value, editingSegmentValue.value);
 });
+const invalidNames = computed(() => {
+  const names = new Set(segments.value.map((seg) => seg.name));
+  const currentName = editingSegment.value?.name;
+  if(currentName) names.delete(currentName); // allow current name
+  return names;
+});
 
 function startEditing(value: number) {
   editDialog.value = true;
@@ -145,6 +151,7 @@ function deleteEditingSegment() {
       @delete="deleteEditingSegment"
       @cancel="stopEditing(false)"
       @done="stopEditing(true)"
+      :invalidNames="invalidNames"
     />
   </isolated-dialog>
 </template>

src/components/ToolLabelEditor.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import LabelEditor from '@/src/components/LabelEditor.vue';
-import type { LabelsStore } from '../store/tools/useLabels';
-import type { AnnotationTool } from '../types/annotation-tool';
 
 defineEmits([
   'done',
@@ -17,28 +15,26 @@ const props = defineProps<{
   name: string;
   strokeWidth: number;
   color: string;
-  labelsStore: LabelsStore<Pick<AnnotationTool, 'strokeWidth'>>;
+  invalidNames: Set<string>;
 }>();
 
-const existingNames = computed(
-  () =>
-    new Set(
-      Object.values(props.labelsStore.labels).map((label) => label.labelName)
-    )
-);
-
 function isUniqueEditingName(name: string) {
-  return !existingNames.value.has(name);
+  return !props.invalidNames.has(name.trim());
 }
 
 function uniqueNameRule(name: string) {
   return isUniqueEditingName(name) || 'Name is not unique';
 }
+
+const valid = computed(() => {
+  return isUniqueEditingName(props.name);
+});
 </script>
 
 <template>
   <label-editor
     :color="color"
+    :valid="valid"
     @update:color="$emit('update:color', $event)"
     @cancel="$emit('cancel')"
     @done="$emit('done')"
@@ -53,7 +49,7 @@ function uniqueNameRule(name: string) {
       <v-text-field
         label="Name"
         class="flex-grow-0"
-        :model-value="name"
+        :model-value="props.name"
         @update:model-value="$emit('update:name', $event)"
         @keydown.stop.enter="done"
         :rules="[uniqueNameRule]"