changes

app/src/pages/mapping_page/components/MainPanel/components/EntityNode.tsx

@@ -5,37 +5,34 @@ import { EntityNodeType } from '@/pages/mapping_page/components/MainPanel/types'
 import useMappingPage from '@/pages/mapping_page/state';
 import { Card, HTMLTable, Icon } from '@blueprintjs/core';
 import { NodeProps } from '@xyflow/react';
-import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 
 export function EntityNode({ data, selected }: NodeProps<EntityNodeType>) {
   const ontologies = useMappingPage(state => state.ontologies);
 
-  const [properties, setProperties] = useState<Property[]>([]);
+  const properties = useMemo(() => {
+    if (!ontologies) return [];
 
-  useEffect(() => {
-    if (ontologies) {
-      const allProperties = ontologies.flatMap(ontology => ontology.properties);
-      const _properties = data.properties.map(property_1 => {
-        const _property = allProperties.find(
-          property_2 => property_2.full_uri === property_1,
-        );
-        return (
-          _property ??
-          ({
-            type: 'property',
-            belongs_to: 'Created',
-            description: [],
-            domain: [],
-            full_uri: property_1,
-            label: [],
-            property_type: 'any',
-            range: [],
-            is_deprecated: false,
-          } as Property)
-        );
-      });
-      setProperties(_properties);
-    }
+    const allProperties = ontologies.flatMap(ontology => ontology.properties);
+    return data.properties.map(property_1 => {
+      const _property = allProperties.find(
+        property_2 => property_2.full_uri === property_1,
+      );
+      return (
+        _property ??
+        ({
+          type: 'property',
+          belongs_to: 'Created',
+          description: [],
+          domain: [],
+          full_uri: property_1,
+          label: [],
+          property_type: 'any',
+          range: [],
+          is_deprecated: false,
+        } as Property)
+      );
+    });
   }, [ontologies, data.properties]);
 
   return (

app/src/pages/mapping_page/components/MainPanel/components/FloatingEdge.tsx

@@ -1,6 +1,7 @@
 import { getEdgePosition } from '@/pages/mapping_page/components/MainPanel/utils';
 import { EdgeProps, getSmoothStepPath, useInternalNode } from '@xyflow/react';
 
+import { useMemo } from 'react';
 import './styles.scss';
 
 function FloatingEdge({
@@ -16,28 +17,30 @@ function FloatingEdge({
   const sourceNode = useInternalNode(source);
   const targetNode = useInternalNode(target);
 
-  if (!sourceNode || !targetNode) {
-    return null;
-  }
+  const [edgePath] = useMemo(() => {
+    if (!sourceNode || !targetNode) {
+      return [];
+    }
 
-  const { sx, sy, sp, tx, ty, tp, cx, cy } = getEdgePosition(
-    sourceNode,
-    sourceHandleId ?? '',
-    targetNode,
-    targetHandleId ?? '',
-  );
+    const { sx, sy, sp, tx, ty, tp, cx, cy } = getEdgePosition(
+      sourceNode,
+      sourceHandleId ?? '',
+      targetNode,
+      targetHandleId ?? '',
+    );
 
-  const [edgePath] = getSmoothStepPath({
-    sourceX: sx,
-    sourceY: sy,
-    sourcePosition: sp,
-    targetX: tx,
-    targetY: ty,
-    targetPosition: tp,
-    borderRadius: 10,
-    centerX: cx,
-    centerY: cy,
-  });
+    return getSmoothStepPath({
+      sourceX: sx,
+      sourceY: sy,
+      sourcePosition: sp,
+      targetX: tx,
+      targetY: ty,
+      targetPosition: tp,
+      borderRadius: 10,
+      centerX: cx,
+      centerY: cy,
+    });
+  }, [sourceHandleId, sourceNode, targetHandleId, targetNode]);
 
   return (
     <path

app/src/pages/mapping_page/components/MainPanel/index.tsx

@@ -23,7 +23,7 @@ import { EntityNode } from '@/pages/mapping_page/components/MainPanel/components
 import FloatingEdge from '@/pages/mapping_page/components/MainPanel/components/FloatingEdge';
 import { LiteralNode } from '@/pages/mapping_page/components/MainPanel/components/LiteralNode';
 
-import { URIRefNode } from '@/pages/mapping_page/components/MainPanel/components/URIRefNode';
+import { URIRefNode } from '@/pages/mapping_page/components/MainPanel/components/UriRefNode';
 import { useBackendMappingGraph } from '@/pages/mapping_page/hooks/useBackendMappingGraph';
 import { XYEdgeType, XYNodeTypes } from './types';
 

app/src/pages/mapping_page/components/MainPanel/utils.ts

@@ -62,12 +62,17 @@ export function getCenter(
   node: InternalNode,
   handleId: string,
   handlePosition: Position,
+  sourceX: number,
   sourceY: number,
+  targetX: number,
   targetY: number,
 ): { x: number; y: number } {
   // Center's x is always located on left or right side of the handle
   // Center's y is always located between two handles
-  const offset = 150;
+  // Make offset based on the distance between two handles
+  const dx = Math.abs(sourceX - targetX);
+  const dy = sourceY - targetY;
+  const offset = dx * 0.5 + dy * 0.2;
   const handle = [
     ...(node.internals.handleBounds?.source ?? []),
     ...(node.internals.handleBounds?.target ?? []),
@@ -155,7 +160,9 @@ export function getEdgePosition(
         source,
         sourceHandleId,
         sourcePos,
+        sourceLocation.x,
         sourceLocation.y,
+        targetLocation.x,
         targetLocation.y,
       );
 

app/src/pages/mapping_page/components/NodeProperties/components/EntityProperties.tsx

@@ -164,9 +164,7 @@ const EntityNodeProperties = ({ node }: { node: EntityNodeType }) => {
         },
       });
     },
-    // Reason: we only want to update the node when the node id or reactflow changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [node.id, reactflow],
+    [node, reactflow],
   );
 
   const createNewClassItemFromQuery = (query: string) => {

app/src/pages/mapping_page/components/NodeProperties/components/URIRefProperties.tsx

@@ -21,8 +21,7 @@ const URIRefProperties = ({ node }: { node: URIRefNodeType }) => {
         },
       });
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [node.id, reactflow],
+    [node, reactflow],
   );
 
   return (

server/services/local/local_fs_service.py

@@ -135,7 +135,7 @@ def download_file_with_uuid(self, uuid: str) -> bytes:
                     code=ErrCodes.FILE_NOT_FOUND,
                 )
 
-            table_hash = res.tuple()[0].hash
+            # table_hash = res.tuple()[0].hash
             file_path = self._FILE_DIR / uuid
             # if (
             #     table_hash