M: Update manuals

rsconcept/frontend/src/components/Icons.tsx

@@ -62,7 +62,7 @@ export { VscLibrary       as IconLibrary }        from 'react-icons/vsc';
 export { IoLibrary        as IconLibrary2 }       from 'react-icons/io5';
 export { BiDiamond        as IconTemplates }      from 'react-icons/bi';
 export { GiHoneycomb      as IconOSS }            from 'react-icons/gi';
-export { LuBaby           as IconChild }          from 'react-icons/lu';
+export { GrInherit        as IconChild }          from 'react-icons/gr';
 export { RiParentLine     as IconParent }         from 'react-icons/ri';
 export { BiSpa            as IconPredecessor }    from 'react-icons/bi';
 export { RiHexagonLine    as IconRSForm }         from 'react-icons/ri';

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

@@ -14,7 +14,7 @@ function InfoConstituenta({ data, className, ...restProps }: InfoConstituentaPro
   return (
     <div className={clsx('dense min-w-[15rem]', className)} {...restProps}>
       <h2>
-        Конституента {data.alias}
+        {data.alias}
         {data.is_inherited ? ' (наследуется)' : ''}
       </h2>
       {data.term_resolved ? (

rsconcept/frontend/src/pages/ManualsPage/items/HelpCstEditor.tsx

@@ -1,15 +1,19 @@
 import {
+  IconChild,
   IconClone,
   IconControls,
   IconDestroy,
   IconEdit,
+  IconFilter,
   IconList,
   IconMoveDown,
   IconMoveUp,
   IconNewItem,
   IconOSS,
+  IconPredecessor,
   IconReset,
   IconSave,
+  IconSettings,
   IconStatusOK,
   IconText,
   IconTree
@@ -23,37 +27,64 @@ function HelpCstEditor() {
   return (
     <div className='dense'>
       <h1>Редактор конституенты</h1>
-      <li>
-        <IconOSS className='inline-icon' /> переход к связанной <LinkTopic text='ОСС' topic={HelpTopic.CC_OSS} />
-      </li>
-      <li>
-        <IconSave className='inline-icon' /> сохранить изменения: Ctrl + S
-      </li>
-      <li>
-        <IconReset className='inline-icon' /> сбросить несохраненные изменения
-      </li>
-      <li>
-        <IconClone className='inline-icon icon-green' /> клонировать текущую: Alt + V
-      </li>
-      <li>
-        <IconNewItem className='inline-icon icon-green' /> новая конституента
-      </li>
-      <li>
-        <IconDestroy className='inline-icon icon-red' /> удаление текущей
-      </li>
+      <div className='flex flex-col sm:flex-row sm:gap-3'>
+        <div className='flex flex-col'>
+          <li>
+            <IconOSS className='inline-icon' /> переход к <LinkTopic text='ОСС' topic={HelpTopic.CC_OSS} />
+          </li>
+          <li>
+            <IconPredecessor className='inline-icon' /> переход к исходной
+          </li>
+          <li>
+            <IconList className='inline-icon' /> список конституент
+          </li>
+          <li>
+            <IconSave className='inline-icon' /> сохранить: Ctrl + S
+          </li>
+          <li>
+            <IconReset className='inline-icon' /> сбросить изменения
+          </li>
+          <li>
+            <IconClone className='inline-icon icon-green' /> клонировать: Alt + V
+          </li>
+          <li>
+            <IconNewItem className='inline-icon icon-green' /> новая конституента
+          </li>
+          <li>
+            <IconDestroy className='inline-icon icon-red' /> удалить
+          </li>
+        </div>
 
-      <h2>Термин и Текстовое определение</h2>
-      <li>
-        <IconEdit className='inline-icon' /> кнопка переименования справа от{' '}
-        <LinkTopic text='Имени' topic={HelpTopic.CC_CONSTITUENTA} />
-      </li>
-      <li>
-        <IconEdit className='inline-icon' /> кнопка редактирования словоформ справа от{' '}
-        <LinkTopic text='Термина' topic={HelpTopic.CC_CONSTITUENTA} />
-      </li>
-      <li>Ctrl + Пробел открывает редактирование отсылок</li>
+        <div className='flex flex-col'>
+          <h2>Список конституент</h2>
+          <li>
+            <IconMoveDown className='inline-icon' />
+            <IconMoveUp className='inline-icon' /> Alt + вверх/вниз
+          </li>
+          <li>
+            <IconFilter className='inline-icon' />
+            <IconSettings className='inline-icon' /> фильтрация по графу термов
+          </li>
+          <li>
+            <IconChild className='inline-icon' /> отображение наследованных
+          </li>
+          <li>
+            <span style={{ backgroundColor: colors.bgSelected }}>текущая конституента</span>
+          </li>
+          <li>
+            <span style={{ backgroundColor: colors.bgGreen50 }}>
+              <LinkTopic text='основа' topic={HelpTopic.CC_RELATIONS} /> текущей
+            </span>
+          </li>
+          <li>
+            <span style={{ backgroundColor: colors.bgOrange50 }}>
+              <LinkTopic text='порожденные' topic={HelpTopic.CC_RELATIONS} /> текущей
+            </span>
+          </li>
+        </div>
+      </div>
 
-      <h2>Определение понятия</h2>
+      <h2>Формальное определение</h2>
       <li>
         <IconStatusOK className='inline-icon' /> индикатор статуса определения сверху
       </li>
@@ -69,26 +100,12 @@ function HelpCstEditor() {
       </li>
       <li>Ctrl + Пробел дополняет до незанятого имени</li>
 
-      <h2>Список конституент</h2>
+      <h2>Термин и Текстовое определение</h2>
       <li>
-        <IconList className='inline-icon' /> отображение списка конституент
-      </li>
-      <li>
-        <IconMoveDown className='inline-icon' />
-        <IconMoveUp className='inline-icon' /> Alt + вверх/вниз – перемещение
-      </li>
-      <li>фильтрация в верхней части</li>
-      <li>
-        <span style={{ backgroundColor: colors.bgSelected }}>цветом фона</span> выделена текущая конституента
-      </li>
-      <li>
-        <span style={{ backgroundColor: colors.bgGreen50 }}>цветом фона</span> выделена{' '}
-        <LinkTopic text='основа' topic={HelpTopic.CC_RELATIONS} /> текущей
-      </li>
-      <li>
-        <span style={{ backgroundColor: colors.bgOrange50 }}>цветом фона</span> выделены{' '}
-        <LinkTopic text='порожденные' topic={HelpTopic.CC_RELATIONS} /> текущей
+        <IconEdit className='inline-icon' /> редактирование <LinkTopic text='Имени' topic={HelpTopic.CC_CONSTITUENTA} />{' '}
+        / <LinkTopic text='Термина' topic={HelpTopic.CC_CONSTITUENTA} />
       </li>
+      <li>Ctrl + Пробел открывает редактирование отсылок</li>
     </div>
   );
 }

rsconcept/frontend/src/pages/ManualsPage/items/HelpOssGraph.tsx

@@ -1,8 +1,100 @@
+import {
+  IconAnimation,
+  IconAnimationOff,
+  IconConnect,
+  IconDestroy,
+  IconEdit2,
+  IconExecute,
+  IconFitImage,
+  IconGrid,
+  IconImage,
+  IconLineStraight,
+  IconLineWave,
+  IconNewItem,
+  IconReset,
+  IconRSForm,
+  IconSave
+} from '@/components/Icons';
+import Divider from '@/components/ui/Divider';
+import LinkTopic from '@/components/ui/LinkTopic';
+import { HelpTopic } from '@/models/miscellaneous';
+
 function HelpOssGraph() {
   return (
-    <div>
+    <div className='flex flex-col'>
       <h1>Граф синтеза</h1>
-      <p>TBD.</p>
+      <div className='flex flex-col sm:flex-row'>
+        <div className='w-full sm:w-[14rem]'>
+          <h1>Настройка графа</h1>
+          <li>
+            <IconFitImage className='inline-icon' /> Вписать в экран
+          </li>
+          <li>
+            <IconGrid className='inline-icon' /> Отображение сетки
+          </li>
+          <li>
+            <IconLineWave className='inline-icon' />
+            <IconLineStraight className='inline-icon' /> Тип линии
+          </li>
+          <li>
+            <IconAnimation className='inline-icon' />
+            <IconAnimationOff className='inline-icon' /> Анимация
+          </li>
+        </div>
+
+        <Divider vertical margins='mx-3 mt-3' className='hidden sm:block' />
+
+        <div className='w-full sm:w-[21rem]'>
+          <h1>Изменение узлов</h1>
+          <li>Клик на операцию – выделение</li>
+          <li>Esc – сбросить выделение</li>
+          <li>
+            <IconEdit2 className='inline-icon' /> Двойной клик – редактирование
+          </li>
+          <li>
+            <IconNewItem className='inline-icon icon-green' /> Новая операция
+          </li>
+          <li>
+            <IconDestroy className='inline-icon icon-red' /> Delete – удалить выбранные
+          </li>
+        </div>
+      </div>
+
+      <Divider margins='my-3' className='hidden sm:block' />
+
+      <div className='flex flex-col-reverse mb-3 sm:flex-row'>
+        <div className='w-full sm:w-[14rem]'>
+          <h1>Общие</h1>
+          <li>
+            <IconReset className='inline-icon' /> Сбросить изменения
+          </li>
+          <li>
+            <IconSave className='inline-icon' /> Сохранить положения
+          </li>
+          <li>
+            <IconImage className='inline-icon' /> Сохранить в формат SVG
+          </li>
+        </div>
+
+        <Divider vertical margins='mx-3' className='hidden sm:block' />
+
+        <div className='dense w-[21rem]'>
+          <h1>Контекстное меню</h1>
+          <li>
+            <IconRSForm className='inline-icon icon-green' /> Переход к связанной{' '}
+            <LinkTopic text='КС' topic={HelpTopic.CC_SYSTEM} />
+          </li>
+          <li>
+            <IconNewItem className='inline-icon icon-green' /> Создать пустую КС для загрузки
+          </li>
+          <li>
+            <IconConnect className='inline-icon' /> Выбрать КС для загрузки
+          </li>
+          <li>
+            <IconExecute className='inline-icon icon-green' /> Выполнить (активировать) операцию
+          </li>
+        </div>
+      </div>
     </div>
   );
 }

rsconcept/frontend/src/pages/ManualsPage/items/HelpTermGraph.tsx

@@ -26,6 +26,7 @@ function HelpTermGraph() {
   const { colors } = useConceptOptions();
   return (
     <div className='flex flex-col'>
+      <h1>Граф термов</h1>
       <div className='flex flex-col sm:flex-row'>
         <div className='w-full sm:w-[14rem]'>
           <h1>Настройка графа</h1>
@@ -78,7 +79,7 @@ function HelpTermGraph() {
             <IconFilter className='inline-icon' /> Открыть настройки
           </li>
           <li>
-            <IconFitImage className='inline-icon' /> Вписать граф в экран
+            <IconFitImage className='inline-icon' /> Вписать в экран
           </li>
           <li>
             <IconImage className='inline-icon' /> Сохранить в формат PNG

rsconcept/frontend/src/pages/OssPage/OssTabs.tsx

@@ -135,7 +135,7 @@ function OssTabs() {
           <TabList className={clsx('mx-auto w-fit', 'flex items-stretch', 'border-b-2 border-x-2 divide-x-2')}>
             <MenuOssTabs onDestroy={onDestroySchema} />
 
-            <TabLabel label='Карточка' titleHtml={`Название: <b>${schema.title ?? ''}</b>`} />
+            <TabLabel label='Карточка' title={schema.title ?? ''} />
             <TabLabel label='Граф' />
           </TabList>
 

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

@@ -1,5 +1,7 @@
 'use client';
 
+import clsx from 'clsx';
+
 import {
   IconClone,
   IconDestroy,
@@ -118,7 +120,11 @@ function ToolbarConstituenta({
           />
         </>
       ) : null}
-      <BadgeHelp topic={HelpTopic.UI_RS_EDITOR} offset={4} className={PARAMETER.TOOLTIP_WIDTH} />
+      <BadgeHelp
+        topic={HelpTopic.UI_RS_EDITOR}
+        offset={4}
+        className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
+      />
     </Overlay>
   );
 }

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

@@ -257,10 +257,7 @@ function RSTabs() {
           <TabList className={clsx('mx-auto w-fit', 'flex items-stretch', 'border-b-2 border-x-2 divide-x-2')}>
             <MenuRSTabs onDestroy={onDestroySchema} />
 
-            <TabLabel
-              label='Карточка'
-              titleHtml={`Название: <b>${schema.title ?? ''}</b><br />Версия: ${labelVersion(schema)}`}
-            />
+            <TabLabel label='Карточка' titleHtml={`${schema.title ?? ''}<br />Версия: ${labelVersion(schema)}`} />
             <TabLabel
               label='Содержание'
               titleHtml={`Конституент: ${schema.stats?.count_all ?? 0}<br />Ошибок: ${schema.stats?.count_errors ?? 0}`}

rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsSearch.tsx

@@ -2,8 +2,10 @@
 
 import { useLayoutEffect, useMemo, useState } from 'react';
 
+import { IconChild } from '@/components/Icons';
 import SelectGraphFilter from '@/components/select/SelectGraphFilter';
 import SelectMatchMode from '@/components/select/SelectMatchMode';
+import MiniButton from '@/components/ui/MiniButton';
 import SearchBar from '@/components/ui/SearchBar';
 import useLocalStorage from '@/hooks/useLocalStorage';
 import { CstMatchMode, DependencyMode } from '@/models/miscellaneous';
@@ -25,6 +27,7 @@ function ConstituentsSearch({ schema, activeID, activeExpression, dense, setFilt
   const [filterMatch, setFilterMatch] = useLocalStorage(storage.cstFilterMatch, CstMatchMode.ALL);
   const [filterSource, setFilterSource] = useLocalStorage(storage.cstFilterGraph, DependencyMode.ALL);
   const [filterText, setFilterText] = useState('');
+  const [showInherited, setShowInherited] = useLocalStorage(storage.cstFilterShowInherited, true);
 
   useLayoutEffect(() => {
     if (!schema || schema.items.length === 0) {
@@ -48,8 +51,21 @@ function ConstituentsSearch({ schema, activeID, activeExpression, dense, setFilt
     if (filterText) {
       result = result.filter(cst => matchConstituenta(cst, filterText, filterMatch));
     }
+    if (!showInherited) {
+      result = result.filter(cst => !cst.is_inherited);
+    }
     setFiltered(result);
-  }, [filterText, setFiltered, filterSource, activeExpression, schema?.items, schema, filterMatch, activeID]);
+  }, [
+    filterText,
+    setFiltered,
+    filterSource,
+    activeExpression,
+    schema?.items,
+    schema,
+    filterMatch,
+    activeID,
+    showInherited
+  ]);
 
   const selectGraph = useMemo(
     () => <SelectGraphFilter value={filterSource} onChange={newValue => setFilterSource(newValue)} dense={dense} />,
@@ -72,6 +88,15 @@ function ConstituentsSearch({ schema, activeID, activeExpression, dense, setFilt
       />
       {selectMatchMode}
       {selectGraph}
+      {schema && schema?.stats.count_inherited > 0 ? (
+        <MiniButton
+          noHover
+          titleHtml={`Наследованные: <b>${showInherited ? 'отображать' : 'скрывать'}</b>`}
+          icon={<IconChild size='1rem' className={showInherited ? 'icon-primary' : 'clr-text-controls'} />}
+          className='h-fit self-center'
+          onClick={() => setShowInherited(prev => !prev)}
+        />
+      ) : null}
     </div>
   );
 }

rsconcept/frontend/src/utils/constants.ts

@@ -123,7 +123,8 @@ export const storage = {
   ossEdgeAnimate: 'oss.edge_animate',
 
   cstFilterMatch: 'cst.filter.match',
-  cstFilterGraph: 'cst.filter.graph'
+  cstFilterGraph: 'cst.filter.graph',
+  cstFilterShowInherited: 'cst.filter.show_inherited'
 };
 
 /**