From e9c95521bb0cbc64dfe026dfc7f28779f1a57484 Mon Sep 17 00:00:00 2001
From: hlomzik <hlomzik@gmail.com>
Date: Fri, 26 Jan 2024 14:19:49 +0000
Subject: [PATCH] fix: LEAP-523: Return region's text to item in a list 
 (#1674)

* fix: LEAP-523: Return region's text to item in a list

New Outliner left this important info from region items in the list.
Returning it back.

* Simplify text output in Region Info panel

We don't need to output it via dangerouslySetInnerHTML,
it's not safe and that's just a text, not an html.

* Make "Incomplete polygon/other type" consistent

We had different versions at different places,
assuming that it's always a polygon, but it can be a brush.

* Add test for New UI and regions' texts

* Fix it for different grouppings

With groupping by Label or Tool `item` is undefined

* Remove accidential Scenario.only

* Fix excess symbol

Co-authored-by: Sergey <sergey.koshevarov@heartex.com>

---------

Co-authored-by: hlomzik <hlomzik@users.noreply.github.com>
Co-authored-by: Sergey <sergey.koshevarov@heartex.com>
---
 e2e/tests/ner-text.test.js                    | 23 +++++++++++++++++++
 src/components/Node/Node.tsx                  |  6 ++---
 .../SidePanels/DetailsPanel/RegionDetails.tsx | 10 +++-----
 .../SidePanels/DetailsPanel/RegionItem.tsx    |  4 ++--
 .../SidePanels/OutlinerPanel/OutlinerTree.tsx |  5 ++--
 .../SidePanels/OutlinerPanel/TreeView.styl    |  9 ++++++++
 6 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/e2e/tests/ner-text.test.js b/e2e/tests/ner-text.test.js
index fca960f77b..2c95c73794 100644
--- a/e2e/tests/ner-text.test.js
+++ b/e2e/tests/ner-text.test.js
@@ -259,3 +259,26 @@ Scenario('NER Text with SECURE MODE', async function({ I, LabelStudio }) {
     window.LS_SECURE_MODE = window.OLD_LS_SECURE_MODE;
   });
 });
