From f03e61e3c171cf6cbeffda0c39d725677e263eae Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Mon, 31 Jul 2023 22:38:58 +0300
Subject: [PATCH] Refactoring and multiple minor UI improvements

---
 .../src/components/Common/Checkbox.tsx        |   8 +-
 .../src/components/Common/ConceptGraph.tsx    |  29 ----
 .../src/components/Common/ConceptSelect.tsx   |   3 +-
 .../src/components/Common/ConceptTooltip.tsx  |   6 +-
 .../src/components/Common/Divider.tsx         |   6 +-
 .../src/components/Common/Dropdown.tsx        |   2 +-
 .../frontend/src/components/Common/Modal.tsx  |   4 +-
 .../frontend/src/hooks/useRSFormDetails.ts    |   1 -
 .../frontend/src/hooks/useUserProfile.ts      |  15 +-
 .../src/pages/RSFormPage/DlgCreateCst.tsx     |   2 +-
 .../src/pages/RSFormPage/DlgUploadRSForm.tsx  |  15 +-
 .../pages/RSFormPage/EditorConstituenta.tsx   |   2 +-
 .../src/pages/RSFormPage/EditorItems.tsx      |  86 +++++-----
 .../pages/RSFormPage/EditorRSExpression.tsx   |  57 ++++---
 .../src/pages/RSFormPage/EditorTermGraph.tsx  |  78 +++++----
 .../frontend/src/pages/RSFormPage/RSTabs.tsx  |  29 ++--
 .../src/pages/RSFormPage/RSTabsMenu.tsx       |  11 +-
 .../elements/ConstituentaTooltip.tsx          |   7 +-
 .../RSFormPage/elements/ParsingResult.tsx     |  13 +-
 .../pages/RSFormPage/elements/StatusBar.tsx   |   4 +-
 .../elements/ViewSideConstituents.tsx         |  36 ++++-
 .../pages/RSFormPage/elements/textEditing.ts  |   6 +-
 rsconcept/frontend/src/utils/backendAPI.ts    |   2 +-
 rsconcept/frontend/src/utils/constants.ts     |   7 +-
 rsconcept/frontend/src/utils/models.ts        |  12 +-
 rsconcept/frontend/src/utils/staticUI.ts      | 148 ++++++++++--------
 26 files changed, 330 insertions(+), 259 deletions(-)
 delete mode 100644 rsconcept/frontend/src/components/Common/ConceptGraph.tsx

diff --git a/rsconcept/frontend/src/components/Common/Checkbox.tsx b/rsconcept/frontend/src/components/Common/Checkbox.tsx
index 3fda76c0..7f97692f 100644
--- a/rsconcept/frontend/src/components/Common/Checkbox.tsx
+++ b/rsconcept/frontend/src/components/Common/Checkbox.tsx
@@ -6,15 +6,17 @@ export interface CheckboxProps {
   required?: boolean
   disabled?: boolean
   widthClass?: string
+  tooltip?: string
   value?: boolean
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
 }
 
