From f33cff7c634db2027b798a9ed81b35a2679eaad7 Mon Sep 17 00:00:00 2001 From: Vincent Date: Fri, 27 Mar 2026 16:29:53 +0100 Subject: [PATCH 1/4] Improved styling to conform better with rest of application --- .../basic-components/close-button.tsx | 18 +++++++ .../basic-components/delete-button.tsx | 8 ++- .../basic-components/edit-button.tsx | 6 +-- .../basic-components/generate-button.tsx | 2 +- .../basic-components/highlight-button.tsx | 5 +- .../react-flow/array-group-node.tsx | 10 ++-- .../react-flow/array-mapping-node.tsx | 8 +-- .../react-flow/extra-source-node.tsx | 8 +-- .../react-flow/labeled-group-node.tsx | 8 +-- .../datamapper/react-flow/mapping-node.tsx | 12 ++--- .../datamapper/react-flow/one-edge-node.tsx | 52 +++++++++---------- src/main/frontend/app/components/modal.tsx | 5 +- .../app/routes/datamapper/advanced-editor.tsx | 2 +- .../app/routes/datamapper/initialize.tsx | 2 +- .../app/routes/datamapper/property-list.tsx | 8 +-- src/main/frontend/icons/solar/Lightbulb.svg | 3 ++ src/main/frontend/icons/solar/Text Circle.svg | 4 ++ 17 files changed, 92 insertions(+), 69 deletions(-) create mode 100644 src/main/frontend/app/components/datamapper/basic-components/close-button.tsx create mode 100644 src/main/frontend/icons/solar/Lightbulb.svg create mode 100644 src/main/frontend/icons/solar/Text Circle.svg diff --git a/src/main/frontend/app/components/datamapper/basic-components/close-button.tsx b/src/main/frontend/app/components/datamapper/basic-components/close-button.tsx new file mode 100644 index 00000000..d85a613d --- /dev/null +++ b/src/main/frontend/app/components/datamapper/basic-components/close-button.tsx @@ -0,0 +1,18 @@ +import clsx from 'clsx' + +export default function CloseButton({ onClick, className }: { onClick: () => void; className?: string }) { + return ( + + ) +} diff --git a/src/main/frontend/app/components/datamapper/basic-components/delete-button.tsx b/src/main/frontend/app/components/datamapper/basic-components/delete-button.tsx index 3b7b6a8a..6a0ac010 100644 --- a/src/main/frontend/app/components/datamapper/basic-components/delete-button.tsx +++ b/src/main/frontend/app/components/datamapper/basic-components/delete-button.tsx @@ -1,18 +1,16 @@ import clsx from 'clsx' +import TrashBinIcon from '/icons/solar/Trash Bin.svg?react' export default function DeleteButton({ onClick, className }: { onClick: () => void; className?: string }) { return ( ) } diff --git a/src/main/frontend/app/components/datamapper/basic-components/edit-button.tsx b/src/main/frontend/app/components/datamapper/basic-components/edit-button.tsx index 1e3ab11e..035efa97 100644 --- a/src/main/frontend/app/components/datamapper/basic-components/edit-button.tsx +++ b/src/main/frontend/app/components/datamapper/basic-components/edit-button.tsx @@ -1,16 +1,16 @@ import clsx from 'clsx' +import TextCircle from '/icons/solar/Text circle.svg?react' export default function EditButton({ onClick, className }: { onClick: () => void; className?: string }) { return ( ) } diff --git a/src/main/frontend/app/components/datamapper/basic-components/generate-button.tsx b/src/main/frontend/app/components/datamapper/basic-components/generate-button.tsx index 1fc8e8dc..dbf8bbe8 100644 --- a/src/main/frontend/app/components/datamapper/basic-components/generate-button.tsx +++ b/src/main/frontend/app/components/datamapper/basic-components/generate-button.tsx @@ -16,7 +16,7 @@ export default function GenerateButton({ return ( ) } diff --git a/src/main/frontend/app/components/datamapper/react-flow/array-group-node.tsx b/src/main/frontend/app/components/datamapper/react-flow/array-group-node.tsx index a1e961d9..0f3962e0 100644 --- a/src/main/frontend/app/components/datamapper/react-flow/array-group-node.tsx +++ b/src/main/frontend/app/components/datamapper/react-flow/array-group-node.tsx @@ -42,7 +42,7 @@ function ArrayGroupNode({ id, data, variant = 'source', onDelete, onHighlight }:
@@ -53,9 +53,9 @@ function ArrayGroupNode({ id, data, variant = 'source', onDelete, onHighlight }: {/* Header */}
{data.label ?? 'Group'}
-
- ({data.variableType}) -
+
+ ({data.variableType}) +
{ onHighlight?.(id) @@ -77,7 +77,7 @@ function ArrayGroupNode({ id, data, variant = 'source', onDelete, onHighlight }: width: 10, height: 10, }} //Can't set this with tailwind for some reason - className={`${variant == 'source' ? '' : 'translate-x-[5px]'} transition-opacity transition-transform ${isConnectable ? 'opacity-100' : 'opacity-0'} `} + className={`${variant == 'source' ? '' : 'translate-x-1.25'} transition-opacity ${isConnectable ? 'opacity-100' : 'opacity-0'} `} />
diff --git a/src/main/frontend/app/components/datamapper/react-flow/array-mapping-node.tsx b/src/main/frontend/app/components/datamapper/react-flow/array-mapping-node.tsx index 3ac8d2af..9080a1fb 100644 --- a/src/main/frontend/app/components/datamapper/react-flow/array-mapping-node.tsx +++ b/src/main/frontend/app/components/datamapper/react-flow/array-mapping-node.tsx @@ -14,7 +14,7 @@ function ArrayMappingNode({ id, data, onClick, onDelete }: ArrayMappingNodePrope return (
onClick?.(id)} - className={`relative flex max-h-[50px] justify-between overflow-hidden rounded-md p-2`} + className={`relative flex max-h-12.5 justify-between overflow-hidden rounded-md p-2`} style={{ backgroundColor: data.colour || 'var(--color-backdrop)', width: `${MAPPING_WIDTH}px`, @@ -27,7 +27,7 @@ function ArrayMappingNode({ id, data, onClick, onDelete }: ArrayMappingNodePrope
{/* Right: Buttons (top and bottom) */} -
+
{ @@ -41,13 +41,13 @@ function ArrayMappingNode({ id, data, onClick, onDelete }: ArrayMappingNodePrope type="target" position={Position.Left} isConnectable={false} - className="pointer-events-none h-0 w-0 translate-x-[5px] opacity-0" + className="pointer-events-none h-0 w-0 translate-x-1.25 opacity-0" />
) diff --git a/src/main/frontend/app/components/datamapper/react-flow/extra-source-node.tsx b/src/main/frontend/app/components/datamapper/react-flow/extra-source-node.tsx index 5b6ef860..60e9226e 100644 --- a/src/main/frontend/app/components/datamapper/react-flow/extra-source-node.tsx +++ b/src/main/frontend/app/components/datamapper/react-flow/extra-source-node.tsx @@ -14,7 +14,7 @@ export interface ExtraSourceNodeProperties { function ExtraSourceNode({ id, data, onDelete, onHighlight }: ExtraSourceNodeProperties) { return (
{/* Header */} @@ -22,9 +22,9 @@ function ExtraSourceNode({ id, data, onDelete, onHighlight }: ExtraSourceNodePro {data.label ? `extra source: ${data.label}` : 'ExtraSource'}
-
- (Source ) -
+
+ (Source ) +
{ onHighlight?.(id) diff --git a/src/main/frontend/app/components/datamapper/react-flow/labeled-group-node.tsx b/src/main/frontend/app/components/datamapper/react-flow/labeled-group-node.tsx index 3dec5c28..e8792ec6 100644 --- a/src/main/frontend/app/components/datamapper/react-flow/labeled-group-node.tsx +++ b/src/main/frontend/app/components/datamapper/react-flow/labeled-group-node.tsx @@ -16,15 +16,15 @@ export interface LabeledGroupNodeProperties { function LabeledGroupNode({ id, data, onEdit, onDelete, onHighlight }: LabeledGroupNodeProperties) { return (
{/* Header */}
{data.label ?? 'Group'}
-
- ({data.variableType}) -
+
+ ({data.variableType}) +
{ onHighlight?.(id) diff --git a/src/main/frontend/app/components/datamapper/react-flow/mapping-node.tsx b/src/main/frontend/app/components/datamapper/react-flow/mapping-node.tsx index 9d17b044..1a02412f 100644 --- a/src/main/frontend/app/components/datamapper/react-flow/mapping-node.tsx +++ b/src/main/frontend/app/components/datamapper/react-flow/mapping-node.tsx @@ -17,7 +17,7 @@ function MappingNode({ id, data, onClick, onDelete, onEdit }: MappingNodePropert return (
onClick?.(id)} - className={`relative flex max-h-[50px] justify-between overflow-hidden rounded-md p-2`} + className={`group relative flex max-h-12.5 justify-between rounded-md p-2`} style={{ backgroundColor: data.colour || 'var(--color-backdrop)', width: `${MAPPING_WIDTH}px`, @@ -29,16 +29,16 @@ function MappingNode({ id, data, onClick, onDelete, onEdit }: MappingNodePropert
{/* Right: Buttons (top and bottom) */} -
+
{ onEdit?.(data) }} /> { onDelete?.(id) }} @@ -50,13 +50,13 @@ function MappingNode({ id, data, onClick, onDelete, onEdit }: MappingNodePropert type="target" position={Position.Left} isConnectable={false} - className="pointer-events-none h-0 w-0 translate-x-[5px] opacity-0" + className="pointer-events-none h-0 w-0 translate-x-1.25 opacity-0" />
) diff --git a/src/main/frontend/app/components/datamapper/react-flow/one-edge-node.tsx b/src/main/frontend/app/components/datamapper/react-flow/one-edge-node.tsx index 0b4278b9..fc9f025a 100644 --- a/src/main/frontend/app/components/datamapper/react-flow/one-edge-node.tsx +++ b/src/main/frontend/app/components/datamapper/react-flow/one-edge-node.tsx @@ -44,40 +44,38 @@ function OneEdgeNode({ id, data, variant = 'source', onEdit, onDelete, onHighlig
- {/* Label */} -
{data.label}
+ {/* Left side */} + + ({data.isAttribute && 'attribute: '} + {data.variableType}) + - {/* Footer */} -
- - ({data.isAttribute && 'attribute: '} - {data.variableType}) - +
{data.label}
-
- { - onHighlight?.(id) - }} - /> + {/* Right side */} +
+ { + onHighlight?.(id) + }} + /> - { - onEdit?.(data) - }} - /> + { + onEdit?.(data) + }} + /> - { - onDelete?.(id) - }} - /> -
+ { + onDelete?.(id) + }} + />
{/* Active handle */} @@ -90,7 +88,7 @@ function OneEdgeNode({ id, data, variant = 'source', onEdit, onDelete, onHighlig width: 10, height: 10, }} //Can't set this with tailwind for some reason - className={`${variant == 'source' ? '' : 'translate-x-[5px]'} transition-opacity transition-transform ${isConnectable ? 'opacity-100' : 'opacity-0'} `} + className={`${variant == 'source' ? '' : 'translate-x-1.25'} transition-opacity ${isConnectable ? 'opacity-100' : 'opacity-0'} `} /> {/* Hidden opposite handle */} diff --git a/src/main/frontend/app/components/modal.tsx b/src/main/frontend/app/components/modal.tsx index f7d2b0c5..69401a07 100644 --- a/src/main/frontend/app/components/modal.tsx +++ b/src/main/frontend/app/components/modal.tsx @@ -1,7 +1,8 @@ import { type ReactNode } from 'react' import { createPortal } from 'react-dom' import { useTheme } from '~/hooks/use-theme' -import DeleteButton from './datamapper/basic-components/delete-button' + +import CloseButton from './datamapper/basic-components/close-button' interface ModalProperties { isOpen: boolean @@ -27,7 +28,7 @@ function Modal({ isOpen, onClose, title, children }: ModalProperties) { > {title &&

{title}

}
{children}
- +
, document.body, diff --git a/src/main/frontend/app/routes/datamapper/advanced-editor.tsx b/src/main/frontend/app/routes/datamapper/advanced-editor.tsx index ea0511eb..5b9cd542 100644 --- a/src/main/frontend/app/routes/datamapper/advanced-editor.tsx +++ b/src/main/frontend/app/routes/datamapper/advanced-editor.tsx @@ -6,7 +6,7 @@ function AdvancedEditor() { return (
- + {data ? JSON.stringify(JSON.parse(data), null, 2) : 'No data found'}
diff --git a/src/main/frontend/app/routes/datamapper/initialize.tsx b/src/main/frontend/app/routes/datamapper/initialize.tsx index a3fe6d7f..9d13fb89 100644 --- a/src/main/frontend/app/routes/datamapper/initialize.tsx +++ b/src/main/frontend/app/routes/datamapper/initialize.tsx @@ -85,7 +85,7 @@ function Initialize({ config, configDispatch, confirmed, setRoute }: InitializeP {/* Confirm Button */} From 78b5301ab47dc046421c84ee32ce44cd873a2a2b Mon Sep 17 00:00:00 2001 From: Vincent Date: Fri, 27 Mar 2026 16:37:35 +0100 Subject: [PATCH 3/4] Fixed wrong import --- .../app/components/datamapper/basic-components/edit-button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/frontend/app/components/datamapper/basic-components/edit-button.tsx b/src/main/frontend/app/components/datamapper/basic-components/edit-button.tsx index 035efa97..be4e0234 100644 --- a/src/main/frontend/app/components/datamapper/basic-components/edit-button.tsx +++ b/src/main/frontend/app/components/datamapper/basic-components/edit-button.tsx @@ -1,5 +1,5 @@ import clsx from 'clsx' -import TextCircle from '/icons/solar/Text circle.svg?react' +import TextCircle from '/icons/solar/Text Circle.svg?react' export default function EditButton({ onClick, className }: { onClick: () => void; className?: string }) { return ( From 1b879e07c1223b6138215ab4e12b0fd6267f9a8f Mon Sep 17 00:00:00 2001 From: Vincent Date: Mon, 30 Mar 2026 09:49:23 +0200 Subject: [PATCH 4/4] Removed emptyspace between mapping node element and line --- .../app/components/datamapper/react-flow/mapping-node.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/frontend/app/components/datamapper/react-flow/mapping-node.tsx b/src/main/frontend/app/components/datamapper/react-flow/mapping-node.tsx index 1a02412f..056cd991 100644 --- a/src/main/frontend/app/components/datamapper/react-flow/mapping-node.tsx +++ b/src/main/frontend/app/components/datamapper/react-flow/mapping-node.tsx @@ -56,7 +56,7 @@ function MappingNode({ id, data, onClick, onDelete, onEdit }: MappingNodePropert type="source" position={Position.Right} isConnectable={false} - className="pointer-events-none h-0 w-0 translate-x-1.25 opacity-0" + className="pointer-events-none h-0 w-0 -translate-x-1.25 opacity-0" />
)