From 2d3bc567761d5c2248969a071bfbf20efdf1028e Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Tue, 3 Dec 2024 12:39:33 +0300
Subject: [PATCH] R: Small UI refactoring and improvement

---
 .../frontend/{public => resource}/DejaVu.ttf  | Bin
 .../src/dialogs/DlgShowAST/graph/ASTNode.tsx  |   8 +++-
 .../dialogs/DlgShowTypeGraph/MGraphFlow.tsx   |   7 +++-
 .../DlgShowTypeGraph/graph/MGraphNode.tsx     |   7 +++-
 .../RSFormPage/EditorTermGraph/TGFlow.tsx     |   2 +-
 .../EditorTermGraph/graph/TGNode.tsx          |  35 ++++++++++++------
 rsconcept/frontend/src/utils/constants.ts     |   1 -
 rsconcept/frontend/vite.config.ts             |   2 +-
 8 files changed, 44 insertions(+), 18 deletions(-)
 rename rsconcept/frontend/{public => resource}/DejaVu.ttf (100%)

diff --git a/rsconcept/frontend/public/DejaVu.ttf b/rsconcept/frontend/resource/DejaVu.ttf
similarity index 100%
rename from rsconcept/frontend/public/DejaVu.ttf
rename to rsconcept/frontend/resource/DejaVu.ttf
diff --git a/rsconcept/frontend/src/dialogs/DlgShowAST/graph/ASTNode.tsx b/rsconcept/frontend/src/dialogs/DlgShowAST/graph/ASTNode.tsx
index 6cffbba5..d2a74f6d 100644
--- a/rsconcept/frontend/src/dialogs/DlgShowAST/graph/ASTNode.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgShowAST/graph/ASTNode.tsx
@@ -8,6 +8,11 @@ import { ISyntaxTreeNode } from '@/models/rslang';
 import { colorBgSyntaxTree } from '@/styling/color';
 import { labelSyntaxTree } from '@/utils/labels';
 
+const FONT_SIZE_MAX = 14;
+const FONT_SIZE_MED = 12;
+
+const LABEL_THRESHOLD = 3;
+
 /**
  * Represents graph AST node internal data.
  */
