From 9dcba3c586ceb4fc26544f9ac0b48e30ba5c508a Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Sat, 22 Feb 2025 18:02:31 +0300
Subject: [PATCH] R: Use line-clamp for line limitation

---
 .../OssPage/EditorOssGraph/graph/NodeCore.tsx     |  6 ++----
 .../pages/RSFormPage/EditorRSList/TableRSList.tsx |  7 +++++--
 .../RSFormPage/EditorTermGraph/graph/TGNode.tsx   | 15 +++++++--------
 rsconcept/frontend/src/utils/constants.ts         |  2 --
 4 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx b/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx
index a85a3f42..fe7800f5 100644
--- a/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx
+++ b/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx
@@ -5,7 +5,6 @@ import { IconConsolidation, IconRSForm } from '@/components/Icons';
 import { Indicator } from '@/components/View';
 import { useTooltipsStore } from '@/stores/tooltips';
 import { globalIDs, PARAMETER } from '@/utils/constants';
-import { truncateToLastWord } from '@/utils/utils';
 
 import { OperationType } from '../../../../backend/types';
 import { type OssNodeInternal } from '../../../../models/ossLayout';
@@ -19,7 +18,6 @@ export function NodeCore({ node }: NodeCoreProps) {
 
   const hasFile = !!node.data.operation.result;
   const longLabel = node.data.label.length > PARAMETER.ossLongLabel;
-  const labelText = truncateToLastWord(node.data.label, PARAMETER.ossTruncateLabel);
 
   return (
     <>
@@ -56,7 +54,7 @@ export function NodeCore({ node }: NodeCoreProps) {
         onMouseEnter={() => setHover(node.data.operation)}
       >
         <div
-          className='text-center'
+          className='text-center line-clamp-2'
           style={{
             fontSize: longLabel ? '12px' : '14px',
             lineHeight: longLabel ? '16px' : '20px',
@@ -64,7 +62,7 @@ export function NodeCore({ node }: NodeCoreProps) {
             paddingRight: longLabel ? '10px' : '4px'
           }}
         >
-          {labelText}
+          {node.data.label}
         </div>
       </div>
     </>
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSList/TableRSList.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSList/TableRSList.tsx
index 7081376e..a80e919f 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSList/TableRSList.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSList/TableRSList.tsx
@@ -7,7 +7,7 @@ import { TextURL } from '@/components/Control';
 import { createColumnHelper, DataTable, type RowSelectionState, type VisibilityState } from '@/components/DataTable';
 import { NoData, TextContent } from '@/components/View';
 import { useWindowSize } from '@/hooks/useWindowSize';
-import { PARAMETER, prefixes } from '@/utils/constants';
+import { prefixes } from '@/utils/constants';
 import { truncateToSymbol } from '@/utils/utils';
 
 import { BadgeConstituenta } from '../../../components/BadgeConstituenta';
@@ -33,6 +33,9 @@ const COLUMN_CONVENTION_HIDE_THRESHOLD = 1800;
 const COMMENT_MAX_SYMBOLS = 100;
 const DEFINITION_MAX_SYMBOLS = 120;
 
+// characters - threshold for long typification - truncate
+const TYPIFICATION_TRUNCATE = 42;
+
 const columnHelper = createColumnHelper<IConstituenta>();
 
 export function TableRSList({
@@ -86,7 +89,7 @@ export function TableRSList({
       maxSize: 200,
       cell: props => (
         <div className={clsx('min-w-[9.3rem] max-w-[9.3rem]', 'text-xs break-words')}>
-          {truncateToSymbol(props.getValue(), PARAMETER.typificationTruncate)}
+          {truncateToSymbol(props.getValue(), TYPIFICATION_TRUNCATE)}
         </div>
       )
     }),
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx
index 1024cab5..81f1f111 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx
@@ -3,9 +3,7 @@
 import { Handle, Position } from 'reactflow';
 
 import { APP_COLORS } from '@/styling/colors';
-import { truncateToLastWord } from '@/utils/utils';
 
-const MAX_DESCRIPTION_LENGTH = 65;
 const DESCRIPTION_THRESHOLD = 15;
 const LABEL_THRESHOLD = 3;
 
@@ -32,8 +30,6 @@ interface TGNodeInternal {
 }
 
 export function TGNode(node: TGNodeInternal) {
-  const description = truncateToLastWord(node.data.description, MAX_DESCRIPTION_LENGTH);
-
   return (
     <>
       <Handle type='target' position={Position.Top} style={{ opacity: 0 }} />
@@ -55,22 +51,25 @@ export function TGNode(node: TGNodeInternal) {
         </div>
       </div>
       <Handle type='source' position={Position.Bottom} style={{ opacity: 0 }} />
-      {description ? (
+      {node.data.description ? (
         <div
           className='mt-1 w-[150px] px-1 text-center translate-x-[calc(-50%+20px)]'
           style={{
-            fontSize: description.length > DESCRIPTION_THRESHOLD ? FONT_SIZE_MIN : FONT_SIZE_MED
+            fontSize: node.data.description.length > DESCRIPTION_THRESHOLD ? FONT_SIZE_MIN : FONT_SIZE_MED
           }}
         >
-          <div className='absolute top-0 px-1 left-0 text-center w-full'>{description}</div>
+          <div className='absolute top-0 px-1 left-0 text-center w-full line-clamp-3 hover:line-clamp-none'>
+            {node.data.description}
+          </div>
           <div
             aria-hidden='true'
+            className='line-clamp-3 hover:line-clamp-none'
             style={{
               WebkitTextStrokeWidth: '3px',
               WebkitTextStrokeColor: APP_COLORS.bgDefault
             }}
           >
-            {description}
+            {node.data.description}
           </div>
         </div>
       ) : null}
diff --git a/rsconcept/frontend/src/utils/constants.ts b/rsconcept/frontend/src/utils/constants.ts
index 5f08e9e7..ea370324 100644
--- a/rsconcept/frontend/src/utils/constants.ts
+++ b/rsconcept/frontend/src/utils/constants.ts
@@ -36,9 +36,7 @@ export const PARAMETER = {
   graphPopupDelay: 500, // milliseconds delay for graph popup selections
   graphRefreshDelay: 10, // milliseconds delay for graph viewpoint reset
 
-  typificationTruncate: 42, // characters - threshold for long typification - truncate
   ossLongLabel: 14, // characters - threshold for long labels - small font
-  ossTruncateLabel: 32, // characters - threshold for long labels - truncate
   statSmallThreshold: 3, // characters - threshold for small labels - small font
 
   logicLabel: 'LOGIC',