R: Small UI refactoring and improvement

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

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}
+      maxZoom={ZOOM_MAX}
-      minZoom={0.5}
+      minZoom={ZOOM_MIN}
       nodesConnectable={false}
     />
   );

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>

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 : ''
           }
         });
       }

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}
     </>

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'

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'] }
         }
       }
     },