From b55ad31147fe6b55f1069762e128f648c86c5106 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Wed, 16 Aug 2023 00:50:27 +0300
Subject: [PATCH] Fix graph UI

---
 .../src/pages/RSFormPage/DlgGraphOptions.tsx  |  9 ++++++
 .../src/pages/RSFormPage/EditorTermGraph.tsx  | 28 +++++++++++++------
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/rsconcept/frontend/src/pages/RSFormPage/DlgGraphOptions.tsx b/rsconcept/frontend/src/pages/RSFormPage/DlgGraphOptions.tsx
index ddb20b23..e946e815 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/DlgGraphOptions.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/DlgGraphOptions.tsx
@@ -16,6 +16,7 @@ function DlgGraphOptions({ hideWindow, initial, onConfirm }:DlgGraphOptionsProps
   const [ noHermits, setNoHermits ] = useState(true);
   const [ noTransitive, setNoTransitive ] = useState(false);
   const [ noTemplates, setNoTemplates ] = useState(true);
+  const [ noTerms, setNoTerms ] = useState(true);
 
   const [ allowBase, setAllowBase ] = useState(true);
   const [ allowStruct, setAllowStruct ] = useState(true);
@@ -31,6 +32,7 @@ function DlgGraphOptions({ hideWindow, initial, onConfirm }:DlgGraphOptionsProps
       noHermits: noHermits,
       noTransitive: noTransitive,
       noTemplates: noTemplates,
+      noTerms: noTerms,
 
       allowBase: allowBase,
       allowStruct: allowStruct,
@@ -52,6 +54,7 @@ function DlgGraphOptions({ hideWindow, initial, onConfirm }:DlgGraphOptionsProps
     setNoHermits(initial.noHermits);
     setNoTransitive(initial.noTransitive);
     setNoTemplates(initial.noTemplates);
+    setNoTerms(initial.noTerms);
 
     setAllowBase(initial.allowBase);
     setAllowStruct(initial.allowStruct);
@@ -74,6 +77,12 @@ function DlgGraphOptions({ hideWindow, initial, onConfirm }:DlgGraphOptionsProps
       <div className='flex gap-2'>
         <div className='flex flex-col'>
           <h1>Преобразования</h1>
+          <Checkbox
+            label='Скрыть текст'
+            tooltip='Не отображать термины'
+            value={noTerms} 
+            onChange={ event => setNoTerms(event.target.checked) }
+          />
           <Checkbox
             label='Скрыть несвязанные'
             tooltip='Неиспользуемые конституенты'
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
index d4bb4b33..b395ca0c 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
@@ -43,6 +43,7 @@ export interface GraphEditorParams {
   noHermits: boolean
   noTransitive: boolean
   noTemplates: boolean
+  noTerms: boolean
 
   allowBase: boolean
   allowStruct: boolean
@@ -71,6 +72,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
   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 [ noTerms, setNoTerms ] = useLocalStorage('graph_no_terms', 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);
@@ -170,12 +172,12 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
         result.push({
           id: String(node.id),
           fill: getCstNodeColor(cst, coloringScheme, darkMode),
-          label: cst.term.resolved ? `${cst.alias}: ${cst.term.resolved}` : cst.alias
+          label: cst.term.resolved && !noTerms ? `${cst.alias}: ${cst.term.resolved}` : cst.alias
         });
       }
     });
     return result;
-  }, [schema, coloringScheme, filtered.nodes, darkMode]);
+  }, [schema, coloringScheme, filtered.nodes, darkMode, noTerms]);
 
   const edges: GraphEdge[] = useMemo(
   () => {
@@ -205,7 +207,8 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
     nodes,
     edges,
     type: 'multi', // 'single' | 'multi' | 'multiModifier'
-    pathSelectionType: 'all',
+    pathSelectionType: 'out',
+    pathHoverType: 'all',
     focusOnSelect: false
   });
 
@@ -241,6 +244,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
       noHermits: noHermits,
       noTemplates: noTemplates,
       noTransitive: noTransitive,
+      noTerms: noTerms,
 
       allowBase: allowBase,
       allowStruct: allowStruct,
@@ -258,6 +262,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
     setNoHermits(params.noHermits);
     setNoTransitive(params.noTransitive);
     setNoTemplates(params.noTemplates);
+    setNoTerms(params.noTerms);
 
     setAllowBase(params.allowBase);
     setAllowStruct(params.allowStruct);
@@ -269,7 +274,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
     setAllowTheorem(params.allowTheorem);
   }, [setNoHermits, setNoTransitive, setNoTemplates, 
     setAllowBase, setAllowStruct, setAllowTerm, setAllowAxiom, setAllowFunction, 
-    setAllowPredicate, setAllowConstant, setAllowTheorem]);
+    setAllowPredicate, setAllowConstant, setAllowTheorem, setNoTerms]);
 
   const canvasWidth = useMemo(
   () => {
@@ -331,16 +336,21 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
         onChange={data => { setLayout(data.length > 0 ? data[0].value : GraphLayoutSelector[0].value); }}
       />
       <Checkbox
-        disabled={!is3D}
-        label='Анимация вращения' 
-        value={orbit} 
-        onChange={ event => setOrbit(event.target.checked) }
+        label='Скрыть текст' 
+        value={noTerms} 
+        onChange={ event => setNoTerms(event.target.checked) }
       />
       <Checkbox
         label='Транзитивная редукция' 
         value={noTransitive} 
         onChange={ event => setNoTransitive(event.target.checked) }
       />
+      <Checkbox
+        disabled={!is3D}
+        label='Анимация вращения' 
+        value={orbit} 
+        onChange={ event => setOrbit(event.target.checked) }
+      />
 
       <Divider margins='mt-3 mb-2' />
 
@@ -354,7 +364,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
             <div
               key={`${cst.alias}`}
               id={`${prefixes.cst_list}${cst.alias}`}
-              className='w-fit min-w-[3rem] rounded-md text-center cursor-pointer]'
+              className='w-fit min-w-[3rem] rounded-md text-center cursor-pointer'
               style={ { backgroundColor: getCstNodeColor(cst, adjustedColoring, darkMode), ...dismissedStyle(cstID) }}
               onClick={() => toggleDismissed(cstID)}
               onDoubleClick={() => onOpenEdit(cstID)}