-function Checkbox({ id, required, disabled, label, widthClass = 'w-full', value, onChange }: CheckboxProps) {
+// TODO: implement disabled={disabled}
+function Checkbox({ id, required, disabled, tooltip, label, widthClass = 'w-full', value, onChange }: CheckboxProps) {
   return (
-    <div className={'flex gap-2 [&:not(:first-child)]:mt-3 ' + widthClass}>
+    <div className={'flex gap-2 [&:not(:first-child)]:mt-3 ' + widthClass} title={tooltip}>
       <input id={id} type='checkbox'
-        className='relative cursor-pointer peer w-4 h-4 shrink-0 mt-0.5 border rounded-sm appearance-none clr-checkbox'
+        className='relative cursor-pointer disabled:cursor-not-allowed peer w-4 h-4 shrink-0 mt-0.5 border rounded-sm appearance-none clr-checkbox'
         required={required}
         disabled={disabled}
         checked={value}
diff --git a/rsconcept/frontend/src/components/Common/ConceptGraph.tsx b/rsconcept/frontend/src/components/Common/ConceptGraph.tsx
deleted file mode 100644
index 73272754..00000000
--- a/rsconcept/frontend/src/components/Common/ConceptGraph.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Ref } from 'react';
-import { darkTheme, GraphCanvas, GraphCanvasProps, GraphCanvasRef, lightTheme } from 'reagraph';
-
-import { useConceptTheme } from '../../context/ThemeContext';
-import { resources } from '../../utils/constants';
-
-interface ConceptGraphProps
-extends Omit<GraphCanvasProps, 'theme' | 'labelFontUrl'> {
-  ref?: Ref<GraphCanvasRef>
-  sizeClass: string
-}
-
-function ConceptGraph({ sizeClass, ...props }: ConceptGraphProps) {
-  const { darkMode } = useConceptTheme();
-  
-  return (
-    <div className='flex-wrap w-full h-full overflow-auto'>
-      <div className={`relative border ${sizeClass}`}>
-      <GraphCanvas
-        theme={darkMode ? darkTheme : lightTheme}
-        labelFontUrl={resources.graph_font}
-        {...props}
-      />
-      </div>
-    </div>
-  );
-}
-
-export default ConceptGraph;
diff --git a/rsconcept/frontend/src/components/Common/ConceptSelect.tsx b/rsconcept/frontend/src/components/Common/ConceptSelect.tsx
index fb52240a..18679458 100644
--- a/rsconcept/frontend/src/components/Common/ConceptSelect.tsx
+++ b/rsconcept/frontend/src/components/Common/ConceptSelect.tsx
@@ -6,9 +6,10 @@ extends Omit<PropsWithRef<SelectProps<T>>, 'noDataLabel'> {
   
 }
 
-function ConceptSelect<T extends object | string>({  ...props }: ConceptSelectProps<T>) {
+function ConceptSelect<T extends object | string>({ className,  ...props }: ConceptSelectProps<T>) {
   return (
   <Select
+    className={`overflow-ellipsis whitespace-nowrap ${className}`}
     {...props}
     noDataLabel='Список пуст'
   />
diff --git a/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx b/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx
index b0354f82..d5ea3a5a 100644
--- a/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx
+++ b/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx
@@ -3,18 +3,18 @@ import { ITooltip, Tooltip } from 'react-tooltip';
 import { useConceptTheme } from '../../context/ThemeContext';
 
 interface ConceptTooltipProps
-extends Omit<ITooltip, 'variant' | 'place'> {
+extends Omit<ITooltip, 'variant'> {
   
 }
 
-function ConceptTooltip({ className, ...props }: ConceptTooltipProps) {
+function ConceptTooltip({ className, place='bottom', ...props }: ConceptTooltipProps) {
   const { darkMode } = useConceptTheme();
 
   return (
   <Tooltip
     className={`overflow-auto border shadow-md z-20 ${className}`}
     variant={(darkMode ? 'dark' : 'light')}
-    place='bottom'
+    place={place}
     {...props}
   />
   );
diff --git a/rsconcept/frontend/src/components/Common/Divider.tsx b/rsconcept/frontend/src/components/Common/Divider.tsx
index 3845bd9d..050fe18c 100644
--- a/rsconcept/frontend/src/components/Common/Divider.tsx
+++ b/rsconcept/frontend/src/components/Common/Divider.tsx
@@ -3,11 +3,11 @@ interface DividerProps {
   margins?: string
 }
 
-function Divider({ vertical, margins = '2' }: DividerProps) {
+function Divider({ vertical, margins = 'mx-2' }: DividerProps) {
   return (
     <>
-    {vertical && <div className={`mx-${margins} border-x-2`} />}
-    {!vertical && <div className={`my-${margins} border-y-2`} />}
+    {vertical && <div className={`${margins} border-x-2`} />}
+    {!vertical && <div className={`${margins} border-y-2`} />}
     </>
   );
 }
diff --git a/rsconcept/frontend/src/components/Common/Dropdown.tsx b/rsconcept/frontend/src/components/Common/Dropdown.tsx
index 2646822a..0f1f39b0 100644
--- a/rsconcept/frontend/src/components/Common/Dropdown.tsx
+++ b/rsconcept/frontend/src/components/Common/Dropdown.tsx
@@ -7,7 +7,7 @@ interface DropdownProps {
 function Dropdown({ children, widthClass = 'w-fit', stretchLeft }: DropdownProps) {
   return (
     <div className='relative'>
-    <div className={`absolute ${stretchLeft ? 'right-0' : 'left-0'} py-2 z-10 flex flex-col items-stretch justify-start px-2 mt-2 text-sm origin-top-right bg-white border border-gray-100 divide-y rounded-md shadow-lg dark:border-gray-500 dark:bg-gray-900 ${widthClass}`}>
+    <div className={`absolute ${stretchLeft ? 'right-0' : 'left-0'} py-2 z-40 flex flex-col items-stretch justify-start px-2 mt-2 text-sm origin-top-right bg-white border border-gray-100 divide-y rounded-md shadow-lg dark:border-gray-500 dark:bg-gray-900 ${widthClass}`}>
       {children}
     </div>
     </div>
diff --git a/rsconcept/frontend/src/components/Common/Modal.tsx b/rsconcept/frontend/src/components/Common/Modal.tsx
index 6d3df25c..dd0aa2c6 100644
--- a/rsconcept/frontend/src/components/Common/Modal.tsx
+++ b/rsconcept/frontend/src/components/Common/Modal.tsx
@@ -1,6 +1,5 @@
 import { useRef } from 'react';
 
-import useClickedOutside from '../../hooks/useClickedOutside';
 import useEscapeKey from '../../hooks/useEscapeKey';
 import Button from './Button';
 
@@ -16,7 +15,6 @@ interface ModalProps {
 
 function Modal({ title, hideWindow, onSubmit, onCancel, canSubmit, children, submitText = 'Продолжить' }: ModalProps) {
   const ref = useRef(null);
-  useClickedOutside({ ref, callback: hideWindow });
   useEscapeKey(hideWindow);
 
   const handleCancel = () => {
@@ -34,7 +32,7 @@ function Modal({ title, hideWindow, onSubmit, onCancel, canSubmit, children, sub
     <div className='fixed top-0 left-0 z-50 w-full h-full opacity-50 clr-modal'>
     </div>
     <div ref={ref} className='fixed bottom-1/2 left-1/2 translate-y-1/2 -translate-x-1/2 px-6 py-4 flex flex-col w-fit h-fit z-[60] clr-card border shadow-md mb-[5rem]'>
-      { title && <h1 className='mb-4 text-xl font-bold text-center'>{title}</h1> }
+      { title && <h1 className='mb-2 text-xl font-bold text-center'>{title}</h1> }
       <div className='py-2'>
         {children}
       </div>
diff --git a/rsconcept/frontend/src/hooks/useRSFormDetails.ts b/rsconcept/frontend/src/hooks/useRSFormDetails.ts
index dc0cbbb2..1fbf7b48 100644
--- a/rsconcept/frontend/src/hooks/useRSFormDetails.ts
+++ b/rsconcept/frontend/src/hooks/useRSFormDetails.ts
@@ -16,7 +16,6 @@ export function useRSFormDetails({ target }: { target?: string }) {
     }
     const schema = LoadRSFormData(data);
     setInnerSchema(schema);
-    console.log('Loaded schema: ', schema);
   }
 
   const reload = useCallback(
diff --git a/rsconcept/frontend/src/hooks/useUserProfile.ts b/rsconcept/frontend/src/hooks/useUserProfile.ts
index cbd6759c..145c0976 100644
--- a/rsconcept/frontend/src/hooks/useUserProfile.ts
+++ b/rsconcept/frontend/src/hooks/useUserProfile.ts
@@ -9,7 +9,7 @@ export function useUserProfile() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<ErrorInfo>(undefined);
 
-  const fetchUser = useCallback(
+  const reload = useCallback(
     () => {
       setError(undefined);
       setUser(undefined);
@@ -29,14 +29,17 @@ export function useUserProfile() {
         showError: true,
         setLoading: setLoading,
         onError: error => { setError(error); },
-        onSuccess: newData => { setUser(newData); if (callback) callback(newData) }
+        onSuccess: newData => {
+          setUser(newData);
+          if (callback) callback(newData);
+        }
       });
     }, [setUser]
-  )
+  );
 
   useEffect(() => {
-    fetchUser();
-  }, [fetchUser])
+    reload();
+  }, [reload])
 
-  return { user, fetchUser, updateUser, error, loading };
+  return { user, updateUser, error, loading };
 }
diff --git a/rsconcept/frontend/src/pages/RSFormPage/DlgCreateCst.tsx b/rsconcept/frontend/src/pages/RSFormPage/DlgCreateCst.tsx
index eb9488d6..b85bbed8 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/DlgCreateCst.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/DlgCreateCst.tsx
@@ -39,7 +39,7 @@ function DlgCreateCst({ hideWindow, defaultType, onCreate }: DlgCreateCstProps)
         options={CstTypeSelector}
         placeholder='Выберите тип'
         values={selectedType ? [{ value: selectedType, label: getCstTypeLabel(selectedType) }] : []}
-        onChange={data => { setSelectedType(data[0].value); }}
+        onChange={data => { setSelectedType(data.length > 0 ? data[0].value : undefined); }}
       />
     </Modal>
   );
diff --git a/rsconcept/frontend/src/pages/RSFormPage/DlgUploadRSForm.tsx b/rsconcept/frontend/src/pages/RSFormPage/DlgUploadRSForm.tsx
index 227716b2..27ba2fc2 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/DlgUploadRSForm.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/DlgUploadRSForm.tsx
@@ -38,17 +38,20 @@ function DlgUploadRSForm({ hideWindow }: DlgUploadRSFormProps) {
 
   return (
     <Modal
-      title='Загрузка схемы из Экстеор'
+      title='Импорт схемы из Экстеора'
       hideWindow={hideWindow}
       canSubmit={!!file}
       onSubmit={handleSubmit}
+      submitText='Загрузить'
     >
       <div className='max-w-[20rem]'>
-      <FileInput label='Загрузить файл'
-          acceptType='.trs'
-          onChange={handleFile}
-        />
-      <Checkbox label='Загружать метаданные'
+      <FileInput
+        label='Выбрать файл'
+        acceptType='.trs'
+        onChange={handleFile}
+      />
+      <Checkbox
+        label='Загружать название и комментарий'
         value={loadMetadata}
         onChange={event => { setLoadMetadata(event.target.checked); }}
       />
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
index a3dd0cb2..66feb890 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
@@ -15,7 +15,7 @@ import { RSTabsList } from './RSTabs';
 
 interface EditorConstituentaProps {
   onShowAST: (ast: SyntaxTree) => void
-  onShowCreateCst: (position: number | undefined, type: CstType | undefined) => void
+  onShowCreateCst: (selectedID: number | undefined, type: CstType | undefined) => void
 }
 
 function EditorConstituenta({ onShowAST, onShowCreateCst }: EditorConstituentaProps) {
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
index 75efefad..e9426b2b 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
@@ -8,12 +8,13 @@ import Divider from '../../components/Common/Divider';
 import { ArrowDownIcon, ArrowsRotateIcon, ArrowUpIcon, DumpBinIcon, HelpIcon, SmallPlusIcon } from '../../components/Icons';
 import { useRSForm } from '../../context/RSFormContext';
 import { useConceptTheme } from '../../context/ThemeContext';
-import { CstType, type IConstituenta, ICstMovetoData, inferStatus, ParsingStatus, ValueClass } from '../../utils/models'
-import { getCstTypePrefix, getCstTypeShortcut, getStatusInfo, getTypeLabel } from '../../utils/staticUI';
+import { prefixes } from '../../utils/constants';
+import { CstType, IConstituenta, ICstMovetoData } from '../../utils/models'
+import { getCstTypePrefix, getCstTypeShortcut, getTypeLabel, mapStatusInfo } from '../../utils/staticUI';
 
 interface EditorItemsProps {
   onOpenEdit: (cst: IConstituenta) => void
-  onShowCreateCst: (position: number | undefined, type: CstType | undefined, skipDialog?: boolean) => void
+  onShowCreateCst: (selectedID: number | undefined, type: CstType | undefined, skipDialog?: boolean) => void
 }
 
 function EditorItems({ onOpenEdit, onShowCreateCst }: EditorItemsProps) {
@@ -108,7 +109,7 @@ function EditorItems({ onOpenEdit, onShowCreateCst }: EditorItemsProps) {
   }, [selected, schema?.items, cstMoveTo]);
 
   // Generate new names for all constituents
-  const handleReindex = useCallback(() => { 
+  const handleReindex = useCallback(() => {
     resetAliases(() => toast.success('Переиндексация конституент успешна'));
   }, [resetAliases]);
 
@@ -121,8 +122,8 @@ function EditorItems({ onOpenEdit, onShowCreateCst }: EditorItemsProps) {
       const selectedPosition = selected.reduce((prev, cstID) => {
         const position = schema.items.findIndex(cst => cst.id === cstID);
         return Math.max(position, prev);
-      }, -1) + 1;
-      const insert_where = selectedPosition > 0 ? selectedPosition : undefined;
+      }, -1);
+      const insert_where = selectedPosition >= 0 ? schema.items[selectedPosition].id : undefined;
       onShowCreateCst(insert_where, type, type !== undefined);
     }, [schema, onShowCreateCst, selected]);
 
@@ -173,53 +174,30 @@ function EditorItems({ onOpenEdit, onShowCreateCst }: EditorItemsProps) {
         selector: (cst: IConstituenta) => cst.id,
         omit: true
       },
-      {
-        name: 'Статус',
-        id: 'status',
-        cell: (cst: IConstituenta) =>
-          <div style={{ fontSize: 12 }}>
-            {getStatusInfo(inferStatus(cst.parse?.status, cst.parse?.valueClass)).text}
-          </div>,
-        width: '80px',
-        maxWidth: '80px',
-        reorder: true,
-        hide: 1280,
-        conditionalCellStyles: [
-          {
-            when: (cst: IConstituenta) => cst.parse?.status !== ParsingStatus.VERIFIED,
-            classNames: ['bg-[#ffc9c9]', 'dark:bg-[#592b2b]']
-          },
-          {
-            when: (cst: IConstituenta) => cst.parse?.status === ParsingStatus.VERIFIED && cst.parse?.valueClass === ValueClass.INVALID,
-            classNames: ['bg-[#beeefa]', 'dark:bg-[#286675]']
-          },
-          {
-            when: (cst: IConstituenta) => cst.parse?.status === ParsingStatus.VERIFIED && cst.parse?.valueClass === ValueClass.PROPERTY,
-            classNames: ['bg-[#a5e9fa]', 'dark:bg-[#36899e]']
-          }
-        ]
-      },
       {
         name: 'Имя',
         id: 'alias',
         selector: (cst: IConstituenta) => cst.alias,
+        cell: (cst: IConstituenta) => {
+          const info = mapStatusInfo.get(cst.status)!;
+          return (<>
+            <div
+              id={`${prefixes.cst_list}${cst.alias}`}
+              className={`w-full rounded-md text-center ${info.color}`}
+            >
+              {cst.alias}
+            </div>
+            <ConceptTooltip
+              anchorSelect={`#${prefixes.cst_list}${cst.alias}`}
+              place='right'
+            >
+              <p><b>Статус: </b> {info.tooltip}</p>
+            </ConceptTooltip>
+          </>);
+        },
         width: '65px',
         maxWidth: '65px',
         reorder: true,
-        conditionalCellStyles: [
-          {
-            when: (cst: IConstituenta) => cst.parse?.status !== ParsingStatus.VERIFIED,
-            classNames: ['bg-[#ff8080]', 'dark:bg-[#800000]']
-          },
-          {
-            when: (cst: IConstituenta) => cst.parse?.status === ParsingStatus.VERIFIED && cst.parse?.valueClass === ValueClass.INVALID,
-            classNames: ['bg-[#ffbb80]', 'dark:bg-[#964600]']
-          },
-          {
-            when: (cst: IConstituenta) => cst.parse?.status === ParsingStatus.VERIFIED && cst.parse?.valueClass === ValueClass.PROPERTY,
-            classNames: ['bg-[#a5e9fa]', 'dark:bg-[#36899e]']
-          }
-        ]
       },
       {
         name: 'Тип',
@@ -311,7 +289,7 @@ function EditorItems({ onOpenEdit, onShowCreateCst }: EditorItemsProps) {
             dense
             onClick={handleDelete}
           />
-          <Divider vertical margins='1' />
+          <Divider vertical margins='my-1' />
           <Button
             tooltip='Переиндексировать имена'
             icon={<ArrowsRotateIcon color='text-primary' size={6}/>}
@@ -341,9 +319,23 @@ function EditorItems({ onOpenEdit, onShowCreateCst }: EditorItemsProps) {
             <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' />
+              <h1>Статусы</h1>
+              { [... mapStatusInfo.values()].map(info => {
+                  return (<p className='py-1'>
+                    <span className={`inline-block font-semibold min-w-[4rem] text-center border ${info.color}`}>
+                      {info.text}
+                    </span>
+                    <span> - </span>
+                    <span>
+                      {info.tooltip}
+                    </span>
+                  </p>);
+              })}
             </div>
           </ConceptTooltip>
         </div>}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx
index 1916f2e8..294003cf 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx
@@ -7,7 +7,8 @@ import { Loader } from '../../components/Common/Loader';
 import { useRSForm } from '../../context/RSFormContext';
 import useCheckExpression from '../../hooks/useCheckExpression';
 import { TokenID } from '../../utils/enums';
-import { CstType, SyntaxTree } from '../../utils/models';
+import { IRSErrorDescription, SyntaxTree } from '../../utils/models';
+import { getCstExpressionPrefix } from '../../utils/staticUI';
 import ParsingResult from './elements/ParsingResult';
 import RSLocalButton from './elements/RSLocalButton';
 import RSTokenButton from './elements/RSTokenButton';
@@ -42,23 +43,43 @@ function EditorRSExpression({
     resetParse();
   }, [activeCst, resetParse]);
 
-  const handleCheckExpression = useCallback(() => {
+  function handleFocusIn() {
+    toggleEditMode()
+  }
+
+  function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
+    onChange(event);
+    setIsModified(true);
+  }
+  
+  function handleCheckExpression() {
     if (!activeCst) {
       return;
     }
-    const prefix = activeCst?.alias + (activeCst?.cstType === CstType.STRUCTURED ? '::=' : ':==');
+    const prefix = getCstExpressionPrefix(activeCst);
     const expression = prefix + value;
     checkExpression(expression, parse => {
-      if (!parse.parseResult && parse.errors.length > 0) {
+      if (parse.errors.length > 0) {
         const errorPosition = parse.errors[0].position - prefix.length
         expressionCtrl.current!.selectionStart = errorPosition;
         expressionCtrl.current!.selectionEnd = errorPosition;
-        expressionCtrl.current!.focus();
       }
+      expressionCtrl.current!.focus();
       setIsModified(false);
       setTypification(parse.typification);
     });
-  }, [value, checkExpression, activeCst, setTypification]);
+  }
+
+  const onShowError = useCallback(
+  (error: IRSErrorDescription) => {
+      if (!activeCst || !expressionCtrl.current) {
+        return;
+      }
+      const errorPosition = error.position -  getCstExpressionPrefix(activeCst).length
+      expressionCtrl.current.selectionStart = errorPosition;
+      expressionCtrl.current.selectionEnd = errorPosition;
+      expressionCtrl.current.focus();
+  }, [activeCst]);
 
   const handleEdit = useCallback((id: TokenID, key?: string) => {
     if (!expressionCtrl.current) {
@@ -76,13 +97,9 @@ function EditorRSExpression({
     setValue(text.value);
     setIsModified(true);
   }, [setValue]);
-
-  const handleChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    onChange(event);
-    setIsModified(true);
-  }, [setIsModified, onChange]);
-
-  const handleInput = useCallback((event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+  
+  const handleInput = useCallback(
+  (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (!expressionCtrl.current) {
       return;
     }
@@ -108,10 +125,6 @@ function EditorRSExpression({
     setIsModified(true);
   }, [expressionCtrl, setValue]);
 
-  const handleFocusIn = useCallback(() => {
-    toggleEditMode()
-  }, [toggleEditMode]);
-
   const EditButtons = useMemo(() => {
     return (<div className='flex items-center justify-between w-full'>
     <div className='text-sm w-fit'>
@@ -188,7 +201,7 @@ function EditorRSExpression({
       </div>
     </div>
     </div>);
-  }, [handleEdit])
+  }, [handleEdit]);
 
   return (
     <div className='flex flex-col items-start [&:not(:first-child)]:mt-3 w-full'>
@@ -206,6 +219,7 @@ function EditorRSExpression({
           onFocus={handleFocusIn}
           onKeyDown={handleInput}
           disabled={disabled}
+          spellCheck={false}
       />
       <div className='flex w-full gap-4 py-1 mt-1 justify-stretch'>
         <div className='flex flex-col gap-2'>
@@ -230,7 +244,12 @@ function EditorRSExpression({
       { (loading || parseData) && 
       <div className='w-full overflow-y-auto border mt-2 max-h-[14rem] min-h-[7rem]'>
         { loading && <Loader />}
-        { !loading && parseData && <ParsingResult data={parseData} onShowAST={onShowAST} />}
+        { !loading && parseData && 
+        <ParsingResult 
+          data={parseData} 
+          onShowAST={onShowAST}
+          onShowError={onShowError}
+        />}
       </div>}
     </div>
   );
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
index de127a08..e616346e 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
@@ -1,15 +1,20 @@
-import { useMemo, useRef } from 'react';
-import { GraphCanvasRef, GraphEdge, GraphNode, LayoutTypes, useSelection } from 'reagraph';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { darkTheme, GraphCanvas, GraphCanvasRef, GraphEdge, GraphNode, LayoutTypes, lightTheme, useSelection } from 'reagraph';
 
-import ConceptGraph from '../../components/Common/ConceptGraph';
+import Button from '../../components/Common/Button';
+import Checkbox from '../../components/Common/Checkbox';
 import ConceptSelect from '../../components/Common/ConceptSelect';
 import { useRSForm } from '../../context/RSFormContext';
+import { useConceptTheme } from '../../context/ThemeContext';
 import useLocalStorage from '../../hooks/useLocalStorage';
-import { GraphLayoutSelector } from '../../utils/staticUI';
+import { resources } from '../../utils/constants';
+import { GraphLayoutSelector,mapLayoutLabels } from '../../utils/staticUI';
 
 function EditorTermGraph() {
   const { schema } = useRSForm();
+  const { darkMode } = useConceptTheme();
   const [ layout, setLayout ] = useLocalStorage<LayoutTypes>('graph_layout', 'forceatlas2');
+  const [ orbit, setOrbit ] = useState(false);
   const graphRef = useRef<GraphCanvasRef | null>(null);
 
   const nodes: GraphNode[] = useMemo(() => {
@@ -37,6 +42,11 @@ function EditorTermGraph() {
     return result;
   }, [schema?.graph]);
 
+  const handleCenter = useCallback(() => {
+    graphRef.current?.resetControls();
+    graphRef.current?.centerGraph();
+  }, []);
+
   const { 
     selections, actives,
     onNodeClick,
@@ -44,44 +54,58 @@ function EditorTermGraph() {
     onNodePointerOver,
     onNodePointerOut
   } = useSelection({
-    type: 'multi', // 'single' | 'multi' | 'multiModifier'
     ref: graphRef,
     nodes,
     edges,
+    type: 'multi', // 'single' | 'multi' | 'multiModifier'
     pathSelectionType: 'all',
-    focusOnSelect: 'singleOnly'
+    focusOnSelect: false
   });
 
-  return (
-    <div>
+  return (<>
     <div className='relative w-full'>
-    <div className='absolute top-0 left-0 z-20 px-3 py-2'>
+    <div className='absolute top-0 left-0 z-20 px-3 py-2 w-[12rem] flex flex-col gap-2'>
       <ConceptSelect
-        className='w-[10rem]'
         options={GraphLayoutSelector}
         placeholder='Выберите тип'
-        values={layout ? [{ value: layout, label: String(layout) }] : []}
-        onChange={data => { data && setLayout(data[0].value); }}
+        values={layout ? [{ value: layout, label: mapLayoutLabels.get(layout) }] : []}
+        onChange={data => { setLayout(data.length > 0 ? data[0].value : GraphLayoutSelector[0].value); }}
+      />
+      <Checkbox
+        label='Анимация вращения' 
+        widthClass='w-full'
+        value={orbit} 
+        onChange={ event => setOrbit(event.target.checked) }/>
+      <Button
+        text='Центрировать'
+        dense
+        onClick={handleCenter}
       />
     </div>
     </div>
-    <ConceptGraph ref={graphRef}
-      sizeClass='w-[1240px] h-[800px] 2xl:w-[1880px] 2xl:h-[800px]'
-      nodes={nodes}
-      edges={edges}
-      draggable
-      layoutType={layout}
-      selections={selections}
-      actives={actives}
-      onCanvasClick={onCanvasClick}
-      onNodeClick={onNodeClick}
-      onNodePointerOver={onNodePointerOver}
-      onNodePointerOut={onNodePointerOut}
-     // sizingType="default" // 'none' | 'pagerank' | 'centrality' | 'attribute' | 'default';
-      cameraMode={ layout.includes('3d') ? 'rotate' : 'pan'}
+    <div className='flex-wrap w-full h-full overflow-auto'>
+    <div className='relative w-[1240px] h-[800px] 2xl:w-[1880px] 2xl:h-[800px]'>
+      <GraphCanvas
+        draggable
+        ref={graphRef}
+        nodes={nodes}
+        edges={edges}
+        layoutType={layout}
+        selections={selections}
+        actives={actives}
+        onNodeClick={onNodeClick}
+        onCanvasClick={onCanvasClick}
+        defaultNodeSize={5}
+        onNodePointerOver={onNodePointerOver}
+        onNodePointerOut={onNodePointerOut}
+        cameraMode={ orbit ? 'orbit' : layout.includes('3d') ? 'rotate' : 'pan'}
+        layoutOverrides={ layout.includes('tree') ? { nodeLevelRatio: 1 } : undefined }
+        labelFontUrl={resources.graph_font}
+        theme={darkMode ? darkTheme : lightTheme}
       />
     </div>
-  );
+    </div>
+  </>);
 }
 
 
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
index 100bb603..ad23d7a5 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
@@ -8,6 +8,7 @@ import ConceptTab from '../../components/Common/ConceptTab';
 import { Loader } from '../../components/Common/Loader';
 import { useRSForm } from '../../context/RSFormContext';
 import useLocalStorage from '../../hooks/useLocalStorage';
+import { prefixes, timeout_updateUI } from '../../utils/constants';
 import { CstType,type IConstituenta, ICstCreateData, SyntaxTree } from '../../utils/models';
 import { createAliasFor } from '../../utils/staticUI';
 import DlgCloneRSForm from './DlgCloneRSForm';
@@ -42,34 +43,44 @@ function RSTabs() {
   const [showAST, setShowAST] = useState(false);
   
   const [defaultType, setDefaultType] = useState<CstType | undefined>(undefined);
-  const [insertPosition, setInsertPosition] = useState<number | undefined>(undefined);
+  const [insertWhere, setInsertWhere] = useState<number | undefined>(undefined);
   const [showCreateCst, setShowCreateCst] = useState(false);
 
   const handleAddNew = useCallback(
-  (type: CstType) => {
+  (type: CstType, selectedCst?: number) => {
     if (!schema?.items) {
       return;
     }
     const data: ICstCreateData = {
       cst_type: type,
       alias: createAliasFor(type, schema),
-      insert_after: insertPosition ?? null
+      insert_after: selectedCst ?? insertWhere ?? null
     }
     cstCreate(data, newCst => {
       toast.success(`Конституента добавлена: ${newCst.alias}`);
-      if (activeTab === RSTabsList.CST_EDIT) {
-        navigate(`/rsforms/${schema.id}?tab=${RSTabsList.CST_EDIT}&active=${newCst.id}`);
+      navigate(`/rsforms/${schema.id}?tab=${activeTab}&active=${newCst.id}`);    
+      if (activeTab === RSTabsList.CST_EDIT || activeTab == RSTabsList.CST_LIST) {
+        setTimeout(() => {
+          const element = document.getElementById(`${prefixes.cst_list}${newCst.alias}`);
+          if (element) {
+            element.scrollIntoView({
+              behavior: 'smooth',
+              block: "end",
+              inline: "nearest"
+            });
+          }
+        }, timeout_updateUI);
       }
     });
-  }, [schema, cstCreate, insertPosition, navigate, activeTab]);
+  }, [schema, cstCreate, insertWhere, navigate, activeTab]);
 
   const onShowCreateCst = useCallback(
-    (position: number | undefined, type: CstType | undefined, skipDialog?: boolean) => {
+    (selectedID: number | undefined, type: CstType | undefined, skipDialog?: boolean) => {
       if (skipDialog && type) {
-        handleAddNew(type);
+        handleAddNew(type, selectedID);
       } else {
         setDefaultType(type);
-        setInsertPosition(position);
+        setInsertWhere(selectedID);
         setShowCreateCst(true);
       }
     }, [handleAddNew]);
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx
index f88f70d2..ca32c7bb 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx
@@ -87,7 +87,7 @@ function RSTabsMenu({showUploadDialog, showCloneDialog}: RSTabsMenuProps) {
           <DropdownButton onClick={handleDownload}>
             <div className='inline-flex items-center justify-start gap-2'>
               <DownloadIcon color='text-primary' size={4}/>
-              <p>Выгрузить файл Экстеор</p>
+              <p>Выгрузить в Экстеор</p>
             </div>
           </DropdownButton>
           <DropdownButton disabled={!isEditable} onClick={handleUpload}>
@@ -123,9 +123,14 @@ function RSTabsMenu({showUploadDialog, showCloneDialog}: RSTabsMenuProps) {
               </p>
             </div>
           </DropdownButton>
+          {(isOwned || user?.is_staff) &&
           <DropdownButton onClick={toggleReadonly}>
-            <Checkbox value={readonly} label='только чтение'/>
-          </DropdownButton>
+            <Checkbox 
+              value={readonly}
+              label='Я — читатель!'
+              tooltip='Режим чтения'
+            />
+          </DropdownButton>}
           {user?.is_staff &&
           <DropdownButton onClick={toggleForceAdmin}>
             <Checkbox value={forceAdmin} label='режим администратора'/>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/ConstituentaTooltip.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/ConstituentaTooltip.tsx
index bdadbe1c..a7a20516 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/ConstituentaTooltip.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/ConstituentaTooltip.tsx
@@ -1,5 +1,6 @@
 import ConceptTooltip from '../../../components/Common/ConceptTooltip';
 import { IConstituenta } from '../../../utils/models';
+import { getTypeLabel } from '../../../utils/staticUI';
 
 interface ConstituentaTooltipProps {
   data: IConstituenta
@@ -10,11 +11,11 @@ function ConstituentaTooltip({ data, anchor }: ConstituentaTooltipProps) {
   return (
     <ConceptTooltip
       anchorSelect={anchor}
-      className='max-w-[20rem] min-w-[20rem]'
+      className='max-w-[25rem] min-w-[25rem]'
     >
       <h1>Конституента {data.alias}</h1>
-      <p><b>Типизация: </b>{data.parse.typification}</p>
-      <p><b>Тремин: </b>{data.term.resolved || data.term.raw}</p>
+      <p><b>Типизация: </b>{getTypeLabel(data)}</p>
+      <p><b>Термин: </b>{data.term.resolved || data.term.raw}</p>
       {data.definition.formal && <p><b>Выражение: </b>{data.definition.formal}</p>}
       {data.definition.text.resolved && <p><b>Определение: </b>{data.definition.text.resolved}</p>}
       {data.convention && <p><b>Конвенция: </b>{data.convention}</p>}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/ParsingResult.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/ParsingResult.tsx
index 8f9184b1..ef2e9eca 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/ParsingResult.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/ParsingResult.tsx
@@ -1,12 +1,13 @@
-import { IExpressionParse, SyntaxTree } from '../../../utils/models';
+import { IExpressionParse, IRSErrorDescription, SyntaxTree } from '../../../utils/models';
 import { getRSErrorMessage, getRSErrorPrefix } from '../../../utils/staticUI';
 
 interface ParsingResultProps {
   data: IExpressionParse
   onShowAST: (ast: SyntaxTree) => void
+  onShowError: (error: IRSErrorDescription) => void
 }
 
-function ParsingResult({ data, onShowAST }: ParsingResultProps) {
+function ParsingResult({ data, onShowAST, onShowError }: ParsingResultProps) {
   const errorCount = data.errors.reduce((total, error) => (error.isCritical ? total + 1 : total), 0);
   const warningsCount = data.errors.length - errorCount;
 
@@ -19,10 +20,10 @@ function ParsingResult({ data, onShowAST }: ParsingResultProps) {
       <p>Ошибок: <b>{errorCount}</b> | Предупреждений: <b>{warningsCount}</b></p>
       {data.errors.map(error => {
         return (
-        <p className='text-red'>
-          <span className='font-semibold'>{error.isCritical ? 'Ошибка' : 'Предупреждение'} {getRSErrorPrefix(error)}: </span>
-          <span>{getRSErrorMessage(error)}</span>
-          </p>
+        <p className='cursor-pointer text-red' onClick={() => onShowError(error)}>
+          <span className='mr-1 font-semibold underline'>{error.isCritical ? 'Ошибка' : 'Предупреждение'} {getRSErrorPrefix(error)}:</span>
+          <span> {getRSErrorMessage(error)}</span>
+        </p>
         );
       })}
       {data.astText && 
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/StatusBar.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/StatusBar.tsx
index a7c24e03..16764bd6 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/StatusBar.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/StatusBar.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
 import { ExpressionStatus, type IConstituenta, IExpressionParse,inferStatus, ParsingStatus } from '../../../utils/models';
-import { getStatusInfo } from '../../../utils/staticUI';
+import { mapStatusInfo } from '../../../utils/staticUI';
 
 interface StatusBarProps {
   isModified?: boolean
@@ -21,7 +21,7 @@ function StatusBar({ isModified, constituenta, parseData }: StatusBarProps) {
     return inferStatus(constituenta?.parse?.status, constituenta?.parse?.valueClass);
   }, [isModified, constituenta, parseData]);
 
-  const data = getStatusInfo(status);
+  const data = mapStatusInfo.get(status)!;
   return (
     <div title={data.tooltip}
       className={'min-h-[2rem] min-w-[6rem] font-semibold inline-flex border rounded-lg items-center justify-center align-middle ' + data.color}>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx
index 51e4c153..45ada621 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx
@@ -3,9 +3,11 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import Checkbox from '../../../components/Common/Checkbox';
 import ConceptDataTable from '../../../components/Common/ConceptDataTable';
 import { useRSForm } from '../../../context/RSFormContext';
+import { useConceptTheme } from '../../../context/ThemeContext';
 import useLocalStorage from '../../../hooks/useLocalStorage';
+import { prefixes } from '../../../utils/constants';
 import { CstType, extractGlobals,type IConstituenta, matchConstituenta } from '../../../utils/models';
-import { getMockConstituenta } from '../../../utils/staticUI';
+import { getMockConstituenta, mapStatusInfo } from '../../../utils/staticUI';
 import ConstituentaTooltip from './ConstituentaTooltip';
 
 interface ViewSideConstituentsProps {
@@ -13,7 +15,8 @@ interface ViewSideConstituentsProps {
 }
 
 function ViewSideConstituents({ expression }: ViewSideConstituentsProps) {
-  const { schema, setActiveID } = useRSForm();
+  const { darkMode } = useConceptTheme();
+  const { schema, setActiveID, activeID } = useRSForm();
   const [filteredData, setFilteredData] = useState<IConstituenta[]>(schema?.items ?? []);
   const [filterText, setFilterText] = useLocalStorage('side-filter-text', '')
   const [onlyExpression, setOnlyExpression] = useLocalStorage('side-filter-flag', false);
@@ -52,6 +55,16 @@ function ViewSideConstituents({ expression }: ViewSideConstituentsProps) {
     if (cst.id > 0) setActiveID(cst.id);
   }, [setActiveID]);
 
+  const conditionalRowStyles = useMemo(() =>
+  [
+    {
+      when: (cst: IConstituenta) => cst.id === activeID,
+      style: {
+        backgroundColor: darkMode ? '#0068b3' : '#def1ff',
+      },
+    }
+  ], [activeID, darkMode]);
+
   const columns = useMemo(() =>
     [
       {
@@ -63,13 +76,19 @@ function ViewSideConstituents({ expression }: ViewSideConstituentsProps) {
         name: 'ID',
         id: 'alias',
         cell: (cst: IConstituenta) => {
-          return (<div>
-            <span id={cst.alias}>{cst.alias}</span>
-            <ConstituentaTooltip data={cst} anchor={`#${cst.alias}`} />
-          </div>);
+          const info = mapStatusInfo.get(cst.status)!;
+          return (<>
+            <div
+              id={`${prefixes.cst_list}${cst.alias}`}
+              className={`w-full rounded-md text-center ${info.color}`}
+            >
+              {cst.alias}
+            </div>
+            <ConstituentaTooltip data={cst} anchor={`#${prefixes.cst_list}${cst.alias}`} />
+          </>);
         },
-        width: '62px',
-        maxWidth: '62px',
+        width: '65px',
+        maxWidth: '65px',
         conditionalCellStyles: [
           {
             when: (cst: IConstituenta) => cst.id <= 0,
@@ -132,6 +151,7 @@ function ViewSideConstituents({ expression }: ViewSideConstituentsProps) {
       <ConceptDataTable
         data={filteredData}
         columns={columns}
+        conditionalRowStyles={conditionalRowStyles}
         keyField='id'
         noContextMenu
         noDataComponent={<span className='flex flex-col justify-center p-2 text-center'>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/textEditing.ts b/rsconcept/frontend/src/pages/RSFormPage/elements/textEditing.ts
index 78fb79f4..73a09d80 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/textEditing.ts
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/textEditing.ts
@@ -101,9 +101,9 @@ export class TextWrapper implements IManagedText {
 
   insertToken(tokenID: TokenID): boolean {
     switch (tokenID) {
-    case TokenID.NT_DECLARATIVE_EXPR: this.envelopeWith('D{ξ∈X1 | ', '}'); return true;
-    case TokenID.NT_IMPERATIVE_EXPR: this.envelopeWith('I{(σ, γ) | σ:∈X1; γ:=F1[σ]; ', '}'); return true;
-    case TokenID.NT_RECURSIVE_FULL: this.envelopeWith('R{ ξ:=D1 | 1=1 | ', '}'); return true;
+    case TokenID.NT_DECLARATIVE_EXPR: this.envelopeWith('D{ξ∈X1 | P1[ξ]', '}'); return true;
+    case TokenID.NT_IMPERATIVE_EXPR: this.envelopeWith('I{(σ, γ) | σ:∈X1; γ:=F1[σ]; P1[σ, γ]', '}'); return true;
+    case TokenID.NT_RECURSIVE_FULL: this.envelopeWith('R{ ξ:=D1 | F1[ξ]≠∅ | ξ∪F1[ξ]', '}'); return true;
     case TokenID.BIGPR: this.envelopeWith('Pr1(', ')'); return true;
     case TokenID.SMALLPR: this.envelopeWith('pr1(', ')'); return true;
     case TokenID.FILTER: this.envelopeWith('Fi1[α](', ')'); return true;
diff --git a/rsconcept/frontend/src/utils/backendAPI.ts b/rsconcept/frontend/src/utils/backendAPI.ts
index 7dfaa107..26dedbf0 100644
--- a/rsconcept/frontend/src/utils/backendAPI.ts
+++ b/rsconcept/frontend/src/utils/backendAPI.ts
@@ -71,7 +71,7 @@ export function postLogout(request: FrontAction) {
   });
 }
 
-export function postSignup(request: IFrontRequest<IUserSignupData, IUserProfile>) {
+export function postSignup(request: FrontExchange<IUserSignupData, IUserProfile>) {
   AxiosPost({
     title: 'Register user',
     endpoint: `${config.url.AUTH}signup`,
diff --git a/rsconcept/frontend/src/utils/constants.ts b/rsconcept/frontend/src/utils/constants.ts
index c27473b6..a4b5d497 100644
--- a/rsconcept/frontend/src/utils/constants.ts
+++ b/rsconcept/frontend/src/utils/constants.ts
@@ -13,6 +13,9 @@ const dev = {
   }
 };
 
+export const config = process.env.NODE_ENV === 'production' ? prod : dev;
+export const timeout_updateUI = 100;
+
 export const urls = {
   concept: 'https://www.acconcept.ru/',
   exteor32: 'https://drive.google.com/open?id=1IHlMMwaYlAUBRSxU1RU_hXM5mFU9-oyK&usp=drive_fs',
@@ -26,4 +29,6 @@ export const resources = {
   graph_font: 'https://ey2pz3.csb.app/NotoSansSC-Regular.ttf'
 }
 
-export const config = process.env.NODE_ENV === 'production' ? prod : dev;
+export const prefixes = {
+  cst_list: 'cst-list-'
+}
diff --git a/rsconcept/frontend/src/utils/models.ts b/rsconcept/frontend/src/utils/models.ts
index 0af94210..e3bcbb5f 100644
--- a/rsconcept/frontend/src/utils/models.ts
+++ b/rsconcept/frontend/src/utils/models.ts
@@ -21,8 +21,8 @@ export interface IUserSignupData extends Omit<IUser, 'is_staff' | 'id'> {
   password: string
   password2: string
 }
-export interface IUserProfile extends Omit<IUser, 'is_staff'> {}
 export interface IUserUpdateData extends Omit<IUser, 'is_staff' | 'id'> {}
+export interface IUserProfile extends Omit<IUser, 'is_staff'> {}
 export interface IUserInfo extends Omit<IUserProfile, 'email'> {}
 
 // ======== RS Parsing ============
@@ -104,6 +104,7 @@ export interface IConstituenta {
       resolved: string
     }
   }
+  status: ExpressionStatus
   parse: {
     status: ParsingStatus
     valueClass: ValueClass
@@ -216,10 +217,6 @@ export enum ExpressionStatus {
 }
 
 // ========== Model functions =================
-export function extractGlobals(expression: string): Set<string> {
-  return new Set(expression.match(/[XCSADFPT]\d+/g) ?? []);
-}
-
 export function inferStatus(parse?: ParsingStatus, value?: ValueClass): ExpressionStatus {
   if (!parse || !value) {
     return ExpressionStatus.UNDEFINED;
@@ -239,6 +236,10 @@ export function inferStatus(parse?: ParsingStatus, value?: ValueClass): Expressi
   return ExpressionStatus.VERIFIED
 }
 
+export function extractGlobals(expression: string): Set<string> {
+  return new Set(expression.match(/[XCSADFPT]\d+/g) ?? []);
+}
+
 export function LoadRSFormData(schema: IRSFormData): IRSForm {
   const result = schema as IRSForm
   result.graph = new Graph;
@@ -293,6 +294,7 @@ export function LoadRSFormData(schema: IRSFormData): IRSForm {
       (sum, cst) => sum + (cst.cstType === CstType.THEOREM ? 1 : 0), 0)
   }
   result.items.forEach(cst => {
+    cst.status = inferStatus(cst.parse.status, cst.parse.valueClass);
     result.graph.addNode(cst.id);
     const dependencies = extractGlobals(cst.definition.formal);
     dependencies.forEach(value => {
diff --git a/rsconcept/frontend/src/utils/staticUI.ts b/rsconcept/frontend/src/utils/staticUI.ts
index 88d97055..414fd826 100644
--- a/rsconcept/frontend/src/utils/staticUI.ts
+++ b/rsconcept/frontend/src/utils/staticUI.ts
@@ -24,6 +24,23 @@ export function getTypeLabel(cst: IConstituenta) {
   return 'Логический';
 }
 
+export function getCstTypePrefix(type: CstType) {
+  switch (type) {
+  case CstType.BASE: return 'X';
+  case CstType.CONSTANT: return 'C';
+  case CstType.STRUCTURED: return 'S';
+  case CstType.AXIOM: return 'A';
+  case CstType.TERM: return 'D';
+  case CstType.FUNCTION: return 'F';
+  case CstType.PREDICATE: return 'P';
+  case CstType.THEOREM: return 'T';
+  }
+}
+
+export function getCstExpressionPrefix(cst: IConstituenta): string {
+  return cst.alias + (cst.cstType === CstType.STRUCTURED ? '::=' : ':==');
+}
+
 export function getRSButtonData(id: TokenID): IRSButtonData {
   switch (id) {
   case TokenID.BOOLEAN: return {
@@ -96,11 +113,11 @@ export function getRSButtonData(id: TokenID): IRSButtonData {
   };
   case TokenID.IN: return {
     text: '∈',
-    tooltip: 'быть элементом (принадлежит) [Alt + \']'
+    tooltip: 'быть элементом (принадлежит) [Alt + 1]'
   };
   case TokenID.NOTIN: return {
     text: '∉',
-    tooltip: 'не принадлежит [Alt + Shift + \']'
+    tooltip: 'не принадлежит [Alt + Shift + 1]'
   };
   case TokenID.SUBSET_OR_EQ: return {
     text: '⊆',
@@ -172,11 +189,11 @@ export function getRSButtonData(id: TokenID): IRSButtonData {
   };
   case TokenID.PUNC_ASSIGN: return {
     text: ':=',
-    tooltip: 'присвоение (императивный синтаксис)'
+    tooltip: 'присвоение (императивный синтаксис) [Alt + Shift + 6]'
   };
   case TokenID.PUNC_ITERATE: return {
     text: ':∈',
-    tooltip: 'перебор элементов множества (императивный синтаксис)'
+    tooltip: 'перебор элементов множества (императивный синтаксис) [Alt + 6]'
   };
   }
   return {
@@ -218,74 +235,70 @@ export const CstTypeSelector = (Object.values(CstType)).map(
     return { value: type, label: getCstTypeLabel(type) };
 });
 
+export const mapLayoutLabels: Map<string, string> = new Map([
+  ['forceatlas2', 'Атлас 2D'],
+  ['forceDirected2d', 'Силы 2D'],
+  ['forceDirected3d', 'Силы 3D'],
+  ['treeTd2d', 'ДеревоВерт 2D'],
+  ['treeTd3d', 'ДеревоВерт 3D'],
+  ['treeLr2d', 'ДеревоГор 2D'],
+  ['treeLr3d', 'ДеревоГор 3D'],
+  ['radialOut2d', 'Радиальная 2D'],
+  ['radialOut3d', 'Радиальная 3D'],
+  ['circular2d', 'Круговая'],
+  ['hierarchicalTd', 'ИерархияВерт'],
+  ['hierarchicalLr', 'ИерархияГор'],
+  ['nooverlap', 'Без перекрытия']
+]);
+
 export const GraphLayoutSelector: {value: LayoutTypes, label: string}[] = [
-  { value: 'forceatlas2', label: 'forceatlas2'},
-  { value: 'nooverlap', label: 'nooverlap'},
-  { value: 'forceDirected2d', label: 'forceDirected2d'},
-  { value: 'forceDirected3d', label: 'forceDirected3d'},
-  { value: 'circular2d', label: 'circular2d'},
-  { value: 'treeTd2d', label: 'treeTd2d'},
-  { value: 'treeTd3d', label: 'treeTd3d'},
-  { value: 'treeLr2d', label: 'treeLr2d'},
-  { value: 'treeLr3d', label: 'treeLr3d'},
-  { value: 'radialOut2d', label: 'radialOut2d'},
-  { value: 'radialOut3d', label: 'radialOut3d'},
-//  { value: 'hierarchicalTd', label: 'hierarchicalTd'},
-//  { value: 'hierarchicalLr', label: 'hierarchicalLr'}
+  { value: 'forceatlas2', label: 'Атлас 2D'},
+  { value: 'forceDirected2d', label: 'Силы 2D'},
+  { value: 'forceDirected3d', label: 'Силы 3D'},
+  { value: 'treeTd2d', label: 'ДеревоВ 2D'},
+  { value: 'treeTd3d', label: 'ДеревоВ 3D'},
+  { value: 'treeLr2d', label: 'ДеревоГ 2D'},
+  { value: 'treeLr3d', label: 'ДеревоГ 3D'},
+  { value: 'radialOut2d', label: 'Радиальная 2D'},
+  { value: 'radialOut3d', label: 'Радиальная 3D'},
+  // { value: 'circular2d', label: 'circular2d'},
+  //  { value: 'nooverlap', label: 'nooverlap'},
+  //  { value: 'hierarchicalTd', label: 'hierarchicalTd'},
+  //  { value: 'hierarchicalLr', label: 'hierarchicalLr'}
 ];
 
-export function getCstTypePrefix(type: CstType) {
-  switch (type) {
-  case CstType.BASE: return 'X';
-  case CstType.CONSTANT: return 'C';
-  case CstType.STRUCTURED: return 'S';
-  case CstType.AXIOM: return 'A';
-  case CstType.TERM: return 'D';
-  case CstType.FUNCTION: return 'F';
-  case CstType.PREDICATE: return 'P';
-  case CstType.THEOREM: return 'T';
-  }
-}
-
-export function getStatusInfo(status?: ExpressionStatus): IStatusInfo {
-  switch (status) {
-  case ExpressionStatus.UNDEFINED: return {
-    text: 'N/A',
-    color: 'bg-[#b3bdff] dark:bg-[#1e00b3]',
-    tooltip: 'произошла ошибка при проверке выражения'
-  };
-  case ExpressionStatus.UNKNOWN: return {
-    text: 'неизв',
-    color: 'bg-[#b3bdff] dark:bg-[#1e00b3]',
-    tooltip: 'требует проверки выражения'
-  };
-  case ExpressionStatus.INCORRECT: return {
-    text: 'ошибка',
-    color: 'bg-[#ff8080] dark:bg-[#800000]',
-    tooltip: 'ошибка в выражении'
-  };
-  case ExpressionStatus.INCALCULABLE: return {
-    text: 'невыч',
-    color: 'bg-[#ffbb80] dark:bg-[#964600]',
-    tooltip: 'выражение не вычислимо (экспоненциальная сложность)'
-  };
-  case ExpressionStatus.PROPERTY: return {
-    text: 'св-во',
-    color: 'bg-[#a5e9fa] dark:bg-[#36899e]',
-    tooltip: 'можно проверить принадлежность, но нельзя получить значение'
-  };
-  case ExpressionStatus.VERIFIED: return {
+export const mapStatusInfo: Map<ExpressionStatus, IStatusInfo> = new Map([
+  [ ExpressionStatus.VERIFIED, {
     text: 'ок',
     color: 'bg-[#aaff80] dark:bg-[#2b8000]',
     tooltip: 'выражение корректно и вычислимо'
-  };
-  }
-  return {
-    text: 'undefined',
-    color: '',
-    tooltip: '!ERROR!'
-  };
-}
+  }],
+  [ ExpressionStatus.INCORRECT, {
+    text: 'ошибка',
+    color: 'bg-[#ffc9c9] dark:bg-[#592b2b]',
+    tooltip: 'ошибка в выражении'
+  }],
+  [ ExpressionStatus.INCALCULABLE, {
+    text: 'невыч',
+    color: 'bg-[#ffbb80] dark:bg-[#964600]',
+    tooltip: 'выражение не вычислимо (экспоненциальная сложность)'
+  }],
+  [ ExpressionStatus.PROPERTY, {
+    text: 'св-во',
+    color: 'bg-[#a5e9fa] dark:bg-[#36899e]',
+    tooltip: 'можно проверить принадлежность, но нельзя получить значение'
+  }],
+  [ ExpressionStatus.UNKNOWN, {
+    text: 'неизв',
+    color: 'bg-[#b3bdff] dark:bg-[#1e00b3]',
+    tooltip: 'требует проверки выражения'
+  }],
+  [ ExpressionStatus.UNDEFINED, {
+    text: 'N/A',
+    color: 'bg-[#b3bdff] dark:bg-[#1e00b3]',
+    tooltip: 'произошла ошибка при проверке выражения'
+  }],
+]);
 
 export function createAliasFor(type: CstType, schema: IRSForm): string {
   const prefix = getCstTypePrefix(type);
@@ -320,6 +333,7 @@ export function getMockConstituenta(id: number, alias: string, type: CstType, co
         resolved: ''
       }
     },
+    status: ExpressionStatus.INCORRECT,
     parse: {
       status: ParsingStatus.INCORRECT,
       valueClass: ValueClass.INVALID,
@@ -365,7 +379,7 @@ export function getRSErrorMessage(error: IRSErrorDescription): string {
   case RSErrorType.localDoubleDeclare: 
     return `Предупреждение! Повторное объявление локальной переменной ${error.params[0]}`;
   case RSErrorType.localNotUsed: 
-    return `Предупреждение! Переменная объявлена но не использована: ${error.params[0]}`;
+    return `Предупреждение! Переменная объявлена, но не использована: ${error.params[0]}`;
   case RSErrorType.localShadowing: 
     return `Повторное объявление переменной: ${error.params[0]}`;