From a6742a7b7c491deb5f16ea0b9506e91de68759e9 Mon Sep 17 00:00:00 2001 From: Ivan <8611739+IRBorisov@users.noreply.github.com> Date: Mon, 19 Aug 2024 19:15:21 +0300 Subject: [PATCH] M: Improve typification and expression visibility --- .../src/components/info/InfoConstituenta.tsx | 4 ++-- .../frontend/src/components/ui/TextContent.tsx | 4 ++-- .../pages/OssPage/EditorOssGraph/InputNode.tsx | 4 ++-- .../OssPage/EditorOssGraph/OperationNode.tsx | 4 ++-- .../pages/RSFormPage/EditorRSList/TableRSList.tsx | 10 ++++++++-- rsconcept/frontend/src/utils/constants.ts | 2 ++ rsconcept/frontend/src/utils/utils.ts | 15 +++++++++++++-- 7 files changed, 31 insertions(+), 12 deletions(-) diff --git a/rsconcept/frontend/src/components/info/InfoConstituenta.tsx b/rsconcept/frontend/src/components/info/InfoConstituenta.tsx index 230cf78b..4ab13c7a 100644 --- a/rsconcept/frontend/src/components/info/InfoConstituenta.tsx +++ b/rsconcept/frontend/src/components/info/InfoConstituenta.tsx @@ -25,12 +25,12 @@ function InfoConstituenta({ data, className, ...restProps }: InfoConstituentaPro ) : null}

Типизация: - {labelCstTypification(data)} + {labelCstTypification(data)}

{data.definition_formal ? (

Выражение: - {data.definition_formal} + {data.definition_formal}

) : null} {data.definition_resolved ? ( diff --git a/rsconcept/frontend/src/components/ui/TextContent.tsx b/rsconcept/frontend/src/components/ui/TextContent.tsx index 61a9f433..e4ba8f35 100644 --- a/rsconcept/frontend/src/components/ui/TextContent.tsx +++ b/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 (
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)); diff --git a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OperationNode.tsx b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OperationNode.tsx index 779e0925..ce6272c2 100644 --- a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OperationNode.tsx +++ b/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)); diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/TableRSList.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/TableRSList.tsx index 9ee5b8be..2bd28518 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/TableRSList.tsx +++ b/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 => ( -
{props.getValue()}
+
+ {truncateToSymbol(props.getValue(), PARAMETER.typificationTruncate)} +
) }), columnHelper.accessor(cst => cst.term_resolved || cst.term_raw || '', { diff --git a/rsconcept/frontend/src/utils/constants.ts b/rsconcept/frontend/src/utils/constants.ts index 9264dafc..694737ae 100644 --- a/rsconcept/frontend/src/utils/constants.ts +++ b/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 diff --git a/rsconcept/frontend/src/utils/utils.ts b/rsconcept/frontend/src/utils/utils.ts index 4a79f480..123f9b05 100644 --- a/rsconcept/frontend/src/utils/utils.ts +++ b/rsconcept/frontend/src/utils/utils.ts @@ -67,9 +67,9 @@ export function applyPattern(text: string, mapping: Record, 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. */