Improve help pages

rsconcept/frontend/src/components/info/InfoTopic.tsx

@@ -1,8 +1,10 @@
 import { HelpTopic } from '@/models/miscellaneous';
 
 import HelpAPI from '../man/HelpAPI';
-import HelpConstituenta from '../man/HelpConstituenta';
 import HelpCstAttributes from '../man/HelpCstAttributes';
+import HelpCstClass from '../man/HelpCstClass';
+import HelpCstEditor from '../man/HelpCstEditor';
+import HelpCstStatus from '../man/HelpCstStatus';
 import HelpExteor from '../man/HelpExteor';
 import HelpLibrary from '../man/HelpLibrary';
 import HelpMain from '../man/HelpMain';
@@ -23,12 +25,14 @@ function InfoTopic({ topic }: InfoTopicProps) {
   if (topic === HelpTopic.MAIN) return <HelpMain />;
   if (topic === HelpTopic.LIBRARY) return <HelpLibrary />;
   if (topic === HelpTopic.RSFORM) return <HelpRSFormMeta />;
-  if (topic === HelpTopic.CST_ATTRIBUTES) return <HelpCstAttributes />;
   if (topic === HelpTopic.CST_LIST) return <HelpRSFormItems />;
-  if (topic === HelpTopic.CST_EDITOR) return <HelpConstituenta />;
+  if (topic === HelpTopic.CST_EDITOR) return <HelpCstEditor />;
   if (topic === HelpTopic.GRAPH_TERM) return <HelpTermGraph />;
-  if (topic === HelpTopic.RSTEMPLATES) return <HelpRSTemplates />;
+  if (topic === HelpTopic.CST_STATUS) return <HelpCstStatus />;
+  if (topic === HelpTopic.CST_CLASS) return <HelpCstClass />;
   if (topic === HelpTopic.RSLANG) return <HelpRSLang />;
+  if (topic === HelpTopic.CONSTITUENTA) return <HelpCstAttributes />;
+  if (topic === HelpTopic.RSTEMPLATES) return <HelpRSTemplates />;
   if (topic === HelpTopic.TERM_CONTROL) return <HelpTerminologyControl />;
   if (topic === HelpTopic.VERSIONS) return <HelpVersions />;
   if (topic === HelpTopic.EXTEOR) return <HelpExteor />;

rsconcept/frontend/src/components/man/HelpCstClass.tsx

@@ -0,0 +1,7 @@
+import InfoCstClass from '@/components/info/InfoCstClass';
+
+function HelpCstClass() {
+  return <InfoCstClass header='Классы конституент' />;
+}
+
+export default HelpCstClass;

rsconcept/frontend/src/components/man/HelpCstEditor.tsx

@@ -1,10 +1,8 @@
-import InfoCstStatus from '@/components/info/InfoCstStatus';
-import Divider from '@/components/ui/Divider';
 import { useConceptOptions } from '@/context/OptionsContext';
 
 import { IconControls, IconEdit, IconList, IconSave, IconStatusOK, IconText, IconTree } from '../Icons';
 
-function HelpConstituenta() {
+function HelpCstEditor() {
   const { colors } = useConceptOptions();
   // prettier-ignore
   return (
@@ -31,11 +29,7 @@ function HelpConstituenta() {
     <li><span style={{backgroundColor: colors.bgSelected}}>цветом фона</span> выделена текущая конституента</li>
     <li><span style={{backgroundColor: colors.bgGreen50}}>цветом фона</span> выделена основа текущей</li>
     <li><span style={{backgroundColor: colors.bgOrange50}}>цветом фона</span> выделены порожденные текущей</li>
-
-    <Divider margins='my-2' />
-    
-    <InfoCstStatus title='Статусы' />
   </div>);
 }
 
-export default HelpConstituenta;
+export default HelpCstEditor;

rsconcept/frontend/src/components/man/HelpCstStatus.tsx

@@ -0,0 +1,7 @@
+import InfoCstStatus from '@/components/info/InfoCstStatus';
+
+function HelpCstStatus() {
+  return <InfoCstStatus title='Статусы конституент' />;
+}
+
+export default HelpCstStatus;

rsconcept/frontend/src/components/man/HelpMain.tsx

@@ -9,7 +9,7 @@ function HelpMain() {
   <div>
     <h1>Портал</h1>
     <p>Портал позволяет анализировать предметные области, формально записывать системы определений и синтезировать их с помощью математического <TextURL text='аппарата родов структур' href={urls.help_topic(HelpTopic.RSLANG)}/></p>
-    <p>Такие системы называются <b>Концептуальными схемами</b> и состоят из отдельных <TextURL text='Конституент' href={urls.help_topic(HelpTopic.CST_ATTRIBUTES)}/>, обладающих уникальными обозначениями и формальными определениями</p>
+    <p>Такие системы называются <b>Концептуальными схемами</b> и состоят из отдельных <TextURL text='Конституент' href={urls.help_topic(HelpTopic.CONSTITUENTA)}/>, обладающих уникальными обозначениями и формальными определениями</p>
     <br/>
 
     <h2>Основные разделы</h2>

rsconcept/frontend/src/components/man/HelpRSFormItems.tsx

@@ -11,7 +11,7 @@ function HelpRSFormItems() {
   return (
   <div className='dense'>
     <h1>Список конституент</h1>
-    <p><IconAlias className='inline-icon'/>Конституенты обладают уникальным <TextURL text='Именем' href={urls.help_topic(HelpTopic.CST_ATTRIBUTES)}/></p>
+    <p><IconAlias className='inline-icon'/>Конституенты обладают уникальным <TextURL text='Именем' href={urls.help_topic(HelpTopic.CONSTITUENTA)}/></p>
     <p><IconMoveUp className='inline-icon'/><IconMoveDown className='inline-icon'/> Список поддерживает выделение и перемещение </p>
 
     <h2>Управление списком</h2>

rsconcept/frontend/src/components/man/HelpTermGraph.tsx

@@ -1,33 +1,27 @@
-import InfoCstClass from '@/components/info/InfoCstClass';
-import InfoCstStatus from '@/components/info/InfoCstStatus';
 import Divider from '@/components/ui/Divider';
 
+import { IconDestroy, IconEdit, IconReset } from '../Icons';
+
 function HelpTermGraph() {
   // prettier-ignore
   return (
-  <div className='flex max-w-[80rem] min-w-[45rem]'>
+  <div className='flex'>
-    <div className='dense'>
+    <div className='dense min-w-[18rem]'>
       <h1>Настройка графа</h1>
-      <p>Цвет – правила покраски узлов</p>
+      <li>Цвет – правила покраски</li>
-      <p>Граф – модель расположения узлов</p>
+      <li>Граф – модель расположения</li>
-      <p>Размер – модель размера узлов</p>
+      <li>Размер – модель размера</li>
-
-      <Divider margins='my-2' />
-      
-      <InfoCstStatus title='Статусы конституент' />
     </div>
 
     <Divider vertical margins='mx-3' />
     
-    <div className='dense'>
+    <div className='dense min-w-[18rem]'>
       <h1>Управление</h1>
-      <p>Клик на конституенту – выделение</p>
+      <li>Клик на конституенту – выделение</li>
-      <p>Двойной клик – редактирование</p>
+      <li>Ctrl + клик – выбор фокус-конституенты</li>
-      <p>Delete – удалить выбранные</p>
+      <li><IconReset className='inline-icon'/> Esc – сбросить выделение</li>
-
+      <li><IconEdit className='inline-icon'/>Двойной клик – редактирование</li>
-      <Divider margins='my-2' />
+      <li><IconDestroy className='inline-icon'/> Delete – удалить выбранные</li>
-      
-      <InfoCstClass header='Классы конституент' />
     </div>
   </div>);
 }

rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx

@@ -50,7 +50,7 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
           value={{ value: state.cst_type, label: labelCstType(state.cst_type) }}
           onChange={data => partialUpdate({ cst_type: data?.value ?? CstType.BASE })}
         />
-        <BadgeHelp topic={HelpTopic.CST_ATTRIBUTES} offset={16} className='max-w-[40rem] max-h-[calc(100vh-2rem)]' />
+        <BadgeHelp topic={HelpTopic.CONSTITUENTA} offset={16} className='max-w-[40rem] max-h-[calc(100vh-2rem)]' />
         <TextInput
           id='dlg_cst_alias'
           dense

rsconcept/frontend/src/dialogs/DlgRenameCst.tsx

@@ -60,7 +60,7 @@ function DlgRenameCst({ hideWindow, initial, onRename }: DlgRenameCstProps) {
         }}
         onChange={data => updateData({ cst_type: data?.value ?? CstType.BASE })}
       />
-      <BadgeHelp topic={HelpTopic.CST_ATTRIBUTES} offset={16} className='max-w-[40rem] max-h-[calc(100vh-2rem)]' />
+      <BadgeHelp topic={HelpTopic.CONSTITUENTA} offset={16} className='max-w-[40rem] max-h-[calc(100vh-2rem)]' />
       <TextInput
         id='dlg_cst_alias'
         dense

rsconcept/frontend/src/models/miscellaneous.ts

@@ -48,9 +48,11 @@ export enum HelpTopic {
   CST_LIST = 'cst-list',
   CST_EDITOR = 'cst-editor',
   GRAPH_TERM = 'graph-term',
-  RSTEMPLATES = 'rstemplates',
+  CST_STATUS = 'cst-status',
+  CST_CLASS = 'cst-class',
   RSLANG = 'rslang',
-  CST_ATTRIBUTES = 'cst-type',
+  CONSTITUENTA = 'constituenta',
+  RSTEMPLATES = 'rstemplates',
   TERM_CONTROL = 'terminology-control',
   VERSIONS = 'versions',
   EXTEOR = 'exteor',

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

@@ -1,6 +1,8 @@
 import { IconClone, IconDestroy, IconMoveDown, IconMoveUp, IconNewItem, IconReset, IconSave } from '@/components/Icons';
+import BadgeHelp from '@/components/man/BadgeHelp';
 import MiniButton from '@/components/ui/MiniButton';
 import Overlay from '@/components/ui/Overlay';
+import { HelpTopic } from '@/models/miscellaneous';
 import { messages, prepareTooltip } from '@/utils/labels';
 
 interface ConstituentaToolbarProps {
@@ -72,6 +74,7 @@ function ConstituentaToolbar({
         disabled={disabled || modified}
         onClick={onMoveDown}
       />
+      <BadgeHelp topic={HelpTopic.CST_EDITOR} offset={4} />
     </Overlay>
   );
 }

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

@@ -205,7 +205,7 @@ function EditorRSExpression({
           parseData={parser.parseData}
           onAnalyze={() => handleCheckExpression()}
         />
-        <BadgeHelp topic={HelpTopic.CST_EDITOR} offset={4} />
+        <BadgeHelp topic={HelpTopic.CST_STATUS} offset={4} />
       </Overlay>
 
       <RSInput

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

@@ -1,6 +1,8 @@
+import BadgeHelp from '@/components/man/BadgeHelp';
 import { GraphLayout } from '@/components/ui/GraphUI';
+import Overlay from '@/components/ui/Overlay';
 import SelectSingle from '@/components/ui/SelectSingle';
-import { GraphColoring, GraphSizing } from '@/models/miscellaneous';
+import { GraphColoring, GraphSizing, HelpTopic } from '@/models/miscellaneous';
 import { mapLabelColoring, mapLabelLayout, mapLabelSizing } from '@/utils/labels';
 import { SelectorGraphColoring, SelectorGraphLayout, SelectorGraphSizing } from '@/utils/selectors';
 
@@ -25,6 +27,10 @@ function GraphSelectors({ coloring, setColoring, layout, setLayout, sizing, setS
         value={layout ? { value: layout, label: mapLabelLayout.get(layout) } : null}
         onChange={data => setLayout(data?.value ?? SelectorGraphLayout[0].value)}
       />
+      <Overlay position='right-[2.5rem] top-[0.3rem]'>
+        {coloring === 'status' ? <BadgeHelp topic={HelpTopic.CST_STATUS} className='min-w-[25rem]' /> : null}
+        {coloring === 'type' ? <BadgeHelp topic={HelpTopic.CST_CLASS} className='min-w-[25rem]' /> : null}
+      </Overlay>
       <SelectSingle
         noBorder
         placeholder='Цветовая схема'

rsconcept/frontend/src/utils/labels.ts

@@ -359,14 +359,19 @@ export function labelHelpTopic(topic: HelpTopic): string {
   // prettier-ignore
   switch (topic) {
     case HelpTopic.MAIN:            return 'Портал';
+
     case HelpTopic.LIBRARY:         return 'Библиотека';
     case HelpTopic.RSFORM:          return '- карточка схемы';
     case HelpTopic.CST_LIST:        return '- список конституент';
     case HelpTopic.CST_EDITOR:      return '- редактор конституенты';
     case HelpTopic.GRAPH_TERM:      return '- граф термов';
-    case HelpTopic.RSTEMPLATES:     return '- шаблоны выражений';
+    case HelpTopic.CST_STATUS:      return '- статус конституенты';
+    case HelpTopic.CST_CLASS:       return '- класс конституенты';
+
     case HelpTopic.RSLANG:          return 'Экспликация';
-    case HelpTopic.CST_ATTRIBUTES:  return '- конституента';
+    case HelpTopic.CONSTITUENTA:    return '- конституента';
+    case HelpTopic.RSTEMPLATES:     return '- шаблоны выражений';
+
     case HelpTopic.TERM_CONTROL:    return 'Терминологизация';
     case HelpTopic.VERSIONS:        return 'Версионирование';
     case HelpTopic.EXTEOR:          return 'Экстеор';
@@ -382,18 +387,23 @@ export function describeHelpTopic(topic: HelpTopic): string {
   // prettier-ignore
   switch (topic) {
     case HelpTopic.MAIN:            return 'Общая справка по порталу';
-    case HelpTopic.LIBRARY:         return 'Описание работы с библиотекой схем';
+
-    case HelpTopic.RSFORM:          return 'Описание работы с описанием схемы';
+    case HelpTopic.LIBRARY:         return 'Интерфейс Библиотеки схем';
-    case HelpTopic.CST_LIST:        return 'Описание работы со списком конституент';
+    case HelpTopic.RSFORM:          return 'Интерфейс Карточки схемы';
-    case HelpTopic.CST_EDITOR:      return 'Описание редактирования конституенты';
+    case HelpTopic.CST_LIST:        return 'Интерфейс Списка конституент';
-    case HelpTopic.GRAPH_TERM:      return 'Описание работы с графом термов схемы';
+    case HelpTopic.CST_EDITOR:      return 'Интерфейс редактирования конституенты';
-    case HelpTopic.RSTEMPLATES:     return 'Описание работы с Банком выражений>';
+    case HelpTopic.GRAPH_TERM:      return 'Интерфейс графа термов';
+    case HelpTopic.CST_STATUS:      return 'Нотация отображения статуса конституенты';
+    case HelpTopic.CST_CLASS:       return 'Нотация отображения класса конституенты';
+
     case HelpTopic.RSLANG:          return 'Справка по языку родов структур и экспликации';
-    case HelpTopic.CST_ATTRIBUTES:  return 'Описание типов и свойств конституент';
+    case HelpTopic.CONSTITUENTA:    return 'Понятия конституенты и ее атрибутов';
+    case HelpTopic.RSTEMPLATES:     return 'Работа с шаблонными выражениями';
+
     case HelpTopic.TERM_CONTROL:    return 'Справка по контролю терминов и текстовым отсылкам';
     case HelpTopic.VERSIONS:        return 'Справка по управлению версиями схем';
     case HelpTopic.EXTEOR:          return 'Справка по программе для экспликации "Экстеор" для Windows';
-    case HelpTopic.API:             return 'Описание интерфейса для разработчиков';
+    case HelpTopic.API:             return 'Интерфейс для разработчиков';
     case HelpTopic.PRIVACY:         return 'Политика обработки персональных данных';
   }
 }