From e7c16064c45963c68bec72cd1866001c8d2c10c2 Mon Sep 17 00:00:00 2001
From: Boris Sekachev <boris.sekachev@yandex.ru>
Date: Wed, 5 Oct 2022 16:49:29 +0300
Subject: [PATCH] Fixed invisible label view in label constructor (#5041)

* Fixed invisible label view in label constructor

* Updated changelog
---
 CHANGELOG.md                                  |  2 ++
 cvat-ui/package.json                          |  2 +-
 .../labels-editor/constructor-viewer-item.tsx | 20 +++++++++++++++++--
 .../src/components/labels-editor/styles.scss  |  5 ++---
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6a06c0e28..c9151e7a0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,8 @@ non-ascii paths while adding files from "Connected file share" (issue #4428)
 - Shape color is not changed on canvas after changing a label (<https://github.com/opencv/cvat/pull/5045>)
 - Unstable e2e restore tests (<https://github.com/opencv/cvat/pull/5010>)
 - IOG and f-BRS serverless function (<https://github.com/opencv/cvat/pulls>)
+- Invisible label item in label constructor when label color background is white,
+ or close to it (<https://github.com/opencv/cvat/pull/5041>)
 
 ### Security
 - TDB
diff --git a/cvat-ui/package.json b/cvat-ui/package.json
index 3eeb9d967..c84240b5b 100644
--- a/cvat-ui/package.json
+++ b/cvat-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.42.0",
+  "version": "1.42.1",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {
diff --git a/cvat-ui/src/components/labels-editor/constructor-viewer-item.tsx b/cvat-ui/src/components/labels-editor/constructor-viewer-item.tsx
index a6be74669..cc4953a5f 100644
--- a/cvat-ui/src/components/labels-editor/constructor-viewer-item.tsx
+++ b/cvat-ui/src/components/labels-editor/constructor-viewer-item.tsx
@@ -22,11 +22,26 @@ export default function ConstructorViewerItem(props: ConstructorViewerItemProps)
         color, label, onUpdate, onDelete,
     } = props;
 
+    const backgroundColor = color || consts.NEW_LABEL_COLOR;
+    let textColor = '#ffffff';
+    try {
+        // convert color to grayscale and from the result get better text color
+        // (for darken background -> lighter text, etc.)
+        const [r, g, b] = [backgroundColor.slice(1, 3), backgroundColor.slice(3, 5), backgroundColor.slice(5, 7)];
+        const grayscale = (parseInt(r, 16) + parseInt(g, 16) + parseInt(b, 16)) / 3;
+        if (grayscale - 128 >= 0) {
+            textColor = '#000000';
+        }
+    } catch (_: any) {
+        // nothing to do
+    }
+
     return (
-        <div style={{ background: color || consts.NEW_LABEL_COLOR }} className='cvat-constructor-viewer-item'>
-            <Text>{label.name}</Text>
+        <div style={{ background: backgroundColor }} className='cvat-constructor-viewer-item'>
+            <Text style={{ color: textColor }}>{label.name}</Text>
             <CVATTooltip title='Update attributes'>
                 <span
+                    style={{ color: textColor }}
                     role='button'
                     tabIndex={0}
                     onClick={(): void => onUpdate(label)}
@@ -37,6 +52,7 @@ export default function ConstructorViewerItem(props: ConstructorViewerItemProps)
             </CVATTooltip>
             <CVATTooltip title='Delete label'>
                 <span
+                    style={{ color: textColor }}
                     role='button'
                     tabIndex={0}
                     onClick={(): void => onDelete(label)}
diff --git a/cvat-ui/src/components/labels-editor/styles.scss b/cvat-ui/src/components/labels-editor/styles.scss
index 902af2430..698928aa4 100644
--- a/cvat-ui/src/components/labels-editor/styles.scss
+++ b/cvat-ui/src/components/labels-editor/styles.scss
@@ -45,15 +45,14 @@ textarea.ant-input.cvat-raw-labels-viewer {
     margin: 2px;
     margin-left: $grid-unit-size * 2;
     user-select: none;
-    border: 1px solid $transparent-color;
+    border: 1px solid $border-color-2;
     opacity: 0.6;
 
     > span {
         margin-left: 5px;
-        color: white;
 
         > span[role='img']:hover {
-            filter: invert(1);
+            filter: invert(0.2);
         }
     }
 
-- 
GitLab