changes

app/src/app.tsx

@@ -3,6 +3,7 @@ import { StrictMode } from 'react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import WorkspacesPage from './pages/workspaces_page';
 
+import { ReactFlowProvider } from '@xyflow/react';
 import './index.scss';
 import MappingPage from './pages/mapping_page';
 import OntologiesPage from './pages/ontologies_page';
@@ -28,7 +29,11 @@ const router = createBrowserRouter([
   },
   {
     path: '/workspaces/:uuid/mapping/:mapping_uuid',
-    element: <MappingPage />,
+    element: (
+      <ReactFlowProvider>
+        <MappingPage />
+      </ReactFlowProvider>
+    ),
   },
 ]);
 

app/src/lib/api/mapping_service/types.ts

@@ -3,6 +3,7 @@ export type MappingNodeType = 'entity' | 'literal' | 'uri_ref';
 export type MappingNode = {
   id: string;
   type: 'entity';
+  position: { x: number; y: number };
   label: string;
   uri_pattern: string;
   rdf_type: string[];
@@ -12,6 +13,7 @@ export type MappingNode = {
 export type MappingLiteral = {
   id: string;
   type: 'literal';
+  position: { x: number; y: number };
   label: string;
   value: string;
   literal_type: string;
@@ -20,6 +22,7 @@ export type MappingLiteral = {
 export type MappingURIRef = {
   id: string;
   type: 'uri_ref';
+  position: { x: number; y: number };
   uri_pattern: string;
 };
 

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

@@ -15,14 +15,16 @@ import {
 } from '@xyflow/react';
 
 import '@xyflow/react/dist/style.css';
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { MappingGraph } from '../../../../lib/api/mapping_service/types';
 
 import ConnectionLineComponent from '@/pages/mapping_page/components/MainPanel/components/ConnectionLineComponent';
 import { EntityNode } from '@/pages/mapping_page/components/MainPanel/components/EntityNode';
 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';
 
 type MainPanelProps = {
@@ -51,10 +53,17 @@ const defaultEdgeOptions = {
 
 const MainPanel = ({ initialGraph }: MainPanelProps) => {
   const reactflow = useReactFlow();
+  const { nodes: initialNodes, edges: initialEdges } =
+    useBackendMappingGraph(initialGraph);
 
   const [nodes, setNodes, onNodesChange] = useNodesState<XYNodeTypes>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState<XYEdgeType>([]);
 
+  useEffect(() => {
+    setNodes(initialNodes);
+    setEdges(initialEdges);
+  }, [initialNodes, initialEdges, setNodes, setEdges]);
+
   const onConnect = useCallback(
     (params: Connection) => {
       setEdges(edges => addEdge(params, edges));
@@ -75,8 +84,11 @@ const MainPanel = ({ initialGraph }: MainPanelProps) => {
             uri_pattern: '',
             properties: [],
             type: 'entity',
+            position: reactflow.screenToFlowPosition({
+              x: e.clientX,
+              y: e.clientY,
+            }),
           },
-
           position: reactflow.screenToFlowPosition({
             x: e.clientX,
             y: e.clientY,
@@ -98,6 +110,10 @@ const MainPanel = ({ initialGraph }: MainPanelProps) => {
             id: `node-${nodes.length}`,
             uri_pattern: 'http://example.com/',
             type: 'uri_ref',
+            position: reactflow.screenToFlowPosition({
+              x: e.clientX,
+              y: e.clientY,
+            }),
           },
           position: reactflow.screenToFlowPosition({
             x: e.clientX,
@@ -112,6 +128,10 @@ const MainPanel = ({ initialGraph }: MainPanelProps) => {
 
   const handleAddLiteralNode = useCallback(
     (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+      const position = reactflow.screenToFlowPosition({
+        x: e.clientX,
+        y: e.clientY,
+      });
       setNodes(nodes => [
         ...nodes,
         {
@@ -122,11 +142,9 @@ const MainPanel = ({ initialGraph }: MainPanelProps) => {
             value: '',
             literal_type: 'string',
             type: 'literal',
+            position: position,
           },
-          position: reactflow.screenToFlowPosition({
-            x: e.clientX,
-            y: e.clientY,
-          }),
+          position: position,
           type: 'literal',
         },
       ]);