@@ -34,10 +39,11 @@ function ASTNode(node: ASTNodeInternal) {
       <Handle type='source' position={Position.Bottom} style={{ opacity: 0 }} />
       <div
         className='font-math mt-1 w-fit text-center translate-x-[calc(-50%+20px)]'
-        style={{ fontSize: label.length > 3 ? 12 : 14 }}
+        style={{ fontSize: label.length > LABEL_THRESHOLD ? FONT_SIZE_MED : FONT_SIZE_MAX }}
       >
         <div className='absolute top-0 left-0 text-center w-full'>{label}</div>
         <div
+          aria-hidden='true'
           style={{
             WebkitTextStrokeWidth: 2,
             WebkitTextStrokeColor: colors.bgDefault
diff --git a/rsconcept/frontend/src/dialogs/DlgShowTypeGraph/MGraphFlow.tsx b/rsconcept/frontend/src/dialogs/DlgShowTypeGraph/MGraphFlow.tsx
index c7995e23..d2904b61 100644
--- a/rsconcept/frontend/src/dialogs/DlgShowTypeGraph/MGraphFlow.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgShowTypeGraph/MGraphFlow.tsx
@@ -9,6 +9,9 @@ import { TMGraphEdgeTypes } from './graph/MGraphEdgeTypes';
 import { applyLayout } from './graph/MGraphLayout';
 import { TMGraphNodeTypes } from './graph/MGraphNodeTypes';
 
+const ZOOM_MAX = 2;
+const ZOOM_MIN = 0.5;
+
 interface MGraphFlowProps {
   data: TMGraph;
 }
@@ -63,8 +66,8 @@ function MGraphFlow({ data }: MGraphFlowProps) {
       nodeTypes={TMGraphNodeTypes}
       edgeTypes={TMGraphEdgeTypes}
       fitView
-      maxZoom={2}
-      minZoom={0.5}
+      maxZoom={ZOOM_MAX}
+      minZoom={ZOOM_MIN}
       nodesConnectable={false}
     />
   );
diff --git a/rsconcept/frontend/src/dialogs/DlgShowTypeGraph/graph/MGraphNode.tsx b/rsconcept/frontend/src/dialogs/DlgShowTypeGraph/graph/MGraphNode.tsx
index 2692478f..13e0a5e8 100644
--- a/rsconcept/frontend/src/dialogs/DlgShowTypeGraph/graph/MGraphNode.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgShowTypeGraph/graph/MGraphNode.tsx
@@ -36,7 +36,12 @@ function MGraphNode(node: MGraphNodeInternal) {
         className='w-full h-full cursor-default flex items-center justify-center rounded-full'
         data-tooltip-id={globals.tooltip}
         data-tooltip-html={tooltipText}
-        style={{ backgroundColor: colorBgTMGraphNode(node.data, colors) }}
+        style={{
+          backgroundColor: colorBgTMGraphNode(node.data, colors),
+          fontWeight: 600,
+          WebkitTextStrokeWidth: '0.6px',
+          WebkitTextStrokeColor: colors.bgDefault
+        }}
       >
         {node.data.rank === 0 ? node.data.text : node.data.annotations.length > 0 ? node.data.annotations.length : ''}
       </div>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/TGFlow.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/TGFlow.tsx
index a28f2be5..cabc91fc 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/TGFlow.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/TGFlow.tsx
@@ -145,7 +145,7 @@ function TGFlow({ onOpenEdit }: TGFlowProps) {
           data: {
             fill: focusCst === cst ? colors.bgPurple : colorBgGraphNode(cst, coloring, colors),
             label: cst.alias,
-            subLabel: !filterParams.noText ? cst.term_resolved : ''
+            description: !filterParams.noText ? cst.term_resolved : ''
           }
         });
       }
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx
index 4c70f326..0558f4bf 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx
@@ -6,12 +6,18 @@ import { Handle, Position } from 'reactflow';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { truncateToLastWord } from '@/utils/utils';
 
-const MAX_LABEL_LENGTH = 65;
+const MAX_DESCRIPTION_LENGTH = 65;
+const DESCRIPTION_THRESHOLD = 15;
+const LABEL_THRESHOLD = 3;
+
+const FONT_SIZE_MAX = 14;
+const FONT_SIZE_MED = 12;
+const FONT_SIZE_MIN = 10;
 
 export interface TGNodeData {
   fill: string;
   label: string;
-  subLabel: string;
+  description: string;
 }
 
 /**
@@ -28,19 +34,25 @@ interface TGNodeInternal {
 
 function TGNode(node: TGNodeInternal) {
   const { colors } = useConceptOptions();
-  const subLabel = useMemo(() => truncateToLastWord(node.data.subLabel, MAX_LABEL_LENGTH), [node.data.subLabel]);
+  const description = useMemo(
+    () => truncateToLastWord(node.data.description, MAX_DESCRIPTION_LENGTH),
+    [node.data.description]
+  );
 
   return (
     <>
       <Handle type='target' position={Position.Top} style={{ opacity: 0 }} />
       <div
         className='w-full h-full cursor-default flex items-center justify-center rounded-full'
-        style={{ backgroundColor: !node.selected ? node.data.fill : colors.bgActiveSelection }}
+        style={{
+          backgroundColor: !node.selected ? node.data.fill : colors.bgActiveSelection,
+          fontSize: node.data.label.length > LABEL_THRESHOLD ? FONT_SIZE_MED : FONT_SIZE_MAX
+        }}
       >
-        <div className='absolute top-[9px] left-0 text-center w-full'>{node.data.label}</div>
         <div
           style={{
-            WebkitTextStrokeWidth: 2,
+            fontWeight: 600,
+            WebkitTextStrokeWidth: '0.6px',
             WebkitTextStrokeColor: colors.bgDefault
           }}
         >
@@ -48,22 +60,23 @@ function TGNode(node: TGNodeInternal) {
         </div>
       </div>
       <Handle type='source' position={Position.Bottom} style={{ opacity: 0 }} />
-      {subLabel ? (
+      {description ? (
         <div
           className='mt-1 w-[150px] px-1 text-center translate-x-[calc(-50%+20px)]'
           style={{
-            fontSize: subLabel.length > 15 ? 10 : 12
+            fontSize: description.length > DESCRIPTION_THRESHOLD ? FONT_SIZE_MIN : FONT_SIZE_MED
           }}
         >
+          <div className='absolute top-0 px-1 left-0 text-center w-full'>{description}</div>
           <div
+            aria-hidden='true'
             style={{
-              WebkitTextStrokeWidth: 3,
+              WebkitTextStrokeWidth: '3px',
               WebkitTextStrokeColor: colors.bgDefault
             }}
           >
-            {subLabel}
+            {description}
           </div>
-          <div className='absolute top-0 px-1 left-0 text-center w-full'>{subLabel}</div>
         </div>
       ) : null}
     </>
diff --git a/rsconcept/frontend/src/utils/constants.ts b/rsconcept/frontend/src/utils/constants.ts
index f86466e2..2d4326bb 100644
--- a/rsconcept/frontend/src/utils/constants.ts
+++ b/rsconcept/frontend/src/utils/constants.ts
@@ -65,7 +65,6 @@ export const patterns = {
  * Local URIs.
  */
 export const resources = {
-  graph_font: '/DejaVu.ttf',
   privacy_policy: '/privacy.pdf',
   logo: '/logo_full.svg',
   db_schema: '/db_schema.svg'
diff --git a/rsconcept/frontend/vite.config.ts b/rsconcept/frontend/vite.config.ts
index e8f4de0f..163bd880 100644
--- a/rsconcept/frontend/vite.config.ts
+++ b/rsconcept/frontend/vite.config.ts
@@ -28,7 +28,7 @@ export default ({ mode }: { mode: string }) => {
       sourcemap: false,
       rollupOptions: {
         output: {
-          manualChunks: { ...renderChunks(dependencies) }
+          manualChunks: { ...renderChunks(dependencies), manuals: ['./src/pages/ManualsPage'] }
         }
       }
     },