From 2470fe1fae100e1fd4a8cfce80a3926b980e44e1 Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Mon, 19 Aug 2024 11:57:15 +0300
Subject: [PATCH] M: Improve label visibility

---
 .../OssPage/EditorOssGraph/InputNode.tsx      | 22 ++++++++++---
 .../OssPage/EditorOssGraph/OperationNode.tsx  | 32 ++++++++++++-------
 rsconcept/frontend/src/styling/overrides.css  |  2 +-
 rsconcept/frontend/src/utils/constants.ts     |  3 ++
 4 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/InputNode.tsx b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/InputNode.tsx
index ac63fd96..4bf8b56e 100644
--- a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/InputNode.tsx
+++ b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/InputNode.tsx
@@ -5,13 +5,17 @@ import TooltipOperation from '@/components/info/TooltipOperation';
 import MiniButton from '@/components/ui/MiniButton.tsx';
 import Overlay from '@/components/ui/Overlay';
 import { OssNodeInternal } from '@/models/miscellaneous';
-import { prefixes } from '@/utils/constants';
+import { PARAMETER, prefixes } from '@/utils/constants';
+import { truncateText } from '@/utils/utils';
 
 import { useOssEdit } from '../OssEditContext';
 
 function InputNode(node: OssNodeInternal) {
   const controller = useOssEdit();
+
   const hasFile = !!node.data.operation.result;
+  const longLabel = node.data.label.length > PARAMETER.ossLongLabel;
+  const labelText = truncateText(node.data.label, PARAMETER.ossTruncateLabel);
 
   const handleOpenSchema = () => {
     controller.openOperationSchema(Number(node.id));
@@ -21,7 +25,7 @@ function InputNode(node: OssNodeInternal) {
     <>
       <Handle type='source' position={Position.Bottom} />
 
-      <Overlay position='top-0 right-0' className='flex'>
+      <Overlay position='top-0 right-0' className='flex p-[0.1rem]'>
         <MiniButton
           icon={<IconRSForm className={hasFile ? 'clr-text-green' : 'clr-text-red'} size='0.75rem' />}
           noHover
@@ -41,8 +45,18 @@ function InputNode(node: OssNodeInternal) {
         </Overlay>
       ) : null}
 
-      <div id={`${prefixes.operation_list}${node.id}`} className='flex-grow text-center'>
-        {node.data.label}
+      <div id={`${prefixes.operation_list}${node.id}`} className='h-[34px] w-[144px] flex items-center justify-center'>
+        <div
+          className='text-center'
+          style={{
+            fontSize: longLabel ? '12px' : '14px',
+            lineHeight: longLabel ? '16px' : '20px',
+            paddingLeft: '4px',
+            paddingRight: longLabel ? '10px' : '4px'
+          }}
+        >
+          {labelText}
+        </div>
         {controller.showTooltip && !node.dragging ? (
           <TooltipOperation anchor={`#${prefixes.operation_list}${node.id}`} node={node} />
         ) : null}
diff --git a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OperationNode.tsx b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OperationNode.tsx
index e8055e89..779e0925 100644
--- a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OperationNode.tsx
+++ b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OperationNode.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Handle, Position } from 'reactflow';
 
 import { IconConsolidation, IconRSForm } from '@/components/Icons';
@@ -5,7 +7,8 @@ import TooltipOperation from '@/components/info/TooltipOperation';
 import MiniButton from '@/components/ui/MiniButton.tsx';
 import Overlay from '@/components/ui/Overlay';
 import { OssNodeInternal } from '@/models/miscellaneous';
-import { prefixes } from '@/utils/constants';
+import { PARAMETER, prefixes } from '@/utils/constants';
+import { truncateText } from '@/utils/utils';
 
 import { useOssEdit } from '../OssEditContext';
 
@@ -13,6 +16,8 @@ function OperationNode(node: OssNodeInternal) {
   const controller = useOssEdit();
 
   const hasFile = !!node.data.operation.result;
+  const longLabel = node.data.label.length > PARAMETER.ossLongLabel;
+  const labelText = truncateText(node.data.label, PARAMETER.ossTruncateLabel);
 
   const handleOpenSchema = () => {
     controller.openOperationSchema(Number(node.id));
@@ -22,14 +27,9 @@ function OperationNode(node: OssNodeInternal) {
     <>
       <Handle type='source' position={Position.Bottom} />
 
-      <Overlay position='top-0 right-0' className='flex flex-col gap-1'>
+      <Overlay position='top-0 right-0' className='flex flex-col gap-1 p-[0.1rem]'>
         <MiniButton
-          icon={
-            <IconRSForm
-              className={hasFile ? 'clr-text-green' : 'clr-text-red'}
-              size={node.data.operation.is_consolidation ? '0.6rem' : '0.75rem'}
-            />
-          }
+          icon={<IconRSForm className={hasFile ? 'clr-text-green' : 'clr-text-red'} size='0.75rem' />}
           noHover
           noPadding
           title={hasFile ? 'Связанная КС' : 'Нет связанной КС'}
@@ -39,7 +39,7 @@ function OperationNode(node: OssNodeInternal) {
         />
         {node.data.operation.is_consolidation ? (
           <MiniButton
-            icon={<IconConsolidation className='clr-text-primary' size='0.6rem' />}
+            icon={<IconConsolidation className='clr-text-primary' size='0.75rem' />}
             disabled
             noPadding
             noHover
@@ -55,8 +55,18 @@ function OperationNode(node: OssNodeInternal) {
         </Overlay>
       ) : null}
 
-      <div id={`${prefixes.operation_list}${node.id}`} className='flex-grow text-center'>
-        {node.data.label}
+      <div id={`${prefixes.operation_list}${node.id}`} className='h-[34px] w-[144px] flex items-center justify-center'>
+        <div
+          className='px-1 text-center'
+          style={{
+            fontSize: longLabel ? '12px' : '14px',
+            lineHeight: longLabel ? '16px' : '20px',
+            paddingLeft: '4px',
+            paddingRight: longLabel ? '10px' : '4px'
+          }}
+        >
+          {labelText}
+        </div>
         {controller.showTooltip && !node.dragging ? (
           <TooltipOperation anchor={`#${prefixes.operation_list}${node.id}`} node={node} />
         ) : null}
diff --git a/rsconcept/frontend/src/styling/overrides.css b/rsconcept/frontend/src/styling/overrides.css
index db41764b..ed8c579b 100644
--- a/rsconcept/frontend/src/styling/overrides.css
+++ b/rsconcept/frontend/src/styling/overrides.css
@@ -66,7 +66,7 @@
   border: 1px solid;
   padding: 2px;
   width: 150px;
-  height: 30px;
+  height: 40px;
   font-size: 14px;
 
   border-radius: 5px;
diff --git a/rsconcept/frontend/src/utils/constants.ts b/rsconcept/frontend/src/utils/constants.ts
index 167fb57c..9264dafc 100644
--- a/rsconcept/frontend/src/utils/constants.ts
+++ b/rsconcept/frontend/src/utils/constants.ts
@@ -25,6 +25,9 @@ export const PARAMETER = {
   graphPopupDelay: 500, // milliseconds delay for graph popup selections
   graphRefreshDelay: 10, // milliseconds delay for graph viewpoint reset
 
+  ossLongLabel: 14, // characters - threshold for long labels - small font
+  ossTruncateLabel: 28, // characters - threshold for long labels - truncate
+
   logicLabel: 'LOGIC',
   exteorVersion: '4.9.3',