changes

MaastrichtU-IDS · Dec 23, 2024 · 7e86794 · 7e86794
1 parent 7becdda
commit 7e86794
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 86 deletions.
diff --git a/app/src/app.tsx b/app/src/app.tsx
@@ -3,7 +3,6 @@ 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';
@@ -29,11 +28,7 @@ const router = createBrowserRouter([
   },
   {
     path: '/workspaces/:uuid/mapping/:mapping_uuid',
-    element: (
-      <ReactFlowProvider>
-        <MappingPage />
-      </ReactFlowProvider>
-    ),
+    element: <MappingPage />,
   },
 ]);
 

diff --git a/app/src/pages/mapping_page/components/MainPanel/components/EntityNode.tsx b/app/src/pages/mapping_page/components/MainPanel/components/EntityNode.tsx
@@ -12,7 +12,6 @@ export function EntityNode({ data, selected }: NodeProps<EntityNodeType>) {
 
   const properties = useMemo(() => {
     if (!ontologies) return [];
-
     const allProperties = ontologies.flatMap(ontology => ontology.properties);
     return data.properties.map(property_1 => {
       const _property = allProperties.find(

diff --git a/app/src/pages/mapping_page/components/MainPanel/index.tsx b/app/src/pages/mapping_page/components/MainPanel/index.tsx
@@ -7,6 +7,7 @@ import {
   Controls,
   EdgeTypes,
   MarkerType,
+  MiniMap,
   NodeTypes,
   ReactFlow,
   useEdgesState,
@@ -23,7 +24,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';
 
@@ -59,10 +60,13 @@ const MainPanel = ({ initialGraph }: MainPanelProps) => {
   const [nodes, setNodes, onNodesChange] = useNodesState<XYNodeTypes>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState<XYEdgeType>([]);
 
+  const screenToFlowPosition = reactflow.screenToFlowPosition;
+
   useEffect(() => {
     setNodes(initialNodes);
     setEdges(initialEdges);
-  }, [initialNodes, initialEdges, setNodes, setEdges]);
+    reactflow.fitView();
+  }, [initialNodes, initialEdges, setNodes, setEdges, reactflow]);
 
   const onConnect = useCallback(
     (params: Connection) => {
@@ -73,6 +77,10 @@ const MainPanel = ({ initialGraph }: MainPanelProps) => {
 
   const handleAddEntityNode = useCallback(
     (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+      const position = screenToFlowPosition({
+        x: e.clientX,
+        y: e.clientY,
+      });
       setNodes(nodes => [
         ...nodes,
         {
@@ -84,24 +92,22 @@ const MainPanel = ({ initialGraph }: MainPanelProps) => {
             uri_pattern: '',
             properties: [],
             type: 'entity',
-            position: reactflow.screenToFlowPosition({
-              x: e.clientX,
-              y: e.clientY,
-            }),
+            position: position,
           },
-          position: reactflow.screenToFlowPosition({
-            x: e.clientX,
-            y: e.clientY,
-          }),
+          position: position,
           type: 'entity',
         },
       ]);
     },
-    [setNodes, reactflow],
+    [setNodes, screenToFlowPosition],
   );
 
   const handleAddUriRefNode = useCallback(
     (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+      const position = screenToFlowPosition({
+        x: e.clientX,
+        y: e.clientY,
+      });
       setNodes(nodes => [
         ...nodes,
         {
@@ -110,25 +116,19 @@ 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: position,
           },
-          position: reactflow.screenToFlowPosition({
-            x: e.clientX,
-            y: e.clientY,
-          }),
+          position: position,
           type: 'uri_ref',
         },
       ]);
     },
-    [setNodes, reactflow],
+    [setNodes, screenToFlowPosition],
   );
 
   const handleAddLiteralNode = useCallback(
     (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-      const position = reactflow.screenToFlowPosition({
+      const position = screenToFlowPosition({
         x: e.clientX,
         y: e.clientY,
       });
@@ -149,7 +149,7 @@ const MainPanel = ({ initialGraph }: MainPanelProps) => {
         },
       ]);
     },
-    [setNodes, reactflow],
+    [setNodes, screenToFlowPosition],
   );
 
   const openMenu = (e: React.MouseEvent) => {
@@ -184,6 +184,15 @@ const MainPanel = ({ initialGraph }: MainPanelProps) => {
         onContextMenu={openMenu}
       >
         <Background bgColor='#1C2127' gap={16} size={1} />
+        <MiniMap
+          nodeColor={n => {
+            if (n.type === 'entity') return '#ff0072';
+            if (n.type === 'uri_ref') return '#00ff00';
+            if (n.type === 'literal') return '#0057ff';
+            return '#eee';
+          }}
+          pannable
+        />
         <Controls />
       </ReactFlow>
     </div>

diff --git a/app/src/pages/mapping_page/components/Navbar/index.tsx b/app/src/pages/mapping_page/components/Navbar/index.tsx
@@ -1,15 +1,37 @@
+import {
+  XYEdgeType,
+  XYNodeTypes,
+} from '@/pages/mapping_page/components/MainPanel/types';
+import useMappingPage from '@/pages/mapping_page/state';
 import { Navbar as BPNavbar, Button, ButtonGroup } from '@blueprintjs/core';
+import { useEdges, useNodes } from '@xyflow/react';
+import { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 type NavbarProps = {
-  uuid: string | undefined;
+  workspace_uuid: string | undefined;
+  mapping_uuid: string | undefined;
   name: string | undefined;
   isLoading: string | null;
-  onSave: () => void;
 };
 
-const Navbar = ({ uuid, name, isLoading, onSave }: NavbarProps) => {
+const Navbar = ({
+  workspace_uuid,
+  mapping_uuid,
+  name,
+  isLoading,
+}: NavbarProps) => {
   const navigation = useNavigate();
+  const saveMapping = useMappingPage(state => state.saveMapping);
+  const mapping = useMappingPage(state => state.mapping);
+
+  const nodes = useNodes<XYNodeTypes>();
+  const edges = useEdges<XYEdgeType>();
+
+  const onSave = useCallback(() => {
+    if (!workspace_uuid || !mapping_uuid || !mapping) return;
+    saveMapping(workspace_uuid, mapping_uuid, mapping, nodes, edges);
+  }, [nodes, edges, mapping, saveMapping, workspace_uuid, mapping_uuid]);
 
   return (
     <BPNavbar fixedToTop>
@@ -18,7 +40,7 @@ const Navbar = ({ uuid, name, isLoading, onSave }: NavbarProps) => {
           icon='arrow-left'
           minimal
           onClick={() => {
-            navigation(`/workspaces/${uuid}`);
+            navigation(`/workspaces/${workspace_uuid}`);
           }}
         />
         <div style={{ width: 10 }} />

diff --git a/app/src/pages/mapping_page/index.tsx b/app/src/pages/mapping_page/index.tsx
@@ -1,8 +1,4 @@
-import {
-  XYEdgeType,
-  XYNodeTypes,
-} from '@/pages/mapping_page/components/MainPanel/types';
-import { useEdges, useNodes } from '@xyflow/react';
+import { ReactFlowProvider } from '@xyflow/react';
 import { languages } from 'monaco-editor';
 import { useEffect, useRef, useState } from 'react';
 import {
@@ -44,9 +40,6 @@ const MappingPage = () => {
   const loadMapping = useMappingPage(state => state.loadMapping);
   const saveMapping = useMappingPage(state => state.saveMapping);
 
-  const nodes = useNodes<XYNodeTypes>();
-  const edges = useEdges<XYEdgeType>();
-
   useRegisterTheme('mapping-theme', mapping_theme);
   useRegisterLanguage('mapping_language', mapping_language, {});
   useRegisterCompletionItemProvider('mapping_language', [
@@ -116,47 +109,43 @@ const MappingPage = () => {
     setIsCollapsed(false);
   };
 
-  const handleSave = () => {
-    if (mapping && props.uuid && props.mapping_uuid) {
-      saveMapping(props.uuid, props.mapping_uuid, mapping, nodes, edges);
-    }
-  };
-
   return (
-    <div className='mapping-page'>
-      <Navbar
-        uuid={props.uuid}
-        name={mapping?.name}
-        isLoading={isLoading}
-        onSave={handleSave}
-      />
-      <div className='mapping-page-content'>
-        <PanelGroup direction='horizontal' style={{ height: '100%' }}>
-          <VerticalTabs
-            selectedTab={selectedTab}
-            isCollapsed={isCollapsed}
-            handleTabClick={handleTabClick}
-          />
-          <Panel
-            ref={sidePanelHandle}
-            collapsible
-            collapsedSize={0}
-            onCollapse={() => setIsCollapsed(true)}
-            defaultSize={20}
-            minSize={10}
-            maxSize={50}
-          >
-            <SidePanel selectedTab={selectedTab} />
-          </Panel>
-          {!isCollapsed && (
-            <PanelResizeHandle className='resize-handle'></PanelResizeHandle>
-          )}
-          <Panel>
-            <MainPanel initialGraph={mapping} />
-          </Panel>
-        </PanelGroup>
+    <ReactFlowProvider>
+      <div className='mapping-page'>
+        <Navbar
+          workspace_uuid={props.uuid}
+          mapping_uuid={props.mapping_uuid}
+          name={mapping?.name}
+          isLoading={isLoading}
+        />
+        <div className='mapping-page-content'>
+          <PanelGroup direction='horizontal' style={{ height: '100%' }}>
+            <VerticalTabs
+              selectedTab={selectedTab}
+              isCollapsed={isCollapsed}
+              handleTabClick={handleTabClick}
+            />
+            <Panel
+              ref={sidePanelHandle}
+              collapsible
+              collapsedSize={0}
+              onCollapse={() => setIsCollapsed(true)}
+              defaultSize={20}
+              minSize={10}
+              maxSize={50}
+            >
+              <SidePanel selectedTab={selectedTab} />
+            </Panel>
+            {!isCollapsed && (
+              <PanelResizeHandle className='resize-handle'></PanelResizeHandle>
+            )}
+            <Panel>
+              <MainPanel initialGraph={mapping} />
+            </Panel>
+          </PanelGroup>
+        </div>
       </div>
-    </div>
+    </ReactFlowProvider>
   );
 };
 

diff --git a/server/models/mapping.py b/server/models/mapping.py
@@ -14,12 +14,12 @@ class Position:
     A position in a mapping graph.
 
     Attributes:
-        x (int): The x-coordinate of the position
-        y (int): The y-coordinate of the position
+        x (float): The x-coordinate of the position
+        y (float): The y-coordinate of the position
     """
 
-    x: int
-    y: int
+    x: float
+    y: float
 
     def to_dict(self):
         return {
@@ -234,8 +234,6 @@ def from_dict(cls, data):
             raise ValueError("source is required")
         if "target" not in data:
             raise ValueError("target is required")
-        if "predicate_uri" not in data:
-            raise ValueError("predicate_uri is required")
         if "source_handle" not in data:
             raise ValueError("source_handle is required")
         if "target_handle" not in data: