M: Improve typification and expression visibility

rsconcept/frontend/src/components/info/InfoConstituenta.tsx

@@ -25,12 +25,12 @@ function InfoConstituenta({ data, className, ...restProps }: InfoConstituentaPro
       ) : null}
       <p className='break-all'>
         <b>Типизация: </b>
-        {labelCstTypification(data)}
+        <span className='font-math'>{labelCstTypification(data)}</span>
       </p>
       {data.definition_formal ? (
         <p>
           <b>Выражение: </b>
-          {data.definition_formal}
+          <span className='font-math'>{data.definition_formal}</span>
         </p>
       ) : null}
       {data.definition_resolved ? (

rsconcept/frontend/src/components/ui/TextContent.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 
 import { globals } from '@/utils/constants';
-import { truncateText } from '@/utils/utils';
+import { truncateToLastWord } from '@/utils/utils';
 
 import { CProps } from '../props';
 
@@ -11,7 +11,7 @@ export interface TextContentProps extends CProps.Styling {
 }
 
 function TextContent({ className, text, maxLength, ...restProps }: TextContentProps) {
-  const truncated = maxLength ? truncateText(text, maxLength) : text;
+  const truncated = maxLength ? truncateToLastWord(text, maxLength) : text;
   const isTruncated = maxLength && text.length > maxLength;
   return (
     <div

rsconcept/frontend/src/pages/OssPage/EditorOssGraph/InputNode.tsx

@@ -6,7 +6,7 @@ import MiniButton from '@/components/ui/MiniButton.tsx';
 import Overlay from '@/components/ui/Overlay';
 import { OssNodeInternal } from '@/models/miscellaneous';
 import { PARAMETER, prefixes } from '@/utils/constants';
-import { truncateText } from '@/utils/utils';
+import { truncateToLastWord } from '@/utils/utils';
 
 import { useOssEdit } from '../OssEditContext';
 
@@ -15,7 +15,7 @@ function InputNode(node: OssNodeInternal) {
 
   const hasFile = !!node.data.operation.result;
   const longLabel = node.data.label.length > PARAMETER.ossLongLabel;
-  const labelText = truncateText(node.data.label, PARAMETER.ossTruncateLabel);
+  const labelText = truncateToLastWord(node.data.label, PARAMETER.ossTruncateLabel);
 
   const handleOpenSchema = () => {
     controller.openOperationSchema(Number(node.id));

rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OperationNode.tsx

@@ -8,7 +8,7 @@ import MiniButton from '@/components/ui/MiniButton.tsx';
 import Overlay from '@/components/ui/Overlay';
 import { OssNodeInternal } from '@/models/miscellaneous';
 import { PARAMETER, prefixes } from '@/utils/constants';
-import { truncateText } from '@/utils/utils';
+import { truncateToLastWord } from '@/utils/utils';
 
 import { useOssEdit } from '../OssEditContext';
 
@@ -17,7 +17,7 @@ function OperationNode(node: OssNodeInternal) {
 
   const hasFile = !!node.data.operation.result;
   const longLabel = node.data.label.length > PARAMETER.ossLongLabel;
-  const labelText = truncateText(node.data.label, PARAMETER.ossTruncateLabel);
+  const labelText = truncateToLastWord(node.data.label, PARAMETER.ossTruncateLabel);
 
   const handleOpenSchema = () => {
     controller.openOperationSchema(Number(node.id));

rsconcept/frontend/src/pages/RSFormPage/EditorRSList/TableRSList.tsx

@@ -12,8 +12,9 @@ import TextURL from '@/components/ui/TextURL';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import useWindowSize from '@/hooks/useWindowSize';
 import { ConstituentaID, IConstituenta } from '@/models/rsform';
-import { prefixes } from '@/utils/constants';
+import { PARAMETER, prefixes } from '@/utils/constants';
 import { labelCstTypification } from '@/utils/labels';
+import { truncateToSymbol } from '@/utils/utils';
 
 interface TableRSListProps {
   items?: IConstituenta[];
@@ -90,8 +91,13 @@ function TableRSList({
         id: 'type',
         header: 'Типизация',
         enableHiding: true,
+        size: 150,
+        minSize: 150,
+        maxSize: 200,
         cell: props => (
-          <div className={clsx('min-w-[9.3rem] max-w-[9.3rem]', 'text-sm break-words')}>{props.getValue()}</div>
+          <div className={clsx('min-w-[9.3rem] max-w-[9.3rem]', 'text-xs break-words')}>
+            {truncateToSymbol(props.getValue(), PARAMETER.typificationTruncate)}
+          </div>
         )
       }),
       columnHelper.accessor(cst => cst.term_resolved || cst.term_raw || '', {

rsconcept/frontend/src/utils/constants.ts

@@ -25,6 +25,8 @@ 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: 28, // characters - threshold for long labels - truncate
 

rsconcept/frontend/src/utils/utils.ts

@@ -67,9 +67,9 @@ export function applyPattern(text: string, mapping: Record<string, string>, patt
 }
 
 /**
- * Truncate text to max symbols. Add ellipsis if truncated.
+ * Truncate text to last word up to max symbols. Add ellipsis if truncated.
  */
-export function truncateText(text: string, maxSymbols: number): string {
+export function truncateToLastWord(text: string, maxSymbols: number): string {
   if (text.length <= maxSymbols) {
     return text;
   }
@@ -81,6 +81,17 @@ export function truncateText(text: string, maxSymbols: number): string {
   return trimmedText.slice(0, lastSpaceIndex) + '...';
 }
 
+/**
+ * Truncate text to max symbols. Add ellipsis if truncated.
+ */
+export function truncateToSymbol(text: string, maxSymbols: number): string {
+  if (text.length <= maxSymbols) {
+    return text;
+  }
+  const trimmedText = text.slice(0, maxSymbols);
+  return trimmedText + '...';
+}
+
 /**
  * Check if Axios response is html.
  */