From 6467ff7b806113b3f9a426cc65884610a1eeb338 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Wed, 23 Aug 2023 18:11:42 +0300
Subject: [PATCH] Refactor help pages

---
 rsconcept/frontend/.eslintignore              |  3 +-
 rsconcept/frontend/.eslintrc.json             |  5 +-
 .../src/components/Common/ConceptTooltip.tsx  |  1 +
 .../frontend/src/components/ErrorFallback.tsx |  3 +-
 .../frontend/src/components/Help/HelpAPI.tsx  |  9 ++++
 .../src/components/Help/HelpConstituenta.tsx  | 25 ++++++++++
 .../src/components/Help/HelpExteor.tsx        |  9 ++++
 .../src/components/Help/HelpLibrary.tsx       |  9 ++++
 .../frontend/src/components/Help/HelpMain.tsx | 21 ++++++++
 .../src/components/Help/HelpRSFormItems.tsx   | 19 +++++++
 .../src/components/Help/HelpRSFormMeta.tsx    | 14 ++++++
 .../src/components/Help/HelpRSLang.tsx        | 16 ++++++
 .../src/components/Help/HelpTermGraph.tsx     | 34 +++++++++++++
 .../src/components/Help/InfoConstituenta.tsx  |  2 +-
 rsconcept/frontend/src/pages/ManualsPage.tsx  | 23 ---------
 .../src/pages/ManualsPage/TopicsList.tsx      | 29 +++++++++++
 .../src/pages/ManualsPage/ViewTopic.tsx       | 32 ++++++++++++
 .../frontend/src/pages/ManualsPage/index.tsx  | 44 ++++++++++++++++
 .../src/pages/RSFormPage/DlgRenameCst.tsx     |  2 +-
 .../pages/RSFormPage/EditorConstituenta.tsx   | 18 +------
 .../src/pages/RSFormPage/EditorItems.tsx      | 13 +----
 .../src/pages/RSFormPage/EditorRSForm.tsx     | 12 ++++-
 .../src/pages/RSFormPage/EditorTermGraph.tsx  | 28 +----------
 .../frontend/src/pages/RSFormPage/RSTabs.tsx  |  4 +-
 rsconcept/frontend/src/utils/backendAPI.ts    | 18 +++----
 rsconcept/frontend/src/utils/constants.ts     |  6 ++-
 rsconcept/frontend/src/utils/models.ts        | 13 +++++
 rsconcept/frontend/src/utils/staticUI.ts      | 50 ++++++++++++++++++-
 28 files changed, 361 insertions(+), 101 deletions(-)
 create mode 100644 rsconcept/frontend/src/components/Help/HelpAPI.tsx
 create mode 100644 rsconcept/frontend/src/components/Help/HelpConstituenta.tsx
 create mode 100644 rsconcept/frontend/src/components/Help/HelpExteor.tsx
 create mode 100644 rsconcept/frontend/src/components/Help/HelpLibrary.tsx
 create mode 100644 rsconcept/frontend/src/components/Help/HelpMain.tsx
 create mode 100644 rsconcept/frontend/src/components/Help/HelpRSFormItems.tsx
 create mode 100644 rsconcept/frontend/src/components/Help/HelpRSFormMeta.tsx
 create mode 100644 rsconcept/frontend/src/components/Help/HelpRSLang.tsx
 create mode 100644 rsconcept/frontend/src/components/Help/HelpTermGraph.tsx
 delete mode 100644 rsconcept/frontend/src/pages/ManualsPage.tsx
 create mode 100644 rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx
 create mode 100644 rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx
 create mode 100644 rsconcept/frontend/src/pages/ManualsPage/index.tsx

