From 8733bb3c040706f301ba08a9c042257e254577cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Otgaar?= <b.r.c.otgaar@students.uu.nl>
Date: Tue, 11 Nov 2025 10:25:27 +0100
Subject: [PATCH] chore: remove old remnants from project

---
 src/visualProgrammingUI/VisProgUI.css         |   7 -
 src/visualProgrammingUI/VisProgUI.tsx         | 132 -----------------
 .../components/DragDropSidebar.tsx            | 140 ------------------
 .../components/NodeDefinitions.tsx            | 111 --------------
 4 files changed, 390 deletions(-)
 delete mode 100644 src/visualProgrammingUI/VisProgUI.css
 delete mode 100644 src/visualProgrammingUI/VisProgUI.tsx
 delete mode 100644 src/visualProgrammingUI/components/DragDropSidebar.tsx
 delete mode 100644 src/visualProgrammingUI/components/NodeDefinitions.tsx

diff --git a/src/visualProgrammingUI/VisProgUI.css b/src/visualProgrammingUI/VisProgUI.css
deleted file mode 100644
index 8d82d09..0000000
--- a/src/visualProgrammingUI/VisProgUI.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.default-node {
-    padding: 10px 20px;
-    background-color: canvas;
-    outline-style: solid;
-    border-radius: 5pt;
-    outline-width: 1pt;
-}
\ No newline at end of file
diff --git a/src/visualProgrammingUI/VisProgUI.tsx b/src/visualProgrammingUI/VisProgUI.tsx
deleted file mode 100644
index a2b1e9c..0000000
--- a/src/visualProgrammingUI/VisProgUI.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import './VisProgUI.css'
-
-import {
-    useCallback,
-    useRef
-} from 'react';
-import {
-    Background,
-    Controls,
-    ReactFlow,
-    ReactFlowProvider,
-    useNodesState,
-    useEdgesState,
-    reconnectEdge,
-    addEdge,
-    MarkerType,
-    type Edge,
-    type Connection,
-} from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
-import {
-    StartNode,
-    EndNode,
-    PhaseNode,
-    NormNode
-} from "./components/NodeDefinitions.tsx";
-
-import { Sidebar } from './components/DragDropSidebar.tsx';
-
-const nodeTypes = {
-    start: StartNode,
-    end: EndNode,
-    phase: PhaseNode,
-    norm: NormNode
-};
-
-const initialNodes = [
-    {
-        id: 'start',
-        type: 'start',
-        position: {x: 0, y: 0},
-        data: {label: 'start'}
-    },
-    {
-        id: 'genericPhase',
-        type: 'phase',
-        position: {x: 0, y: 150},
-        data: {label: 'Generic Phase', number: 1},
-    },
-    {
-        id: 'end',
-        type: 'end',
-        position: {x: 0, y: 300},
-        data: {label: 'End'}
-    }
-];
-const initialEdges = [{id: 'start-end', source: 'start', target: 'end'}];
-
-const defaultEdgeOptions = {
-    type: 'floating',
-    markerEnd: {
-        type: MarkerType.ArrowClosed,
-        color: '#505050',
-    },
-};
-
-const VisProgUI = ()=>  {
-    const edgeReconnectSuccessful = useRef(true);
-    const [nodes, , onNodesChange] = useNodesState(initialNodes);
-    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-
-    const onConnect = useCallback(
-        (params: Edge | Connection) => setEdges((els) => addEdge(params, els)),
-        [setEdges],
-    );
-
-    const onReconnectStart = useCallback(() => {
-        edgeReconnectSuccessful.current = false;
-    }, []);
-
-    const onReconnect = useCallback((oldEdge: Edge, newConnection: Connection) => {
-        edgeReconnectSuccessful.current = true;
-        setEdges((els) => reconnectEdge(oldEdge, newConnection, els));
-    }, [setEdges]);
-
-    const onReconnectEnd = useCallback((_: unknown, edge: { id: string; }) => {
-        if (!edgeReconnectSuccessful.current) {
-            setEdges((eds) => eds.filter((e) => e.id !== edge.id));
-        }
-
-        edgeReconnectSuccessful.current = true;
-    }, [setEdges]);
-
-    return (
-        <div style={{marginInline: 'auto',display: 'flex',justifySelf: 'center', padding:'10px', alignItems: 'center', width: '80vw', height: '60vh'}}>
-            <div style={{outlineStyle: 'solid', borderRadius: '10pt', marginInline: '1em',width: '70%', height:'100%' }}>
-                <ReactFlow
-                    nodes={nodes}
-                    edges={edges}
-                    defaultEdgeOptions={defaultEdgeOptions}
-                    onNodesChange={onNodesChange}
-                    onEdgesChange={onEdgesChange}
-                    nodeTypes={nodeTypes}
-                    snapToGrid
-                    onReconnect={onReconnect}
-                    onReconnectStart={onReconnectStart}
-                    onReconnectEnd={onReconnectEnd}
-                    onConnect={onConnect}
-                    fitView
-                    proOptions={{hideAttribution: true }}
-                >
-                    <Controls />
-                    <Background />
-                </ReactFlow>
-            </div>
-            <div style={{width: '20%', height: '100%'}}>
-                <Sidebar />
-            </div>
-        </div>
-
-    );
-};
-
-function VisualProgrammingUI(){
-    return (
-        <ReactFlowProvider>
-            <VisProgUI />
-        </ReactFlowProvider>
-    );
-}
-
-export default VisualProgrammingUI;
\ No newline at end of file
diff --git a/src/visualProgrammingUI/components/DragDropSidebar.tsx b/src/visualProgrammingUI/components/DragDropSidebar.tsx
deleted file mode 100644
index f1bf6bd..0000000
--- a/src/visualProgrammingUI/components/DragDropSidebar.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import { useDraggable } from '@neodrag/react';
-import {
-    useReactFlow,
-    type XYPosition
-} from '@xyflow/react';
-import {
-    type ReactNode,
-    useCallback,
-    useRef,
-    useState
-} from 'react';
-
-
-// improve later to create better automatic IDs
-let id = 0;
-const getId = () => `dndnode_${id++}`;
-
-
-interface DraggableNodeProps {
-    className?: string;
-    children: ReactNode;
-    nodeType: string;
-    onDrop: (nodeType: string, position: XYPosition) => void;
-}
-
-function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeProps) {
-    const draggableRef = useRef<HTMLDivElement>(null);
-    const [position, setPosition] = useState<XYPosition>({ x: 0, y: 0 });
-
-    // @ts-expect-error we expect the null referece here.
-    useDraggable(draggableRef, {
-        position: position,
-        onDrag: ({ offsetX, offsetY }) => {
-            // Calculate position relative to the viewport
-            setPosition({
-                x: offsetX,
-                y: offsetY,
-            });
-        },
-        onDragEnd: ({ event }) => {
-            setPosition({ x: 0, y: 0 });
-            onDrop(nodeType, {
-                x: event.clientX,
-                y: event.clientY,
-            });
-        },
-    });
-
-    return (
-        <div className={className === "default" ? "default-node" :  "default-node" + "__" + className} ref={draggableRef}>
-            {children}
-        </div>
-    );
-}
-
-export function Sidebar() {
-    const { setNodes, screenToFlowPosition } = useReactFlow();
-
-    const handleNodeDrop = useCallback(
-        (nodeType: string, screenPosition: XYPosition) => {
-            const flow = document.querySelector('.react-flow');
-            const flowRect = flow?.getBoundingClientRect();
-            const isInFlow =
-                flowRect &&
-                screenPosition.x >= flowRect.left &&
-                screenPosition.x <= flowRect.right &&
-                screenPosition.y >= flowRect.top &&
-                screenPosition.y <= flowRect.bottom;
-
-            // Create a new node and add it to the flow
-            if (isInFlow) {
-                const position = screenToFlowPosition(screenPosition);
-
-                const newNode = () => {
-                    switch (nodeType) {
-                        case "phase":
-                            return {
-                                id: getId(),
-                                type: nodeType,
-                                position,
-                                data: {label: `"new"`, number: (-1)},
-                            };
-                        case "start":
-                            return {
-                                id: getId(),
-                                type: nodeType,
-                                position,
-                                data: {label: `new start node`},
-                            };
-                        case "end":
-                            return {
-                                id: getId(),
-                                type: nodeType,
-                                position,
-                                data: {label: `new end node`},
-                            };
-                        case "norm":
-                            return {
-                                id: getId(),
-                                type: nodeType,
-                                position,
-                                data: {label: `new norm node`},
-                            };
-                        default: {
-                            return {
-                                id: getId(),
-                                type: nodeType,
-                                position,
-                                data: {label: `new default node`},
-                            };
-                        }
-                    }
-                }
-
-                setNodes((nds) => nds.concat(newNode()));
-            }
-        },
-        [setNodes, screenToFlowPosition],
-    );
-
-    return (
-        <aside>
-            <div className="description">
-                You can drag these nodes to the pane to create new nodes.
-            </div>
-            <DraggableNode className="default" nodeType="start" onDrop={handleNodeDrop}>
-                start Node
-            </DraggableNode>
-            <DraggableNode className="default" nodeType="end" onDrop={handleNodeDrop}>
-                end Node
-            </DraggableNode>
-            <DraggableNode className="default" nodeType="phase" onDrop={handleNodeDrop}>
-                phase Node
-            </DraggableNode>
-            <DraggableNode className="default" nodeType="norm" onDrop={handleNodeDrop}>
-                norm Node
-            </DraggableNode>
-        </aside>
-    );
-}
\ No newline at end of file
diff --git a/src/visualProgrammingUI/components/NodeDefinitions.tsx b/src/visualProgrammingUI/components/NodeDefinitions.tsx
deleted file mode 100644
index b4547b2..0000000
--- a/src/visualProgrammingUI/components/NodeDefinitions.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import {Handle, NodeToolbar, Position, useReactFlow} from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
-import '../VisProgUI.css';
-
-// Datatypes for NodeTypes
-
-type defaultNodeData = {
-    label: string;
-};
-
-type startNodeData = defaultNodeData;
-type endNodeData = defaultNodeData;
-type normNodeData = defaultNodeData;
-type phaseNodeData = defaultNodeData & {
-    number: number;
-};
-
-export type nodeData = defaultNodeData | startNodeData | phaseNodeData | endNodeData;
-
-// Node Toolbar definition
-
-type ToolbarProps= {
-    nodeId: string;
-};
-
-export function Toolbar({nodeId}:ToolbarProps) {
-    const { setNodes, setEdges } = useReactFlow();
-
-    const handleDelete = () => {
-        setNodes((nds) => nds.filter((n) => n.id !== nodeId));
-        setEdges((eds) => eds.filter((e) => e.source !== nodeId && e.target !== nodeId));
-    };
-    return (
-        <NodeToolbar >
-            <button className="Node-toolbar__deletebutton" onClick={handleDelete}>delete</button>
-        </NodeToolbar>);
-}
-
-
-// Definitions of Nodes
-
-type StartNodeProps = {
-    id: string;
-    data: startNodeData;
-};
-
-export const StartNode= ({ id, data }: StartNodeProps) => {
-    return (
-        <>
-            <Toolbar nodeId={id} />
-            <div className="default-node">
-                <div> data test {data.label} </div>
-                <Handle type="source" position={Position.Right} id="start" />
-            </div>
-        </>
-    );
-};
-
-type EndNodeProps = {
-    id: string;
-    data: endNodeData;
-};
-
-export const EndNode= ({ id, data }: EndNodeProps) => {
-    return (
-        <>
-            <Toolbar nodeId={id}/>
-            <div className="default-node">
-                <div> {data.label} </div>
-                <Handle type="target" position={Position.Left} id="end" />
-            </div>
-        </>
-    );
-};
-
-
-type PhaseNodeProps = {
-    id: string;
-    data: phaseNodeData;
-};
-
-export const PhaseNode= ({ id, data }: PhaseNodeProps) => {
-    return (
-        <>
-            <Toolbar nodeId={id}/>
-            <div className="default-node">
-                <div> phase {data.number} {data.label} </div>
-                <Handle type="target" position={Position.Left} id="target" />
-                <Handle type="target" position={Position.Bottom } id="norms" />
-                <Handle type="source" position={Position.Right} id="source" />
-            </div>
-        </>
-    );
-};
-
-type NormNodeProps = {
-    id: string;
-    data: normNodeData;
-};
-
-export const NormNode= ({ id, data }: NormNodeProps) => {
-    return (
-        <>
-            <Toolbar nodeId={id} />
-            <div className="default-node">
-                <div> Norm {data.label} </div>
-                <Handle type="source" position={Position.Right} id="NormSource" />
-            </div>
-        </>
-    );
-};
\ No newline at end of file