+
+Scenario('NER Text regions in Outliner', async function({ I, LabelStudio }) {
+  const params = {
+    annotations: [{ id: 'TestCmpl', result: resultsFromUrl }],
+    config: configUrl,
+    data: { url },
+  };
+
+  I.amOnPage('/');
+  // enabling both flags for New UI, but will work with Otliner one only as well
+  LabelStudio.setFeatureFlags({
+    ff_front_1170_outliner_030222_short: true,
+    fflag_feat_front_dev_3873_labeling_ui_improvements_short: true,
+  });
+  LabelStudio.init(params);
+
+  I.waitForElement('.lsf-richtext__line', 60);
+
+  I.see('American political leader');
+
+  I.seeElement(locate('.lsf-outliner-item').withText(resultsFromUrl[0].value.text));
+  I.seeElement(locate('.lsf-outliner-item').withText(resultsFromUrl[1].value.text));
+});
diff --git a/src/components/Node/Node.tsx b/src/components/Node/Node.tsx
index 0785c979af..0e7bff0eb5 100644
--- a/src/components/Node/Node.tsx
+++ b/src/components/Node/Node.tsx
@@ -127,7 +127,7 @@ const NodeDebug: FC<any> = observer(({ className, node }) => {
 const Node: FC<any> = observer(({ className, node }) => {
   const name = useNodeName(node);
 
-  if (!(name in NodeViews)) {
+  if (!name || !(name in NodeViews)) {
     console.error(`No ${name} in NodeView`);
     return null;
   }
@@ -138,9 +138,9 @@ const Node: FC<any> = observer(({ className, node }) => {
   return (
     <Block name="node" tag="span" className={className}>
       {labelName}
-      {node?.isDrawing && (
+      {node.isDrawing && (
         <Elem tag="span" name="incomplete">
-          <Tooltip title="Incomplete polygon">
+          <Tooltip title={`Incomplete ${node.type?.replace('region', '') ?? 'region'}`}>
             <IconWarning />
           </Tooltip>
         </Elem>
diff --git a/src/components/SidePanels/DetailsPanel/RegionDetails.tsx b/src/components/SidePanels/DetailsPanel/RegionDetails.tsx
index 1cfb63db4f..f67bf07ee9 100644
--- a/src/components/SidePanels/DetailsPanel/RegionDetails.tsx
+++ b/src/components/SidePanels/DetailsPanel/RegionDetails.tsx
@@ -91,13 +91,9 @@ export const RegionDetailsMain: FC<{region: any}> = observer(({
         {region?.text ? (
           <Block name="region-meta">
             <Elem name="item">
-              <Elem
-                name="content"
-                mod={{ type: 'text' }}
-                dangerouslySetInnerHTML={{
-                  __html: region.text.replace(/\\n/g, '\n'),
-                }}
-              />
+              <Elem name="content" mod={{ type: 'text' }}>
+                {region.text.replace(/\\n/g, '\n')}
+              </Elem>
             </Elem>
           </Block>
         ) : null}
diff --git a/src/components/SidePanels/DetailsPanel/RegionItem.tsx b/src/components/SidePanels/DetailsPanel/RegionItem.tsx
index 2244a23870..88c3378403 100644
--- a/src/components/SidePanels/DetailsPanel/RegionItem.tsx
+++ b/src/components/SidePanels/DetailsPanel/RegionItem.tsx
@@ -50,10 +50,10 @@ export const RegionItem: FC<RegionItemProps> = observer(({
         {withIds && <span>{region.cleanId}</span>}
       </Elem>
       {MainDetails && <Elem name="content"><MainDetails region={region}/></Elem>}
-      {region?.isDrawing && (
+      {region.isDrawing && (
         <Elem name="warning">
           <IconWarning />
-          <Elem name="warning-text">Incomplete {region.type.replace('region', '')}</Elem>
+          <Elem name="warning-text">Incomplete {region.type?.replace('region', '') ?? 'region'}</Elem>
         </Elem>
       )}
       {withActions && (
diff --git a/src/components/SidePanels/OutlinerPanel/OutlinerTree.tsx b/src/components/SidePanels/OutlinerPanel/OutlinerTree.tsx
index de63ce50e1..dc8160728d 100644
--- a/src/components/SidePanels/OutlinerPanel/OutlinerTree.tsx
+++ b/src/components/SidePanels/OutlinerPanel/OutlinerTree.tsx
@@ -408,7 +408,7 @@ const NodeIconComponent: FC<any> = observer(({ node }) => {
 });
 
 const RootTitle: FC<any> = observer(({
-  item,
+  item, // can be undefined for group titles in Labels or Tools mode
   label,
   isArea,
   ...props
@@ -437,9 +437,10 @@ const RootTitle: FC<any> = observer(({
         {!props.isGroup && <Elem name="index">{props.idx + 1}</Elem>}
         <Elem name="title">
           {label}
+          {item?.text && <Elem name="text">{item.text.replace(/\\n/g, '\n')}</Elem>}
           {item?.isDrawing && (
             <Elem tag="span" name="incomplete">
-              <Tooltip title="Incomplete polygon">
+              <Tooltip title={`Incomplete ${item.type?.replace('region', '') ?? 'region'}`}>
                 <IconWarning />
               </Tooltip>
             </Elem>
diff --git a/src/components/SidePanels/OutlinerPanel/TreeView.styl b/src/components/SidePanels/OutlinerPanel/TreeView.styl
index b683f81918..f718cfcad4 100644
--- a/src/components/SidePanels/OutlinerPanel/TreeView.styl
+++ b/src/components/SidePanels/OutlinerPanel/TreeView.styl
@@ -75,6 +75,7 @@
   &-title
     flex 1
     padding-left 5px
+    min-width 0
 
     .labels-list
       display inline-block
@@ -117,6 +118,14 @@
     display inline-flex
     flex 1
     color var(--text-color, #000)
+    min-width 0
+
+  &__text
+    margin-left 5px
+    color #000
+    overflow hidden
+    white-space nowrap
+    text-overflow ellipsis
 
   &__incomplete
     display inline-flex