Refactor common help elements

rsconcept/frontend/src/components/Help/ConstituentaInfo.tsx

@@ -0,0 +1,22 @@
+import { IConstituenta } from '../../utils/models';
+import { getCstTypificationLabel } from '../../utils/staticUI';
+
+interface ConstituentaInfoProps
+extends React.HTMLAttributes<HTMLDivElement> {
+  data: IConstituenta
+}
+
+function ConstituentaInfo({ data, ...props }: ConstituentaInfoProps) {
+  return (
+    <div {...props}>
+      <h1>Конституента {data.alias}</h1>
+      <p><b>Типизация: </b>{getCstTypificationLabel(data)}</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>}
+    </div>
+  );
+}
+
+export default ConstituentaInfo;

rsconcept/frontend/src/components/Help/CstStatusInfo.tsx

@@ -0,0 +1,29 @@
+import { prefixes } from '../../utils/constants';
+import { mapStatusInfo } from '../../utils/staticUI';
+
+interface CstStatusInfoProps {
+  title?: string
+}
+
+function CstStatusInfo({ title }: CstStatusInfoProps) {
+  return (
+    <>
+      { title && <h1>{title}</h1>}
+      { [... mapStatusInfo.values()].map(
+      (info, index) => {
+        return (
+        <p className='py-1' key={`${prefixes.cst_status_list}${index}`}>
+          <span className={`inline-block font-semibold min-w-[4rem] text-center border ${info.color}`}>
+            {info.text}
+          </span>
+          <span> - </span>
+          <span>
+            {info.tooltip}
+          </span>
+        </p>);
+      })}
+    </>
+  );
+}
+
+export default CstStatusInfo;

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

@@ -6,10 +6,11 @@ import Divider from '../../components/Common/Divider';
 import MiniButton from '../../components/Common/MiniButton';
 import SubmitButton from '../../components/Common/SubmitButton';
 import TextArea from '../../components/Common/TextArea';
+import CstStatusInfo from '../../components/Help/CstStatusInfo';
 import { DumpBinIcon, HelpIcon, SaveIcon, SmallPlusIcon } from '../../components/Icons';
 import { useRSForm } from '../../context/RSFormContext';
 import { type CstType, EditMode, ICstUpdateData, SyntaxTree } from '../../utils/models';
-import { getCstTypeLabel, getCstTypificationLabel, mapStatusInfo } from '../../utils/staticUI';
+import { getCstTypeLabel, getCstTypificationLabel } from '../../utils/staticUI';
 import EditorRSExpression from './EditorRSExpression';
 import ViewSideConstituents from './elements/ViewSideConstituents';
 
