M: Improve Typification UI

rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpRSEditor.tsx

@@ -15,7 +15,8 @@ import {
   IconSave,
   IconSettings,
   IconStatusOK,
-  IconTree
+  IconTree,
+  IconTypeGraph
 } from '@/components/Icons';
 import LinkTopic from '@/components/ui/LinkTopic';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
@@ -90,6 +91,10 @@ function HelpRSEditor() {
       <li>
         <IconControls className='inline-icon' /> специальная клавиатура и горячие клавиши
       </li>
+      <li>
+        <IconTypeGraph className='inline-icon' /> отображение{' '}
+        <LinkTopic text='графа ступеней типизации' topic={HelpTopic.UI_TYPE_GRAPH} />
+      </li>
       <li>
         <IconTree className='inline-icon' /> отображение{' '}
         <LinkTopic text='дерева разбора' topic={HelpTopic.UI_FORMULA_TREE} />

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

@@ -144,7 +144,7 @@ function FormConstituenta({
     cstUpdate(data, () => toast.success(information.changesSaved));
   }
 
-  function handleTypificationClick(event: CProps.EventMouse) {
+  function handleTypeGraph(event: CProps.EventMouse) {
     if (!state || (localParse && !localParse.parseResult) || state.parse.status !== ParsingStatus.VERIFIED) {
       toast.error(errors.typeStructureFailed);
       return;
@@ -196,10 +196,8 @@ function FormConstituenta({
             noOutline
             readOnly
             label='Типизация'
-            title='Отобразить структуру типизации'
             value={typification}
-            colors='clr-app clr-text-default cursor-pointer'
-            onClick={event => handleTypificationClick(event)}
+            colors='clr-app clr-text-default cursor-default'
           />
         ) : null}
         {state ? (
@@ -229,6 +227,7 @@ function FormConstituenta({
                 onChangeTypification={setTypification}
                 onChangeLocalParse={setLocalParse}
                 onOpenEdit={onOpenEdit}
+                onShowTypeGraph={handleTypeGraph}
               />
             </AnimateFade>
             <AnimateFade key='cst_definition_fade' hideContent={!state.definition_raw && isElementary}>

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

@@ -43,6 +43,7 @@ interface EditorRSExpressionProps {
   onChangeLocalParse: (typification: IExpressionParse | undefined) => void;
   onChangeExpression: (newValue: string) => void;
   onOpenEdit?: (cstID: ConstituentaID) => void;
+  onShowTypeGraph: (event: CProps.EventMouse) => void;
 }
 
 function EditorRSExpression({
@@ -54,6 +55,7 @@ function EditorRSExpression({
   onChangeLocalParse,
   onChangeExpression,
   onOpenEdit,
+  onShowTypeGraph,
   ...restProps
 }: EditorRSExpressionProps) {
   const model = useRSForm();
@@ -171,6 +173,7 @@ function EditorRSExpression({
         showControls={showControls}
         showAST={handleShowAST}
         toggleControls={() => setShowControls(prev => !prev)}
+        showTypeGraph={onShowTypeGraph}
       />
 
       <Overlay

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

@@ -1,4 +1,4 @@
-import { IconControls, IconTree } from '@/components/Icons';
+import { IconControls, IconTree, IconTypeGraph } from '@/components/Icons';
 import { CProps } from '@/components/props';
 import MiniButton from '@/components/ui/MiniButton';
 import Overlay from '@/components/ui/Overlay';
@@ -10,9 +10,16 @@ interface ToolbarRSExpressionProps {
 
   toggleControls: () => void;
   showAST: (event: CProps.EventMouse) => void;
+  showTypeGraph: (event: CProps.EventMouse) => void;
 }
 
-function ToolbarRSExpression({ disabled, showControls, toggleControls, showAST }: ToolbarRSExpressionProps) {
+function ToolbarRSExpression({
+  disabled,
+  showControls,
+  showTypeGraph,
+  toggleControls,
+  showAST
+}: ToolbarRSExpressionProps) {
   const model = useRSForm();
 
   return (
@@ -24,6 +31,11 @@ function ToolbarRSExpression({ disabled, showControls, toggleControls, showAST }
           onClick={toggleControls}
         />
       ) : null}
+      <MiniButton
+        icon={<IconTypeGraph size='1.25rem' className='icon-primary' />}
+        title='Граф ступеней типизации'
+        onClick={showTypeGraph}
+      />
       <MiniButton
         title='Дерево разбора выражения'
         onClick={showAST}