From 542b137622ed03d758c9adaf1e1fd320ac8f5ae0 Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Tue, 25 Feb 2025 13:19:07 +0300
Subject: [PATCH] F: Simplify termgraph tooltip

---
 .../RSFormPage/EditorTermGraph/TGFlow.tsx     | 22 ++++----------
 .../EditorTermGraph/graph/TGNode.tsx          | 30 +++++++++++++------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/TGFlow.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/TGFlow.tsx
index dfc93804..af091168 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/TGFlow.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/TGFlow.tsx
@@ -15,7 +15,6 @@ import {
 
 import { Overlay } from '@/components/Container';
 import { useMainHeight } from '@/stores/appLayout';
-import { useTooltipsStore } from '@/stores/tooltips';
 import { APP_COLORS } from '@/styling/colors';
 import { PARAMETER } from '@/utils/constants';
 
@@ -43,7 +42,7 @@ export const ZOOM_MIN = 0.25;
 
 export function TGFlow() {
   const mainHeight = useMainHeight();
-  const flow = useReactFlow();
+  const { fitView, viewportInitialized } = useReactFlow();
   const store = useStoreApi();
   const { addSelectedNodes } = store.getState();
   const isProcessing = useMutatingRSForm();
@@ -62,8 +61,6 @@ export function TGFlow() {
   const coloring = useTermGraphStore(state => state.coloring);
   const setColoring = useTermGraphStore(state => state.setColoring);
 
-  const setActiveCst = useTooltipsStore(state => state.setActiveCst);
-
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges] = useEdgesState([]);
 
@@ -108,8 +105,7 @@ export function TGFlow() {
           position: { x: 0, y: 0 },
           data: {
             fill: focusCst === cst ? APP_COLORS.bgPurple : colorBgGraphNode(cst, coloring),
-            label: cst.alias,
-            description: !filter.noText ? cst.term_resolved : ''
+            cst: cst
           }
         });
       }
@@ -148,12 +144,12 @@ export function TGFlow() {
   }, [schema, focusCst, coloring, filter]);
 
   useEffect(() => {
-    if (!needReset || !flow.viewportInitialized) {
+    if (!needReset || !viewportInitialized) {
       return;
     }
     setNeedReset(false);
     resetNodes();
-  }, [needReset, schema, resetNodes, flow.viewportInitialized]);
+  }, [needReset, schema, resetNodes, viewportInitialized]);
 
   function handleSetSelected(newSelection: number[]) {
     setSelected(newSelection);
@@ -193,7 +189,7 @@ export function TGFlow() {
     }
     setSelected([]);
     setTimeout(() => {
-      flow.fitView({ duration: PARAMETER.zoomDuration });
+      fitView({ duration: PARAMETER.zoomDuration });
     }, PARAMETER.minimalTimeout);
   }
 
@@ -209,13 +205,6 @@ export function TGFlow() {
     navigateCst(cstID);
   }
 
-  function handleNodeEnter(cstID: number) {
-    const cst = schema.cstByID.get(cstID);
-    if (cst) {
-      setActiveCst(cst);
-    }
-  }
-
   return (
     <>
       <Overlay position='cc-tab-tools' className='flex flex-col items-center rounded-b-2xl cc-blur'>
@@ -269,7 +258,6 @@ export function TGFlow() {
             edgeTypes={TGEdgeTypes}
             maxZoom={ZOOM_MAX}
             minZoom={ZOOM_MIN}
-            onNodeMouseEnter={(_, node) => handleNodeEnter(Number(node.id))}
             onNodeDoubleClick={(event, node) => handleNodeDoubleClick(event, Number(node.id))}
             onNodeContextMenu={(event, node) => handleNodeContextMenu(event, Number(node.id))}
           />
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx
index 2b33dabc..4c654a3e 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx
@@ -2,6 +2,9 @@
 
 import { Handle, Position } from 'reactflow';
 
+import { type IConstituenta } from '@/features/rsform/models/rsform';
+import { useTermGraphStore } from '@/features/rsform/stores/termGraph';
+
 import { APP_COLORS } from '@/styling/colors';
 import { globalIDs } from '@/utils/constants';
 
@@ -14,8 +17,7 @@ const FONT_SIZE_MIN = 10;
 
 export interface TGNodeData {
   fill: string;
-  label: string;
-  description: string;
+  cst: IConstituenta;
 }
 
 /**
@@ -31,6 +33,10 @@ interface TGNodeInternal {
 }
 
 export function TGNode(node: TGNodeInternal) {
+  const filter = useTermGraphStore(state => state.filter);
+  const label = node.data.cst.alias;
+  const description = !filter.noText ? node.data.cst.term_resolved : '';
+
   return (
     <>
       <Handle type='target' position={Position.Top} style={{ opacity: 0 }} />
@@ -38,9 +44,10 @@ export function TGNode(node: TGNodeInternal) {
         className='w-full h-full cursor-default flex items-center justify-center rounded-full'
         style={{
           backgroundColor: !node.selected ? node.data.fill : APP_COLORS.bgActiveSelection,
-          fontSize: node.data.label.length > LABEL_THRESHOLD ? FONT_SIZE_MED : FONT_SIZE_MAX
+          fontSize: label.length > LABEL_THRESHOLD ? FONT_SIZE_MED : FONT_SIZE_MAX
         }}
-        data-tooltip-id={globalIDs.constituenta_tooltip}
+        data-tooltip-id={globalIDs.tooltip}
+        data-tooltip-html={describeCstNode(node.data.cst)}
       >
         <div
           style={{
@@ -49,19 +56,19 @@ export function TGNode(node: TGNodeInternal) {
             WebkitTextStrokeColor: APP_COLORS.bgDefault
           }}
         >
-          {node.data.label}
+          {label}
         </div>
       </div>
       <Handle type='source' position={Position.Bottom} style={{ opacity: 0 }} />
-      {node.data.description ? (
+      {description ? (
         <div
           className='mt-1 w-[150px] px-1 text-center translate-x-[calc(-50%+20px)]'
           style={{
-            fontSize: node.data.description.length > DESCRIPTION_THRESHOLD ? FONT_SIZE_MIN : FONT_SIZE_MED
+            fontSize: description.length > DESCRIPTION_THRESHOLD ? FONT_SIZE_MIN : FONT_SIZE_MED
           }}
         >
           <div className='absolute top-0 px-1 left-0 text-center w-full line-clamp-3 hover:line-clamp-none'>
-            {node.data.description}
+            {description}
           </div>
           <div
             aria-hidden='true'
@@ -71,10 +78,15 @@ export function TGNode(node: TGNodeInternal) {
               WebkitTextStrokeColor: APP_COLORS.bgDefault
             }}
           >
-            {node.data.description}
+            {description}
           </div>
         </div>
       ) : null}
     </>
   );
 }
+
+// ====== INTERNAL ======
+function describeCstNode(cst: IConstituenta) {
+  return `${cst.alias}: ${cst.term_resolved}</br>Типизация: ${cst.parse.typification}`;
+}