@@ -173,18 +174,7 @@ function EditorConstituenta({ activeID, onShowAST, onCreateCst, onOpenEdit, onDe
                 <p>- при наведении на ID конституенты отображаются ее атрибуты</p>
                 <p>- столбец "Описание" содержит один из непустых текстовых атрибутов</p>
                 <Divider margins='mt-2' />
-                <h1>Статусы</h1>
+                <CstStatusInfo title='Статусы' />
-                { [... mapStatusInfo.values()].map((info, index) => {
-                    return (<p className='py-1' key={`status-info-${index}`}>
-                      <span className={`inline-block font-semibold min-w-[4rem] text-center border ${info.color}`}>
-                        {info.text}
-                      </span>
-                      <span> - </span>
-                      <span>
-                        {info.tooltip}
-                      </span>
-                    </p>);
-                })}
               </div>
             </ConceptTooltip>
           </div>

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

@@ -5,6 +5,7 @@ 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 CstStatusInfo from '../../components/Help/CstStatusInfo';
 import { ArrowDownIcon, ArrowsRotateIcon, ArrowUpIcon, DumpBinIcon, HelpIcon, SmallPlusIcon } from '../../components/Icons';
 import { useRSForm } from '../../context/RSFormContext';
 import { useConceptTheme } from '../../context/ThemeContext';
@@ -316,18 +317,7 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
               <p><b>Delete</b> - удаление конституент</p>
               <p><b>Alt + 1-6,Q,W</b> - добавление конституент</p>
               <Divider margins='mt-2' />
-              <h1>Статусы</h1>
+              <CstStatusInfo title='Статусы' />
-              { [... mapStatusInfo.values()].map(info => {
-                  return (<p className='py-1'>
-                    <span className={`inline-block font-semibold min-w-[4rem] text-center border ${info.color}`}>
-                      {info.text}
-                    </span>
-                    <span> - </span>
-                    <span>
-                      {info.tooltip}
-                    </span>
-                  </p>);
-              })}
             </div>
           </ConceptTooltip>
         </div>

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

@@ -8,6 +8,8 @@ import Checkbox from '../../components/Common/Checkbox';
 import ConceptSelect from '../../components/Common/ConceptSelect';
 import ConceptTooltip from '../../components/Common/ConceptTooltip';
 import Divider from '../../components/Common/Divider';
+import ConstituentaInfo from '../../components/Help/ConstituentaInfo';
+import CstStatusInfo from '../../components/Help/CstStatusInfo';
 import { ArrowsRotateIcon, HelpIcon } from '../../components/Icons';
 import { useRSForm } from '../../context/RSFormContext';
 import { useConceptTheme } from '../../context/ThemeContext';
@@ -15,7 +17,7 @@ import useLocalStorage from '../../hooks/useLocalStorage';
 import { prefixes, resources } from '../../utils/constants';
 import { Graph } from '../../utils/Graph';
 import { IConstituenta } from '../../utils/models';
-import { getCstStatusColor, getCstTypeColor, getCstTypificationLabel, 
+import { getCstStatusColor, getCstTypeColor, 
   GraphColoringSelector, GraphLayoutSelector,
   mapColoringLabels, mapLayoutLabels, mapStatusInfo
 } from '../../utils/staticUI';
@@ -200,14 +202,10 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
     <div className='flex flex-col py-2 border-t border-r w-[14.7rem] pr-2 text-sm' style={{height: canvasHeight}}>
       {hoverCst && 
       <div className='relative'>
-        <div className='absolute top-0 left-0 z-50 w-[25rem] min-h-[11rem] overflow-y-auto border h-fit clr-app px-3'>
+        <ConstituentaInfo 
-          <h1>Конституента {hoverCst.alias}</h1>
+          data={hoverCst}
-          <p><b>Типизация: </b>{getCstTypificationLabel(hoverCst)}</p>
+          className='absolute top-0 left-0 z-50 w-[25rem] min-h-[11rem] overflow-y-auto border h-fit clr-app px-3' 
-          <p><b>Термин: </b>{hoverCst.term.resolved || hoverCst.term.raw}</p>
+        />
-          {hoverCst.definition.formal && <p><b>Выражение: </b>{hoverCst.definition.formal}</p>}
-          {hoverCst.definition.text.resolved && <p><b>Определение: </b>{hoverCst.definition.text.resolved}</p>}
-          {hoverCst.convention && <p><b>Конвенция: </b>{hoverCst.convention}</p>}
-        </div>
       </div>}
       <div className='flex items-center w-full gap-1'>
         <Button
@@ -306,18 +304,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
 
           <Divider margins='mt-2' />
           
-          <h1>Статусы</h1>
+          <CstStatusInfo title='Статусы' />
-          { [... mapStatusInfo.values()].map(info => {
-              return (<p className='py-1'>
-                <span className={`inline-block font-semibold min-w-[4rem] text-center border ${info.color}`}>
-                  {info.text}
-                </span>
-                <span> - </span>
-                <span>
-                  {info.tooltip}
-                </span>
-              </p>);
-          })}
         </div>
       </ConceptTooltip>
       <GraphCanvas

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

@@ -1,6 +1,6 @@
 import ConceptTooltip from '../../../components/Common/ConceptTooltip';
+import ConstituentaInfo from '../../../components/Help/ConstituentaInfo';
 import { IConstituenta } from '../../../utils/models';
-import { getCstTypificationLabel } from '../../../utils/staticUI';
 
 interface ConstituentaTooltipProps {
   data: IConstituenta
@@ -13,12 +13,7 @@ function ConstituentaTooltip({ data, anchor }: ConstituentaTooltipProps) {
       anchorSelect={anchor}
       className='max-w-[25rem] min-w-[25rem]'
     >
-      <h1>Конституента {data.alias}</h1>
+      <ConstituentaInfo data={data} />
-      <p><b>Типизация: </b>{getCstTypificationLabel(data)}</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>
   );
 }

rsconcept/frontend/src/utils/constants.ts

@@ -28,5 +28,6 @@ export const resources = {
 }
 
 export const prefixes = {
-  cst_list: 'cst-list-'
+  cst_list: 'cst-list-',
+  cst_status_list: 'cst-status-list-'
 }