From 8d5ce8b0cf24c5f587145143769b40736f9eeefa Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Tue, 29 Oct 2024 12:06:43 +0300
Subject: [PATCH] F: Improve Help UI for dialogs

---
 rsconcept/frontend/src/components/Icons.tsx   |  2 +-
 .../src/components/info/BadgeHelp.tsx         |  6 ++--
 .../components/select/PickConstituenta.tsx    |  2 +-
 .../frontend/src/components/ui/Modal.tsx      | 31 ++++++++++++++-----
 .../DlgConstituentaTemplate.tsx               | 11 +------
 .../DlgCreateOperation/DlgCreateOperation.tsx |  8 +----
 .../src/dialogs/DlgDeleteOperation.tsx        | 12 +------
 .../DlgEditOperation/DlgEditOperation.tsx     |  9 ++----
 .../DlgEditReference/DlgEditReference.tsx     | 12 +------
 .../DlgEditWordForms/DlgEditWordForms.tsx     | 12 +------
 .../src/dialogs/DlgRelocateConstituents.tsx   |  4 ++-
 .../frontend/src/dialogs/DlgRenameCst.tsx     |  8 +----
 rsconcept/frontend/src/dialogs/DlgShowAST.tsx |  7 ++---
 .../frontend/src/dialogs/DlgSubstituteCst.tsx |  2 ++
 .../frontend/src/models/miscellaneous.ts      |  4 +++
 .../src/pages/ManualsPage/TopicPage.tsx       |  4 +++
 .../ManualsPage/items/ui/HelpRelocateCst.tsx  | 10 ++++++
 .../items/ui/HelpSubstitutions.tsx            | 10 ++++++
 .../EditorOssGraph/NodeContextMenu.tsx        |  2 +-
 .../src/pages/OssPage/MenuOssTabs.tsx         |  2 +-
 rsconcept/frontend/src/utils/labels.ts        |  6 +++-
 21 files changed, 78 insertions(+), 86 deletions(-)
 create mode 100644 rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpRelocateCst.tsx
 create mode 100644 rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpSubstitutions.tsx

diff --git a/rsconcept/frontend/src/components/Icons.tsx b/rsconcept/frontend/src/components/Icons.tsx
index 9ce4274e..d70cd122 100644
--- a/rsconcept/frontend/src/components/Icons.tsx
+++ b/rsconcept/frontend/src/components/Icons.tsx
@@ -40,7 +40,7 @@ export { LuFolderEdit     as IconFolderEdit }     from 'react-icons/lu';
 export { LuFolderOpen     as IconFolderOpened }   from 'react-icons/lu';
 export { LuFolderClosed   as IconFolderClosed }   from 'react-icons/lu';
 export { LuFolderDot      as IconFolderEmpty }    from 'react-icons/lu';
-export { LuLightbulb      as IconHelp }           from 'react-icons/lu';
+export { TbHelpOctagon    as IconHelp }           from 'react-icons/tb';
 export { LuLightbulbOff   as IconHelpOff }        from 'react-icons/lu';
 export { RiPushpinFill    as IconPin }            from 'react-icons/ri';
 export { RiUnpinLine      as IconUnpin }          from 'react-icons/ri';
diff --git a/rsconcept/frontend/src/components/info/BadgeHelp.tsx b/rsconcept/frontend/src/components/info/BadgeHelp.tsx
index 16bafee4..74ff106c 100644
--- a/rsconcept/frontend/src/components/info/BadgeHelp.tsx
+++ b/rsconcept/frontend/src/components/info/BadgeHelp.tsx
@@ -1,5 +1,3 @@
-import clsx from 'clsx';
-
 import TextURL from '@/components/ui/TextURL';
 import Tooltip, { PlacesType } from '@/components/ui/Tooltip';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
@@ -16,14 +14,14 @@ interface BadgeHelpProps extends CProps.Styling {
   place?: PlacesType;
 }
 
