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..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,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/forms/add-mapping-form.tsx b/src/main/frontend/app/components/datamapper/forms/add-mapping-form.tsx index 26f1b3ab..a6fe3640 100644 --- a/src/main/frontend/app/components/datamapper/forms/add-mapping-form.tsx +++ b/src/main/frontend/app/components/datamapper/forms/add-mapping-form.tsx @@ -122,7 +122,7 @@ function AddMappingForm({ onSave, sources, targets, initialData }: MappingModalP const scrollable = 'flex-1 min-h-0 overflow-y-auto space-y-2' return ( -
+

Add Mapping

{/* Main grid with lists */} 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..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 @@ -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 deleted file mode 100644 index ea0511eb..00000000 --- a/src/main/frontend/app/routes/datamapper/advanced-editor.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { FLOW_KEY } from '~/utils/datamapper_utils/constant' - -function AdvancedEditor() { - const data = localStorage.getItem(FLOW_KEY) - - return ( -
-
- - {data ? JSON.stringify(JSON.parse(data), null, 2) : 'No data found'} - -
-
- ) -} - -export default AdvancedEditor 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 */}
diff --git a/src/main/frontend/icons/solar/Lightbulb.svg b/src/main/frontend/icons/solar/Lightbulb.svg new file mode 100644 index 00000000..92b19739 --- /dev/null +++ b/src/main/frontend/icons/solar/Lightbulb.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/main/frontend/icons/solar/Text Circle.svg b/src/main/frontend/icons/solar/Text Circle.svg new file mode 100644 index 00000000..536cc059 --- /dev/null +++ b/src/main/frontend/icons/solar/Text Circle.svg @@ -0,0 +1,4 @@ + + + +