R: Improve OSS rendering

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
     ]
   );

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;

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
+};

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 & {