From 9c336e324b745ee4b74d189d14cec8891e9240da Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Wed, 30 Oct 2024 19:56:48 +0300
Subject: [PATCH] R: Improve OSS rendering

---
 .../src/pages/OssPage/EditorOssGraph/OssFlow.tsx  | 15 +++------------
 .../EditorOssGraph/{ => graph}/InputNode.tsx      |  0
 .../EditorOssGraph/{ => graph}/NodeCore.tsx       |  2 +-
 .../EditorOssGraph/{ => graph}/OperationNode.tsx  |  0
 .../OssPage/EditorOssGraph/graph/OssNodeTypes.ts  |  9 +++++++++
 rsconcept/frontend/src/styling/overrides.css      |  4 ++++
 6 files changed, 17 insertions(+), 13 deletions(-)
 rename rsconcept/frontend/src/pages/OssPage/EditorOssGraph/{ => graph}/InputNode.tsx (100%)
 rename rsconcept/frontend/src/pages/OssPage/EditorOssGraph/{ => graph}/NodeCore.tsx (98%)
 rename rsconcept/frontend/src/pages/OssPage/EditorOssGraph/{ => graph}/OperationNode.tsx (100%)
 create mode 100644 rsconcept/frontend/src/pages/OssPage/EditorOssGraph/graph/OssNodeTypes.ts

diff --git a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OssFlow.tsx b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OssFlow.tsx
index 15196677..b2982642 100644
--- a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OssFlow.tsx
+++ b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OssFlow.tsx
@@ -9,7 +9,6 @@ import {
   getViewportForBounds,
   Node,
   NodeChange,
-  NodeTypes,
   ReactFlow,
   useEdgesState,
   useNodesState,
@@ -29,9 +28,8 @@ import { PARAMETER, storage } from '@/utils/constants';
 import { errors } from '@/utils/labels';
 
 import { useOssEdit } from '../OssEditContext';
-import InputNode from './InputNode';
+import { OssNodeTypes } from './graph/OssNodeTypes';
 import NodeContextMenu, { ContextMenuData } from './NodeContextMenu';
-import OperationNode from './OperationNode';
 import ToolbarOssGraph from './ToolbarOssGraph';
 
 interface OssFlowProps {
@@ -312,14 +310,6 @@ function OssFlow({ isModified, setIsModified }: OssFlowProps) {
     }
   }
 
-  const OssNodeTypes: NodeTypes = useMemo(
-    () => ({
-      synthesis: OperationNode,
-      input: InputNode
-    }),
-    []
-  );
-
   const graph = useMemo(
     () => (
       <ReactFlow
@@ -328,6 +318,8 @@ function OssFlow({ isModified, setIsModified }: OssFlowProps) {
         onNodesChange={handleNodesChange}
         onEdgesChange={onEdgesChange}
         onNodeDoubleClick={handleNodeDoubleClick}
+        edgesFocusable={false}
+        nodesFocusable={false}
         fitView
         nodeTypes={OssNodeTypes}
         maxZoom={2}
@@ -349,7 +341,6 @@ function OssFlow({ isModified, setIsModified }: OssFlowProps) {
       handleClickCanvas,
       onEdgesChange,
       handleNodeDoubleClick,
-      OssNodeTypes,
       showGrid
     ]
   );
diff --git a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/InputNode.tsx b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/graph/InputNode.tsx
similarity index 100%
rename from rsconcept/frontend/src/pages/OssPage/EditorOssGraph/InputNode.tsx
rename to rsconcept/frontend/src/pages/OssPage/EditorOssGraph/graph/InputNode.tsx
diff --git a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/NodeCore.tsx b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx
similarity index 98%
rename from rsconcept/frontend/src/pages/OssPage/EditorOssGraph/NodeCore.tsx
rename to rsconcept/frontend/src/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx
index 59749c1f..1bc98369 100644
--- a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/NodeCore.tsx
+++ b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx
@@ -9,7 +9,7 @@ import { OperationType } from '@/models/oss';
 import { PARAMETER, prefixes } from '@/utils/constants';
 import { truncateToLastWord } from '@/utils/utils';
 
-import { useOssEdit } from '../OssEditContext';
+import { useOssEdit } from '../../OssEditContext';
 
 interface NodeCoreProps {
   node: OssNodeInternal;
diff --git a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OperationNode.tsx b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/graph/OperationNode.tsx
similarity index 100%
rename from rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OperationNode.tsx
rename to rsconcept/frontend/src/pages/OssPage/EditorOssGraph/graph/OperationNode.tsx
diff --git a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/graph/OssNodeTypes.ts b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/graph/OssNodeTypes.ts
new file mode 100644
index 00000000..e4d56180
--- /dev/null
+++ b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/graph/OssNodeTypes.ts
@@ -0,0 +1,9 @@
+import { NodeTypes } from 'reactflow';
+
+import InputNode from './InputNode';
+import OperationNode from './OperationNode';
+
+export const OssNodeTypes: NodeTypes = {
+  synthesis: OperationNode,
+  input: InputNode
+};
diff --git a/rsconcept/frontend/src/styling/overrides.css b/rsconcept/frontend/src/styling/overrides.css
index 1d269e1f..0150cefc 100644
--- a/rsconcept/frontend/src/styling/overrides.css
+++ b/rsconcept/frontend/src/styling/overrides.css
@@ -43,6 +43,7 @@
 
 .react-flow__handle {
   cursor: default !important;
+  border-radius: 9999px;
 
   border-color: var(--cl-bg-40);
   background-color: var(--cl-bg-120);
@@ -66,6 +67,9 @@
 }
 
 .react-flow__attribution {
+  font-size: var(--font-size-sm);
+  font-family: var(--font-ui);
+
   background-color: transparent;
   color: var(--cl-fg-60);
   .dark & {