custom icon on node modal and change type on contexts

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -10,6 +10,8 @@ import { typesContext } from "../../contexts/typesContext";
 import { useContext, useRef } from "react";
 import { NodeDataType } from "../../types/flow";
 import { alertContext } from "../../contexts/alertContext";
+import { PopUpContext } from "../../contexts/popUpContext";
+import NodeModal from "../../modals/NodeModal";
 
 export default function GenericNode({
 	data,
@@ -21,6 +23,7 @@ export default function GenericNode({
 	const { setErrorData } = useContext(alertContext);
 	const showError = useRef(true);
 	const { types, deleteNode } = useContext(typesContext);
+	const {openPopUp} = useContext(PopUpContext)
 	const Icon = nodeIcons[types[data.type]];
 	if (!Icon) {
 		if (showError.current) {
@@ -124,7 +127,16 @@ export default function GenericNode({
 						)}
 					>
 						{" "}
-						<button className="hover:text-blue-500"> see all </button>
+						<button
+							onClick={(event) => {
+								event.preventDefault();
+								openPopUp(<NodeModal data={data}/>)
+							}}
+							className="hover:text-blue-500"
+						>
+							{" "}
+							see all{" "}
+						</button>
 					</div>
 					<div className="px-5 py-2 mt-2 dark:text-white text-center">
 						Output

src/frontend/src/contexts/index.tsx

@@ -12,15 +12,13 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
 		<>
 			<DarkProvider>
 				<LocationProvider>
+					<TypesProvider>
 						<AlertProvider>
 							<TabsProvider>
-						<PopUpProvider>
+								<PopUpProvider>{children}</PopUpProvider>
-							<TypesProvider>
-								{children}
-							</TypesProvider>
-						</PopUpProvider>
 							</TabsProvider>
 						</AlertProvider>
+					</TypesProvider>
 				</LocationProvider>
 			</DarkProvider>
 		</>

src/frontend/src/modals/NodeModal/index.tsx

@@ -0,0 +1,113 @@
+import { Dialog, Transition } from "@headlessui/react";
+import {
+	XMarkIcon,
+} from "@heroicons/react/24/outline";
+import { Fragment, useContext, useRef, useState } from "react";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { NodeDataType } from "../../types/flow";
+import { nodeColors, nodeIcons } from "../../utils";
+import { typesContext } from "../../contexts/typesContext";
+
+export default function NodeModal({ data }: { data: NodeDataType }) {
+	const [open, setOpen] = useState(true);
+	const { closePopUp } = useContext(PopUpContext);
+	const { types } = useContext(typesContext);
+	const ref = useRef();
+	function setModalOpen(x: boolean) {
+		setOpen(x);
+		if (x === false) {
+			setTimeout(() => {
+				closePopUp();
+			}, 300);
+		}
+	}
+	const Icon = nodeIcons[types[data.type]];
+	return (
+		<Transition.Root show={open} appear={true} as={Fragment}>
+			<Dialog
+				as="div"
+				className="relative z-10"
+				onClose={setModalOpen}
+				initialFocus={ref}
+			>
+				<Transition.Child
+					as={Fragment}
+					enter="ease-out duration-300"
+					enterFrom="opacity-0"
+					enterTo="opacity-100"
+					leave="ease-in duration-200"
+					leaveFrom="opacity-100"
+					leaveTo="opacity-0"
+				>
+					<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+				</Transition.Child>
+
+				<div className="fixed inset-0 z-10 overflow-y-auto">
+					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+						<Transition.Child
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+							enterTo="opacity-100 translate-y-0 sm:scale-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+						>
+							<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+								<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+									<button
+										type="button"
+										className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+										onClick={() => {
+											setModalOpen(false);
+										}}
+									>
+										<span className="sr-only">Close</span>
+										<XMarkIcon className="h-6 w-6" aria-hidden="true" />
+									</button>
+								</div>
+								<div className="h-full w-full flex flex-col justify-center items-center">
+									<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
+											<Icon
+												className="w-10 mt-4 h-10 p-1 rounded"
+												style={{
+													color:
+														nodeColors[types[data.type]] ?? nodeColors.unknown,
+												}}
+											/>
+										<div className="mt-4 text-center sm:ml-4 sm:text-left">
+											<Dialog.Title
+												as="h3"
+												className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+											>
+												Edit text
+											</Dialog.Title>
+										</div>
+									</div>
+									<div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
+										<div className="flex h-full w-full">
+											<div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-gray-800 shadow">
+												<div>content</div>
+											</div>
+										</div>
+									</div>
+									<div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
+										<button
+											type="button"
+											className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
+											onClick={() => {
+												setModalOpen(false);
+											}}
+										>
+											Finish editing
+										</button>
+									</div>
+								</div>
+							</Dialog.Panel>
+						</Transition.Child>
+					</div>
+				</div>
+			</Dialog>
+		</Transition.Root>
+	);
+}