Implement tooltips for constituents

rsconcept/frontend/src/components/Common/ConceptTooltip.tsx

@@ -0,0 +1,23 @@
+import { ITooltip, Tooltip } from 'react-tooltip';
+
+import { useConceptTheme } from '../../context/ThemeContext';
+
+interface ConceptTooltipProps
+extends Omit<ITooltip, 'variant' | 'place'> {
+  
+}
+
+function ConceptTooltip({ className, ...props }: ConceptTooltipProps) {
+  const { darkMode } = useConceptTheme();
+
+  return (
+  <Tooltip
+    className={`overflow-auto border shadow-md z-20 ${className}`}
+    variant={(darkMode ? 'dark' : 'light')}
+    place='bottom'
+    {...props}
+  />
+  );
+}
+
+export default ConceptTooltip;

rsconcept/frontend/src/components/Icons.tsx

@@ -283,3 +283,12 @@ export function SaveIcon(props: IconProps) {
     </IconSVG>
   );
 }
+
+export function HelpIcon(props: IconProps) {
+  return (
+    <IconSVG viewbox='0 0 24 24' {...props}>
+      <path d='M12 6a3.939 3.939 0 00-3.934 3.934h2C10.066 8.867 10.934 8 12 8s1.934.867 1.934 1.934c0 .598-.481 1.032-1.216 1.626a9.208 9.208 0 00-.691.599c-.998.997-1.027 2.056-1.027 2.174V15h2l-.001-.633c.001-.016.033-.386.441-.793.15-.15.339-.3.535-.458.779-.631 1.958-1.584 1.958-3.182A3.937 3.937 0 0012 6zm-1 10h2v2h-2z' />
+      <path d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z' />
+    </IconSVG>
+  );
+}

rsconcept/frontend/src/index.css

@@ -19,6 +19,10 @@
 }
 
 @layer components {
+  h1 {
+    @apply text-lg font-bold text-center
+  }
+
   .border {
     @apply clr-border rounded
   }

rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx

@@ -3,8 +3,9 @@ import { toast } from 'react-toastify';
 
 import Button from '../../components/Common/Button';
 import ConceptDataTable from '../../components/Common/ConceptDataTable';
+import ConceptTooltip from '../../components/Common/ConceptTooltip';
 import Divider from '../../components/Common/Divider';
-import { ArrowDownIcon, ArrowsRotateIcon, ArrowUpIcon, DumpBinIcon, SmallPlusIcon } from '../../components/Icons';
+import { ArrowDownIcon, ArrowsRotateIcon, ArrowUpIcon, DumpBinIcon, HelpIcon, SmallPlusIcon } from '../../components/Icons';
 import { useRSForm } from '../../context/RSFormContext';
 import { useConceptTheme } from '../../context/ThemeContext';
 import { CstType, type IConstituenta, ICstMovetoData, inferStatus, ParsingStatus, ValueClass } from '../../utils/models'
@@ -288,7 +289,7 @@ function EditorItems({ onOpenEdit, onShowCreateCst }: EditorItemsProps) {
             <b>{selected.length}</b> из {schema?.stats?.count_all ?? 0}
           </span>
         </div>
-        {isEditable && <div className='flex justify-start w-full gap-1'>
+        {isEditable && <div className='flex items-center justify-start w-full gap-1'>
           <Button
             tooltip='Переместить вверх'
             icon={<ArrowUpIcon size={6}/>}
@@ -333,13 +334,21 @@ function EditorItems({ onOpenEdit, onShowCreateCst }: EditorItemsProps) {
                 onClick={() => { handleAddNew(type); }}
               />;
           })}
+          <div id='items-table-help'>
+            <HelpIcon color='text-primary' size={6} />
+          </div>
+          <ConceptTooltip anchorSelect='#items-table-help'>
+            <div>
+              <h1>Горячие клавиши</h1>
+              <p><b>Двойной клик / Alt + клик</b> - редактирование конституенты</p>
+              <p><b>Alt + вверх/вниз</b> - движение конституент</p>
+              <p><b>Delete</b> - удаление конституент</p>
+              <p><b>Alt + 1-6, Q,W</b> - добавление конституент</p>
+            </div>
+          </ConceptTooltip>
         </div>}
       </div>
-      <div className='w-full h-full' 
+      <div className='w-full h-full' onKeyDown={handleTableKey}>
-        onKeyDown={handleTableKey}
-        tabIndex={0} 
-        title='Горячие клавиши:&#013;Двойной клик / Alt + клик - редактирование конституенты&#013;Alt + вверх/вниз - движение конституент&#013;Delete - удаление выбранных&#013;Alt + 1-6, Q,W - добавление конституент'
-      >
       <ConceptDataTable
         data={schema?.items ?? []}
         columns={columns}

rsconcept/frontend/src/pages/RSFormPage/elements/ConstituentaTooltip.tsx

@@ -0,0 +1,25 @@
+import ConceptTooltip from '../../../components/Common/ConceptTooltip';
+import { IConstituenta } from '../../../utils/models';
+
+interface ConstituentaTooltipProps {
+  data: IConstituenta
+  anchor: string
+}
+
+function ConstituentaTooltip({ data, anchor }: ConstituentaTooltipProps) {
+  return (
+    <ConceptTooltip
+      anchorSelect={anchor}
+      className='max-w-[20rem] min-w-[20rem]'
+    >
+      <h1>Конституента {data.alias}</h1>
+      <p><b>Типизация: </b>{data.parse.typification}</p>
+      <p><b>Тремин: </b>{data.term.resolved || data.term.raw}</p>
+      {data.definition.formal && <p><b>Выражение: </b>{data.definition.formal}</p>}
+      {data.definition.text.resolved && <p><b>Определение: </b>{data.definition.text.resolved}</p>}
+      {data.convention && <p><b>Конвенция: </b>{data.convention}</p>}
+    </ConceptTooltip>
+  );
+}
+
+export default ConstituentaTooltip;

rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx

@@ -6,6 +6,7 @@ import { useRSForm } from '../../../context/RSFormContext';
 import useLocalStorage from '../../../hooks/useLocalStorage';
 import { CstType, extractGlobals,type IConstituenta, matchConstituenta } from '../../../utils/models';
 import { getMockConstituenta } from '../../../utils/staticUI';
+import ConstituentaTooltip from './ConstituentaTooltip';
 
 interface ViewSideConstituentsProps {
   expression: string
@@ -61,7 +62,12 @@ function ViewSideConstituents({ expression }: ViewSideConstituentsProps) {
       {
         name: 'ID',
         id: 'alias',
-        selector: (cst: IConstituenta) => cst.alias,
+        cell: (cst: IConstituenta) => {
+          return (<div>
+            <span id={cst.alias}>{cst.alias}</span>
+            <ConstituentaTooltip data={cst} anchor={`#${cst.alias}`} />
+          </div>);
+        },
         width: '62px',
         maxWidth: '62px',
         conditionalCellStyles: [