F: Improve panel UI

rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/side-panel/side-panel.tsx

@@ -50,21 +50,22 @@ export function SidePanel({ isMounted, className }: SidePanelProps) {
         icon={<IconClose size='1.25rem' />}
         className={clsx(
           'absolute z-pop transition-transform duration-move right-0 top-0',
-          noNavigationAnimation ? '-translate-x-4 translate-y-0' : 'translate-x-0 translate-y-2'
+          noNavigationAnimation ? '-translate-x-4 translate-y-0' : 'translate-x-0 translate-y-1'
         )}
         onClick={closePanel}
       />
 
+      {!selectedSchema ? (
         <div
           className={clsx(
             'mt-0 mb-1',
             'font-medium text-sm select-none self-center',
-          'transition-transform',
             selectedSchema && 'translate-x-20'
           )}
         >
           Содержание
         </div>
+      ) : null}
 
       {!selectedOperation && !selectedBlock ? (
         <div className='text-center text-sm cc-fade-in'>Выделите операцию или блок для просмотра</div>

rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/side-panel/toolbar-constituents.tsx

@@ -15,12 +15,15 @@ import {
   IconMoveDown,
   IconMoveUp,
   IconNewItem,
-  IconRSForm
+  IconRSForm,
+  IconTree,
+  IconTypeGraph
 } from '@/components/icons';
 import { cn } from '@/components/utils';
 import { useDialogsStore } from '@/stores/dialogs';
 import { PARAMETER, prefixes } from '@/utils/constants';
 import { type RO } from '@/utils/meta';
+import { notImplemented } from '@/utils/utils';
 
 interface ToolbarConstituentsProps {
   schema: IRSForm;
@@ -48,6 +51,7 @@ export function ToolbarConstituents({
 
   const showCreateCst = useDialogsStore(state => state.showCreateCst);
   const showDeleteCst = useDialogsStore(state => state.showDeleteCst);
+  const showTypeGraph = useDialogsStore(state => state.showShowTypeGraph);
   const { moveConstituents } = useMoveConstituents();
   const { createConstituenta } = useCreateConstituenta();
 
@@ -162,6 +166,15 @@ export function ToolbarConstituents({
     });
   }
 
+  function handleShowTypeGraph() {
+    const typeInfo = schema.items.map(item => ({
+      alias: item.alias,
+      result: item.parse.typification,
+      args: item.parse.args
+    }));
+    showTypeGraph({ items: typeInfo });
+  }
+
   return (
     <div className={cn('flex gap-0.5', className)}>
       <MiniButton
@@ -176,7 +189,6 @@ export function ToolbarConstituents({
         onClick={onEditActive}
         disabled={!isMutable || isProcessing || !activeCst}
       />
-
       <MiniButton
         title='Создать конституенту'
         icon={<IconNewItem size='1rem' className='icon-green' />}
@@ -209,6 +221,17 @@ export function ToolbarConstituents({
         onClick={moveDown}
         disabled={!isMutable || !activeCst || isProcessing || schema.items.length < 2 || hasSearch}
       />
+
+      <MiniButton
+        icon={<IconTree size='1rem' className='hover:text-primary' />}
+        title='Граф термов'
+        onClick={notImplemented}
+      />
+      <MiniButton
+        icon={<IconTypeGraph size='1rem' className='hover:text-primary' />}
+        title='Граф ступеней'
+        onClick={handleShowTypeGraph}
+      />
     </div>
   );
 }

rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/side-panel/view-schema.tsx

@@ -22,9 +22,9 @@ export function ViewSchema({ schemaID, isMutable }: ViewSchemaProps) {
   const listHeight = useFitHeight('14.5rem', '10rem');
 
   return (
-    <div className='grid h-full relative cc-fade-in' style={{ gridTemplateRows: '1fr auto' }}>
+    <div className='grid h-full relative cc-fade-in mt-5' style={{ gridTemplateRows: '1fr auto' }}>
       <ToolbarConstituents
-        className='absolute -top-7 left-1'
+        className='absolute -top-6.5 left-1'
         schema={schema}
         activeCst={activeCst}
         isMutable={isMutable}

rsconcept/frontend/src/utils/utils.ts

@@ -180,7 +180,7 @@ export function sharePage() {
  * Show error message about not implemented function.
  */
 export function notImplemented() {
-  toast.error('Данная функция еще не реализована');
+  toast.error('Функционал в разработке');
   console.error('Not implemented');
 }