fix(useLabels): keep deserialized labels with same name

* remove clear default labels flag from mergeLabels and make explicit function.
* set max width to LabelControls label editor

src/components/LabelControls.vue

@@ -105,7 +105,7 @@ function deleteEditingLabel() {
     </v-container>
   </v-card>
 
-  <isolated-dialog v-model="editDialog">
+  <isolated-dialog v-model="editDialog" max-width="800px">
     <ToolLabelEditor
       v-if="editingLabelID"
       v-model:name="editState.labelName"

src/io/import/configJson.ts

@@ -11,6 +11,7 @@ import { usePolygonStore } from '@/src/store/tools/polygons';
 import { useViewStore } from '@/src/store/views';
 import { actionToKey } from '@/src/composables/useKeyboardShortcuts';
 import { useSegmentGroupStore } from '@/src/store/segmentGroups';
+import { AnnotationToolStore } from '@/src/store/tools/useAnnotationTool';
 
 const layout = z
   .object({
@@ -82,17 +83,25 @@ const applyLabels = (manifest: Config) => {
   if (!manifest.labels) return;
 
   // pass through null labels, use fallback labels if undefined
-  const labelsIfUndefined = (
-    toolLabels: (typeof manifest.labels)[keyof typeof manifest.labels]
-  ) => {
+  const defaultLabelsIfUndefined = <T>(toolLabels: T) => {
     if (toolLabels === undefined) return manifest.labels?.defaultLabels;
     return toolLabels;
   };
 
+  const applyLabelsToStore = (
+    maybeLabels: (typeof manifest.labels)[keyof typeof manifest.labels],
+    store: AnnotationToolStore
+  ) => {
+    const labelsOrFallback = defaultLabelsIfUndefined(maybeLabels);
+    if (!labelsOrFallback) return;
+    store.clearDefaultLabels();
+    store.mergeLabels(labelsOrFallback);
+  };
+
   const { rulerLabels, rectangleLabels, polygonLabels } = manifest.labels;
-  useRulerStore().mergeLabels(labelsIfUndefined(rulerLabels));
-  useRectangleStore().mergeLabels(labelsIfUndefined(rectangleLabels));
-  usePolygonStore().mergeLabels(labelsIfUndefined(polygonLabels));
+  applyLabelsToStore(rulerLabels, useRulerStore());
+  applyLabelsToStore(rectangleLabels, useRectangleStore());
+  applyLabelsToStore(polygonLabels, usePolygonStore());
 };
 
 const applySampleData = (manifest: Config) => {

src/store/tools/useAnnotationTool.ts

@@ -73,7 +73,7 @@ export const useAnnotationTool = <
     ...annotationToolLabelDefault,
     ...newLabelDefault,
   });
-  labels.mergeLabels(initialLabels, false);
+  labels.mergeLabels(initialLabels);
 
   function makePropsFromLabel(label: string | undefined) {
     if (!label) return { labelName: '' };
@@ -190,9 +190,12 @@ export const useAnnotationTool = <
     serialized: Maybe<Serialized>,
     dataIDMap: Record<string, string>
   ) {
+    if (serialized?.labels) {
+      labels.clearDefaultLabels();
+    }
     const labelIDMap = Object.fromEntries(
       Object.entries(serialized?.labels ?? {}).map(([id, label]) => {
-        const newID = labels.mergeLabel(label); // side effect
+        const newID = labels.addLabel(label); // side effect in Array.map
         return [id, newID];
       })
     );

src/store/tools/useLabels.ts

@@ -79,9 +79,7 @@ export const useLabels = <Props>(newLabelDefault: Props) => {
    * param label: label to merge
    * param clearDefault: if true, clear initial labels, do nothing if initial labels already cleared
    */
-  const mergeLabel = (label: ToolLabel, clearDefault: boolean = true) => {
-    if (clearDefault) clearDefaultLabels();
-
+  const mergeLabel = (label: ToolLabel) => {
     const { labelName } = label;
     const matchingName = findLabel(labelName);
 
@@ -100,12 +98,9 @@ export const useLabels = <Props>(newLabelDefault: Props) => {
    * param newLabels: each key is the label name
    * param clearDefault: if true, clear initial labels, do nothing if initial labels already cleared
    */
-  const mergeLabels = (
-    newLabels: Maybe<ToolLabels>,
-    clearDefault: boolean = true
-  ) => {
+  const mergeLabels = (newLabels: Maybe<ToolLabels>) => {
     Object.entries(newLabels ?? {}).forEach(([labelName, props]) =>
-      mergeLabel({ ...props, labelName }, clearDefault)
+      mergeLabel({ ...props, labelName })
     );
   };
 
@@ -116,9 +111,9 @@ export const useLabels = <Props>(newLabelDefault: Props) => {
     addLabel,
     deleteLabel,
     updateLabel,
-    mergeLabel,
     mergeLabels,
     findLabel,
+    clearDefaultLabels,
   };
 };