-function BadgeHelp({ topic, padding, ...restProps }: BadgeHelpProps) {
+function BadgeHelp({ topic, padding = 'p-1', ...restProps }: BadgeHelpProps) {
   const { showHelp } = useConceptOptions();
 
   if (!showHelp) {
     return null;
   }
   return (
-    <div tabIndex={-1} id={`help-${topic}`} className={clsx('p-1', padding)}>
+    <div tabIndex={-1} id={`help-${topic}`} className={padding}>
       <IconHelp size='1.25rem' className='icon-primary' />
       <Tooltip clickable anchorSelect={`#help-${topic}`} layer='z-modalTooltip' {...restProps}>
         <div className='relative' onClick={event => event.stopPropagation()}>
diff --git a/rsconcept/frontend/src/components/select/PickConstituenta.tsx b/rsconcept/frontend/src/components/select/PickConstituenta.tsx
index c8f610a4..b1080b07 100644
--- a/rsconcept/frontend/src/components/select/PickConstituenta.tsx
+++ b/rsconcept/frontend/src/components/select/PickConstituenta.tsx
@@ -92,7 +92,7 @@ function PickConstituenta({
     <div className='border divide-y'>
       <SearchBar
         id={id ? `${id}__search` : undefined}
-        className='clr-input'
+        className='clr-input rounded-t-md'
         noBorder
         value={filterText}
         onChange={newValue => setFilterText(newValue)}
diff --git a/rsconcept/frontend/src/components/ui/Modal.tsx b/rsconcept/frontend/src/components/ui/Modal.tsx
index a76e3317..cb8b7aae 100644
--- a/rsconcept/frontend/src/components/ui/Modal.tsx
+++ b/rsconcept/frontend/src/components/ui/Modal.tsx
@@ -5,10 +5,13 @@ import { motion } from 'framer-motion';
 import { useRef } from 'react';
 
 import useEscapeKey from '@/hooks/useEscapeKey';
+import { HelpTopic } from '@/models/miscellaneous';
 import { animateModal } from '@/styling/animations';
+import { PARAMETER } from '@/utils/constants';
 import { prepareTooltip } from '@/utils/labels';
 
 import { IconClose } from '../Icons';
+import BadgeHelp from '../info/BadgeHelp';
 import { CProps } from '../props';
 import Button from './Button';
 import MiniButton from './MiniButton';
@@ -27,21 +30,30 @@ export interface ModalProps extends CProps.Styling {
   beforeSubmit?: () => boolean;
   onSubmit?: () => void;
   onCancel?: () => void;
+
+  helpTopic?: HelpTopic;
+  hideHelpWhen?: () => boolean;
 }
 
 function Modal({
+  children,
+
   header,
+  submitText = 'Продолжить',
+  submitInvalidTooltip,
+
+  readonly,
+  canSubmit,
+  overflowVisible,
+
   hideWindow,
   beforeSubmit,
   onSubmit,
-  readonly,
   onCancel,
-  canSubmit,
-  submitInvalidTooltip,
   className,
-  children,
-  overflowVisible,
-  submitText = 'Продолжить',
+
+  helpTopic,
+  hideHelpWhen,
   ...restProps
 }: React.PropsWithChildren<ModalProps>) {
   const ref = useRef(null);
@@ -61,7 +73,7 @@ function Modal({
   };
 
   return (
-    <div className='fixed top-0 left-0 w-full h-full z-modal'>
+    <div className='fixed top-0 left-0 w-full h-full z-modal cursor-default'>
       <div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'cc-modal-blur')} />
       <div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'cc-modal-backdrop')} />
       <motion.div
@@ -85,6 +97,11 @@ function Modal({
             onClick={handleCancel}
           />
         </Overlay>
+        {helpTopic && !hideHelpWhen?.() ? (
+          <Overlay position='left-2 top-2'>
+            <BadgeHelp topic={helpTopic} className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')} padding='p-0' />
+          </Overlay>
+        ) : null}
 
         {header ? <h1 className='px-12 py-2 select-none'>{header}</h1> : null}
 
diff --git a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
index 29efa99c..32404eb5 100644
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
@@ -4,9 +4,7 @@ import clsx from 'clsx';
 import { useLayoutEffect, useMemo, useState } from 'react';
 import { TabList, TabPanel, Tabs } from 'react-tabs';
 
-import BadgeHelp from '@/components/info/BadgeHelp';
 import Modal, { ModalProps } from '@/components/ui/Modal';
-import Overlay from '@/components/ui/Overlay';
 import TabLabel from '@/components/ui/TabLabel';
 import AnimateFade from '@/components/wrap/AnimateFade';
 import { useLibrary } from '@/context/LibraryContext';
@@ -15,7 +13,6 @@ import { HelpTopic } from '@/models/miscellaneous';
 import { CstType, ICstCreateData, IRSForm } from '@/models/rsform';
 import { generateAlias, validateNewAlias } from '@/models/rsformAPI';
 import { inferTemplatedType, substituteTemplateArgs } from '@/models/rslangAPI';
-import { PARAMETER } from '@/utils/constants';
 import { prompts } from '@/utils/labels';
 
 import FormCreateCst from '../DlgCreateCst/FormCreateCst';
@@ -165,14 +162,8 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
       canSubmit={validated}
       beforeSubmit={handlePrompt}
       onSubmit={handleSubmit}
+      helpTopic={HelpTopic.RSL_TEMPLATES}
     >
-      <Overlay position='top-0 right-[5.9rem]'>
-        <BadgeHelp
-          topic={HelpTopic.RSL_TEMPLATES}
-          className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
-          offset={12}
-        />
-      </Overlay>
       <Tabs
         selectedTabClassName='clr-selected'
         className='flex flex-col'
diff --git a/rsconcept/frontend/src/dialogs/DlgCreateOperation/DlgCreateOperation.tsx b/rsconcept/frontend/src/dialogs/DlgCreateOperation/DlgCreateOperation.tsx
index d1f957aa..148c5aff 100644
--- a/rsconcept/frontend/src/dialogs/DlgCreateOperation/DlgCreateOperation.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgCreateOperation/DlgCreateOperation.tsx
@@ -4,15 +4,12 @@ import clsx from 'clsx';
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import { TabList, TabPanel, Tabs } from 'react-tabs';
 
-import BadgeHelp from '@/components/info/BadgeHelp';
 import Modal from '@/components/ui/Modal';
-import Overlay from '@/components/ui/Overlay';
 import TabLabel from '@/components/ui/TabLabel';
 import { useLibrary } from '@/context/LibraryContext';
 import { LibraryItemID } from '@/models/library';
 import { HelpTopic } from '@/models/miscellaneous';
 import { IOperationCreateData, IOperationSchema, OperationID, OperationType } from '@/models/oss';
-import { PARAMETER } from '@/utils/constants';
 import { describeOperationType, labelOperationType } from '@/utils/labels';
 
 import TabInputOperation from './TabInputOperation';
@@ -148,11 +145,8 @@ function DlgCreateOperation({ hideWindow, oss, onCreate, initialInputs }: DlgCre
       canSubmit={isValid}
       onSubmit={handleSubmit}
       className='w-[40rem] px-6 h-[32rem]'
+      helpTopic={HelpTopic.CC_OSS}
     >
-      <Overlay position='top-0 right-0'>
-        <BadgeHelp topic={HelpTopic.CC_OSS} className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')} offset={14} />
-      </Overlay>
-
       <Tabs
         selectedTabClassName='clr-selected'
         className='flex flex-col pt-2'
diff --git a/rsconcept/frontend/src/dialogs/DlgDeleteOperation.tsx b/rsconcept/frontend/src/dialogs/DlgDeleteOperation.tsx
index 96b4830d..a11d37e4 100644
--- a/rsconcept/frontend/src/dialogs/DlgDeleteOperation.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgDeleteOperation.tsx
@@ -3,14 +3,11 @@
 import clsx from 'clsx';
 import { useState } from 'react';
 
-import BadgeHelp from '@/components/info/BadgeHelp';
 import Checkbox from '@/components/ui/Checkbox';
 import Modal, { ModalProps } from '@/components/ui/Modal';
-import Overlay from '@/components/ui/Overlay';
 import TextInput from '@/components/ui/TextInput';
 import { HelpTopic } from '@/models/miscellaneous';
 import { IOperation } from '@/models/oss';
-import { PARAMETER } from '@/utils/constants';
 
 interface DlgDeleteOperationProps extends Pick<ModalProps, 'hideWindow'> {
   target: IOperation;
@@ -34,15 +31,8 @@ function DlgDeleteOperation({ hideWindow, target, onSubmit }: DlgDeleteOperation
       canSubmit={true}
       onSubmit={handleSubmit}
       className={clsx('w-[35rem]', 'pb-3 px-6 cc-column', 'select-none')}
+      helpTopic={HelpTopic.CC_PROPAGATION}
     >
-      <Overlay position='top-[-2rem] right-[4rem]'>
-        <BadgeHelp
-          topic={HelpTopic.CC_PROPAGATION}
-          className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
-          offset={14}
-        />
-      </Overlay>
-
       <TextInput disabled dense noBorder id='operation_alias' label='Операция' value={target.alias} />
       <Checkbox
         label='Сохранить наследованные конституенты'
diff --git a/rsconcept/frontend/src/dialogs/DlgEditOperation/DlgEditOperation.tsx b/rsconcept/frontend/src/dialogs/DlgEditOperation/DlgEditOperation.tsx
index 30ba84f4..a3b6089b 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditOperation/DlgEditOperation.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditOperation/DlgEditOperation.tsx
@@ -4,9 +4,7 @@ import clsx from 'clsx';
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import { TabList, TabPanel, Tabs } from 'react-tabs';
 
-import BadgeHelp from '@/components/info/BadgeHelp';
 import Modal from '@/components/ui/Modal';
-import Overlay from '@/components/ui/Overlay';
 import TabLabel from '@/components/ui/TabLabel';
 import useRSFormCache from '@/hooks/useRSFormCache';
 import { HelpTopic } from '@/models/miscellaneous';
@@ -19,7 +17,6 @@ import {
   OperationType
 } from '@/models/oss';
 import { SubstitutionValidator } from '@/models/ossAPI';
-import { PARAMETER } from '@/utils/constants';
 
 import TabArguments from './TabArguments';
 import TabOperation from './TabOperation';
@@ -195,11 +192,9 @@ function DlgEditOperation({ hideWindow, oss, target, onSubmit }: DlgEditOperatio
       canSubmit={canSubmit}
       onSubmit={handleSubmit}
       className='w-[40rem] px-6 h-[32rem]'
+      helpTopic={HelpTopic.UI_SUBSTITUTIONS}
+      hideHelpWhen={() => activeTab !== TabID.SUBSTITUTION}
     >
-      <Overlay position='top-0 right-0'>
-        <BadgeHelp topic={HelpTopic.CC_OSS} className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')} offset={14} />
-      </Overlay>
-
       <Tabs
         selectedTabClassName='clr-selected'
         className='flex flex-col'
diff --git a/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx b/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
index 12df7f51..537ecca6 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
@@ -4,14 +4,11 @@ import clsx from 'clsx';
 import { useMemo, useState } from 'react';
 import { TabList, TabPanel, Tabs } from 'react-tabs';
 
-import BadgeHelp from '@/components/info/BadgeHelp';
 import Modal from '@/components/ui/Modal';
-import Overlay from '@/components/ui/Overlay';
 import TabLabel from '@/components/ui/TabLabel';
 import { ReferenceType } from '@/models/language';
 import { HelpTopic } from '@/models/miscellaneous';
 import { IRSForm } from '@/models/rsform';
-import { PARAMETER } from '@/utils/constants';
 import { labelReferenceType } from '@/utils/labels';
 
 import TabEntityReference from './TabEntityReference';
@@ -71,15 +68,8 @@ function DlgEditReference({ hideWindow, schema, initial, onSave }: DlgEditRefere
       canSubmit={isValid}
       onSubmit={handleSubmit}
       className='w-[40rem] px-6 h-[32rem]'
+      helpTopic={HelpTopic.TERM_CONTROL}
     >
-      <Overlay position='top-0 right-0'>
-        <BadgeHelp
-          topic={HelpTopic.TERM_CONTROL}
-          className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
-          offset={14}
-        />
-      </Overlay>
-
       <Tabs
         selectedTabClassName='clr-selected'
         className='flex flex-col'
diff --git a/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx b/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx
index 17a08762..65913bc6 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx
@@ -4,19 +4,16 @@ import clsx from 'clsx';
 import { useLayoutEffect, useState } from 'react';
 
 import { IconAccept, IconMoveDown, IconMoveLeft, IconMoveRight, IconRemove } from '@/components/Icons';
-import BadgeHelp from '@/components/info/BadgeHelp';
 import SelectMultiGrammeme from '@/components/select/SelectMultiGrammeme';
 import Label from '@/components/ui/Label';
 import MiniButton from '@/components/ui/MiniButton';
 import Modal from '@/components/ui/Modal';
-import Overlay from '@/components/ui/Overlay';
 import TextArea from '@/components/ui/TextArea';
 import useConceptText from '@/hooks/useConceptText';
 import { Grammeme, ITextRequest, IWordForm, IWordFormPlain } from '@/models/language';
 import { parseGrammemes, wordFormEquals } from '@/models/languageAPI';
 import { HelpTopic } from '@/models/miscellaneous';
 import { IConstituenta, TermForm } from '@/models/rsform';
-import { PARAMETER } from '@/utils/constants';
 import { prompts } from '@/utils/labels';
 import { IGrammemeOption, SelectorGrammemes, SelectorGrammemesList } from '@/utils/selectors';
 
@@ -130,15 +127,8 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
       submitText='Сохранить'
       onSubmit={handleSubmit}
       className='flex flex-col w-[40rem] px-6'
+      helpTopic={HelpTopic.TERM_CONTROL}
     >
-      <Overlay position='top-[-0.2rem] left-[8rem]'>
-        <BadgeHelp
-          topic={HelpTopic.TERM_CONTROL}
-          className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
-          offset={3}
-        />
-      </Overlay>
-
       <TextArea
         disabled
         spellCheck
diff --git a/rsconcept/frontend/src/dialogs/DlgRelocateConstituents.tsx b/rsconcept/frontend/src/dialogs/DlgRelocateConstituents.tsx
index c6beb67e..c521a84f 100644
--- a/rsconcept/frontend/src/dialogs/DlgRelocateConstituents.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgRelocateConstituents.tsx
@@ -12,6 +12,7 @@ import DataLoader from '@/components/wrap/DataLoader';
 import { useLibrary } from '@/context/LibraryContext';
 import useRSFormDetails from '@/hooks/useRSFormDetails';
 import { ILibraryItem, LibraryItemID } from '@/models/library';
+import { HelpTopic } from '@/models/miscellaneous';
 import { ICstRelocateData, IOperation, IOperationSchema } from '@/models/oss';
 import { getRelocateCandidates } from '@/models/ossAPI';
 import { ConstituentaID } from '@/models/rsform';
@@ -85,12 +86,13 @@ function DlgRelocateConstituents({ oss, hideWindow, initialTarget, onSubmit }: D
 
   return (
     <Modal
-      header='Перемещение конституент'
+      header='Перенос конституент'
       submitText='Переместить'
       hideWindow={hideWindow}
       canSubmit={isValid}
       onSubmit={handleSubmit}
       className={clsx('w-[40rem] h-[33rem]', 'py-3 px-6')}
+      helpTopic={HelpTopic.UI_RELOCATE_CST}
     >
       <div className='flex flex-col border'>
         <div className='flex gap-1 items-center clr-input border-b rounded-t-md'>
diff --git a/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx b/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
index d7d33073..36b0044b 100644
--- a/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
@@ -3,7 +3,6 @@
 import clsx from 'clsx';
 import { useLayoutEffect, useState } from 'react';
 
-import BadgeHelp from '@/components/info/BadgeHelp';
 import Modal, { ModalProps } from '@/components/ui/Modal';
 import SelectSingle from '@/components/ui/SelectSingle';
 import TextInput from '@/components/ui/TextInput';
@@ -12,7 +11,6 @@ import usePartialUpdate from '@/hooks/usePartialUpdate';
 import { HelpTopic } from '@/models/miscellaneous';
 import { CstType, ICstRenameData } from '@/models/rsform';
 import { generateAlias, validateNewAlias } from '@/models/rsformAPI';
-import { PARAMETER } from '@/utils/constants';
 import { labelCstType } from '@/utils/labels';
 import { SelectorCstType } from '@/utils/selectors';
 
@@ -48,6 +46,7 @@ function DlgRenameCst({ hideWindow, initial, allowChangeType, onRename }: DlgRen
       canSubmit={validated}
       onSubmit={() => onRename(cstData)}
       className={clsx('w-[30rem]', 'py-6 pr-3 pl-6 flex gap-3 justify-center items-center ')}
+      helpTopic={HelpTopic.CC_CONSTITUENTA}
     >
       <SelectSingle
         id='dlg_cst_type'
@@ -70,11 +69,6 @@ function DlgRenameCst({ hideWindow, initial, allowChangeType, onRename }: DlgRen
         value={cstData.alias}
         onChange={event => updateData({ alias: event.target.value })}
       />
-      <BadgeHelp
-        topic={HelpTopic.CC_CONSTITUENTA}
-        offset={16}
-        className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
-      />
     </Modal>
   );
 }
diff --git a/rsconcept/frontend/src/dialogs/DlgShowAST.tsx b/rsconcept/frontend/src/dialogs/DlgShowAST.tsx
index 14353d11..c08490b7 100644
--- a/rsconcept/frontend/src/dialogs/DlgShowAST.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgShowAST.tsx
@@ -2,7 +2,6 @@
 
 import { useCallback, useMemo, useState } from 'react';
 
-import BadgeHelp from '@/components/info/BadgeHelp';
 import GraphUI, { GraphEdge, GraphNode } from '@/components/ui/GraphUI';
 import Modal, { ModalProps } from '@/components/ui/Modal';
 import Overlay from '@/components/ui/Overlay';
@@ -11,7 +10,7 @@ import { HelpTopic } from '@/models/miscellaneous';
 import { SyntaxTree } from '@/models/rslang';
 import { graphDarkT, graphLightT } from '@/styling/color';
 import { colorBgSyntaxTree } from '@/styling/color';
-import { PARAMETER, resources } from '@/utils/constants';
+import { resources } from '@/utils/constants';
 import { labelSyntaxTree } from '@/utils/labels';
 
 interface DlgShowASTProps extends Pick<ModalProps, 'hideWindow'> {
@@ -57,10 +56,8 @@ function DlgShowAST({ hideWindow, syntaxTree, expression }: DlgShowASTProps) {
       readonly
       hideWindow={hideWindow}
       className='flex flex-col justify-stretch w-[calc(100dvw-3rem)] h-[calc(100dvh-6rem)]'
+      helpTopic={HelpTopic.UI_FORMULA_TREE}
     >
-      <Overlay position='left-[0.5rem] top-[0.25rem]'>
-        <BadgeHelp topic={HelpTopic.UI_FORMULA_TREE} className={PARAMETER.TOOLTIP_WIDTH} />
-      </Overlay>
       <Overlay
         position='top-2 right-1/2 translate-x-1/2'
         className='px-2 py-1 rounded-2xl cc-blur max-w-[60ch] text-lg text-center'
diff --git a/rsconcept/frontend/src/dialogs/DlgSubstituteCst.tsx b/rsconcept/frontend/src/dialogs/DlgSubstituteCst.tsx
index 52b873c9..86893e45 100644
--- a/rsconcept/frontend/src/dialogs/DlgSubstituteCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgSubstituteCst.tsx
@@ -5,6 +5,7 @@ import { useMemo, useState } from 'react';
 
 import PickSubstitutions from '@/components/select/PickSubstitutions';
 import Modal, { ModalProps } from '@/components/ui/Modal';
+import { HelpTopic } from '@/models/miscellaneous';
 import { ICstSubstitute, ICstSubstituteData } from '@/models/oss';
 import { IRSForm } from '@/models/rsform';
 import { prefixes } from '@/utils/constants';
@@ -35,6 +36,7 @@ function DlgSubstituteCst({ hideWindow, onSubstitute, schema }: DlgSubstituteCst
       canSubmit={canSubmit}
       onSubmit={handleSubmit}
       className={clsx('w-[40rem]', 'px-6 pb-3')}
+      helpTopic={HelpTopic.UI_SUBSTITUTIONS}
     >
       <PickSubstitutions
         allowSelfSubstitution
diff --git a/rsconcept/frontend/src/models/miscellaneous.ts b/rsconcept/frontend/src/models/miscellaneous.ts
index fa401a17..5bd2d2b9 100644
--- a/rsconcept/frontend/src/models/miscellaneous.ts
+++ b/rsconcept/frontend/src/models/miscellaneous.ts
@@ -74,6 +74,8 @@ export enum HelpTopic {
   UI_CST_STATUS = 'ui-rsform-cst-status',
   UI_CST_CLASS = 'ui-rsform-cst-class',
   UI_OSS_GRAPH = 'ui-oss-graph',
+  UI_SUBSTITUTIONS = 'ui-substitutions',
+  UI_RELOCATE_CST = 'ui-relocate-cst',
 
   CONCEPTUAL = 'concept',
   CC_SYSTEM = 'concept-rsform',
@@ -122,6 +124,8 @@ export const topicParent = new Map<HelpTopic, HelpTopic>([
   [HelpTopic.UI_CST_STATUS, HelpTopic.INTERFACE],
   [HelpTopic.UI_CST_CLASS, HelpTopic.INTERFACE],
   [HelpTopic.UI_OSS_GRAPH, HelpTopic.INTERFACE],
+  [HelpTopic.UI_SUBSTITUTIONS, HelpTopic.INTERFACE],
+  [HelpTopic.UI_RELOCATE_CST, HelpTopic.INTERFACE],
 
   [HelpTopic.CONCEPTUAL, HelpTopic.CONCEPTUAL],
   [HelpTopic.CC_SYSTEM, HelpTopic.CONCEPTUAL],
diff --git a/rsconcept/frontend/src/pages/ManualsPage/TopicPage.tsx b/rsconcept/frontend/src/pages/ManualsPage/TopicPage.tsx
index 33b30ea5..412b9f7a 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/TopicPage.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/TopicPage.tsx
@@ -31,11 +31,13 @@ import HelpCstStatus from './items/ui/HelpCstStatus';
 import HelpFormulaTree from './items/ui/HelpFormulaTree';
 import HelpLibrary from './items/ui/HelpLibrary';
 import HelpOssGraph from './items/ui/HelpOssGraph';
+import HelpRelocateCst from './items/ui/HelpRelocateCst';
 import HelpRSCard from './items/ui/HelpRSCard';
 import HelpRSEditor from './items/ui/HelpRSEditor';
 import HelpRSGraphTerm from './items/ui/HelpRSGraphTerm';
 import HelpRSList from './items/ui/HelpRSList';
 import HelpRSMenu from './items/ui/HelpRSMenu';
+import HelpSubstitutions from './items/ui/HelpSubstitutions';
 
 // PDF Viewer setup
 const OFFSET_X_SMALL = 32;
@@ -65,6 +67,8 @@ function TopicPage({ topic }: TopicPageProps) {
   if (topic === HelpTopic.UI_CST_STATUS) return <HelpCstStatus />;
   if (topic === HelpTopic.UI_CST_CLASS) return <HelpCstClass />;
   if (topic === HelpTopic.UI_OSS_GRAPH) return <HelpOssGraph />;
+  if (topic === HelpTopic.UI_SUBSTITUTIONS) return <HelpSubstitutions />;
+  if (topic === HelpTopic.UI_RELOCATE_CST) return <HelpRelocateCst />;
 
   if (topic === HelpTopic.CONCEPTUAL) return <HelpConcept />;
   if (topic === HelpTopic.CC_SYSTEM) return <HelpConceptSystem />;
diff --git a/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpRelocateCst.tsx b/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpRelocateCst.tsx
new file mode 100644
index 00000000..13aaf28f
--- /dev/null
+++ b/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpRelocateCst.tsx
@@ -0,0 +1,10 @@
+function HelpRelocateCst() {
+  return (
+    <div className='text-justify'>
+      <h1>Перенос конституент</h1>
+      <p>Раздел в разработке...</p>
+    </div>
+  );
+}
+
+export default HelpRelocateCst;
diff --git a/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpSubstitutions.tsx b/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpSubstitutions.tsx
new file mode 100644
index 00000000..ce0fa9d0
--- /dev/null
+++ b/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpSubstitutions.tsx
@@ -0,0 +1,10 @@
+function HelpSubstitutions() {
+  return (
+    <div className='text-justify'>
+      <h1>Таблица отождествлений</h1>
+      <p>Раздел в разработке...</p>
+    </div>
+  );
+}
+
+export default HelpSubstitutions;
diff --git a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/NodeContextMenu.tsx b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/NodeContextMenu.tsx
index 054f2aed..5c845343 100644
--- a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/NodeContextMenu.tsx
+++ b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/NodeContextMenu.tsx
@@ -174,7 +174,7 @@ function NodeContextMenu({
         {controller.isMutable && operation.result ? (
           <DropdownButton
             text='Конституенты'
-            titleHtml='Перемещение конституент</br>между схемами'
+            titleHtml='Перенос конституент</br>между схемами'
             icon={<IconChild size='1rem' className='icon-green' />}
             disabled={controller.isProcessing}
             onClick={handleRelocateConstituents}
diff --git a/rsconcept/frontend/src/pages/OssPage/MenuOssTabs.tsx b/rsconcept/frontend/src/pages/OssPage/MenuOssTabs.tsx
index 056416df..6feafc03 100644
--- a/rsconcept/frontend/src/pages/OssPage/MenuOssTabs.tsx
+++ b/rsconcept/frontend/src/pages/OssPage/MenuOssTabs.tsx
@@ -135,7 +135,7 @@ function MenuOssTabs({ onDestroy }: MenuOssTabsProps) {
           <Dropdown isOpen={editMenu.isOpen}>
             <DropdownButton
               text='Конституенты'
-              titleHtml='Перемещение конституент</br>между схемами'
+              titleHtml='Перенос конституент</br>между схемами'
               icon={<IconChild size='1rem' className='icon-green' />}
               disabled={controller.isProcessing}
               onClick={handleRelocate}
diff --git a/rsconcept/frontend/src/utils/labels.ts b/rsconcept/frontend/src/utils/labels.ts
index 26a75c2d..c05b4463 100644
--- a/rsconcept/frontend/src/utils/labels.ts
+++ b/rsconcept/frontend/src/utils/labels.ts
@@ -377,6 +377,8 @@ export function labelHelpTopic(topic: HelpTopic): string {
     case HelpTopic.UI_CST_STATUS:   return 'Статус конституенты';
     case HelpTopic.UI_CST_CLASS:    return 'Класс конституенты';
     case HelpTopic.UI_OSS_GRAPH:    return 'Граф синтеза';
+    case HelpTopic.UI_SUBSTITUTIONS:return 'Отождествления';
+    case HelpTopic.UI_RELOCATE_CST: return 'Перенос конституент';
 
     case HelpTopic.CONCEPTUAL:      return '♨️ Концептуализация';
     case HelpTopic.CC_SYSTEM:       return 'Система определений';
@@ -428,6 +430,8 @@ export function describeHelpTopic(topic: HelpTopic): string {
     case HelpTopic.UI_CST_STATUS:   return 'нотация статуса конституенты';
     case HelpTopic.UI_CST_CLASS:    return 'нотация класса конституенты';
     case HelpTopic.UI_OSS_GRAPH:    return 'графическая форма <br/>операционной схемы синтеза';
+    case HelpTopic.UI_SUBSTITUTIONS:return 'таблица отождествлений конституент';
+    case HelpTopic.UI_RELOCATE_CST: return 'перенос конституент<br/>в рамках ОСС';
 
     case HelpTopic.CONCEPTUAL:      return 'основы концептуализации';
     case HelpTopic.CC_SYSTEM:       return 'концептуальная схема <br/>как система понятий';
@@ -435,7 +439,7 @@ export function describeHelpTopic(topic: HelpTopic): string {
     case HelpTopic.CC_RELATIONS:    return 'отношения между конституентами';
     case HelpTopic.CC_SYNTHESIS:    return 'операция синтеза концептуальных схем';
     case HelpTopic.CC_OSS:          return 'операционная схема синтеза';
-    case HelpTopic.CC_PROPAGATION:  return 'протаскивание изменений в ОСС';
+    case HelpTopic.CC_PROPAGATION:  return 'сквозные изменения в ОСС';
 
     case HelpTopic.RSLANG:          return 'экспликация и язык родов структур';
     case HelpTopic.RSL_TYPES:       return 'система типов в <br/>родоструктурной экспликации';