Implement GraphEditor params

rsconcept/frontend/src/components/Help/CstClassInfo.tsx

@@ -0,0 +1,29 @@
+import { prefixes } from '../../utils/constants';
+import { mapCstClassInfo } from '../../utils/staticUI';
+
+interface CstClassInfoProps {
+  title?: string
+}
+
+function CstClassInfo({ title }: CstClassInfoProps) {
+  return (
+    <div className='flex flex-col gap-1'>
+      { title && <h1>{title}</h1>}
+      { [... mapCstClassInfo.values()].map(
+      (info, index) => {
+        return (
+        <p key={`${prefixes.cst_status_list}${index}`}>
+          <span className={`px-1 inline-block font-semibold min-w-[6.5rem] text-center border ${info.color}`}>
+            {info.text}
+          </span>
+          <span> - </span>
+          <span>
+            {info.tooltip}
+          </span>
+        </p>);
+      })}
+    </div>
+  );
+}
+
+export default CstClassInfo;

rsconcept/frontend/src/components/Help/CstStatusInfo.tsx

@@ -7,13 +7,13 @@ interface CstStatusInfoProps {
 
 function CstStatusInfo({ title }: CstStatusInfoProps) {
   return (
-    <>
+    <div className='flex flex-col gap-1'>
       { title && <h1>{title}</h1>}
       { [... mapStatusInfo.values()].map(
       (info, index) => {
         return (
-        <p className='py-1' key={`${prefixes.cst_status_list}${index}`}>
+        <p key={`${prefixes.cst_status_list}${index}`}>
-          <span className={`inline-block font-semibold min-w-[4rem] text-center border ${info.color}`}>
+          <span className={`px-1 inline-block font-semibold min-w-[4rem] text-center border ${info.color}`}>
             {info.text}
           </span>
           <span> - </span>
@@ -22,7 +22,7 @@ function CstStatusInfo({ title }: CstStatusInfoProps) {
           </span>
         </p>);
       })}
-    </>
+    </div>
   );
 }
 

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

@@ -0,0 +1,144 @@
+import { useLayoutEffect, useState } from 'react';
+
+import Checkbox from '../../components/Common/Checkbox';
+import Modal from '../../components/Common/Modal';
+import { CstType } from '../../utils/models';
+import { getCstTypeLabel } from '../../utils/staticUI';
+import { GraphEditorParams } from './EditorTermGraph';
+
+interface DlgGraphOptionsProps {
+  hideWindow: () => void
+  initial: GraphEditorParams
+  onConfirm: (params: GraphEditorParams) => void
+}
+
+function DlgGraphOptions({ hideWindow, initial, onConfirm }:DlgGraphOptionsProps) {
+  const [ noHermits, setNoHermits ] = useState(true);
+  const [ noTransitive, setNoTransitive ] = useState(false);
+  const [ noTemplates, setNoTemplates ] = useState(true);
+
+  const [ allowBase, setAllowBase ] = useState(true);
+  const [ allowStruct, setAllowStruct ] = useState(true);
+  const [ allowTerm, setAllowTerm ] = useState(true);
+  const [ allowAxiom, setAllowAxiom ] = useState(true);
+  const [ allowFunction, setAllowFunction ] = useState(true);
+  const [ allowPredicate, setAllowPredicate ] = useState(true);
+  const [ allowConstant, setAllowConstant ] = useState(true);
+  const [ allowTheorem, setAllowTheorem ] = useState(true);
+
+  function getParams() {
+    return {
+      noHermits: noHermits,
+      noTransitive: noTransitive,
+      noTemplates: noTemplates,
+
+      allowBase: allowBase,
+      allowStruct: allowStruct,
+      allowTerm: allowTerm,
+      allowAxiom: allowAxiom,
+      allowFunction: allowFunction,
+      allowPredicate: allowPredicate,
+      allowConstant: allowConstant,
+      allowTheorem: allowTheorem
+    }
+  }
+
+  const handleSubmit = () => {
+    hideWindow();
+    onConfirm(getParams());
+  };
+
+  useLayoutEffect(() => {
+    setNoHermits(initial.noHermits);
+    setNoTransitive(initial.noTransitive);
+    setNoTemplates(initial.noTemplates);
+
+    setAllowBase(initial.allowBase);
+    setAllowStruct(initial.allowStruct);
+    setAllowTerm(initial.allowTerm);
+    setAllowAxiom(initial.allowAxiom);
+    setAllowFunction(initial.allowFunction);
+    setAllowPredicate(initial.allowPredicate);
+    setAllowConstant(initial.allowConstant);
+    setAllowTheorem(initial.allowTheorem);
+  }, [initial]);
+
+  return (
+    <Modal
+      hideWindow={hideWindow}
+      title='Настройки графа термов'
+      onSubmit={handleSubmit}
+      canSubmit
+      submitText='Применить'
+    >
+      <div className='flex gap-2'>
+        <div className='flex flex-col'>
+          <h1>Преобразования</h1>
+          <Checkbox
+            label='Скрыть несвязанные'
+            tooltip='Неиспользуемые конституенты'
+            value={noHermits} 
+            onChange={ event => setNoHermits(event.target.checked) }
+          />
+          <Checkbox
+            label='Скрыть шаблоны'
+            tooltip='Терм-функции и предикат-функции с параметризованными аргументами'
+            value={noTemplates} 
+            onChange={ event => setNoTemplates(event.target.checked) }
+          />
+          <Checkbox
+            label='Транзитивная редукция'
+            tooltip='Удалить связи, образующие транзитивные пути в графе'
+            value={noTransitive} 
+            onChange={ event => setNoTransitive(event.target.checked) }
+          />
+        </div>
+        <div className='flex flex-col'>
+          <h1>Типы конституент</h1>
+          <Checkbox
+            label={getCstTypeLabel(CstType.BASE)}
+            value={allowBase} 
+            onChange={ event => setAllowBase(event.target.checked) }
+          />
+          <Checkbox
+            label={getCstTypeLabel(CstType.STRUCTURED)}
+            value={allowStruct} 
+            onChange={ event => setAllowStruct(event.target.checked) }
+          />
+          <Checkbox
+            label={getCstTypeLabel(CstType.TERM)}
+            value={allowTerm} 
+            onChange={ event => setAllowTerm(event.target.checked) }
+          />
+          <Checkbox
+            label={getCstTypeLabel(CstType.AXIOM)}
+            value={allowAxiom} 
+            onChange={ event => setAllowAxiom(event.target.checked) }
+          />
+          <Checkbox
+            label={getCstTypeLabel(CstType.FUNCTION)}
+            value={allowFunction} 
+            onChange={ event => setAllowFunction(event.target.checked) }
+          />
+          <Checkbox
+            label={getCstTypeLabel(CstType.PREDICATE)}
+            value={allowPredicate} 
+            onChange={ event => setAllowPredicate(event.target.checked) }
+          />
+          <Checkbox
+            label={getCstTypeLabel(CstType.CONSTANT)}
+            value={allowConstant} 
+            onChange={ event => setAllowConstant(event.target.checked) }
+          />
+          <Checkbox
+            label={getCstTypeLabel(CstType.THEOREM)}
+            value={allowTheorem} 
+            onChange={ event => setAllowTheorem(event.target.checked) }
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+export default DlgGraphOptions;

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

@@ -157,8 +157,8 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
     setSelected(selectedRows.map(cst => cst.id));
   }, [setSelected]);
 
-  const columns = useMemo(() =>
+  const columns = useMemo(
-    [
+  () => [
     {
       name: 'ID',
       id: 'id',
@@ -242,8 +242,7 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
       reorder: true,
       hide: 1800
     }
-    ], []
+  ], []);
-  );
 
   return (
     <div className='w-full'>

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

@@ -8,19 +8,22 @@ import Checkbox from '../../components/Common/Checkbox';
 import ConceptSelect from '../../components/Common/ConceptSelect';
 import ConceptTooltip from '../../components/Common/ConceptTooltip';
 import Divider from '../../components/Common/Divider';
+import MiniButton from '../../components/Common/MiniButton';
 import ConstituentaInfo from '../../components/Help/ConstituentaInfo';
+import CstClassInfo from '../../components/Help/CstClassInfo';
 import CstStatusInfo from '../../components/Help/CstStatusInfo';
-import { ArrowsRotateIcon, HelpIcon } from '../../components/Icons';
+import { ArrowsRotateIcon, FilterCogIcon, HelpIcon } from '../../components/Icons';
 import { useRSForm } from '../../context/RSFormContext';
 import { useConceptTheme } from '../../context/ThemeContext';
 import useLocalStorage from '../../hooks/useLocalStorage';
 import { prefixes, resources } from '../../utils/constants';
 import { Graph } from '../../utils/Graph';
-import { IConstituenta } from '../../utils/models';
+import { CstType, IConstituenta } from '../../utils/models';
-import { getCstStatusColor, getCstTypeColor, 
+import { getCstClassColor, getCstStatusColor, 
   GraphColoringSelector, GraphLayoutSelector,
-  mapColoringLabels, mapLayoutLabels, mapStatusInfo
+  mapColoringLabels, mapLayoutLabels
 } from '../../utils/staticUI';
+import DlgGraphOptions from './DlgGraphOptions';
 import ConstituentaTooltip from './elements/ConstituentaTooltip';
 
 export type ColoringScheme = 'none' | 'status' | 'type';
@@ -28,12 +31,27 @@ const TREE_SIZE_MILESTONE = 50;
 
 function getCstNodeColor(cst: IConstituenta, coloringScheme: ColoringScheme, darkMode: boolean): string {
   if (coloringScheme === 'type') {
-    return getCstTypeColor(cst.cstType, darkMode);
+    return getCstClassColor(cst.cstClass, darkMode);
   }
   if (coloringScheme === 'status') {
     return getCstStatusColor(cst.status, darkMode);
   }
-  return '';
+  return (darkMode ? '#7a8c9e' :'#7ca0ab');
+}
+
+export interface GraphEditorParams {
+  noHermits: boolean
+  noTransitive: boolean
+  noTemplates: boolean
+
+  allowBase: boolean
+  allowStruct: boolean
+  allowTerm: boolean
+  allowAxiom: boolean
+  allowFunction: boolean
+  allowPredicate: boolean
+  allowConstant: boolean
+  allowTheorem: boolean
 }
 
 interface EditorTermGraphProps {
@@ -49,13 +67,24 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
   const [ layout, setLayout ] = useLocalStorage<LayoutTypes>('graph_layout', 'treeTd2d');
   const [ coloringScheme, setColoringScheme ] = useLocalStorage<ColoringScheme>('graph_coloring', 'none');
   const [ orbit, setOrbit ] = useState(false);
+  
   const [ noHermits, setNoHermits ] = useLocalStorage('graph_no_hermits', true);
   const [ noTransitive, setNoTransitive ] = useLocalStorage('graph_no_transitive', false);
+  const [ noTemplates, setNoTemplates ] = useLocalStorage('graph_no_templates', false);
+  const [ allowBase, setAllowBase ] = useLocalStorage('graph_allow_base', true);
+  const [ allowStruct, setAllowStruct ] = useLocalStorage('graph_allow_struct', true);
+  const [ allowTerm, setAllowTerm ] = useLocalStorage('graph_allow_term', true);
+  const [ allowAxiom, setAllowAxiom ] = useLocalStorage('graph_allow_axiom', true);
+  const [ allowFunction, setAllowFunction ] = useLocalStorage('function', true);
+  const [ allowPredicate, setAllowPredicate ] = useLocalStorage('graph_allow_predicate', true);
+  const [ allowConstant, setAllowConstant ] = useLocalStorage('graph_allow_constant', true);
+  const [ allowTheorem, setAllowTheorem ] = useLocalStorage('graph_allow_theorem', true);
   
   const [ filtered, setFiltered ] = useState<Graph>(new Graph());
   const [ dismissed, setDismissed ] = useState<number[]>([]);
   const [ selectedDismissed, setSelectedDismissed ] = useState<number[]>([]);
   const graphRef = useRef<GraphCanvasRef | null>(null);
+  const [showOptions, setShowOptions] = useState(false);
   
   const [hoverID, setHoverID] = useState<string | undefined>(undefined);
   const hoverCst = useMemo(
@@ -64,6 +93,19 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
   }, [schema?.items, hoverID]);
 
   const is3D = useMemo(() => layout.includes('3d'), [layout]);
+  const allowedTypes: CstType[] = useMemo(
+  () => {
+    const result: CstType[]  = [];
+    if (allowBase) result.push(CstType.BASE);
+    if (allowStruct) result.push(CstType.STRUCTURED);
+    if (allowTerm) result.push(CstType.TERM);
+    if (allowAxiom) result.push(CstType.AXIOM);
+    if (allowFunction) result.push(CstType.FUNCTION);
+    if (allowPredicate) result.push(CstType.PREDICATE);
+    if (allowConstant) result.push(CstType.CONSTANT);
+    if (allowTheorem) result.push(CstType.THEOREM);
+    return result;
+  }, [allowBase, allowStruct, allowTerm, allowAxiom, allowFunction, allowPredicate, allowConstant, allowTheorem]);
 
   useEffect(
   () => {
@@ -78,6 +120,20 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
     if (noTransitive) {
       graph.transitiveReduction();
     }
+    if (noTemplates) {
+      schema.items.forEach(cst => {
+        if (cst.isTemplate) {
+          graph.foldNode(cst.id);
+        }
+      });
+    }
+    if (allowedTypes.length < Object.values(CstType).length) {
+      schema.items.forEach(cst => {
+        if (!allowedTypes.includes(cst.cstType)) {
+          graph.foldNode(cst.id);
+        }
+      });
+    }
     const newDismissed: number[] = [];
     schema.items.forEach(cst => {
       if (!graph.nodes.has(cst.id)) {
@@ -88,7 +144,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
     setDismissed(newDismissed);
     setSelectedDismissed([]);
     setHoverID(undefined);
-  }, [schema, noHermits, noTransitive]);
+  }, [schema, noHermits, noTransitive, noTemplates, allowedTypes]);
 
   function toggleDismissed(cstID: number) {
     setSelectedDismissed(prev => {
@@ -153,7 +209,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
     focusOnSelect: false
   });
 
-  const handleCenter = useCallback(
+  const handleRecreate = useCallback(
   () => {
     graphRef.current?.resetControls();
     graphRef.current?.centerGraph();
@@ -180,6 +236,41 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
     if (onNodeClick) onNodeClick(node);
   }, [onNodeClick, selections, onOpenEdit]);
 
+  function getOptions() {
+    return {
+      noHermits: noHermits,
+      noTemplates: noTemplates,
+      noTransitive: noTransitive,
+
+      allowBase: allowBase,
+      allowStruct: allowStruct,
+      allowTerm: allowTerm,
+      allowAxiom: allowAxiom,
+      allowFunction: allowFunction,
+      allowPredicate: allowPredicate,
+      allowConstant: allowConstant,
+      allowTheorem: allowTheorem
+    }
+  }
+
+  const handleChangeOptions = useCallback(
+  (params: GraphEditorParams) => {
+    setNoHermits(params.noHermits);
+    setNoTransitive(params.noTransitive);
+    setNoTemplates(params.noTemplates);
+
+    setAllowBase(params.allowBase);
+    setAllowStruct(params.allowStruct);
+    setAllowTerm(params.allowTerm);
+    setAllowAxiom(params.allowAxiom);
+    setAllowFunction(params.allowFunction);
+    setAllowPredicate(params.allowPredicate);
+    setAllowConstant(params.allowConstant);
+    setAllowTheorem(params.allowTheorem);
+  }, [setNoHermits, setNoTransitive, setNoTemplates, 
+    setAllowBase, setAllowStruct, setAllowTerm, setAllowAxiom, setAllowFunction, 
+    setAllowPredicate, setAllowConstant, setAllowTheorem]);
+
   const canvasWidth = useMemo(
   () => {
     return 'calc(100vw - 14.6rem)';
@@ -199,6 +290,12 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
 
   return (
     <div className='flex justify-between w-full'>
+    {showOptions && 
+    <DlgGraphOptions
+      hideWindow={() => setShowOptions(false)}
+      initial={getOptions()}
+      onConfirm={handleChangeOptions}
+    />}
     <div className='flex flex-col py-2 border-t border-r w-[14.7rem] pr-2 text-sm' style={{height: canvasHeight}}>
       {hoverCst && 
       <div className='relative'>
@@ -209,11 +306,11 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
       </div>}
       <div className='flex items-center w-full gap-1'>
         <Button
-          icon={<ArrowsRotateIcon size={7} />}
+          icon={<FilterCogIcon size={7} />}
           dense
-          tooltip='Центрировать изображение'
+          tooltip='Настройки фильтрации узлов и связей'
           widthClass='h-full'
-          onClick={handleCenter}
+          onClick={() => setShowOptions(true)}
         />
         <ConceptSelect
           className='min-w-[9.3rem]'
@@ -239,11 +336,6 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
         value={orbit} 
         onChange={ event => setOrbit(event.target.checked) }
       />
-      <Checkbox
-        label='Удалить несвязанные' 
-        value={noHermits} 
-        onChange={ event => setNoHermits(event.target.checked) }
-      />
       <Checkbox
         label='Транзитивная редукция' 
         value={noTransitive} 
@@ -257,13 +349,13 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
         <div className='flex flex-wrap justify-center gap-2 py-2'>
         {dismissed.map(cstID => {
           const cst = schema!.items.find(cst => cst.id === cstID)!;
-          const info = mapStatusInfo.get(cst.status)!;
+          const adjustedColoring = coloringScheme === 'none' ? 'status': coloringScheme;
           return (<>
             <div
               key={`${cst.alias}`}
               id={`${prefixes.cst_list}${cst.alias}`}
-              className={`w-fit min-w-[3rem] rounded-md text-center cursor-pointer ${info.color}`}
+              className='w-fit min-w-[3rem] rounded-md text-center cursor-pointer]'
-              style={dismissedStyle(cstID)}
+              style={ { backgroundColor: getCstNodeColor(cst, adjustedColoring, darkMode), ...dismissedStyle(cstID) }}
               onClick={() => toggleDismissed(cstID)}
               onDoubleClick={() => onOpenEdit(cstID)}
             >
@@ -283,28 +375,31 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
       className='relative border-t border-r'
       style={{width: canvasWidth, height: canvasHeight, borderBottomWidth: noNavigation ? '1px': ''}}
     >
-      <div id='items-graph-help' className='relative top-0 right-0 z-10 m-2'>
+      <div className='relative top-0 right-0 z-10 flex m-2 flex-start'>
+        <div className='px-1 py-1' id='items-graph-help' >
           <HelpIcon color='text-primary' size={6} />
         </div>
+        <MiniButton
+          icon={<ArrowsRotateIcon size={6} />}
+          tooltip='Пересоздать граф'
+          onClick={handleRecreate}
+        />
+      </div>
       <ConceptTooltip anchorSelect='#items-graph-help'>
         <div>
           <h1>Настройка графа</h1>
           <p><b>Цвет</b> - выбор правила покраски узлов</p>
-          <p><i>Скрытые конституенты окрашены в цвет статуса</i></p>
           <p><b>Граф</b> - выбор модели расположения узлов</p>
           <p><b>Удалить несвязанные</b> - в графе не отображаются одинокие вершины</p>
           <p><b>Транзитивная редукция</b> - в графе устраняются транзитивные пути</p>
 
           <Divider margins='mt-2' />
 
-          <h1>Горячие клавиши</h1>
+          <CstClassInfo title='Классы конституент' />
-          <p><b>Двойной клик</b> - редактирование конституенты</p>
-          <p><b>Delete</b> - удаление конституент</p>
-          <p><b>Alt + 1-6,Q,W</b> - добавление конституент</p>
 
           <Divider margins='mt-2' />
           
-          <CstStatusInfo title='Статусы' />
+          <CstStatusInfo title='Статусы конституент' />
         </div>
       </ConceptTooltip>
       <GraphCanvas
@@ -321,7 +416,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
         onNodePointerOut={handleHoverOut}
         cameraMode={ orbit ? 'orbit' : is3D ? 'rotate' : 'pan'}
         layoutOverrides={ 
-          layout.includes('tree') ? { nodeLevelRatio: schema && schema?.items.length < TREE_SIZE_MILESTONE ? 3 : 1 } 
+          layout.includes('tree') ? { nodeLevelRatio: filtered.nodes.size < TREE_SIZE_MILESTONE ? 3 : 1 } 
           : undefined
         }
         labelFontUrl={resources.graph_font}

rsconcept/frontend/src/utils/Graph.test.ts

@@ -45,6 +45,16 @@ describe('Testing Graph editing', () => {
     expect(graph.hasEdge(4, 1)).toBeFalsy();
   });
 
+  test('folding node redirectes edges', () => {
+    const graph = new Graph([[1, 3], [2, 3], [3, 4], [3, 5], [3, 3]]);
+    graph.foldNode(3);
+    expect(graph.hasNode(3)).toBeFalsy();
+    expect(graph.hasEdge(1, 4)).toBeTruthy();
+    expect(graph.hasEdge(1, 5)).toBeTruthy();
+    expect(graph.hasEdge(2, 4)).toBeTruthy();
+    expect(graph.hasEdge(2, 5)).toBeTruthy();
+  });
+
   test('removing isolated nodes', () => {
     const graph = new Graph([[9, 1], [9, 2], [2, 1], [4, 3], [5, 9], [7], [8]]);
     graph.removeIsolated()
@@ -53,7 +63,7 @@ describe('Testing Graph editing', () => {
 
   test('transitive reduction', () => {
     const graph = new Graph([[1, 3], [1, 2], [2, 3]]);
-    graph.transitiveReduction()
+    graph.transitiveReduction();
     expect(graph.hasEdge(1, 2)).toBeTruthy();
     expect(graph.hasEdge(2, 3)).toBeTruthy();
     expect(graph.hasEdge(1, 3)).toBeFalsy();

rsconcept/frontend/src/utils/Graph.ts

@@ -67,6 +67,10 @@ export class Graph {
     return node;
   }
 
+  hasNode(target: number): boolean {
+    return !!this.nodes.get(target);
+  }
+
   removeNode(target: number): GraphNode | null {
     const nodeToRemove = this.nodes.get(target);
     if (!nodeToRemove) {
@@ -80,6 +84,19 @@ export class Graph {
     return nodeToRemove;
   }
 
+  foldNode(target: number): GraphNode | null {
+    const nodeToRemove = this.nodes.get(target);
+    if (!nodeToRemove) {
+      return null;
+    }
+    nodeToRemove.inputs.forEach(input => {
+      nodeToRemove.outputs.forEach(output => {
+        this.addEdge(input, output);
+      })
+    });
+    return this.removeNode(target);
+  }
+
   removeIsolated(): GraphNode[] {
     const result: GraphNode[] = [];
     this.nodes.forEach(node => {

rsconcept/frontend/src/utils/models.ts

@@ -101,6 +101,13 @@ export enum CstType {
   THEOREM = 'theorem'
 }
 
+export enum CstClass {
+  BASIC = 'basic',
+  DERIVED = 'derived',
+  STATEMENT = 'statement',
+  TEMPLATE = 'template'
+}
+
 export interface IConstituenta {
   id: number
   alias: string
@@ -118,7 +125,9 @@ export interface IConstituenta {
       resolved: string
     }
   }
+  cstClass: CstClass
   status: ExpressionStatus
+  isTemplate: boolean
   parse: {
     status: ParsingStatus
     valueClass: ValueClass
@@ -230,12 +239,12 @@ export enum EditMode {
 
 // RSExpression status
 export enum ExpressionStatus {
-  UNDEFINED = 0,
+  UNDEFINED = 'undefined',
-  UNKNOWN,
+  UNKNOWN = 'unknown',
-  INCORRECT,
+  INCORRECT = 'incorrect',
-  INCALCULABLE,
+  INCALCULABLE = 'incalculable',
-  PROPERTY,
+  PROPERTY = 'property',
-  VERIFIED
+  VERIFIED = 'verified'
 }
 
 // Dependency mode for schema analysis
@@ -274,7 +283,28 @@ export function inferStatus(parse?: ParsingStatus, value?: ValueClass): Expressi
   if (value === ValueClass.PROPERTY) {
     return ExpressionStatus.PROPERTY;
   }
-  return ExpressionStatus.VERIFIED
+  return ExpressionStatus.VERIFIED;
+}
+
+export function inferTemplate(expression: string): boolean {
+  const match = expression.match(/R\d+/g);
+  return (match && match?.length > 0) ?? false;
+}
+
+export function inferClass(type: CstType, isTemplate: boolean): CstClass {
+  if (isTemplate) {
+    return CstClass.TEMPLATE;
+  }
+  switch (type) {
+  case CstType.BASE: return CstClass.BASIC;
+  case CstType.CONSTANT: return CstClass.BASIC;
+  case CstType.STRUCTURED: return CstClass.BASIC;
+  case CstType.TERM: return CstClass.DERIVED;
+  case CstType.FUNCTION: return CstClass.DERIVED;
+  case CstType.AXIOM: return CstClass.STATEMENT;
+  case CstType.PREDICATE: return CstClass.DERIVED;
+  case CstType.THEOREM: return CstClass.STATEMENT;
+  }
 }
 
 export function extractGlobals(expression: string): Set<string> {
@@ -336,6 +366,8 @@ export function LoadRSFormData(schema: IRSFormData): IRSForm {
   }
   result.items.forEach(cst => {
     cst.status = inferStatus(cst.parse.status, cst.parse.valueClass);
+    cst.isTemplate = inferTemplate(cst.definition.formal);
+    cst.cstClass = inferClass(cst.cstType, cst.isTemplate);
     result.graph.addNode(cst.id);
     const dependencies = extractGlobals(cst.definition.formal);
     dependencies.forEach(value => {

rsconcept/frontend/src/utils/staticUI.ts

@@ -2,7 +2,7 @@ import { LayoutTypes } from 'reagraph';
 
 import { ColoringScheme } from '../pages/RSFormPage/EditorTermGraph';
 import { resolveErrorClass,RSErrorClass, RSErrorType, TokenID } from './enums';
-import { CstMatchMode, CstType, DependencyMode,ExpressionStatus, IConstituenta,
+import { CstClass, CstMatchMode, CstType, DependencyMode, ExpressionStatus, IConstituenta,
   IFunctionArg,IRSErrorDescription, IRSForm,
   ISyntaxTreeNode, ParsingStatus, ValueClass 
 } from './models';
@@ -12,7 +12,7 @@ export interface IRSButtonData {
   tooltip: string
 }
 
-export interface IStatusInfo {
+export interface IFormatInfo {
   text: string
   color: string
   tooltip: string
@@ -245,10 +245,6 @@ export function getCstTypeShortcut(type: CstType) {
   }
 }
 
-export const mapCstTypeColors: Map<CstType, string> = new Map([
-  [CstType.BASE, 'Атлас 2D'],
-]);
-
 export const CstTypeSelector = (Object.values(CstType)).map(
   (typeStr) => {
     const type = typeStr as CstType;
@@ -311,28 +307,15 @@ export const mapLayoutLabels: Map<string, string> = new Map([
 export const mapColoringLabels: Map<string, string> = new Map([
   ['none', 'Цвет: моно'],
   ['status', 'Цвет: статус'],
-  ['type', 'Цвет: тип'],
+  ['type', 'Цвет: класс'],
 ]);
 
 export const GraphColoringSelector: {value: ColoringScheme, label: string}[] = [
   { value: 'none', label: 'Цвет: моно'},
   { value: 'status', label: 'Цвет: статус'},
-  { value: 'type', label: 'Цвет: тип'},
+  { value: 'type', label: 'Цвет: класс'},
 ];
 
-export function getCstTypeColor(type: CstType, darkMode: boolean): string {
-  switch (type) {
-  case CstType.BASE: return darkMode ? '#2b8000': '#aaff80';
-  case CstType.CONSTANT: return darkMode ? '#2b8000': '#aaff80';
-  case CstType.STRUCTURED: return darkMode ? '#2b8000': '#aaff80';
-  case CstType.TERM: return darkMode ? '#1e00b3': '#b3bdff';
-  case CstType.FUNCTION: return darkMode ? '#1e00b3': '#b3bdff';
-  case CstType.AXIOM: return darkMode ? '#592b2b': '#ffc9c9';
-  case CstType.PREDICATE: return darkMode ? '#1e00b3': '#b3bdff';
-  case CstType.THEOREM: return darkMode ? '#592b2b': '#ffc9c9';
-  }
-}
-
 export function getCstStatusColor(status: ExpressionStatus, darkMode: boolean): string {
   switch (status) {
   case ExpressionStatus.VERIFIED: return darkMode ? '#2b8000': '#aaff80';
@@ -344,7 +327,7 @@ export function getCstStatusColor(status: ExpressionStatus, darkMode: boolean):
   }
 }
 
-export const mapStatusInfo: Map<ExpressionStatus, IStatusInfo> = new Map([
+export const mapStatusInfo: Map<ExpressionStatus, IFormatInfo> = new Map([
   [ ExpressionStatus.VERIFIED, {
     text: 'ок',
     color: 'bg-[#aaff80] dark:bg-[#2b8000]',
@@ -377,6 +360,38 @@ export const mapStatusInfo: Map<ExpressionStatus, IStatusInfo> = new Map([
   }],
 ]);
 
+export function getCstClassColor(cstClass: CstClass, darkMode: boolean): string {
+  switch (cstClass) {
+  case CstClass.TEMPLATE: return darkMode ? '#36899e': '#a5e9fa';
+  case CstClass.BASIC: return darkMode ? '#2b8000': '#aaff80';
+  case CstClass.DERIVED: return darkMode ? '#1e00b3': '#b3bdff';
+  case CstClass.STATEMENT: return darkMode ? '#592b2b': '#ffc9c9';
+  }
+}
+
+export const mapCstClassInfo: Map<CstClass, IFormatInfo> = new Map([
+  [ CstClass.BASIC, {
+    text: 'базовый',
+    color: 'bg-[#aaff80] dark:bg-[#2b8000]',
+    tooltip: 'неопределяемое понятие, требует конвенции'
+  }],
+  [ CstClass.DERIVED, {
+    text: 'производный',
+    color: 'bg-[#b3bdff] dark:bg-[#1e00b3]',
+    tooltip: 'выводимое понятие, задаваемое определением'
+  }],
+  [ CstClass.STATEMENT, {
+    text: 'утверждение',
+    color: 'bg-[#ffc9c9] dark:bg-[#592b2b]',
+    tooltip: 'неопределяемое понятие, требует конвенции'
+  }],
+  [ CstClass.TEMPLATE, {
+    text: 'шаблон',
+    color: 'bg-[#a5e9fa] dark:bg-[#36899e]',
+    tooltip: 'параметризованный шаблон определения'
+  }],
+]);
+
 export function createAliasFor(type: CstType, schema: IRSForm): string {
   const prefix = getCstTypePrefix(type);
   if (!schema.items || schema.items.length <= 0) {
@@ -411,6 +426,8 @@ export function getMockConstituenta(id: number, alias: string, type: CstType, co
       }
     },
     status: ExpressionStatus.INCORRECT,
+    isTemplate: false,
+    cstClass: CstClass.DERIVED,
     parse: {
       status: ParsingStatus.INCORRECT,
       valueClass: ValueClass.INVALID,