diff --git a/rsconcept/frontend/.eslintignore b/rsconcept/frontend/.eslintignore
index bb693464..9a7e5cf6 100644
--- a/rsconcept/frontend/.eslintignore
+++ b/rsconcept/frontend/.eslintignore
@@ -1 +1,2 @@
-**/parser.ts
\ No newline at end of file
+**/parser.ts
+**/node_modules/**
\ No newline at end of file
diff --git a/rsconcept/frontend/.eslintrc.json b/rsconcept/frontend/.eslintrc.json
index 42f04976..8ee1faf7 100644
--- a/rsconcept/frontend/.eslintrc.json
+++ b/rsconcept/frontend/.eslintrc.json
@@ -22,9 +22,6 @@
             "off",
             { "allowConstantExport": true }
         ],
-        "simple-import-sort/imports": "warn",
-
-        "@typescript-eslint/no-unsafe-member-access": "off",
-        "@typescript-eslint/no-unsafe-argument": "off"
+        "simple-import-sort/imports": "warn"
     }
 }
diff --git a/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx b/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx
index d5ea3a5a..dec3b6ea 100644
--- a/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx
+++ b/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx
@@ -12,6 +12,7 @@ function ConceptTooltip({ className, place='bottom', ...props }: ConceptTooltipP
 
   return (
   <Tooltip
+    opacity={0.95}
     className={`overflow-auto border shadow-md z-20 ${className}`}
     variant={(darkMode ? 'dark' : 'light')}
     place={place}
diff --git a/rsconcept/frontend/src/components/ErrorFallback.tsx b/rsconcept/frontend/src/components/ErrorFallback.tsx
index f2571218..80a600ad 100644
--- a/rsconcept/frontend/src/components/ErrorFallback.tsx
+++ b/rsconcept/frontend/src/components/ErrorFallback.tsx
@@ -3,10 +3,11 @@ import { type FallbackProps } from 'react-error-boundary';
 import Button from './Common/Button';
 
 function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
+  console.log(error);
   return (
     <div className='flex flex-col items-center antialiased clr-app' role='alert'>
       <h1 className='text-lg font-semibold'>Something went wrong!</h1>
-      <pre className='text-red'>Error message: {error.message}</pre>
+      { error  }
       <Button onClick={resetErrorBoundary} text='Try again' />
     </div>
   );
diff --git a/rsconcept/frontend/src/components/Help/HelpAPI.tsx b/rsconcept/frontend/src/components/Help/HelpAPI.tsx
new file mode 100644
index 00000000..6955597d
--- /dev/null
+++ b/rsconcept/frontend/src/components/Help/HelpAPI.tsx
@@ -0,0 +1,9 @@
+function HelpAPI() {
+  return (
+    <div className=''>
+      <b>Справочник по API</b>
+    </div>
+  );
+}
+
+export default HelpAPI;
diff --git a/rsconcept/frontend/src/components/Help/HelpConstituenta.tsx b/rsconcept/frontend/src/components/Help/HelpConstituenta.tsx
new file mode 100644
index 00000000..39b73c51
--- /dev/null
+++ b/rsconcept/frontend/src/components/Help/HelpConstituenta.tsx
@@ -0,0 +1,25 @@
+import Divider from '../Common/Divider';
+import InfoCstStatus from './InfoCstStatus';
+
+function HelpConstituenta() {
+  return (
+    <div className=''>
+      <h1>Подсказки</h1>
+      <p><b className='text-red'>Изменения сохраняются ПОСЛЕ нажатия на кнопку снизу или слева вверху</b></p>
+      <p><b>Клик на формальное выражение</b> - обратите внимание на кнопки снизу.<br/>Для каждой есть горячая клавиша в подсказке</p>
+      <p><b>Список конституент справа</b> - обратите внимание на настройки фильтрации</p>
+      <p>- слева от ввода текста настраивается набор атрибутов конституенты</p>
+      <p>- справа от ввода текста настраивается список конституент, которые фильтруются</p>
+      <p>- текущая конституента выделена цветом строки</p>
+      <p>- двойной клик / Alt + клик - выбор редактируемой конституенты</p>
+      <p>- при наведении на ID конституенты отображаются ее атрибуты</p>
+      <p>- столбец "Описание" содержит один из непустых текстовых атрибутов</p>
+
+      <Divider margins='mt-2' />
+      
+      <InfoCstStatus title='Статусы' />
+    </div>
+  );
+}
+
+export default HelpConstituenta;
diff --git a/rsconcept/frontend/src/components/Help/HelpExteor.tsx b/rsconcept/frontend/src/components/Help/HelpExteor.tsx
new file mode 100644
index 00000000..e881f1f7
--- /dev/null
+++ b/rsconcept/frontend/src/components/Help/HelpExteor.tsx
@@ -0,0 +1,9 @@
+function HelpExteor() {
+  return (
+    <div className=''>
+      <b>Справочник по Экстеору</b>
+    </div>
+  );
+}
+
+export default HelpExteor;
diff --git a/rsconcept/frontend/src/components/Help/HelpLibrary.tsx b/rsconcept/frontend/src/components/Help/HelpLibrary.tsx
new file mode 100644
index 00000000..f2cfcb32
--- /dev/null
+++ b/rsconcept/frontend/src/components/Help/HelpLibrary.tsx
@@ -0,0 +1,9 @@
+function HelpLibrary() {
+  return (
+    <div className=''>
+      <b>Справочник по Библиотеке</b>
+    </div>
+  );
+}
+
+export default HelpLibrary;
diff --git a/rsconcept/frontend/src/components/Help/HelpMain.tsx b/rsconcept/frontend/src/components/Help/HelpMain.tsx
new file mode 100644
index 00000000..fce7f20e
--- /dev/null
+++ b/rsconcept/frontend/src/components/Help/HelpMain.tsx
@@ -0,0 +1,21 @@
+import { urls } from '../../utils/constants';
+import TextURL from '../Common/TextURL';
+
+function HelpMain() {
+  return (
+    <div className='w-full lg:text-justify'>
+      <h1>Портал</h1>
+      <p><u>Портал</u> позволяет анализировать предметные области, формально записывать системы определений (<u>концептуальные схемы</u>) и синтезировать их с помощью математического аппарата родов структур.</p>
+      <p>Навигация по порталу осуществляется верхнюю панель или ссылки в "подвале" страницы. Их можно скрыть с помощью кнопки в правом верхнем углу</p>
+      <p className='mt-2'><b>Основные разделы Портала</b></p>
+      <li><TextURL text='Библиотека' href='/library?filter=common' /> содержит обещдоступные схемы и инструменты поиска и навигации по ним</li>
+      <li><TextURL text='Мои схемы' href='/library?filter=personal' /> содержит отслеживаемые и редактируемые схемы. Основной рабочий раздел</li>
+      <p className='mt-2'><b>Поддержка Портала</b></p>
+      <p>Портал разрабатывается <TextURL text='Центром Концепт' href={urls.concept}/> и является проектом с открытым исходным кодом, доступным на <TextURL text='Github' href={urls.gitrepo}/>.</p>
+      <p>Ждём Ваши пожелания по доработке, найденные ошибки и иные предложения по адресу <TextURL href={urls.mailportal} text='portal@acconcept.ru'/></p>
+      <p></p>
+    </div>
+  );
+}
+
+export default HelpMain;
diff --git a/rsconcept/frontend/src/components/Help/HelpRSFormItems.tsx b/rsconcept/frontend/src/components/Help/HelpRSFormItems.tsx
new file mode 100644
index 00000000..06ab42f5
--- /dev/null
+++ b/rsconcept/frontend/src/components/Help/HelpRSFormItems.tsx
@@ -0,0 +1,19 @@
+import Divider from '../Common/Divider';
+import InfoCstStatus from './InfoCstStatus';
+
+function HelpRSFormItems() {
+  return (
+    <div>
+      <h1>Горячие клавиши</h1>
+      <p><b>Двойной клик / Alt + клик</b> - редактирование конституенты</p>
+      <p><b>Клик на квадрат слева</b> - выделение конституенты</p>
+      <p><b>Alt + вверх/вниз</b> - движение конституент</p>
+      <p><b>Delete</b> - удаление конституент</p>
+      <p><b>Alt + 1-6,Q,W</b> - добавление конституент</p>
+      <Divider margins='mt-2' />
+      <InfoCstStatus title='Статусы' />
+    </div>
+  );
+}
+
+export default HelpRSFormItems;
diff --git a/rsconcept/frontend/src/components/Help/HelpRSFormMeta.tsx b/rsconcept/frontend/src/components/Help/HelpRSFormMeta.tsx
new file mode 100644
index 00000000..30a288d5
--- /dev/null
+++ b/rsconcept/frontend/src/components/Help/HelpRSFormMeta.tsx
@@ -0,0 +1,14 @@
+function HelpRSFormMeta() {
+  return (
+    <div>
+      <h1>Концептуальная схема</h1>
+      <p><b>Владелец</b> - пользователь, обладающий правом редактирования</p>
+      <p>Для <b>общедоступных</b> схем владельцем может стать любой пользователь</p>
+      <p>Для <b>библиотечных</b> схем правом редактирования обладают только администраторы</p>
+      <p><b>Клонировать</b> - создать копию схемы для дальнейшего редактирования</p>
+      <p><b>Загрузить/Выгрузить схему</b> - взаимодействие с Экстеор через файлы формата TRS</p>
+    </div>
+  );
+}
+
+export default HelpRSFormMeta;
diff --git a/rsconcept/frontend/src/components/Help/HelpRSLang.tsx b/rsconcept/frontend/src/components/Help/HelpRSLang.tsx
new file mode 100644
index 00000000..f053f240
--- /dev/null
+++ b/rsconcept/frontend/src/components/Help/HelpRSLang.tsx
@@ -0,0 +1,16 @@
+import { urls } from '../../utils/constants';
+
+function HelpRSLang() {
+  return (
+    <div className='flex flex-col w-full'>
+      <p>Для ознакомления с основами родов структур можно использовать следующие материалы:</p>
+      <ul>
+        <li>1. <a className='underline' href={urls.intro_video}>Краткое введение в мат. аппарат</a></li>
+        <li>2. <a className='underline' href={urls.full_course}>Видео лекций по мат. аппарату для 4 курса (второй семестр 2022-23 год)</a></li>
+        <li>3. <a className='underline' href={urls.ponomarev}>Учебник И. Н. Пономарева</a></li>
+      </ul>
+    </div>
+  );
+}
+
+export default HelpRSLang;
diff --git a/rsconcept/frontend/src/components/Help/HelpTermGraph.tsx b/rsconcept/frontend/src/components/Help/HelpTermGraph.tsx
new file mode 100644
index 00000000..3dd3a980
--- /dev/null
+++ b/rsconcept/frontend/src/components/Help/HelpTermGraph.tsx
@@ -0,0 +1,34 @@
+import Divider from '../Common/Divider';
+import InfoCstClass from './InfoCstClass';
+import InfoCstStatus from './InfoCstStatus';
+
+function HelpTermGraph() {
+  return (
+    <div className='flex text-sm'>
+      <div> 
+        <h1>Настройка графа</h1>
+        <p><b>Цвет</b> - выбор правила покраски узлов</p>
+        <p><b>Граф</b> - выбор модели расположения узлов</p>
+        <p><b>Удалить несвязанные</b> - скрыть одинокие вершины</p>
+        <p><b>Транзитивная редукция</b> - скрыть транзитивные пути</p>
+
+        <Divider margins='mt-2' />
+        
+        <InfoCstStatus title='Статусы конституент' />
+      </div>
+      <Divider vertical margins='mx-3' />
+      <div>
+        <h1>Горячие клавиши</h1>
+        <p><b>Клик на конституенту</b> - выделение, включая скрытые конституенты</p>
+        <p><b>Довйной клик</b> - редактирование конституенты</p>
+        <p><b>Delete</b> - удалить выбранные</p>
+
+        <Divider margins='mt-2' />
+        
+        <InfoCstClass title='Классы конституент' />
+      </div>
+    </div>
+  );
+}
+
+export default HelpTermGraph;
diff --git a/rsconcept/frontend/src/components/Help/InfoConstituenta.tsx b/rsconcept/frontend/src/components/Help/InfoConstituenta.tsx
index 5c80d48c..4caa1876 100644
--- a/rsconcept/frontend/src/components/Help/InfoConstituenta.tsx
+++ b/rsconcept/frontend/src/components/Help/InfoConstituenta.tsx
@@ -19,4 +19,4 @@ function InfoConstituenta({ data, ...props }: InfoConstituentaProps) {
   );
 }
 
-export default InfoConstituenta;
\ No newline at end of file
+export default InfoConstituenta;
diff --git a/rsconcept/frontend/src/pages/ManualsPage.tsx b/rsconcept/frontend/src/pages/ManualsPage.tsx
deleted file mode 100644
index e715c7cb..00000000
--- a/rsconcept/frontend/src/pages/ManualsPage.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { urls } from '../utils/constants';
-
-function ManualsPage() {
-  return (
-    <div className='flex flex-col w-full py-2'>
-      <b>Справочники находятся в разработке</b>
-      <p>Для ознакомления с основами родов структур можно использовать следующие материалы:</p>
-      <ul>
-        <li>
-          1. <a className='underline' href={urls.intro_video}>Краткое введение в мат. аппарат</a>
-        </li>
-        <li>
-          2. <a className='underline' href={urls.full_course}>Видео лекций по мат. аппарату для 4 курса (второй семестр 2022-23 год)</a>
-        </li>
-        <li>
-          3. <a className='underline' href={urls.ponomarev}>Учебник И. Н. Пономарева</a>
-        </li>
-      </ul>
-    </div>
-  );
-}
-
-export default ManualsPage;
diff --git a/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx b/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx
new file mode 100644
index 00000000..4ab16e12
--- /dev/null
+++ b/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx
@@ -0,0 +1,29 @@
+import { prefixes } from '../../utils/constants';
+import { HelpTopic } from '../../utils/models';
+import { mapTopicInfo } from '../../utils/staticUI';
+
+interface TopicsListProps {
+  activeTopic: HelpTopic
+  onChangeTopic: (newTopic: HelpTopic) => void
+}
+
+function TopicsList({ activeTopic, onChangeTopic }: TopicsListProps) {
+  return (
+    <div className='sticky top-0 left-0 border-r min-w-[13rem] pt-2 select-none flex flex-col clr-bg-pop'>
+      <div className='mb-2 font-bold text-center'>Справка</div>
+      { [... mapTopicInfo.entries()].map(
+      ([topic, info], index) => {
+        return (
+          <div key={`${prefixes.topic_list}${index}`}
+            className={`px-3 py-1 border-y cursor-pointer clr-hover ${activeTopic === topic ? 'font-semibold underline' : ''}`}
+            title={info.tooltip}
+            onClick={() => onChangeTopic(topic)}
+          >
+            {info.text}
+          </div>)
+      })}
+    </div>
+  );
+}
+
+export default TopicsList;
diff --git a/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx b/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx
new file mode 100644
index 00000000..89acbe5b
--- /dev/null
+++ b/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx
@@ -0,0 +1,32 @@
+import HelpAPI from '../../components/Help/HelpAPI';
+import HelpConstituenta from '../../components/Help/HelpConstituenta';
+import HelpExteor from '../../components/Help/HelpExteor';
+import HelpLibrary from '../../components/Help/HelpLibrary';
+import HelpMain from '../../components/Help/HelpMain';
+import HelpRSFormItems from '../../components/Help/HelpRSFormItems';
+import HelpRSFormMeta from '../../components/Help/HelpRSFormMeta';
+import HelpRSLang from '../../components/Help/HelpRSLang';
+import HelpTermGraph from '../../components/Help/HelpTermGraph';
+import { HelpTopic } from '../../utils/models';
+
+interface ViewTopicProps {
+  topic: HelpTopic
+}
+
+function ViewTopic({ topic }: ViewTopicProps) {
+  return (
+    <div className='px-2 py-2'>
+      {topic === HelpTopic.MAIN && <HelpMain />}
+      {topic === HelpTopic.RSLANG && <HelpRSLang />}
+      {topic === HelpTopic.LIBRARY && <HelpLibrary />}
+      {topic === HelpTopic.RSFORM && <HelpRSFormMeta />}
+      {topic === HelpTopic.CSTLIST && <HelpRSFormItems />}
+      {topic === HelpTopic.CONSTITUENTA && <HelpConstituenta />}
+      {topic === HelpTopic.GRAPH_TERM && <HelpTermGraph />}
+      {topic === HelpTopic.EXTEOR && <HelpExteor />}
+      {topic === HelpTopic.API && <HelpAPI />}
+    </div>
+  );
+}
+
+export default ViewTopic;
diff --git a/rsconcept/frontend/src/pages/ManualsPage/index.tsx b/rsconcept/frontend/src/pages/ManualsPage/index.tsx
new file mode 100644
index 00000000..f728fcc5
--- /dev/null
+++ b/rsconcept/frontend/src/pages/ManualsPage/index.tsx
@@ -0,0 +1,44 @@
+import { useCallback, useLayoutEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import { HelpTopic } from '../../utils/models';
+import TopicsList from './TopicsList';
+import ViewTopic from './ViewTopic';
+
+function ManualsPage() {
+  const navigate = useNavigate();
+  const search = useLocation().search;
+  const [activeTopic, setActiveTopic] = useState<HelpTopic>(HelpTopic.MAIN);
+
+  const navigateTo = useCallback(
+  (newTopic: HelpTopic) => {
+    navigate(`/manuals?topic=${newTopic}`);
+  }, [navigate]);
+  
+
+  function onSelectTopic(newTopic: HelpTopic) {
+    navigateTo(newTopic);
+  }
+
+  useLayoutEffect(() => {
+    const topic = new URLSearchParams(search).get('topic') as HelpTopic;
+    if (!Object.values(HelpTopic).includes(topic)) {
+      navigateTo(HelpTopic.MAIN);
+      return;
+    } else {
+      setActiveTopic(topic);
+    }
+  }, [search, setActiveTopic, navigateTo]);
+
+  return (
+    <div className='flex items-start justify-start w-full gap-2'>
+      <TopicsList 
+        activeTopic={activeTopic}
+        onChangeTopic={topic => onSelectTopic(topic)}
+      />
+      <ViewTopic topic={activeTopic} />
+    </div>
+  );
+}
+
+export default ManualsPage;
diff --git a/rsconcept/frontend/src/pages/RSFormPage/DlgRenameCst.tsx b/rsconcept/frontend/src/pages/RSFormPage/DlgRenameCst.tsx
index 78949e53..fde06b3d 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/DlgRenameCst.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/DlgRenameCst.tsx
@@ -68,7 +68,7 @@ function DlgRenameCst({ hideWindow, initial, onRename }: DlgRenameCstProps) {
     >
       <div className='flex items-center gap-4 px-2 mb-2 h-fit min-w-[25rem]'>
         <ConceptSelect
-          className='my-2 min-w-[14rem] self-center'
+          className='mt-2 min-w-[14rem] self-center'
           options={CstTypeSelector}
           placeholder='Выберите тип'
           values={cstType ? [{ value: cstType, label: getCstTypeLabel(cstType) }] : []}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
index 75b6e3e1..18236c7c 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
@@ -2,11 +2,10 @@ import { useLayoutEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import ConceptTooltip from '../../components/Common/ConceptTooltip';
-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/InfoCstStatus';
+import HelpConstituenta from '../../components/Help/HelpConstituenta';
 import { DumpBinIcon, HelpIcon, PenIcon, SaveIcon, SmallPlusIcon } from '../../components/Icons';
 import { useRSForm } from '../../context/RSFormContext';
 import { CstType, EditMode, ICstCreateData, ICstRenameData, ICstUpdateData, SyntaxTree } from '../../utils/models';
@@ -155,20 +154,7 @@ function EditorConstituenta({ activeID, onShowAST, onCreateCst, onRenameCst, onO
             <HelpIcon color='text-primary' size={5} />
           </div>
           <ConceptTooltip anchorSelect='#cst-help'>
-            <div className='max-w-[35rem]'>
-              <h1>Подсказки</h1>
-              <p><b className='text-red'>Изменения сохраняются ПОСЛЕ нажатия на кнопку снизу или слева вверху</b></p>
-              <p><b>Клик на формальное выражение</b> - обратите внимание на кнопки снизу.<br/>Для каждой есть горячая клавиша в подсказке</p>
-              <p><b>Список конституент справа</b> - обратите внимание на настройки фильтрации</p>
-              <p>- слева от ввода текста настраивается набор атрибутов конституенты</p>
-              <p>- справа от ввода текста настраивается список конституент, которые фильтруются</p>
-              <p>- текущая конституента выделена цветом строки</p>
-              <p>- двойной клик / Alt + клик - выбор редактируемой конституенты</p>
-              <p>- при наведении на ID конституенты отображаются ее атрибуты</p>
-              <p>- столбец "Описание" содержит один из непустых текстовых атрибутов</p>
-              <Divider margins='mt-2' />
-              <CstStatusInfo title='Статусы' />
-            </div>
+            <HelpConstituenta />
           </ConceptTooltip>
         </div>
         </div>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
index 3e93870f..ff5763d4 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
@@ -5,7 +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/InfoCstStatus';
+import HelpRSFormItems from '../../components/Help/HelpRSFormItems';
 import { ArrowDownIcon, ArrowsRotateIcon, ArrowUpIcon, DumpBinIcon, HelpIcon, SmallPlusIcon } from '../../components/Icons';
 import { useRSForm } from '../../context/RSFormContext';
 import { useConceptTheme } from '../../context/ThemeContext';
@@ -319,16 +319,7 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
             <HelpIcon color='text-primary' size={6} />
           </div>
           <ConceptTooltip anchorSelect='#items-table-help'>
-            <div>
-              <h1>Горячие клавиши</h1>
-              <p><b>Двойной клик / Alt + клик</b> - редактирование конституенты</p>
-              <p><b>Клик на квадрат слева</b> - выделение конституенты</p>
-              <p><b>Alt + вверх/вниз</b> - движение конституент</p>
-              <p><b>Delete</b> - удаление конституент</p>
-              <p><b>Alt + 1-6,Q,W</b> - добавление конституент</p>
-              <Divider margins='mt-2' />
-              <CstStatusInfo title='Статусы' />
-            </div>
+            <HelpRSFormItems />
           </ConceptTooltip>
         </div>
       </div>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx
index 92fdbae5..1ee70b21 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx
@@ -3,11 +3,13 @@ import { useIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 
 import Checkbox from '../../components/Common/Checkbox';
+import ConceptTooltip from '../../components/Common/ConceptTooltip';
 import MiniButton from '../../components/Common/MiniButton';
 import SubmitButton from '../../components/Common/SubmitButton';
 import TextArea from '../../components/Common/TextArea';
 import TextInput from '../../components/Common/TextInput';
-import { CrownIcon, DownloadIcon, DumpBinIcon, SaveIcon, ShareIcon } from '../../components/Icons';
+import HelpRSFormMeta from '../../components/Help/HelpRSFormMeta';
+import { CrownIcon, DownloadIcon, DumpBinIcon, HelpIcon, SaveIcon, ShareIcon } from '../../components/Icons';
 import { useAuth } from '../../context/AuthContext';
 import { useRSForm } from '../../context/RSFormContext';
 import { useUsers } from '../../context/UsersContext';
@@ -76,7 +78,7 @@ function EditorRSForm({ onDestroy }: EditorRSFormProps) {
   return (
     <form onSubmit={handleSubmit} className='flex-grow max-w-xl px-4 py-2 border min-w-fit'>
       <div className='relative w-full'>
-      <div className='absolute top-0 right-0'>
+      <div className='absolute top-0 right-0 flex'>
         <MiniButton
           tooltip='Поделиться схемой'
           icon={<ShareIcon size={5} color='text-primary'/>}
@@ -99,6 +101,12 @@ function EditorRSForm({ onDestroy }: EditorRSFormProps) {
           onClick={onDestroy}
           icon={<DumpBinIcon size={5} color={isEditable ? 'text-red' : ''} />}
         />
+        <div id='rsform-help' className='py-1 ml-1'>
+          <HelpIcon color='text-primary' size={5} />
+        </div>
+        <ConceptTooltip anchorSelect='#rsform-help'>
+          <HelpRSFormMeta />
+        </ConceptTooltip>
       </div>
       </div>
       <TextInput id='title' label='Полное название' type='text'
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
index 0d6caeea..0dba25df 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
@@ -9,9 +9,8 @@ import ConceptSelect from '../../components/Common/ConceptSelect';
 import ConceptTooltip from '../../components/Common/ConceptTooltip';
 import Divider from '../../components/Common/Divider';
 import MiniButton from '../../components/Common/MiniButton';
+import HelpTermGraph from '../../components/Help/HelpTermGraph';
 import InfoConstituenta from '../../components/Help/InfoConstituenta';
-import InfoCstClass from '../../components/Help/InfoCstClass';
-import CstStatusInfo from '../../components/Help/InfoCstStatus';
 import { ArrowsRotateIcon, DumpBinIcon, FilterCogIcon, HelpIcon, SmallPlusIcon } from '../../components/Icons';
 import { useRSForm } from '../../context/RSFormContext';
 import { useConceptTheme } from '../../context/ThemeContext';
@@ -476,30 +475,7 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
         />
       </div>
       <ConceptTooltip anchorSelect='#items-graph-help'>
-        <div className='flex'>
-          <div> 
-            <h1>Настройка графа</h1>
-            <p><b>Цвет</b> - выбор правила покраски узлов</p>
-            <p><b>Граф</b> - выбор модели расположения узлов</p>
-            <p><b>Удалить несвязанные</b> - скрыть одинокие вершины</p>
-            <p><b>Транзитивная редукция</b> - скрыть транзитивные пути</p>
-
-            <Divider margins='mt-2' />
-            
-            <CstStatusInfo title='Статусы конституент' />
-          </div>
-          <Divider vertical margins='mx-3' />
-          <div>
-            <h1>Горячие клавиши</h1>
-            <p><b>Клик на конституенту</b> - выделение, включая скрытые конституенты</p>
-            <p><b>Довйной клик</b> - редактирование конституенты</p>
-            <p><b>Delete</b> - удалить выбранные</p>
-
-            <Divider margins='mt-2' />
-            
-            <InfoCstClass title='Классы конституент' />
-          </div>
-        </div>
+        <HelpTermGraph />
       </ConceptTooltip>
       <GraphCanvas
         draggable
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
index 420cdc7b..7950a1ce 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
@@ -74,7 +74,7 @@ function RSTabs() {
     const activeTab = Number(new URLSearchParams(search).get('tab')) ?? RSTabsList.CARD;
     const cstQuery = new URLSearchParams(search).get('active');
     setActiveTab(activeTab);
-    setActiveID(Number(cstQuery) ?? ((schema && schema?.items.length > 0) ? schema.items[0].id : undefined))
+    setActiveID(Number(cstQuery) ?? ((schema && schema?.items.length > 0) ? schema.items[0].id : undefined));
   }, [search, setActiveTab, setActiveID, schema]);
 
   function onSelectTab(index: number) {
@@ -128,7 +128,7 @@ function RSTabs() {
 
   const handleRenameCst = useCallback(
   (data: ICstRenameData) => {
-    cstRename(data, () => toast.success(`Конституента переименована: ${renameInitialData!.alias} -> ${data.alias}`));
+    cstRename(data, () => toast.success(`Переименование: ${renameInitialData!.alias} -> ${data.alias}`));
   }, [cstRename, renameInitialData]);
 
   const promptRenameCst = useCallback(
diff --git a/rsconcept/frontend/src/utils/backendAPI.ts b/rsconcept/frontend/src/utils/backendAPI.ts
index 92197a1e..b5579a26 100644
--- a/rsconcept/frontend/src/utils/backendAPI.ts
+++ b/rsconcept/frontend/src/utils/backendAPI.ts
@@ -1,4 +1,4 @@
-import axios, { AxiosRequestConfig } from 'axios'
+import axios, { AxiosError, AxiosRequestConfig } from 'axios'
 import { toast } from 'react-toastify'
 
 import { type ErrorInfo } from '../components/BackendError'
@@ -260,11 +260,11 @@ function AxiosGet<ResponseData>({ endpoint, request, title, options }: IAxiosReq
   console.log(`REQUEST: [[${title}]]`);
   if (request.setLoading) request.setLoading(true);
   axios.get<ResponseData>(endpoint, options)
-    .then((response) => {
+    .then(response => {
       if (request.setLoading) request.setLoading(false);
       if (request.onSuccess) request.onSuccess(response.data);
     })
-    .catch((error) => {
+    .catch((error: Error | AxiosError) => {
       if (request.setLoading) request.setLoading(false);
       if (request.showError) toast.error(error.message);
       if (request.onError) request.onError(error);
@@ -277,11 +277,11 @@ function AxiosPost<RequestData, ResponseData>(
   console.log(`POST: [[${title}]]`);
   if (request.setLoading) request.setLoading(true);
   axios.post<ResponseData>(endpoint, request.data, options)
-    .then((response) => {
+    .then(response => {
       if (request.setLoading) request.setLoading(false);
       if (request.onSuccess) request.onSuccess(response.data);
     })
-    .catch((error) => {
+    .catch((error: Error | AxiosError) => {
       if (request.setLoading) request.setLoading(false);
       if (request.showError) toast.error(error.message);
       if (request.onError) request.onError(error);
@@ -294,11 +294,11 @@ function AxiosDelete<RequestData, ResponseData>(
   console.log(`DELETE: [[${title}]]`);
   if (request.setLoading) request.setLoading(true);
   axios.delete<ResponseData>(endpoint, options)
-    .then((response) => {
+    .then(response => {
       if (request.setLoading) request.setLoading(false);
       if (request.onSuccess) request.onSuccess(response.data);
     })
-    .catch((error) => {
+    .catch((error: Error | AxiosError) => {
       if (request.setLoading) request.setLoading(false);
       if (request.showError) toast.error(error.message);
       if (request.onError) request.onError(error);
@@ -311,12 +311,12 @@ function AxiosPatch<RequestData, ResponseData>(
   console.log(`PATCH: [[${title}]]`);
   if (request.setLoading) request.setLoading(true);
   axios.patch<ResponseData>(endpoint, request.data, options)
-    .then((response) => {
+    .then(response => {
       if (request.setLoading) request.setLoading(false);
       if (request.onSuccess) request.onSuccess(response.data);
       return response.data;
     })
-    .catch((error) => {
+    .catch((error: Error | AxiosError) => {
       if (request.setLoading) request.setLoading(false);
       if (request.showError) toast.error(error.message);
       if (request.onError) request.onError(error);
diff --git a/rsconcept/frontend/src/utils/constants.ts b/rsconcept/frontend/src/utils/constants.ts
index b620bcf5..efa37f0a 100644
--- a/rsconcept/frontend/src/utils/constants.ts
+++ b/rsconcept/frontend/src/utils/constants.ts
@@ -20,7 +20,8 @@ export const urls = {
   ponomarev: 'https://inponomarev.ru/textbook',
   intro_video: 'https://www.youtube.com/watch?v=0Ty9mu9sOJo',
   full_course: 'https://www.youtube.com/playlist?list=PLGe_JiAwpqu1C70ruQmCm_OWTWU3KJwDo',
-  gitrepo: 'https://github.com/IRBorisov/ConceptPortal'
+  gitrepo: 'https://github.com/IRBorisov/ConceptPortal',
+  mailportal: 'mailto:portal@acconcept.ru'
 };
 
 export const resources = {
@@ -29,5 +30,6 @@ export const resources = {
 
 export const prefixes = {
   cst_list: 'cst-list-',
-  cst_status_list: 'cst-status-list-'
+  cst_status_list: 'cst-status-list-',
+  topic_list: 'topic-list-',
 }
diff --git a/rsconcept/frontend/src/utils/models.ts b/rsconcept/frontend/src/utils/models.ts
index 85c354de..52ddf981 100644
--- a/rsconcept/frontend/src/utils/models.ts
+++ b/rsconcept/frontend/src/utils/models.ts
@@ -270,6 +270,19 @@ export enum CstMatchMode {
   NAME
 }
 
+// Help manual topic compare mode
+export enum HelpTopic {
+  MAIN = 'main',
+  RSLANG = 'rslang',
+  LIBRARY = 'library',
+  RSFORM = 'rsform',
+  CSTLIST = 'cstlist',
+  CONSTITUENTA = 'constituenta',
+  GRAPH_TERM = 'graph-term',
+  EXTEOR = 'exteor',
+  API = 'api'
+}
+
 // ========== Model functions =================
 export function inferStatus(parse?: ParsingStatus, value?: ValueClass): ExpressionStatus {
   if (!parse || !value) {
diff --git a/rsconcept/frontend/src/utils/staticUI.ts b/rsconcept/frontend/src/utils/staticUI.ts
index 7c62f495..f87f31fc 100644
--- a/rsconcept/frontend/src/utils/staticUI.ts
+++ b/rsconcept/frontend/src/utils/staticUI.ts
@@ -2,7 +2,9 @@ import { LayoutTypes } from 'reagraph';
 
 import { ColoringScheme } from '../pages/RSFormPage/EditorTermGraph';
 import { resolveErrorClass,RSErrorClass, RSErrorType, TokenID } from './enums';
-import { CstClass, CstMatchMode, CstType, DependencyMode, ExpressionStatus, IConstituenta,
+import {
+  CstClass, CstMatchMode, CstType, 
+  DependencyMode, ExpressionStatus, HelpTopic, IConstituenta,
   IFunctionArg,IRSErrorDescription, IRSForm,
   ISyntaxTreeNode, ParsingStatus, ValueClass 
 } from './models';
@@ -18,6 +20,11 @@ export interface IFormatInfo {
   tooltip: string
 }
 
+export interface ITopicInfo {
+  text: string
+  tooltip: string
+}
+
 export function getCstDescription(cst: IConstituenta): string {
   if (cst.cstType === CstType.STRUCTURED) {
     return (
@@ -246,7 +253,7 @@ export function getCstTypeShortcut(type: CstType) {
 }
 
 export const CstTypeSelector = (Object.values(CstType)).map(
-  (typeStr) => {
+(typeStr) => {
     const type = typeStr as CstType;
     return { value: type, label: getCstTypeLabel(type) };
 });
@@ -357,6 +364,45 @@ export const mapStatusInfo: Map<ExpressionStatus, IFormatInfo> = new Map([
     text: 'N/A',
     color: 'bg-[#b3bdff] dark:bg-[#1e00b3]',
     tooltip: 'произошла ошибка при проверке выражения'
+  }]
+]);
+
+export const mapTopicInfo: Map<HelpTopic, ITopicInfo> = new Map([
+  [ HelpTopic.MAIN, {
+    text: 'Портал',
+    tooltip: 'Общая справка по порталу'
+  }],
+  [ HelpTopic.RSLANG, {
+    text: 'Рода структур',
+    tooltip: 'Справка по языку родов структур и экспликации'
+  }],
+  [ HelpTopic.LIBRARY, {
+    text: 'Библиотека',
+    tooltip: 'Интерфейс работы с библиотекой схем'
+  }],
+  [ HelpTopic.RSFORM, {
+    text: 'Концептуальная схема',
+    tooltip: 'Интерфейс работы с описанием схемы'
+  }],
+  [ HelpTopic.CSTLIST, {
+    text: 'Список конституент',
+    tooltip: 'Интерфейс работы со списком конституент'
+  }],
+  [ HelpTopic.CONSTITUENTA, {
+    text: 'Конституента',
+    tooltip: 'Интерфейс редактирования конституенты'
+  }],
+  [ HelpTopic.GRAPH_TERM, {
+    text: 'Граф термов',
+    tooltip: 'Интерфейс работ с графом термов схемы'
+  }],
+  [ HelpTopic.EXTEOR, {
+    text: 'Экстеор',
+    tooltip: 'Справка по программе Экстеор'
+  }],
+  [ HelpTopic.API, {
+    text: 'REST API',
+    tooltip: 'Документация интерфейса для разработчиков'
   }],
 ]);