Fixed attributes update on cvat-canvas (#8137)

cvat-ai · Jul 8, 2024 · 13155bc · 13155bc
1 parent 609534e
commit 13155bc
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/changelog.d/20240708_132937_boris_fixed_attr_update.md b/changelog.d/20240708_132937_boris_fixed_attr_update.md
@@ -0,0 +1,4 @@
+### Fixed
+
+- Attribute values with ":" may be displayed incorrectly on canvas
+  (<https://github.com/cvat-ai/cvat/pull/8137>)
diff --git a/cvat-canvas/package.json b/cvat-canvas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cvat-canvas",
-  "version": "2.20.5",
+  "version": "2.20.6",
   "type": "module",
   "description": "Part of Computer Vision Annotation Tool which presents its canvas library",
   "main": "src/canvas.ts",

diff --git a/cvat-canvas/src/typescript/canvasView.ts b/cvat-canvas/src/typescript/canvasView.ts
@@ -2398,14 +2398,14 @@ export class CanvasViewImpl implements CanvasView, Listener {
                     this.addText(state);
                 }
             } else {
+                const attrNames = Object.fromEntries(state.label.attributes.map((attr) => [attr.id, attr.name]));
                 // check if there are updates in attributes
                 for (const attrID of Object.keys(state.attributes)) {
                     if (state.attributes[attrID] !== drawnState.attributes[+attrID]) {
                         if (text) {
                             const [span] = text.node.querySelectorAll<SVGTSpanElement>(`[attrID="${attrID}"]`);
                             if (span && span.textContent) {
-                                const prefix = span.textContent.split(':').slice(0, -1).join(':');
-                                span.textContent = `${prefix}: ${state.attributes[attrID]}`;
+                                span.textContent = `${attrNames[attrID]}: ${state.attributes[attrID]}`;
                             }
                         }
                     }
@@ -2982,11 +2982,8 @@ export class CanvasViewImpl implements CanvasView, Listener {
         const {
             label, clientID, attributes, source, descriptions,
         } = state;
-        const attrNames = label.attributes.reduce((acc: any, val: any): void => {
-            acc[val.id] = val.name;
-            return acc;
-        }, {});
 
+        const attrNames = Object.fromEntries(state.label.attributes.map((attr) => [attr.id, attr.name]));
         if (state.shapeType === 'skeleton') {
             state.elements.forEach((element: any) => {
                 if (!(element.clientID in this.svgTexts)) {