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 <[email protected]> --------- Co-authored-by: hlomzik <[email protected]> Co-authored-by: Sergey <[email protected]>
HumanSignal · Jan 26, 2024 · e9c9552 · e9c9552
1 parent b6bb8d2
commit e9c9552
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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