From 79c2050ed24e1c12ca20450c5b970e5840286b49 Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Mon, 2 Sep 2024 18:34:18 +0300
Subject: [PATCH] F: Improve tooltips positioning and text truncation

---
 .../frontend/src/components/ui/SelectMulti.tsx      |  3 +++
 .../frontend/src/components/ui/SelectSingle.tsx     |  3 +++
 .../frontend/src/components/ui/TextContent.tsx      |  7 ++++---
 .../frontend/src/context/ConceptOptionsContext.tsx  |  9 ++++++++-
 .../dialogs/DlgEditWordForms/DlgEditWordForms.tsx   |  2 +-
 .../RSFormPage/EditorTermGraph/EditorTermGraph.tsx  | 13 ++++++++++---
 .../ViewConstituents/TableSideConstituents.tsx      | 12 ++++++++----
 rsconcept/frontend/src/utils/constants.ts           |  1 +
 8 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/rsconcept/frontend/src/components/ui/SelectMulti.tsx b/rsconcept/frontend/src/components/ui/SelectMulti.tsx
index f66f8968..bf4cf541 100644
--- a/rsconcept/frontend/src/components/ui/SelectMulti.tsx
+++ b/rsconcept/frontend/src/components/ui/SelectMulti.tsx
@@ -67,6 +67,9 @@ function SelectMulti<Option, Group extends GroupBase<Option> = GroupBase<Option>
       }),
       option: (styles, { isSelected }) => ({
         ...styles,
+        padding: '0.25rem 0.75rem',
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
         backgroundColor: isSelected ? colors.bgSelected : styles.backgroundColor,
         color: isSelected ? colors.fgSelected : styles.color,
         borderWidth: '1px',
diff --git a/rsconcept/frontend/src/components/ui/SelectSingle.tsx b/rsconcept/frontend/src/components/ui/SelectSingle.tsx
index cfbf1311..c1f65bbb 100644
--- a/rsconcept/frontend/src/components/ui/SelectSingle.tsx
+++ b/rsconcept/frontend/src/components/ui/SelectSingle.tsx
@@ -78,6 +78,9 @@ function SelectSingle<Option, Group extends GroupBase<Option> = GroupBase<Option
       }),
       option: (defaultStyles, { isSelected }) => ({
         ...defaultStyles,
+        padding: '0.25rem 0.75rem',
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
         backgroundColor: isSelected ? colors.bgSelected : defaultStyles.backgroundColor,
         color: isSelected ? colors.fgSelected : defaultStyles.color,
         borderWidth: '1px',
diff --git a/rsconcept/frontend/src/components/ui/TextContent.tsx b/rsconcept/frontend/src/components/ui/TextContent.tsx
index e4ba8f35..4070d93f 100644
--- a/rsconcept/frontend/src/components/ui/TextContent.tsx
+++ b/rsconcept/frontend/src/components/ui/TextContent.tsx
@@ -8,16 +8,17 @@ import { CProps } from '../props';
 export interface TextContentProps extends CProps.Styling {
   text: string;
   maxLength?: number;
+  noTooltip?: boolean;
 }
 
-function TextContent({ className, text, maxLength, ...restProps }: TextContentProps) {
+function TextContent({ className, text, maxLength, noTooltip, ...restProps }: TextContentProps) {
   const truncated = maxLength ? truncateToLastWord(text, maxLength) : text;
   const isTruncated = maxLength && text.length > maxLength;
   return (
     <div
       className={clsx('text-xs text-pretty', className)}
-      data-tooltip-id={isTruncated ? globals.tooltip : undefined}
-      data-tooltip-content={isTruncated ? text : undefined}
+      data-tooltip-id={isTruncated && !noTooltip ? globals.value_tooltip : undefined}
+      data-tooltip-html={isTruncated && !noTooltip ? text : undefined}
       {...restProps}
     >
       {truncated}
diff --git a/rsconcept/frontend/src/context/ConceptOptionsContext.tsx b/rsconcept/frontend/src/context/ConceptOptionsContext.tsx
index 1e050444..08ebfe83 100644
--- a/rsconcept/frontend/src/context/ConceptOptionsContext.tsx
+++ b/rsconcept/frontend/src/context/ConceptOptionsContext.tsx
@@ -145,8 +145,15 @@ export const OptionsState = ({ children }: OptionsStateProps) => {
           id={`${globals.tooltip}`}
           layer='z-topmost'
           place='right-start'
-          className={clsx('mt-1 translate-y-1/2', 'max-w-[20rem]')}
+          className={clsx('mt-8', 'max-w-[20rem]')}
         />
+        <Tooltip
+          float
+          id={`${globals.value_tooltip}`}
+          layer='z-topmost'
+          className={clsx('max-w-[calc(min(40rem,100dvw-2rem))]')}
+        />
+
         {children}
       </>
     </OptionsContext.Provider>
diff --git a/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx b/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx
index dd2ba338..49d12115 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx
@@ -178,7 +178,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
         </div>
         <SelectMultiGrammeme
           placeholder='Выберите граммемы'
-          className='w-[15rem]'
+          className='min-w-[15rem] h-fit'
           value={inputGrams}
           setValue={setInputGrams}
         />
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx
index 6a4419fa..64413bc7 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx
@@ -356,20 +356,27 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
         hideZero
         totalCount={controller.schema?.stats?.count_all ?? 0}
         selectedCount={controller.selected.length}
-        position='top-[4.3rem] sm:top-[0.3rem] left-0'
+        position='top-[4.3rem] sm:top-[2rem] left-0'
       />
 
       {hoverCst && hoverCstDebounced && hoverCst === hoverCstDebounced ? (
         <Overlay
           layer='z-tooltip'
           position={clsx('top-[1.6rem]', { 'left-[2.6rem]': hoverLeft, 'right-[2.6rem]': !hoverLeft })}
-          className={clsx('w-[25rem]', 'px-3', 'cc-scroll-y', 'border shadow-md', 'clr-app')}
+          className={clsx(
+            'w-[25rem] max-h-[calc(100dvh-15rem)]',
+            'px-3',
+            'cc-scroll-y',
+            'border shadow-md',
+            'clr-input',
+            'text-sm'
+          )}
         >
           <InfoConstituenta className='pt-1 pb-2' data={hoverCstDebounced} />
         </Overlay>
       ) : null}
 
-      <Overlay position='top-[6.25rem] sm:top-9 left-0' className='flex gap-1'>
+      <Overlay position='top-[6.25rem] sm:top-[4rem] left-0' className='flex gap-1'>
         <div className='flex flex-col ml-2 w-[13.5rem]'>
           {selectors}
           {viewHidden}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx
index 1bc903a4..cec12186 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx
@@ -5,12 +5,15 @@ import { useCallback, useLayoutEffect, useMemo } from 'react';
 import BadgeConstituenta from '@/components/info/BadgeConstituenta';
 import DataTable, { createColumnHelper, IConditionalStyle } from '@/components/ui/DataTable';
 import NoData from '@/components/ui/NoData';
+import TextContent from '@/components/ui/TextContent';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { ConstituentaID, IConstituenta } from '@/models/rsform';
 import { isMockCst } from '@/models/rsformAPI';
 import { PARAMETER, prefixes } from '@/utils/constants';
 import { describeConstituenta } from '@/utils/labels';
 
+const DESCRIPTION_MAX_SYMBOLS = 280;
+
 interface TableSideConstituentsProps {
   items: IConstituenta[];
   activeCst?: IConstituenta;
@@ -76,15 +79,16 @@ function TableSideConstituents({
         minSize: 250,
         maxSize: 1000,
         cell: props => (
-          <div
+          <TextContent
+            noTooltip
+            text={props.getValue()}
+            maxLength={DESCRIPTION_MAX_SYMBOLS}
             style={{
               textWrap: 'pretty',
               fontSize: 12,
               color: isMockCst(props.row.original) ? colors.fgWarning : undefined
             }}
-          >
-            {props.getValue()}
-          </div>
+          />
         )
       })
     ],
diff --git a/rsconcept/frontend/src/utils/constants.ts b/rsconcept/frontend/src/utils/constants.ts
index a6dd6e57..371cf363 100644
--- a/rsconcept/frontend/src/utils/constants.ts
+++ b/rsconcept/frontend/src/utils/constants.ts
@@ -138,6 +138,7 @@ export const storage = {
  */
 export const globals = {
   tooltip: 'global_tooltip',
+  value_tooltip: 'value_tooltip',
   password_tooltip: 'password_tooltip',
   email_tooltip: 'email_tooltip',
   main_scroll: 'main_scroll',